ゼロからはじめてみる日本語プログラミング「なでしこ」(9) 6行でオリンピックまであと何日？

2020年の東京オリンピックを心待ちにしている人も多くいることでしょう。そうであれば、あと何日でオリンピックが始まるのか気になりませんか？予定日まであと何日かが、ぱっと数字で分かると便利です。そこで、今回は、オリンピックまであと何日かをカウントダウンするツールを作ってみましょう。

2020年の東京オリンピックの開会式は7月24日なので、今日からその日までをカウントするツールを作ってみましょう。まずは、Webブラウザで、なでしこ3の簡易エディタにアクセスして、以下のプログラムを入力して実行してみましょう。

 イベント日＝「2020/07/24」。
 計算日＝今日。
 # 計算
 イベントS=イベント日をUNIXTIME変換。
 計算S＝計算日をUNIXTIME変換。
 日数＝(イベントS - 計算S) / (24 * 60 * 60)
 #結果を表示
 「東京オリンピックまで、あと{日数}日」を表示。

オリンピックまで何日かを計算するプログラム

プログラム改良のヒント

このプログラムは、何もオリンピックの日だけを計算しているわけではないので、資格試験の日や、テストの日、締め切り日など、他のイベントにも使うことができます。プログラムの先頭一行目の日付を「年/月/日」で入力すれば、その日付まで、あと何日かを計算することができます。例えば、2018/12/30であれば、以下のように書き換えます。

 イベント日＝「2018/12/30」。

プログラムの仕組み

それでは、このプログラムの仕組みを紹介しましょう。このプログラムのポイントとなるのが『UNIXTIME変換』命令です。この命令を使うと、特定の日時を、1970年1月1日0時0分0秒からの経過秒に変換します。日時が秒に揃うと、計算がとてもしやすくなります。

つまり、二つの日付を秒で表したものを用意して、その差を1日分の秒で割ると、イベントまで「あと何日か」を求めることができるというわけです。日数計算の部分で、日付の差を、(24 * 60 * 60)、つまり、一日分の秒(86400)で割ると、あと何日かを調べることができます。

自分のブログになでしこガジェットを貼り付けてみよう

せっかく自分で作ったプログラムですから、なでしこのWebサイトだけではなく、自分のブログに作成したガジェットを貼り付けることができたら便利です。なでしこ3のプログラムは、HTMLの中に記述することもできます。

ブログなどに埋め込むためには、そのブログでJavaScriptが使えることが条件となります。もし、JavaScriptが使えるなら、以下のコードを記述することで、なでしこ3のプログラムを動かすことができます。

 <script src="https://nadesi.com/v3/0.1.0/release/wnako3.js?run"></script>
 <script type="なでしこ">
 ### ここに「なでしこ3」のプログラムを記述
 </script>

ですから、HTMLファイルから、今回のプログラムを実行するには、以下のようなプログラムを記述することになります。以下のプログラムをテキストエディタに記述して「countdown.html」と言うファイル名で保存します。そして、WebブラウザにHTMLファイルをドラッグ＆ドロップするとプログラムが実行されます。

ソースコード: countdown.html(countdown.lzh)

 <!DOCTYPE html>
 <html><head><title>カウントダウン</title></head><body>

 <!-- ブログパーツここから -->
 <script src="https://nadesi.com/v3/0.1.0/release/wnako3.js?run"></script>
 <div id="msg"></div>
 <script type="なでしこ">
 イベント日＝「2020/07/24」。
 計算日＝今日。
 # 計算
 イベントS=イベント日をUNIXTIME変換。
 計算S＝計算日をUNIXTIME変換。
 日数＝(イベントS - 計算S) / (24 * 60 * 60)
 #結果を表示
 「#msg」に「東京オリンピックまで、あと{日数}日」をDOMテキスト設定。
 </script>
 <!-- ブログパーツここまで -->

 </body></html>

ブラウザで実行してみたところ

もし、ブログパーツとしてブログに貼り付ける場合は、「」から「」の間を貼り付けてください。

HTMLに実行結果を出力する方法

簡易なでしこエディタのプログラムと違うのは、実行結果の表示先です。まず、HTMLのどこに結果を表示するのかを決めておきます。今回のプログラムでは、なでしこのプログラム以外の部分に以下のタグを記述しています。ここに結果を表示します。ポイントは、id="msg"と書いていることです。HTMLでは、個々のタグを区別するためにid属性を付与できるようになっています。

 <div id="msg"></div>

そして、なでしこのプログラムで、「表示」命令で結果を出力していた部分を以下のように書き換えました。

 # 「東京オリンピックまで、あと{日数}日」を表示 ↓以下に書き換え
 「#msg」に「東京オリンピックまで、あと{日数}日」をDOMテキスト設定。

『DOMテキスト設定』命令を使うと、HTMLのDOM要素(個別のタグ)に対してテキストを設定できます。「#msg」と書くことで、id="msg"と書いたタグを選んでテキストを設定します。

まとめ

以上、今回は、なでしこで、オリンピック（あるいは特定のイベント）までのカウントダウンプログラムを作ってみました。コメントを除けばわずか6行のプログラムで、カウントダウンツールが作れました。日付の部分を変更したり、プログラムを改造したりして、理解を深めてみてください。また、自分のブログに貼り付けたりして、利用してみてください。