小学校『5、6年の楽しいプログラミング ドリルの王様』、問題と解き方2

1ヶ月前、小学生向けの学習参考書『5、6年の楽しいプログラミング ドリルの王様』(新興出版社)について、問題と解き方を紹介する記事を書きました。

   

今日はその続きとして、2本目の記事を書きます。

     

200305a 

  

上の画像は、AMAZON(アマゾン)の通販ページです。同じシリーズで、小学1・2年生用、3・4年生用のドリルもあります。

   

  

    ☆    ☆    ☆

前回も書きましたが、プログラミングとはもともと、コンピューターにやらせたい仕事を上手く分けて、きちんと順序立てて書くことです。

   

そこで書かれたものが、プログラムです。分けること、つなぐこと、順番。この3つがポイントです。

  

前回は、「順序」、「くり返し」、「分岐(ぶんき)」の問題をやりました。今回はまず、「変数」についてです。変数とは、色々と変わるもの(数、言葉)をまとめて表す、特別な言葉や記号のことです。

  

「変数」と呼ばれるものなのに、数とはかぎらないのか? おかしいと思った人もいるでしょうね♪ 実は、もとの英語だと「ヴァリアブル」(variable)だから、「変化するもの」という意味の単語。それを誰かが、変数という日本語に訳したのです。

  

  

    ☆    ☆    ☆  

では、第1問。ドリルの27ページの問題、「13 変数②」。

  

ゆうなさんは、カーテンをつくることにしました。次のメモのとおりに布を切るとき、長さはいくつになりますか?

① 長さ←3  ぬいしろの長さ←2  長さ←長さ+ぬいしろの長さ

   

  

「長さ」という言葉が5回も出て来て、分かりにくいですね。特に、右端の「長さ←長さ+ぬいしろの長さ」という書き方はおかしいような気がします。

   

これはプログラム用の特別な書き方で、「長さ」と「ぬいしろの長さ」という言葉が変数です。矢印(←)の右には、変数に入れるいろんなもの(数、言葉)が書かれてます。本物のコンピューターのプログラムだと、矢印(←)の代わりに、イコール(=)と書きます。

   

もっとフツーの言い方に直すと、こうゆう問題なのです。

「まず、もとの布の『長さ』を3としますこれは出来上がった時のカーテンの長さです。次に、『ぬいしろの長さ』を2とします。最後に必要な布の長さ全体を、『長さ』+『ぬいしろの長さ』とすると、その数は結局いくつですか?」

   

これならもちろん、3+2で、だと分かるでしょう。プログラム独特の書き方になれることが大切なのです。もう1つ、似た問いを解いてみましょう。

  

②  長さはいくつになりますか?

 長さ←9  ぬいしろの長さ←3  長さ←長さ+ぬいしろの長さ

   

  

は、 9+3=12 ですね。

  

  

   ☆    ☆    ☆

ちょっとだけ違うタイプの問いも見ておきましょう。こちらの方が分かりやすい文章だと思います。

  

 ゆうなさんは、布の長さから、カーテンの長さを知るために、次のメモをかきました。

 カーテンの長さ←布の長さ-ぬいしろの長さ

  

 それぞれの長さが次のとき、カーテンの長さは?  

 布の長さ←10  ぬいしろの長さ←3

  

    

さっきは足し算でしたが、今回は引き算。は、 10-3= です。

   

  

   ☆    ☆    ☆

では、第2問。ちょっと中学の算数(「数学」)に近づいてる問題です。「19 関数②」。計算機とか、計算するプログラムのお話です。

  

さくらさんは計算ロボットに、次の命令を覚えさせました

  

 平行四辺形の面積(底辺,高さ)とは

  結果←底辺×高さ

  結果 を表示する

 である。

  

次の命令を実行すると、何が表示されますか

 平行四辺形の面積(2,4)

  

   

    ☆    ☆    ☆

これも書き方が分かりにくいでしょう。ロボットの画面に表示されるのは、底辺の長さ2、高さ4の平行四辺形の面積の数だけです。内部でこっそり計算して、その結果の数字だけが表示されます。

      

まず結果は、底辺×高さだから、2×4=8。そして、この結果を表示するという命令になってます。だから、表示されるのはという数字のみ。これがです。

   

この問題だと、平行四辺形の底辺、高さ、面積の3つが変数です。ただ、底辺と高さから面積を求めてるので、

 面積は底辺と高さに「関係する数」

です。これを縮めて、

 面積は底辺と高さの「関数」

などと言います。今はあまりピンと来なくてもかまいません。くわしくは中学で習う内容です。

   

   

   ☆    ☆    ☆

では、第3問。ドリルの「22 変数⑤」。ここでは、数の計算だけでなく、ロボットの動きが問われます。

  

1番から6番まで、番号がついた6つの家があります。そうたさんは、次のようにロボットに命令しました。

 番号←3

 ピザを配達(番号)

  

このとき、ロボットは3番の家にピザを配達します。  

では、次の命令だと、ロボットはどの番号の家にピザを配達しますか?

  

 番号←1

 ピザを配達(番号)

 番号←番号+3

 ピザを配達(番号)   

 

  

   ☆    ☆    ☆

解くときのコツ、考え方は、4行の命令を、前半2行と後半2行に分けること。命令の前半2行で、ロボットは番号1の家にピザを配達します。

   

後半の2行は、まず「番号←番号+3」と書かれてます。これは、「新しい番号は、前の番号+3とする」という意味。つまり新しい番号は、1+3=4になります。だから、ロボットは番号4の家にピザを配達します。

  

前半と後半を合わせると結局、ロボットがピザを配達するのは、1の家と4の家。これがです。

  

  

    ☆    ☆    ☆

今日のどの問題も、計算はとてもカンタンですね。ただ、書き方が変わってるので、繰り返し練習して、なれることがポイントです。まず、読み取れるようになること。つまり、プログラムを読めること。次に、自分で書けるようになること。つまり、プログラミングできること。

  

新型コロナウイルスのせいで、ずっと家にいる人も多いでしょう。遊びみたいな感じで、勉強も楽しんでください。それでは。。☆彡

   

     (計 2301字)

| | コメント (0)

小学生の学習参考書、『5、6年の楽しいプログラミング ドリルの王様』(新興出版社)、問題と解き方

今週から新型コロナで学校が長いお休みになって、困ってる小学生も多いでしょう。そこで今日は、春から始まるプログラミング学習の勉強に役立つドリルを紹介します。新しい教え方(新学習指導要領)に対応した面白い本です。

  

200305a

    

AMAZON(アマゾン)でも通販されてる『5,6年の楽しいプログラミング ドリルの王様』(新興出版社)です。著者(書いた人)は、島袋舞子。監修(チェックした人)は兼宗進教授です。680円+消費税で、今買うと合計748円です。

   

全体は96ページですが、アマゾンでは8ページ分のイメージ画像を載せてるので、それを解いてみましょう。

  

  

     ☆     ☆     ☆

プログラミングとはもともと、コンピューターにやらせたい仕事を上手く分けて、きちんと順序立てて書くことです。そこで書かれたものが、プログラムです。分けること、つなぐこと、順番。この3つがポイントです。

   

小学校の勉強では、自分でプログラムを書くことも大切だし、与えられた順序(プログラム)にしたがって自分が何かをすることも大切です。本やテストに書いてある通りに、先生の言う通りに、手を動かしたり、他の事をしたりするのです。

 

ではドリルの一番最初の問題。「1 順序①」の2番です。

  

次の順番でかいた絵はどれですか? 1.画用紙の右下に円をかく。 2.画用紙の右上に星をかく。 3.画用紙の左下に三角形をかく。

  

200305b

  

   

これはとても簡単ですね。次の図の、上から下へと進んで行けばいいのです。

  

200305c

  

ということは、答はエです。これをさらに、左右が逆になるようにクルッと回転させればウになりますが、問題ではそんなことは書かれていません。書かれてる事だけを、正しく行うのです。

  

  

    ☆     ☆     ☆

第2問は、「3 順序③」の1番。車のロボットの問題です。ロボットと言うより、オモチャのラジコンカーの操作ですね。

  

車のロボットを動かして線を書きます。命令は2種類で、「1マス進む」と「左を向く」です。

「はじめ → 1マス進む → 左を向く → 1マス進む → 1マス進む → おわり」と命令したとき、どんな線になりますか?

   

200305d

    

  

これもカンタンですね。下の図で、左から右に進んで行けばいいのです。

  

200305e

  

はまた、になります。車は最後、上側を向いてます。

  

  

    ☆     ☆     ☆

第3問は、「6 くり返し②」の1番。飛行機(ひこうき)のロボットを動かします。「3回くり返す → ・・・・・・ → ここまで」とプログラミングすると、「・・・・・・」の所の命令を3回続けて行います。

  

次のようにロボットに命令したとき、どの場所に行きますか? 「はじめ → 3回くり返す → 1マス進む → 右を向く → ここまで → おわり」。 

  

200305f

  

まずアに進んで、下側を向く。次に下側に進んで、左側を向く。さらにエに進んで、上側を向く。だから答はエ。飛行機は最後、上向きになります。

   

  

     ☆     ☆     ☆

では最後、第4問。「10 分岐④」の1番です。分岐(ぶんき)とは、分かれること、あるいは、分かれ目のことで、普段は使わないちょっと難しい言葉です。

  

ゆうなさんは、いろいろな形のクッキーを作って友人に配ります。クッキーを袋(ふくろ)に入れるのを妹に手伝ってもらうために、命令の図をつくりました。

   

200305g

  

この命令にしたがうと、丸いクッキーは「花がらのふくろ」に入るし、ハート形のクッキーは「水玉もようのふくろ」に入ります。

  

では、□(四角)のクッキーはどのふくろに入りますか? また、☆(星型)のクッキーはどのふくろに入りますか?

  

   

一目見てすぐに答えるのではなく、質問や条件にしたがって、一歩ずつ順序立てて考えることが大切です。四角のクッキーなら、下図のように進んで、答はチェックがらのふくろです。

   

200305h

  

星型のクッキーの場合は、「はじめ→いいえ→いいえ」と右側に進んで行くので、答えは水玉もようのふくろです。このように、命令の流れを表す図は、流れ図フローチャートなどと呼ばれます。フローは流れ、チャートは図を表す英語です。

   

お休み中に家で勉強するのは大変ですが、カンタンで楽しい勉強でいいので、少しずつがんばってくださいネ♪ もちろん、ウイルス感染には注意して。ではまた。。☆彡

   

     (計 1693字)

| | コメント (0)

iPad、iPhone用のJava学習アプリ、Jedona(Compiler for Java)

マニアックな事で困った時には、反射的にネット検索をかけるクセがついてるけど、アプリ検索という手もあった。正直、アプリというものは種類が多過ぎるし、ハズレやバグ(欠陥)ですぐ削除することもよくある。ただ、これは今の所、有難い限り♪ 人気がさっぱりないけど評価が高いのは、言語が英語のみだからだと思う。

  

200118a

  

Jedona(ジェドナ?)。Compiler for Java(コンパイラー・フォー・ジャバ)。自分が入力したジャバのプログラムを、機械が読み取れるように変換(コンパイル)して、表示してくれるアプリ。

   

先日、パソコンで普通にJavaを導入しようとしたら、コンパイルまでは何とかなったのに、最後の表示でつまづいてしまった。コンパイラーと読み取りアプリのバージョンの不適合みたいで、どんどん事態がこじれて行きそうだから、とりあえず断念。

  

ただ、やっぱり気になるからアプリを検索したら、1つ目はほとんど使い物にならなくてすぐ削除したけど、2つ目のこれがヒットだった。広告は出るし、データ保存ができないみたいだけど、課金なしで色々練習できるから、超初心者にとっては十分だ。動きも軽くて、変なエラーもこれまで出てない。私の入力ミスを除けば♪

   

   

     ☆     ☆     ☆

200118d

  

最初は黒い背景で、ちょっとだけややこしい入力例が出て来たけど、とりあえず無視。まずはお約束の「Hello World!」の表示プログラム。画面右上の再生ボタンをタップすると、素早くコンパイルして、表示成功。1行目のクラス名で1回失敗した後♪ ファイル名に合わせないといけないのかな? 一部の文字の色は、自動的に付けてくれてる。

   

200118e

   

ただ、黒い背景だと、Windowsのコマンドプロンプトみたいで難しそうに見えるから、設定の下側(Editor Theme)で白(White)に変更。ついでに入力と出力の文字(Font Size)も大きくした。英語といってもこの程度で、実際、年齢設定も4+(4歳以上?)になってる。

   

200118c

  

続いて、足し算とかけ算。この辺りは、別に覚えてるわけじゃなくて、例の学習アプリ「Progate」の説明に従ってるだけ。一応、数や文字は自分で少し変えたりしてる。

  

200118f

  

5+3と、2×7をやらせると、8と14が2行で表示された。ちなみに、printlnではなく、単にprintと入力すると、同じ1行の中で表示されてしまうから、普通は避けるところだ。   

200118g

  

  

    ☆     ☆     ☆

200118h

  

さらに、文字列の「足し算」。2つの文字列「blogger」「Tenmei」をそれぞれ二重引用符でくくって、足し算すると、2つがつながって表示される。

  

200118i

  

そして、眠いから早くも最後。変数を2種類設定して、それぞれ代入して表示させたら、エラーが二重に出てしまった♪ 下が最初の私の入力。整数を表す int 型の変数「number」を設定して、7を代入して、表示。次に、文字列を表す String 型の変数「name」を設定して、Tenmei を代入して、表示。以下、間違い探しをお試しあれ♪

  

200118k

  

驚いたのは、どこが間違ってるのか指摘してくれたこと。これがAI教師というものか。無料で素早く正確。ちょっと不愛想だけど♪

   

200118l

  

「5行目にエラーがあって、セミコロンを忘れてる。7の右側」といった指摘なのだ。具体的で、いいね♪ ただ、もう1つのミス(Tenmeiの引用符を忘れてた)の指摘はそこまで分かりやすくはなかった。

  

200118m

  

    ☆     ☆     ☆

とにかく2ヶ所直ちに修正して、出力成功。パソコンで本格的に導入するのは大変な作業で結局失敗したけど、タブレットのアプリなら、あっという間だった。もちろん、いずれPCに再挑戦する予定(予定は未定♪)。

  

さあ、今週末は私もセンター試験の「受験」があることだし、そろそろ寝ることにしよう。ではまた。。☆彡

   

        (計 1569字)

| | コメント (0)

プログラミング用Javaのインストール後、実行で失敗、「javaとjavacのバージョンが合わない?」トラブル

「Java(ジャバ)」は公式サイトから簡単にダウンロードできる・・というような話は前からあちこちで読んでたけど、たぶん実際には苦戦するだろうなと思って、今まで先延ばしにして来た。

  

実際に昨夜からチャレンジしてみると、予想以上の大苦戦で、もう4時間も経ってる。寝る時間だから、簡単に報告記事のアップだけしとこう。

      

ネット検索すると、同じようなトラブルがあちこちで報告されてる。ただ、今のところ、私の場合の問題を解決してくれる方法を、初心者用に簡単に説明してくれてるサイトを発見できてない。どこも単語や操作のレベルで敷居が高過ぎる説明だったり、話が省略されてて具体的にどうやるのか分からなかったりするのだ。

    

   

    ☆     ☆     ☆

さて、私は超初心者で、プログラミングというものは高校教科書のBASIC(ベーシック)をちょっと勉強した後、Progate(プロゲート)という学習アプリで少し学んだだけ。プロゲートでJAVAも演習してるけど、そこでは入力するだけで画面左側に結果が表示される。一番最初のプログラムの導入の話が無いのだ。

    

同じプログラミング学習でも、HTMLなら、メモ帳に書いてHTMLファイルとして保存して、ブラウザで開くだけ。以前やったBASICは、あらかじめプログラムをインストールしたけど、こんなに苦労することは無かった。

    

私がやった事を簡単に時系列に従ってまとめてみよう。まず、JAVAのインストール(のつもりだった)。確かに公式サイトの手続きは簡単で、Windows10パソコンにインストールするのも簡単。

   

ところが、これはプログラミングとは関係なかったらしい。「Java SE Development Kit」(システムエンジニア開発ツール?)というものをOracle(オラクル)HPからダウンロードしないといけなかったらしくて、私はトップに載ってたバージョン13をインストールした。「jdk-13.0.1_windows-x64_bin」というファイル名。

   

その後、環境変数というものを設定。やり方はあちこちに書いてるから省略。要するに、スタートメニュー → 設定 → 「環境変数」の検索 と進んで、「ユーザー環境変数」または「システム環境変数」を新規に作成する。ここがトラブルの原因(の1つ)になってるのかも。

   

   

     ☆     ☆     ☆

その後、スタートメニュー → 設定 → Windowsシステムツール → コマンドプロンプトと進んで、黒い画面のコマンドプロンプト(直接的な命令を書きこむ画面)を立ち上げる。

   

で、あちこちに書いてるように、javaのバージョンと、コンパイル用のjavacのバージョンが表示されることを確認。コンパイルとは、コンピューターが読めるようにファイルを変更すること。

  

200110b

  

そして、「Java」フォルダ内に「test」フォルダを作って、そこにメモ帳で作った簡単な java ファイル、「s

ample001.java」を保存(上図)。これはHTMLの時と似たような作業。

    

200110c

   

その後、コマンドプロンプトで「javac sample001.java」と命令すると(上図)、黒い画面では何事も起きなかったように見えるけど、新しいファイル「sample001.class」が出来てる(下図)。

  

200110d

    

ここまで、既に10回くらい躓(つまづ)いてるけど、それはクリアできたことだし、今日は省略。例えば、本当は関係ないのかも知れないけど、Javaの保存フォルダをデフォルト(初期)設定から変更したりした。それより問題は、最後のファイル実行なのだ。上手く行ってれば、「Hello World」という挨拶文が表示されるはず。

   

   

    ☆     ☆     ☆

ところが、「java sample001」と指示を入れると、長い英語のエラー表示が出てしまった。下図はその最初の部分で、全体の3分の1ほど。

  

200110a

   

Error: A JNI error has occurrd, please check your installation and try again ・・・・・・

   

要するに、実行しようとしてる対象のファイル「sample.class」のバージョンが新し過ぎると書いてるのだ。

    

それは新しいプログラム(Java Runtime)でコンパイルされたファイルで、バージョン57。ところが、そのファイルを動かそうとしてる主体の側のプログラム(jre ?)はバージョン52までしか認識できない、とのこと。

   

   

     ☆     ☆     ☆

そこで、JAVA関連を全て削除して再インストールしたけど、また同じエラー表示。「jre-8u231-windows-i586-iftw」というプログラムをまた公式サイトからダウンロードしたけど、何も変わらず。

   

以前の環境変数の設定が残ってしまってるからそれを変更するとかいう話も見かけたけど、普通の画面だと、選択はできても何も操作できなくなってしまってる。それをコマンドプロンプトで直接書き換えるというような話もあったけど、超初心者がそんな事まですると、マイナスのリスクの方が遥かに高い。

  

似た話で、昔作られたファイルやフォルダが変な場所に残ってるから、その名前を書き替えたら上手く行ったという報告もあった。ただ、これも同じ作業を私がやると、そもそも昔のファイルやフォルダは発見できない。もちろん、エクスプローラーで隠しファイルの表示をした上で、手作業と検索と両方で調べてみたけど、怪しいものは見つからないのだ。

   

   

    ☆     ☆     ☆

今、選択肢として残ってる方法は、jdkのヴージョンを古いものに変更することのみ。公式サイトで、少し古いもののダウンロードも出来るようになってる。ただ、名前や勤務先まで細かく登録してオラクル・プロファイルというものを作らないといけないようだし、こんな事までしなければいけないの?・・という疑問の方が大きい。

     

公式サイトから最新のものばかりをほぼ同時に導入して、どうしてバージョンが合わないなんてエラー警告が出てしまうのか? そんなに繊細な拒否反応を示すのなら、そもそも普通に社会で使う時にもトラブルだらけになりそうなもの。

   

というわけで、疲れ果てたから、もう寝よう。やっぱり、特殊な世界だなと改めて思い知らされた。案外、プログラミング用に安いパソコンを買って、一から全てやり直すのがベストかも。時間と労力をムダに使い果たして、深い溜息をついた所で、今日はそろそろこの辺で。。☆彡

   

       (計 2627字)

| | コメント (0)

HTML&CSS初級編4~コンテンツ作りで完成、プログラムとページの全体図

開成中学の生徒がプログラミング言語を創って表彰されてる時に、大人が単なる初級記事を書くのも微妙だけど、小市民は我が道を歩むとしよう♪

  

191220a

   

学習アプリ「Progate」のHTML&CSS初級編がようやく終了。全く消化不良のまま、丁寧な誘導に従って、目標のページが完成した。上がアプリの図。下は私が自分で書き直したプログラムをブラウザ(IE)で開いた様子。微妙に違うのは、ブラウザの種類や設定の問題か。大見出しの活字と送信ボタンのデザインが違う。

   

191228a

   

なお、これまで書いた関連記事3本は、以下の通り。

 

 プログラミング学習アプリ「Progate」~HTML&CSS初級編

 HTML&CSS初級編2

 HTML初級編3~CSS、メモ帳で簡単作成

  

      

    ☆     ☆     ☆

さて、今回最後に作るのはメインの内容で、ページ中央のカラー画像と、すぐ下の入力フォームの箇所だ。作る箇所全体のhtmlファイルはこんな感じになる。

  

191228b

   

時間に追われて急いで入力したら、数ヶ所間違えてて、間違い探しで余計に時間を使うハメになってしまった。タグのカギカッコが1個不足、二重引用符が1個多過ぎ、英単語の綴りの間違い。反省しよう。

  

作る箇所全体のCSSファイル(スタイルシート)は下の通り。

  

191228c

   

   

    ☆     ☆     ☆

まず上半分の画像の箇所、「学べるレッスン」のエリアの入力。同じパターンが4回続くから、始めの2回だけ見る。改行を入れて見やすくした。

  

191228e

   

最初に、「section-title」(セクション・タイトル)で小見出しを入力。次に「contents-item」(コンテンツ・アイテム)として、4つの画像の保存場所を「img src」タグで指定、画像の下の名前はpタグで入力。画像の場所は、プロゲートがアマゾン・ウェブ・サービス(aws)で確保してるものだ。場所の入力が長くて面倒だから、当初は2ヶ所も間違えてた。

   

CSSファイルは次の通り。htmlの各要素には、border(ボーダー:初期状態では表示されない枠線)が取り囲んでて、その内側の余白領域がpadding(パディング:枠と要素の間に挿入する空きスペース)、外側の余白がmargin(マージン)。こうした構成をボックスモデルと呼ぶ。

       

191228f

   

191228g

   

   

    ☆     ☆     ☆

続いて、下半分の入力フォームの箇所、お問い合わせのエリアの入力。下がhtmlファイルの該当箇所。一番下のdivタグは、「main」部分全体の締めくくりで、その下はもう「footer」(末尾)に変わる。

  

191228h

  

imput(入力)とかtextarea(テキスト入力箇所)のタグは非常に簡単だけど、送信ボタンの指示が分かりにくい。classの指定を省いて、単に「input type・・・」と簡略化してもいいようだ。

   

CSSファイルは下の通り。余白や枠の指定が面倒に見えるけど、慣れの問題か。同レベルの操作なら、普段のブログ記事作りや画像処理で普通にやってることではある。

  

191228i

   

    ☆     ☆     ☆

今回作った箇所だけ改めて表示しとこう。こういった話を知ってしまうと、自分のブログ記事の入力をアレンジしたくなるけど、「生兵法はケガのもと」。実力と自信を付けるまでは自重しよう。

   

191228d

     

今後、自分ひとりでこのプログラムを再現できるように復習する予定。ではまた。。☆彡

  

       (計 1344字)

| | コメント (0)

HTML初級編3~CSS(カスケード・スタイル・シート)、メモ帳で簡単作成

遂に、2日連続でプログラミング記事を書くまでになってしまった。正直言うと、単に前日の記事が途中までしか書けなかったということ♪ 時間の制約もあるし、1本の記事が長くなってしまう。

   

191220a_20191221151701

  

今、目指してるのは、上のようなページの作成。学習アプリ「Progate」の課題だ。前日の記事で作ったのは、htmlファイルの途中まで。下は、メモ帳で私が書いたプログラム。

   

191220i_20191221151901

   

長くて複雑に見えるけど、実際に入力してみると意外と早かった。1行あたりの字数が少ないし、型にハマった入力だからか。アルファベットや記号の入力を、PCが学習してくれればもっと速くなるのに、なぜか今のところ学習してくれない。後で調べてみよう。

  

上のメモ帳プログラムをhtmlファイルとして保存して、ブラウザで開くと、日本語だけ文字化けしてしまう。そこで、ブラウザのエンコードで日本語(自動選択)を選ぶと、下のように正しく表示された。この後、色付け、全体のレイアウト、細かい配置などを、cssファイルで味付けしていく。Windows10付属アクセサリー、「メモ帳」アプリを再び使用。

    

191220j2_20191221152101

   

   

     ☆     ☆     ☆

先に、私が作った完成図を掲載しとこう。学習アプリで分割表示されてる画面を、1つにまとめて自分で入力したもの。1行空けを消しても、かなり縦長になる。ただ、htmlファイルと同様、cssファイルの入力も意外と早く終了した。

   

191221b2

      

では、上から順に、超初心者の目線で少しずつ解説して行こう。まず、全体についての指示。

   

191221c

  

font(フォント:活字)で、「Avenir Next」という種類を指定。また、2ヶ所あるリスト部分で、箇条書きの先頭を示す「・」(点)は消す。list-style(リストスタイル)で、「none」(ナン:無し)と指定するだけ。

   

  

     ☆     ☆     ☆

続いて、薄い青緑色のheader(ヘッダー)部分。

  

191221a

 

191221d2

   

各部分の指定は、すべて「.」(ドット、ピリオド)から始まる。「.header」で、background-color(背景色)とcolor(文字の色)とheight(領域の高さ)を指定。

  

「.header-logo」は、ヘッダー冒頭の「Progate」という文字のこと。floatでleft(左寄り)として、文字サイズは36ピクセル。padding(空き間隔の挿入)で「20px 40px」と書いて、上下と左右の間隔を指定。

  

「.header-list」は、箇条書きの3項目をまとめた呼び方で、3つ全体を左寄りに指定。次に「.header-list li」も「fload:left」と指定して、3項目を左から並べていく。これが無いと、項目が縦に並ぶのだ(後で登場)。

   

   

    ☆     ☆     ☆

続いて、main(メイン:中心部)。まだ今回は、4色の画像や入力フォームは扱わない。

  

191221e

    

191221f

  

まず、全体の上下で100ピクセル、左右で80ピクセル、間隔を空ける。次に「.copy-container h1」(大見出し)と、「.copy-container h2」(小見出し)の文字サイズを指定。最後に、大見出しの最後の点だけ、赤い色を指定。あらかじめhtmlファイルで、spanタグで点を挟んでおいて、このcssファイルでは「copy-container span」と書く。

  

ちなみに、container(コンテナー)という英単語は、入れ物という意味。ここでは、「copy-container」で「文字を入れる部分全体」を指してる。入れ物だけじゃなくて、中身の文字データも込みで。

   

   

     ☆     ☆     ☆

191221g

   

191221h

   

そしていよいよ、footer(フッター:末尾)。まず、このエリア全体の背景色、文字の色、高さ、上下左右の空き間隔を決定。「footer-logo」や「footer-list」は、前のheaderの時とほぼ同様。ただし、「float:right」だから、リストの3項目はエリアの右側に配置される。

     

最後に、「.footer-list li」の「padding-bottom」で、箇条書き3項目の下側のスペースを20ピクセルに指定。headerの時とは違って、ここに「float:left」と書いてないから、3項目は縦に並ぶ。

   

191221i

   

これで、上図まで出来たから、残りはあと少し。次回、メインの図と入力フォームを入れて完成させるとしよう。素直にちょっと嬉しいけど、実は図書館でhtml関連の本を探すと、少ししかない。要するに、プログラミングの中でも簡単すぎて、わざわざ解説本を沢山並べるほどのものでもないわけか♪

   

ともあれ、今日の所はこの辺で。。☆彡

   

   

   

cf.プログラミング学習アプリ「Progate」~HTML&CSS初級編

 Progate2~Java初級編

 Java初級編2~Progate3

 HTML&CSS初級編2

   

       (計 1953字)

| | コメント (0)

HTML&CSS初級編2~プログラミング学習アプリ Progate

1年4ヶ月ぶりの挑戦となる、HTML&CSS初級編の学習。要するに、ウチみたいなブログも含めて、サイト表示の元になってる記述を学ぶわけだ。どう書けば、どう見えるか。こう見せるためには、どう書けばいいか・・・etc。例によって、親切丁寧で見やすいアプリ「Progate」が教科書。

    

ちょっと前、JAVA初級編の記事を2本書いてるけど、HTMLやCSSの書き方はほとんど忘れてたから、昨夜は思い出すだけで終了♪ ようやく今夜、締切時間前に執筆し始めたわけ。

   

191220b

   

ちなみに、この記事のここまでの入力がどうなってるのか、管理画面の「通常エディタ」というタブで見てみると、上の通り。p、< >、spanとかの文字・記号が目立ってる。他には、font-size(文字のサイズ)とか、color(色)とか。

   

上図に出てるのは、私の個人的な入力だけ。たまに、上図の画面を直接いじることもある(エラーの修正とか)。これ以外に、ブログのシステムが元々用意してる原型みたいなものもあって、初めてこの記事が表示されるわけだ。

  

なお、過去の関連記事3本は次の通り。

  

 プログラミング学習アプリ「Progate」~HTML&CSS初級編

 Progate2~Java初級編

 Java初級編2~Progate3  

      

   

    ☆     ☆     ☆

191220a

  

さて、前回のHTML(HyperText Markup Language)記事から目指してるのは、上のようなページの作成。見るだけなら何ともないけど、自分で作ろうとすると、大変さを思い知らされる。文字の大きさ・間隔、色、図、全体的なレイアウト(上・中・下段の3分割)など。HTMLとCSSの書き方の答をいきなり全部書くと、結構長いし、分かりにくい。

  

そこでまず、遥かに簡単なページを自分で作ってみよう。下は、Windows10付属の「メモ帳」アプリで私が作った、テキストファイル。

  

191220c

   

わざと、1行空けとか右への文字ズラシとか使わず、単純に書き並べてる。というか、そうした見やすさのための作業は無くてもちゃんと表示されることを、確認したかったわけ。

   

まず一番上の行が、最新版のHTML5を使うという宣言らしい。その下全体は、<html>タグと</html>で挟まれた部分。変なトラブルが怖いから、わざと全角文字を使用。

  

で、その間には、まずhead(ヘッド:ブラウザで開いた時のタブの名前)があって、次に<body>タグと</body>で挟んだ本文がある。h1で大見出し用の文字、h2で小見出し用の文字を指定。その後は、<p>と</p>で挟んで、各段落の文を書くだけ。このpに時々、変なエラーが生じてしまうから、試行錯誤の独学で修正してるのだ。

  

191220d

   

先ほどのテキストファイルを、htmlファイルとして保存し直して、ブラウザ(IE)で開いた様子が上図。タブの名前(タイトル)、大見出し、小見出し、本文2段落、ちゃんと構成できてる。ただ、味気ないから、htmlファイルを複雑にして、css(cascading style sheet)ファイルで色を付けたりして、見栄えを良くして行く。

  

   

     ☆     ☆     ☆

191220e

  

では、Progateに戻って、前のキレイなページを作って行こう。上はhtmlファイルの最初。headの中で、文字コード「utf-8」を指定した後、別にcssファイル(stylesheet)も利用するという宣言がある。そのcssファイルを特定する名前が、stylesheet.css。二重引用符の有無や使い分けは、まだよく分からない。

   

191220f

  

続いて、body(本文)の最初の部分。div classのタグで、ページ上部のheader(ヘッダー:薄い緑の細長いエリア)を作成。さらにその中で、header-logo(ヘッダーロゴ)とheader-list(ヘッダーリスト)を分ける。リストの箇条書きは、<ul>タグと<li>タグの組合せ。「入れ子」状に組み合わさった複雑な構造。   

 

191220g

   

さらに、body(本文)の中央をさらに3分割。copy-container(コピーコンテナー:見出し)の2行と、contents(コンテンツ:後で付ける画像)と、contact-form(コンタクト・フォーム:お問い合わせ)。ちなみに色が変わってる部分は、私がアドバイスの文章を消した箇所。

  

細かい話だけど、HELLO WORLDという大見出しの右側の<span>タグは、文末のピリオド(点)だけ色を変えるための準備だ。文の一部分だけ操作する時に使うタグらしい。まあ、基礎の理論がよく分からないまま、前からたまにいじってた♪

  

191220h

   

そして上が、body(本文)の最後、footer(フッター:文末)。headerと同様、ここでもロゴとリストを分けてる。これだけ見ると、headerとfooterはそっくりだけど、cssファイルでの味付けの仕方が違うのだ。背景色とか、リストの配置とか。

   

   

    ☆     ☆     ☆

さて、ここまでアプリの画面を使って来たから、htmlの全体を自分でメモ帳に書き直してみた。一発で、間違いなしに入力成功(たぶん♪)。1行空けや文字ずらしも入れて、ちょっと見やすくしてみた。

  

191220i

  

で、これをhtmlファイルで保存し直して、ブラウザで開くと、文字化け!(^^ゞ どこも間違えてないけどな・・と思ってよく見ると、日本語の部分だけ表示がおかしい。

  

ブラウザのエンコードは、Unicode(utf-8)で正しそうだけど、試しに「日本語(自動選択)」をクリックすると、表示成功☆

  

191220j2

      

ちなみに、ブラウザのエンコードは、「日本語(シフトJIS)」に変わってた。utf-8を指定したのに、何でかね? まあ、とりあえず、htmlファイルの作成は成功としとこう♪

  

長くなったので、味付けを担当するcssファイルについては、また後ほど。それでは今日はこの辺で。。☆彡

   

      (計 2383字)

| | コメント (0)

Java初級編2~プログラミング学習アプリ・Progate3

何と、前回から僅か3週間で、プログラミング学習アプリの3本目の記事を書くことになった。アクセス数稼ぎにはならないけど、単にブログの毎日更新のネタに困ったから♪ ただ、3週間前の話だとまだ何となく記憶が残ってて、わりと解きやすかった。

    

これが1年以上前のHTML&CSSになると、ほとんど何も思い出せない。順番的にはそちらを先に一通り済ませたいところだけど、思い出すのが面倒だから、前回と同じJavaを選択。といっても、まず前回の復習からスタート。入力が保存されてたから、サラッと見直すだけで済んだ。

      

Progate(プロゲート)、やっぱり良い学習アプリだと思う・・とか書くと、ステマだと誤解されるかも♪ マジメな話、書店で入門書を数冊読んでも、このアプリの方が分かりやすいし楽しかった。Javaを使う環境が最初から準備されてる点も大きい。

  

ちなみに過去の2本の記事は以下の通り。

 プログラミング言語の学習アプリ「Progate」~HTML&CSS初級編の感想

 学習アプリ「Progate」2~Java初級編

    

    

    ☆     ☆     ☆

191121a

  

前回は、レッスン1(上図)の前半、第7課(節)まで終了。続いて第8課は、変数の更新

    

191121b

   

上は、String(文字列)型のnameという変数の中身を書き換える様子。最初の”Sato”を、”Suzuki”へと更新するには、新たに「name = ”Suzuki”」と書けばいい。ちなみに、このブログの入力欄でエラーが生じるのが心配だから、時々わざと全角の文字を混ぜてる。悪しからず。

   

191121c

   

上の演習問題では、int(整数)型のnumberという変数の初期値が11で、String型のtextという変数が”Ruby”と設定されてる所からスタート。文字列の時だけ二重引用符を付けるのが面倒だ。行末のセミコロンの方が多少マシ♪

  

191121d

  

「number=9;」と入力すると変数が9に更新されて、「text=”Java”」と入力すると変数がJavaに更新される。出力はいつも「System.out.println(・・・)」だからカンタン。左側のコンソールと呼ばれるエリアに、9とJavaが出力された。

  

ちなみに「println」という言葉。前半はプリント(印刷)でいいとして、末尾のlnの意味が分かりにくい。検索してもQ&Aみたいなものしか見当たらなかったけど、「line」(行)の省略形でいいのかな。後ろだけ省略した合成語を使うのなら、むしろprlnとかで済ませるか、printlineと全て書く方がいいような気もする。言語開発の歴史が関係してるのかも。

    

   

    ☆     ☆     ☆

続いて、第9課「自己代入」。数学好きのプログラミング素人としては、前から引っかかってた書き方だ♪ 等式の左辺と右辺が明らかに違う式

   

191121e

  

int型のnumberという変数は最初、3と初期化されてる。それに7を足した変数へと書き換えるには、「number=number+7」と入力。3+7で、コンソールへの出力は10。

  

第10課は「自己代入の省略」。例えば「x=x+3」なら、「x+=3」と書けば1文字省ける。さらに、1足すだけなら、「x++」、1引くだけなら「y--」と書ける。ちなみに++という書き方は、有名なペアノの自然数論と形だけ似てるけど、ペアノの場合はプラス2という意味になる。

   

191121f

   

第11課は「変数の役割と注意点」。ちょっとだけ複雑な変数や、変数同士の演算が登場。

  

191121i

   

int型のlength(長さ、幅)という変数が6、height(高さ)という変数が8の時、その2つを掛けて、rectangleArea(長方形の面積)という変数を定める。rectangleとareaの2単語を合成する時は、後ろの頭文字を大文字「A」にする。大文字はたまに活躍。

   

   

    ☆     ☆     ☆

第12課小数を扱おう」では、小数を表す「double型」の変数が登場。ダブルの意味が分からないけど、とりあえずスルー♪ ちなみに小数を表すフツーの英単語は、decimalだ。

   

191121h

  

double型の変数number1が8.5、number2が3.4の時、足し算を「number1+number2」で出力すると、11.9になる。

   

第13課「自動型変換」は、型の変換を自動で行うやり方。String(文字列)型とint(整数)型を足すと、自動でString型へと揃えてくれる。「12」+「"月”」+「31」+「”日”」なら、12月31日という文字列。

  

一方、int(整数)型とdouble型の計算をさせると、自動でdouble型になる。例えば、5.0/2を出力すると、2.5。ちなみにデータ型の変換のことを「キャスト」と呼ぶそうだけど、この変わった名前の理由も保留しとこう。

   

   

    ☆     ☆     ☆

最後の第14課は「強制型変換」。型の変換を強制で行う方法。int(整数)型の7をint型の2で割る計算をする時、そのままだと整数3だけ出力される。ところが、割り算の直前に「(double)」を加えとくと、小数3.5が出力される。

   

191121j

    

ネットで見ると、簡単な小数ならfloat型というのもあるらしい。型の種類が増えると当然、変換の仕方も多様になって来る。とりあえず今回はこれでフツーにレッスン終了。先生の羊が褒めてくれた♪

  

191121k

  

最後は華やかなお祝いの画面が登場。Congratulations!(コングラチュレーション)。次はレッスン2に向かうか、あるいはHTMLの続きにするか。いずれにせよ、まだ続ける予定。

  

191121l

      

プログラミング記事は意外なほど時間を取られるなと苦笑しつつ、ではまた。。☆彡

   

      (計 2278字)

| | コメント (0)

プログラミング言語の学習アプリ「Progate」2~Java初級編

前回から2、3年経ったような気もしてたけど、実はまだ1年3ヶ月弱だった♪ 「Progate」(プロゲート)というアプリは、確かにプログラミングのゲート(入口)として、いいねボタンを押したくなる、楽しい学習アプリだ。

  

ただ、やっぱり特殊な世界だから抵抗があって、つい疎遠になってしまう。そうすると、IDもパスワードも忘れてしまうから、ますます疎遠になる♪ 久々の今日はまず、IDとパスワードの入力で4回ほどエラー表示が出たから、その時点でもう疲れてしまった。

  

191029a

   

もちろん、前回やったHTML&CSSの内容はほとんど覚えてないから、どうせなら違う言語に挑戦したい。そこで、名前だけはよく聞く「Java」(ジャバ)を選択。Java Scriptとは「全くの無関係」との事♪ でも、どうして同じ名前なのか気になるから、後で調べてみよう。

   

とにかくいよいよ、Java初体験スタート。「大規模開発からモバイルアプリまで汎用性の高い言語」。

   

   

     ☆     ☆     ☆

学習コースJava1と2が無料で、3と4が有料。アプリには満足してるから、いずれ課金で真面目にやるかも。まあ、こういった初心者向けの学習だと、また友人が突っ込みを入れて来るかも♪

  

191029b

  

「Main.java というファイルの System.out.println( ) の ( ) の中に、文字を書くと、コンソールという場所に表示される。ここでは、"Hello World"。ダブルクォーテーション(二重引用符)に入れないと、エラー発生でコード(プログラム)が動かなくなるらしい。この記号、日本語だとほとんど使わないから抵抗感がある。まだ、セミコロンの方がマシかも。

       

191029c

  

最初は「Hello Java」の入力。あらかじめ、ほとんど準備されてるから、問題の下側の選択肢からタップで選んで行くだけ。

  

191029d 

  

191029e

   

1回タップして入力する言葉を選択しただけで、画面左側のコンソールという場所に「Hello Java」と表示された。

  

191029f

  

これでレッスン1の第1課が終了。今回は半分、第7課まで。

  

191029g

  

  

     ☆     ☆     ☆

Java入力欄の構造は、下のように分かれてる。一番大きな外枠の「クラス部分」と、二番目の枠の「メソッド部分」は、とりあえず無関係。一番内側の「処理部分」にコードを書く。

  

191029h

  

続いて、「文字列」とは別扱いされる「数値」の入力と計算。数値はダブルクォーテーションを付けない。スラッシュ2本の右側の日本語の説明文は、単に読みやすくするためで、コードの実行には関係ない。

   

191029i

  

カッコ内に、17 と 5 + 3 を入れると、コンソールに 17 と 8 が出力された。読みやすくするための半角スペースも、実行とは関係ない。私は普段のブログ入力でもわりとスペースを使ってるから、ここでも半角スペースを使った。

   

191029j

  

かけ算の記号は、アスタリスク(*)。割り算なら、スラッシュ。割り算の余りだけ出す時は、パーセント(%)。8 % 3 をカッコ内に入れると、コンソールに、2 が表示された。8÷3=2余り2、だから。

  

191029k

  

   

    ☆     ☆     ☆

さらに、「データ型」と「変数」について。文字列は、「String 型」。整数は、「int 型」。

 

191029l

  

int 型で変数名を number と定義する場合。

  

191029m

   

String 型の変数 name を定義して、"Wanko" を代入する場合。

  

191029n

  

変数の定義と同時に、代入することも可能(変数の初期化)。この辺りでちょっと頭がモヤモヤして来た♪ 問題は解けるけど、頭に入らない感じ。まあ、慣れの問題か。

     

191029o

   

   

     ☆     ☆     ☆

最初から変数 number1 が定義されて、3 が代入されてる所に、自分で変数 number2 を定義して、7 を代入する。

  

191029p

   

さらに、number1 と number2 の掛け算、つまり、3×7を出力する。

  

191029q

  

コンソールに表示される答はもちろん、21。

  

191029r

  

初心者的には、もうちょっと褒め言葉が欲しいかも♪ コメントが機械的なのだ。まあ、機械だけど、英単語アプリの mikan なんて、いちいち大絶賛してくれるのだ。

   

191029s

  

ともあれ、1年3ヶ月ぶりのプログラミング学習、全問正解で無事終了。次は来年か♪ ではまた。。☆彡

  

  

cf. プログラミング言語の学習アプリ「Progate」~HTML&CSS初級編の感想

   

      (計 1700字)

 

| | コメント (0)

プログラミング言語の学習アプリ「Progate」~HTML&CSS初級編の感想

子供向けの記事2本を除くと、プログラミングの記事というものは

 

3年半も書いてない。主たる理由は職場関連の変化で、余裕が

 

無くなったからだけど、どうもビミョーに私とは合わない気もしてた。

 

 

 

やっぱり、数学とも国語とも似て非なる独特の世界なのだ。数学と

 

しては色々「緩い」ものを感じるし、国語としてはあまりに「硬い」。

 

おまけに、どうしても下手に扱うと自分の端末自体が壊れそうな

 

気がしてしまう♪ パソコンやiPadが壊れると、仕事もブログも

 

困るのだ。

 

 

 

というわけで、いつの間にかすっかり疎遠になってしまったけど、

 

これだけAI、AIと騒がれる時代になると、せめてプログラミングくらい

 

できないと、人間知性の価値を全否定されそうで怖くなる。

 

 

 

そこで今日は超久々に挑戦してみた。実は台風の雨が止まなくて、

 

ランニング記事を書けなくなったからというのが本音だけど♪

 

 

 

 

 

      ☆       ☆       ☆

 

以前は、高校の数学の古い教科書を使って、BASICの記事を

 

9本書いたけど、今回はアプリ「Progate」(プログラミング

 

への入り口という意味か)を使って、HTML(ハイパーテキスト・

 

マークアップ・ランゲージ)のお勉強。ネットで普通に使われてる

 

言語で、他のページに飛ぶリンクが付いてるのが特徴だ。

 

 

 

このブログの執筆欄にも、「HTMLの編集」というタブが付いてて、

 

たまにトラブルが生じると自分で適当にいじって修正する。トラブル

 

の原因とかキッカケは、iPad入力とか画像挿入、文字の色付け

 

とか。レイアウトが崩れたりエラー表示が出たりするから、正しく

 

表示されてる記事と比較して、何とか直して来た。

 

 

 

180808a

 

 

 

例えばこの記事の改行や一行空け、色付けは上のようなHTML

 

になってる。上図の挿入については、下の通り。念のため、一部

 

はカットしておいた。

 

 

 

基本的にどの行も、<p>(山カッコ p 山カッコ、実際は半角)

 

で始まって、</p>(山括弧 /p 山括弧)で終了するらしい。

 

下の「img・・・src」はイメージのソース(情報源)。

 

source の略語が src だったのか。。

 

 

 

180808b

 

 

 

この執筆ページの「ソース」を見ると、こんな感じで始まってる。

 

 

 

180808l

 

 

 

 

 

     ☆       ☆       ☆

 

話をアプリに戻そう。プロゲートを見つけたキッカケは、朝日新聞

 

の記事。Ruby(ルビー)という日本生まれの言語が活躍してる

 

とか書いてたから、検索してみると、このアプリで勉強するのが

 

いいとのウワサが目に留まった。

 

 

 

180808c

 

 

 

半信半疑のまま iPad Proでダウンロード。いきなり後悔した♪

 

まず、なぜかダウンロード画面が残り4分の1くらいで終了(?)

 

してしまったのだ。やり直してみると、どうもダウンロードは完了

 

してるらしい(多分)。ただ、最初の登録を済ませた後、まったく先

 

に進めない。白い画面のままだから、一旦あきらめた。

 

 

 

ところが数時間後に再びアプリを起動してみると、今度はサクサク

 

動いてくれる。iPad自体は再起動してないから、理由は不明。

 

ひょっとすると、登録したメアドに来たメールで確認作業をしたから

 

かも。あるいは単なるエラーだったのか。

 

 

 

180808d

 

 

 

 

 

      ☆       ☆       ☆

 

もともとRubyを学習しようとしてたんだけど、「学べる言語」の

 

一番手が「HTML&CSS」となってたし、ルビーより馴染み

 

があるからこちらを選択。多分、正解だったと思う。

 

 

 

180808e

 

 

 

初級編は、とりあえず上のようなページを作成するのが目標。

 

私の感覚だと、まず完成した記述の上の方だけでも見せて欲しい

 

所だけど、このアプリは少しずつ知識と技術を増やて行く方式。

 

 

 

180808f

 

 

 

各セクションごとに、まず簡単なスライドの説明を見た後、実際に

 

入力練習する形になってる。無料にしては十分な完成度だけど、

 

どこからアプリ内課金が始まるのか、まだ不明。

 

 

 

180808g

 

 

 

 

 

      ☆       ☆       ☆

 

初心者や初級者にやさしいのは、書く画面で入力する単語や記号

 

のセットが、その都度表示されること。おまけに、入力を間違えても

 

ダメ出しが出ない(今のところは)。正解を入力するまで待ってくれる。

 

 

 

「<h1>・・</ 」とかのタグで囲むと文字が大きくなった。

 

単なる段落(paragraph)というか、普通の改行だと、「<p>・・

 

</ 」とか。ちなみに全角文字や後ろ側の省略は、このブログの

 

表示を守るため♪ この記事の表示に影響が出そうで怖いのだ。

 

 

 

180808h

 

 

 

ありがたいし速く先に進めるけど、勉強の仕方としてはビミョーでは

 

ある。まあ、ゲーム的文化というか、現代の軽・薄・短・小を好む流れ

 

というか。上手く乗っていかないと冷たい反応を浴びてしまう♪

 

 

 

180808i

 

 

 

一つのセクションをクリアする度に褒めてくれて、レベルと点数が

 

アップ。完全にゲームのノリ。次のレベルまで・・・ポイントとか

 

書かれると、そこまでクリアしないと止めにくい。ところがクリア

 

すると、また次に行きたくなる。ゲーム依存症のメカニズム♪

 

 

 

180808j

 

 

 

一応、スラスラ進めたけど、この辺りまで来るともう、あんまし

 

理解しないまま、とりあえず先に行く感じになってしまった。前にも

 

書いた気がするけど、半角スペースがあるのかないのかも分かり

 

にくい。あるように見えても無しで済んだり、無いように見えても

 

必要だったり。基本的に無いことの方が多いのかも。

 

 

 

 

 

      ☆       ☆       ☆

 

180808k

 

 

 

上図はCSSの練習(らしい♪)。大きな箱の中に小さな箱が入って、

 

またその中にもっと小さな箱が入ってるような「入れ子」型の構造が

 

出て来ると、どこからどこまでが同じ箱(枠組み)なのか分かりにくい。

 

慣れの問題とか、目の訓練、あるいは脳トレか。実際は箱の代わり

 

に、インデント(行の頭を右に下げることなど)を使う。

 

 

 

ちなみに css (カスケーディング・スタイルシート)とは、

 

「HTMLの要素に対して色、大きさ、配置などを指定し、ページを

 

デザインするための言語」だと説明されてた。

 

 

 

ただランゲージ(言語)という言葉は入ってないから、HTMLを

 

補足する分離要素とかサブ規格と考える方が妥当だろう。開発の

 

経緯も、そんな感じだったようだ。そう言えばこの執筆欄でも、文字

 

の修飾には、欄の上側のボタンを使ってる。発想は同様だと思う。

 

 

 

 

 

     ☆       ☆       ☆   

 

さて、こうしたプログラミングのお勉強。字が小さめで英語だらけ、

 

アルファベットと記号だらけだから、中学・高校・大学とかの教育

 

には向いてる。特にゲーム感覚のアプリだとウケがいいはず。

 

 

 

逆に、老人ホームの類での作業にはあんまし向かないと思う。数独

 

やクロスワードパズルの方がお勧め。だからこそ逆に、高齢者が

 

スマホアプリを開発したりすると、脚光を浴びることにもなる。

 

 

 

私はとりあえず復習して、消化不良を克服した後、もうしばらく先に

 

進んでみるつもり。スピードが遅過ぎて、AIに対抗するどころか

 

どんどん差が開くだけかも♪

 

 

 

それでは今日はこの辺で。。☆彡

 

 

cf. プログラミング言語の学習アプリ「Progate」2~Java初級編

   

              (計 2716字)

    (追記36字 ; 合計2752字)   

| | コメント (0)