« 急用連続と歯茎痛の中、台風小雨ラン | トップページ | 「犯罪者は外見で判断できる」、ロンブローゾの学説と著書~『高嶺の花』第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に対抗するどころか

 

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

 

 

 

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

 

 

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

   

              (計 2716字)

    (追記36字 ; 合計2752字)   

|

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

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

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

コメント

コメントを書く



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




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