日別アーカイブ: 2018-10-22

習うより慣れよ再び

プログラミング

学ぶ前に真似ぶ

動物はあまねく親や先輩を真似ることからは始まります。鳥などの小動物も巣立ちまでは親が運んでくる食料で生き延びますが、やがて自立が待ち受けています。

先進国をひたすら参考にして成長しやがて自ら切り開く時代に突入して久しい時が流れました。プログラミング教育が小学校において必修化になる時期が近づいています。

プログラミングについては、プログラミング言語開発に累計数十年、職業として携わり機械語、アセンブリ言語、高級言語と数えきれないほど触れてきました。

お礼を込めてブログでプログラミングを取り上げています。今回は学び方の一つについて再び語ります。

言語について

人は母国語をもっています。プログラミング言語はその一つと言っても間違いではありません。人間の言葉には融通性がありますが、機械が理解するには厳密性が要求されそれで嫌になる人がおおぜいいます。時代が進めばそれらも改善されるでしょう。

芸術家肌など新しいことに挑戦してとん挫する人は、あまりにまじめに考え過ぎます。理想をめざしたエスペラント語が世界共通語にはなりませんでした。あまりに理想的では暖かみがありません。プログラミング言語は良いと思ったものを一通り理解するのが肝心です。

たとえその言語がすたれても次に隆盛を極める言語は前の欠点などを補って成立するので、だいたい似通ったものになり取っつきやすいです。その意味でも現在、飛ぶ鳥を落とす勢いと言われる言語に触れることは悪くありません。

HTMLとJavaScript

ブログやホームページを記述する言語にHTMLがあります。JavaScriptはその仲間です。それらは無料で入手できるうえ、解説書やサンプルコードなども無料で役立つものが出回っています。特定のメーカーが開発したツールでなく公正な世界中の関係者によって管理されているので、予算的にも教育機関が採用する言語には妥当なところと考えます。

取り掛かりのサンプル

取り掛かりのサンプルとして、『世界時計を作る』に挑戦します。世界の地図の指定した地点の現在時刻を表示するものです。第一回は日本の標準時刻を1秒ごとに表示する課題です。

作成のポイント

  1. htmlで記述することを宣言。
  2. 音声オブジェクトを定義して再生する。
  3. 曲名や著作権を表示する。
  4. 再生や音声制御のユーザーインターフェースを表示する。
  5. 一秒間隔で起動する関数を定義する。
  6. 地球儀やビッグベンの時計を表示する。
  7. 現在地を表示する。
  8. 年月日時分秒を表示する。

 

サンプルコード

<!DOCTYPE html>
<html>
<body onLoad="setInterval('timerX()', 1000);">
<div><span style="color:deepskyblue; font-size:32px;">『Warmth』by MFP</span>&nbsp;DOVA-SYNDROMEより</div>
<audio style="float:left" src="https://aidesign.lolipop.jp/wp-content/uploads/2018/10/Warmth.mp3" controls loop controlsList="nodownload">
</audio>
<div id="ver" style="float:left; width:85px; height:55px; margin-left:5px; font-size:11px; font-weight:bold;">&copy;TacM,2018<BR>Ver0.01</div>
<DIV id="clock" style="clear:both; position:relative; width:600px; height:400px; background:darkgreen; color:aliceblue; font-family:ＭＳ 明朝">
<div style="padding-top:30px; margin-left:45px; font-size:48px; font-weight:bold;">&#x1F30F;&ensp;世界時計を作る
<img src="https://aidesign.lolipop.jp/wp-content/uploads/2018/10/BigVen.png" width="46" height="59" style="margin-left:8px; margin-bottom:-6px">
</div>
<Div style="position:absolute; left:118px; top:140px; width:364px; height:200px; background:lemonchiffon; color:midnightblue; font-size:44px;">
<div id="clk1" style="position:absolute; left:10px; top:3px; color:tomato;">Tokyo（東京）</div>
<div id="clk2" style="position:absolute; left:10px; top:55px;">2018/10/21（日）</div>
<div id="clk3" style="position:absolute; left:10px; top:105px; font-size:80px;">09:30:15</div>
</Div>
</DIV>
</body>
<script type="text/javascript" charset="Shift_JIS">
function timerX(){												//年月日（曜日） 時分秒
  var nowTime = new Date();										<!-- 日付情報 -->
  var sec = nowTime.getSeconds();								<!-- 秒 -->
  var min = nowTime.getMinutes();								<!-- 分 -->
  var hour = nowTime.getHours();								<!-- 時 -->
  var year = nowTime.getFullYear() ;							<!-- 年 -->
  var month = letter2( nowTime.getMonth() + 1 );				<!-- 月 -->
  var date = letter2( nowTime.getDate() ) ;						<!-- 日 -->
  var weekDay = "（"+"日月火水木金土".substr(nowTime.getDay(), 1)+"）";		<!-- 曜日(0-6) -->
  var datex = year+"/"+month+"/"+date+weekDay+"\n";				//表示用(2016/07/02(土) 15:57:01
  document.getElementById("clk2").innerHTML = datex;
  document.getElementById("clk3").innerHTML = letter2(hour)+":"+letter2(min)+":"+letter2(sec);
}
function letter2(num) {return ('0' + num ).slice(-2);}			<!-- send '01' -->
</script>
</html>

動作例

《Warmth》思いやり、優しさというタイトルのBGM付きです。



『Warmth』by MFP DOVA-SYNDROMEより

©TacM,2018
Ver0.01

🌏 世界時計を作る

Tokyo（東京）
2018/10/21（日）
09:30:15





次へのステップ

今回は日本の現在時刻を表示しました。次回は世界地図上に指名した地点の現在時刻を表示する予定です。