自由研究今昔
大昔は小学校において、夏休みの自由研究が親子共同で作成する風習はありませんでした。親からアドバイスを受けるのは、ずるをしたような雰囲気がありました。
その当時は少子化からほど遠く、親はひたすら働いていた時代です。教育は学校まかせ、多くの親は「稼ぎに追いつく貧乏なし」を信じていたように思われます。
参考例を多く集める
学習月刊誌には多くの自由研究が載っているのではないだろうか。夏休みも残り少なくなってきました。
7月～8月に、コンピューター版万華鏡の作り方を6回ほどに分けて掲載しました。間に合わない人のために超簡単版を再掲します。
超簡単版万華鏡
<!DOCTYPE html>
<html>
<body>
<audio style="float:left;" src="http://aidesign.lolipop.jp/wp-content/uploads/2018/07/BADARZEWSKA-TheMaidens-Prayer.mp3"
loop controls controlslist="nodownload"></audio>
<div style='float:left; width:310px; height:50px; color:darkgreen; font-size:18px'> バダジェフスカ作曲 乙女の祈り
<span style="font-size:12px; color:navy; vertical-align:top;"><br /> R:背景色反転 △:ぼやけ変化 H:回転制御</span></div>
<DIV style="position:relative; clear:both;">
<img style="position:absolute; left:0px; top:0px;" src="http://aidesign.lolipop.jp/wp-content/uploads/2018/07/poly-99.png">
<div style="position:absolute; left:0px; top:610px;">作成者：平成小学校5年2組 山田太郎 後援：山田一平太、山田やよい。『推奨するブラウザはChrome, FireFox, Opera, Edgeです。』</div>
</DIV>
<script src="https://infosmith.biz/scripts/035-kaleidoscope/libraries/p5.min.js"></script>
<script src="http://aidesign.lolipop.jp/wp-content/uploads/2018/07/sketch2.js"></script>
</body>
</html>
上記コードをコピー＆ペーストし、tiny.htmlというファイル名で自分の記憶装置に確保します。
エクスプローラーでこのファイルにポイントを合わせクリックすると万華鏡が描画されることでしょう。
15行からなるHTMLプログラムですが、運がよければ万華鏡の画面が現れ、ゆっくり回転するはずです。
そして、再生ボタンをクリックすると《乙女の祈り》が鳴動します。
動作させるまで
ゲームなどはスイッチを入れれば、即、動作することでしょう。それが自分で作ったものが動作するのです。たった15行ですが、そこには多くのコードを参照する仕組みが組み込められています。その一部分でも齟齬があれば動作しません。
先ずは、コンピューターの仕組みに詳しい人から枠組みを作ってもらう事です。
そして毎度で恐縮ですが、絵が満載の手ほどき本を参考にすることです。
自転車の練習には、3輪車ー補助輪付き２輪車ー親から抑えてもらって走るなど段階を踏みます。
それと同じです。家族や親戚、知人にアドバイスを受けてください。
そっくり真似たものでも動作することが大切です。ハードルがたくさん立ちはだかっていて、スンナリいくことは少ないです。
解決策はネット上にあります。できれば検索の仕方をマスターして独学できるようになれば最高でしょう。
動作後にすること
艱難辛苦を経て動作に漕ぎつけたらオリジナル色を出すために、自分の名前や道筋を立ててくれた両親の名前などを載せます。それには10行目を編集します。
加えてダウンロードフリーの音楽サイトから音楽素材を入手して清涼感あふれるBGMに変更しましょう。
4行目を変更します。例題は公開サーバー上のURLアドレスですが、ローカルアドレスでも問題なく動作します。少しずつ力を付けていって機能豊富な作品を作り上げてください。
さいごに
今回のサンプルは15行からなるHTMLコードですが、重要な情報がびっしり詰まっています。
幻想的な万華鏡は12～13行のJavaScriptにより制御されます。
この稿は整った釣り堀でそれなりの魚を釣り上げるようなものです。
ゆくゆくはJavaScript言語の知識やタグを理解して、自前のプログラムコードで制御できるように期待します。