« 急用連続と歯茎痛の中、台風小雨ラン | トップページ | 「犯罪者は外見で判断できる」、ロンブローゾの学説と著書~『高嶺の花』第5話 »

プログラミング言語の学習アプリ「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に対抗するどころか

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

 

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

 

              (計 2716字)

|

« 急用連続と歯茎痛の中、台風小雨ラン | トップページ | 「犯罪者は外見で判断できる」、ロンブローゾの学説と著書~『高嶺の花』第5話 »

「パソコン・インターネット」カテゴリの記事

プログラミング」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




« 急用連続と歯茎痛の中、台風小雨ラン | トップページ | 「犯罪者は外見で判断できる」、ロンブローゾの学説と著書~『高嶺の花』第5話 »