日別アーカイブ: 2018-08-15

夏休み課題例の解説

課題例のおさらい

前回、初秋を感じさせる風景画に、郷愁を誘うBGMを流して和歌を縦書きに表示する課題を作成しました。

そして、表現方法を中心に作り方の概要を総花的な説明に終始したきらいがあります。今回は、説明しきれなかった部分について補足説明します。

最初の目標

まず、先人が発表しているサンプルコードを入手して動作させることが理解の早道になることが多いです。車を改造して公道を走ることは許されませんが、ひな形として入手したソースコードを変更して動作させても問題は起きません。

黎明期のコンピューターでは不安定なソフトウェアを動作させるとシステム破壊などがありました。システムが進化した今日、このような心配は皆無です。異常動作が自分のアプリ以外に波及することはありません。

我田引水になりますが、ハードウェアと周辺工学の進化にともなう環境整備はコンピューターの学習者にとってたいへん恵まれた状況にあると言えるでしょう。

動作確認済みと称されるコードを走らせて、その動きを観察します。その中でたった一か所を変更して動作の変化を調べましょう。例えば、コードの一部分color:red; をcolor:blue; に変えたときの動きを注視して両者の違いを確認しましょう。赤色で表示されていたものが青色に変わったことが分かれば大きな自信になることでしょう。

超簡単例


HTMLコード表示
簡単な例です。
<span style="color:red;">赤色で表示する。</span>
簡単な例です。
赤色で表示する。

HTMLコード表示
簡単な例です。
<span style="color:blue;">赤色で表示する。</span>
簡単な例です。
赤色で表示する。
少しずつ変更して違いを確認します

HTMLコード表示
簡単な例です。
<span style="color:blue;">青色で表示する。</span>
簡単な例です。
青色で表示する。

 

夏休み課題例の解説

本題の課題例の解説に入ります。課題例を隈なく理解するためには、HTMLやJavaScriptの初歩からの手ほどきが必要ですが、母校の校歌やお気に入りの歌詞を縦書きに表示するために参考になるような説明をします。

課題例の説明

前回に示したコードの行に沿って説明します。

  1. 1~7行、HTML文書であることを宣言し、縦書きライブラリーを組み込む。体系づけて知識を吸収するには《動作させながらゼロから学べるJavaScript, 256円》、《作りながら学ぶ HTML/CSSデザインの教科書, 2800円》等を参照。
  2. 8~56行、このドキュメントの表紙や縦書きで表示する主要部。
  3. 9~17行、表紙のイメージ図、再生ボタンの扱い方、BGMの曲名、本ドキュメントの著作権表示、夏休み課題例の著作権表示例などを定義する。
  4. 18~55行、JavaScriptで定義することを宣言。。
  5. 19~20行、和歌二首の現代語訳を定義、三首めに最後のメッセージを代替。
  6. 21~23行、和歌の本文を振り仮名付きで定義。縦書きはh2vRの仕様で定義。
  7. 25~26行、音声データファイル名、曲名などを定義。
  8. 27行。曲名に対する音量、タイトル文字表示色、背景画像を定義。
  9. 28行、和歌の表示順カウンタ。
  10. 29~33行、BGMのイベントオブジェクトのプレイイベントを捕捉した時の処理を定義。
  11. 34~37行。再生完了時の処理を定義。
  12. 38~54行。再生完了イベントで起動する関数。
  13. 39行、デバッグ文。
  14. 40~44行、背景画像、textcolor、ブロックを可視化、現代語訳と和歌を設定。
  15. 45~46行、切り替えを有効化。
  16. 47行、BGMの音声データを設定。
  17. 48行、BGMのタイトルを設定。
  18. 49~52行、BGMのとき、BGM関連データを設定。
  19. 53行、開始、一首目、二首目、終わりカウンタを更新。
  20. 57行、このドキュメントを締めくくる。

 

さらなる試み

ものごとを大成させるに王道はありません。当ブログでは優しいサンプルを入手して自分のものとして吸収し、それを少しずつ拡大・拡張して高みを極めることを目標にしてきました。

自分流とオーソドックスを交互に繰り返してもよいでしょう。早く自分に見合った学習法を確立されるように祈っています。