【連載】

ゼロからはじめてみる日本語プログラミング「なでしこ」

9 6行でオリンピックまであと何日?

9/13

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行のプログラムで、カウントダウンツールが作れました。日付の部分を変更したり、プログラムを改造したりして、理解を深めてみてください。また、自分のブログに貼り付けたりして、利用してみてください。

9/13

インデックス

連載目次
第13回 SNSで縦書きしたい - テキスト回転ツールを作ろう
第12回 文字数カウントツールを作ってみよう
第11回 日本語で肥満判定ツールを作ってみよう
第10回 日本語プログラミングでビンゴマシンを作ってみよう
第9回 6行でオリンピックまであと何日?
第8回 日本語プログラミングで年齢早見表
第7回 なでしことExcelで9月始まりのカレンダーを作ろう
第6回 数当てゲームを作ってみよう
第5回 単位変換ツールを作ってみよう
第4回 タートルグラフィックスでお絵かきしよう(その2)
第3回 タートルグラフィックスでお絵かきしよう(その1)
第2回 プログラミングにおける変数の役割について
第1回 日本語プログラミング言語「なでしこ」を始めよう

もっと見る



人気記事

一覧

イチオシ記事

新着記事