コンピューター教育
最近、文科省は2020年から小学校のプログラミング教育を必修にすると発表しました。
理工系教育の高まりを反映して電子工作の新時代が到来しました。手始めに夏休みの自由研究として、絵日記を作ってみましょう。
昨今のIT進化には、めざましいものがあります。湖面に広がる花火の光景はさながら幻想的な光のショーのようです。
玉屋、鍵屋の掛け声から始まる古くからの花火はドーンと轟音が鳴り響いたあとは、色とりどりの花火が彩りを添えていましたが、今では音響が同期して興趣を盛り上げてくれます。
そこにはコンピューターの制御なしには成し遂げられないイベントとなりました。花火のテレビ中継解説者によると、広範囲にわたる地点の同期、光と音の競演・共演を1/30秒間隔で制御していると語っていました。
カメラの主流はデジカメとなり、遠隔地への送信や写真の蓄積・取り出しには電子ファイル化が必須です。
小学校の卒業式において、、証書が納められたスマホを従来の紙の代わりに卒業証書として授与される時代となりつつあります。
ここでは、夏休み自由研究の絵日記を電子ファイルで提出する方法を述べます。
開発・実行環境の考察
ブログやホームページのことを以下はウェブサイトと呼ぶことにします。サイトは多くの人々に読んでもらうのが目的です。それには公開サーバーにアップロードすることが必須です。
しかしながら、アップロードするにはそれなりの環境を整えることが必要なので、この記事では自宅や学校のローカル環境で動作するように配慮してあります。
まず、考えること
システムを作るには、どのような条件で動作し、どこまでサポートするかを決定しなければなりません。そこで、夏休みの期間を調査しました。北海道、岩手、長野などの北部地方は24~26日、南部の九州地方では38~45日もあり、さまざまです。
共通項として8月31日が夏休み最終日が多いので、最長の45日を考え、7週の49日、7/14~8/31を夏休み日程とします。
挑戦者の経験値とアドバイザー
『習うよりは慣れろ』で初歩的な記事を掲載してきました。
今回の絵日記を作成する内容は、全角コードの漢字を扱ったり、ソースコードを分割する、ファイル構造、フォルダ、文法エラー、変数のスコープ、デバッグ方法、画像ファイルの読み込み完了タイミング、テキストファイルの編集など多岐にわたる知識が必要になることがあります。
そのためには、JavaScriptのプログラミングに精通した頼りになる人がそばにいることが望ましいと言えます。
望ましい開発環境
プログラミングはJavaScript言語を使用します。ほとんどのパソコンやスマホはJavaScriptが実行できるようになっています。ここではWindows10のノートパソコンを使って動作の確認をしています。
あなたのブラウザでJavaScriptを有効にする方法でJavaScriptの有効/無効を確認できます。お試しください。
ローカル環境における動作確認法
ソースコード一式はUsefulGuide.zipにまとめられています。ファイル階層図を右に示します。
次の段落、『サンプルコード』のソースコード一式をクリックすればUsefulGuide.zipが得られます。
これを解凍し、たとえばCドライブのSampleフォルダに格納します。では、ファイルの説明をします。
➊Medium-A.html
絵日記を表示するJavaScriptアプリケーションです。次に示すenikkiData.jsを読み込んで1つのソースコードにします。
❷enikkiData.js
絵日記を記載したテキスト形式のデータファイルです。49日ぶんを日付ごとに天候と本文を納めています。コードとデータを管理しやすいように分割されています。
❸imageフォルダ
12個の画像ファイルです。Thumbs.dbはWindowsが自動的に生成しています。
上記のようにファイル構成が完成し、望ましい開発環境で示したJavaScriptの有効を確認してMedium-A.htmlアプリケーションを実行します。
途中まで動作し、正常動作とならない場合は、ファイルの格納先の不備が原因の場合が多いです。
C:\Sample
│ enikkiData.js
│ Medium-A.html
└─image
0722.png
0723.png
0724.png
0725.png
0726.png
0727.png
0728.png
0729.png
0806.png
0807.png
0816.png
enikki.png
現状と拡張方法
サンプルの絵日記は7/22~7/29,8/6,8/7,8/16の11日ぶん、作成されています。すべての絵日記を作成するには、enikkiData.jsに天候と本文を追加します。それに加えて、日付をファイル名とした画像ファイルを用意しなければなりません。
日記の本文は2行分しか用意されていません。多くの字数を確保するには、画像表示領域を下方に移動し本文領域を拡大します。
実行例に示したコードは画像ファイルについて、アップロードしたファイルを読み込むように修正されるなど、ダウンロードで得られる内容と一部が異なります。
また、魅力的な絵日記にするには、画像編集の知識を磨くことが大切です。画像の作り方については、習うより慣れろprogramingFの画像の作り方を参考にしてください。最後に、公開したソースコードをひな形にして、ユニークな絵日記の完成を願っています。
サンプルコード
ソースコード一式をクリックしてダウンロードします。
実行例
《自由研究-絵日記を作る2,2016-08-20》Ver 0.03,©Aidesign,2016
■の日付を指定して日記を表示。□の日付の日記は未完。