今回は気象情報を取得し、天気に応じてデザインが変わるデジタル時計を作ってみましょう。PC上とは言え時計を作るのは楽しい作業です。天気の要素を加えて、面白いコンセプトの時計を作ってみましょう。天気情報を得るのに天気APIを利用するので、Web APIの使い方も紹介します。

  • 天気に応じてデザインが変わる時計を作ってみよう

    天気に応じてデザインが変わる時計を作ってみよう

4行で作るデジタル時計

最初にデジタル時計を作ってみましょう。最低限、時間を表示するだけの時計であれば4行で作れます。なでしこ3簡易エディタを開いて、以下のプログラムを貼り付けて実行してみましょう。

時計ラベル＝「---」のラベル作成。
1秒タイマー開始した時には
　　時計ラベルに今をテキスト設定。
ここまで。

プログラムを書いて「実行」ボタンを押すと、小さなラベルに現在時刻が表示され、毎秒更新されます。

  • 4行で作ったデジタル時計

    4行で作ったデジタル時計

プログラム的には、最初にラベルを作成し、1秒毎に実行されるタイマーを作成してラベルを更新するというシンプルな仕組みです。

あとは、このラベルにスタイルを設定すれば、好きな色とサイズの時計になります。少し長くなりますが、スタイルを設定してみましょう。

5回、改行作成。
時計ラベル＝「---」のラベル作成。
1秒タイマー開始した時には
　　時計ラベルに今をテキスト設定。
ここまで。
時計ラベルに{
  "文字サイズ": "120px",
  "背景色": "#fff0f0",
  "余白":"10px",
  "マージン":"20px"
}をDOMスタイル一括設定。

実行すると、以下のように文字サイズが大きくなり背景色が桜色になります。

  • デジタル時計にスタイルを設定したところ

    デジタル時計にスタイルを設定したところ

プログラムのポイントは、『DOMスタイル一括設定』を使っているところです。文字サイズや背景色を設定することで、任意のスタイルを設定できます。このスタイルにはHTMLのCSSの値を設定できます。

天気によってデザインを変えてみよう

ここまでで、デジタル時計作成の基本が分かったことでしょう。次に、天気によってデザインを変更するようにしてみましょう。

今回、天気を作成するのに、筆者が公開している「クジラ週間天気API」を使ってみましょう。これは、気象庁が公開している週間天気予報をWeb APIの形で使えるように整形したものです。Web APIとはWeb経由で実行する関数のようなもので、自作のプログラムに組み込むことを目的に提供されているものです。なでしこからも手軽に利用できます。

  • 天気APIのWebサイト

    天気APIのWebサイト

天気APIの使い方

最初に簡単に天気APIの使い方を確認してみましょう。以下のプログラムは、東京の週間天気予報を表示します。簡易エディタで実行してみましょう。

API=「https://api.aoikujira.com/tenki/week.php?fmt=json&city=東京」
APIにAJAX送信した時には
　　対象を表示。
ここまで。

実行すると、Ajax(非同期通信)を利用してで天気APIにアクセスし、東京の週間天気予報を取得します。以下のように表示されます。

  • AjaxでWeb APIを呼び出したところ

    AjaxでWeb APIを呼び出したところ

なお、プログラムの一行目の末尾にある「city=東京」のところを「city=大阪」のように変えると、大阪の天気を利用できます。

今のところ、クジラ週間天気APIでは、東京、名古屋、大阪など22都市の天気を取得できます。こちらに対応都市の一覧があります。

ところで、このWeb APIを使うと一週間分の天気が表示されますが、時計から使うのは直近の天気だけです。必要な情報だけを取り出してみましょう。

API=「https://api.aoikujira.com/tenki/week.php?fmt=json&city=東京」
APIにAJAX送信した時には
　　対象をJSONデコードして天気に代入。
　　天気["東京"][0]["forecast"]を表示。
ここまで。

これを実行すると「晴れ時々曇り」や「雨」など、天気だけが表示されます。ポイントは3行目です。先ほど見たとおり、天気APIの結果はJSON形式で得られるので、「JSONデコード」命令でJSONをなでしこのオブジェクトに変換します。

そして、JSONの構造に応じて、ハッシュ"東京"の配列0番目にあるハッシュ"forecast"の値を表示すると、天気情報が取得できるわけです。

天気の結果を時計に組み込もう

それでは、ここまで調べたことを組み合わせて、デジタル時計に天気情報を組み込んでみましょう。以下のプログラムを簡易エディタに書き込んで動作を確かめてみましょう。

# --- 画面設計 --- (*1)
6回、改行作成。
時計ラベル＝(今)のラベル作成。
3回、改行作成。
情報ラベル＝「」のラベル作成。
# --- 天気APIを呼び出す --- (*2)
天気＝「」。
都市＝「東京」
API=「https://api.aoikujira.com/tenki/week.php?fmt=json&city={都市}」
APIにAJAX送信した時には
　　対象をJSONデコードしてJに代入。
　　天気＝J[都市][0]["forecast"]
　　天気スタイル設定。
ここまで。
# --- 時計を更新する --- (*3)
1秒タイマー開始した時には
　　時計ラベルに今をテキスト設定。
ここまで。
# --- 天気に応じたスタイルを設定 --- (*4)
●天気スタイル設定とは
　　情報ラベルに天気をテキスト設定。
　　背景色は「#ffe0e0」。
　　文字色は黒色。
　　天気で「雨」が何文字目。
　　もし、それが1以上ならば
　　　　背景色は青色
　　　　文字色は白色
　　ここまで。
　　時計ラベルに{
　　　　"背景色": 背景色,
　　　　"色": 文字色,
　　　　"余白":"10px",
　　　　"マージン":"20px",
　　　　"文字サイズ": "130px"
　　}をDOMスタイル一括設定。
ここまで。

プログラムを実行すると、天気に応じて以下のように表示されます。

  • 晴れた時のデザイン

    晴れた時のデザイン

  • 雨の時のデザイン

    雨の時のデザイン

プログラムを確認してみましょう。(＊1)の部分では改行とラベルを組みあせて画面設計を行います。今回は「時計ラベル」に加えて天気情報を表示する「情報ラベル」の二つを作成します。

そして、(＊2)では天気APIを呼び出します。Ajaxを利用して天気APIにアクセスして、天気情報を取得します。天気が取得できたら、(＊4)の天気スタイル設定を実行します。

(＊3)の部分ではデジタル時計の仕掛けを作ります。1秒ごとにラベルの内容を現在時刻で置き換えるというものです。

最後、(＊4)の部分で天気に応じたデザインを設定します。今回は、雨が降るかどうかだけでデザインを切り替えます。ここでは、背景色と文字色だけを変更します。

まとめ - 天気と組み合わせて楽しく作る時計

今回は、天気情報と時計を組み合わせたガジェットを作ってみました。Web APIは非常に手軽に使えるので、活用すると自分のプログラムに面白い仕掛けを組み込むことができます。

今回のプログラムは改良の余地がたくさんあります。天気には、雪や曇りの場合もあるので、状況に応じてより複雑に色を変化させると面白いでしょうし、背景色や文字色だけでなく、他のスタイルも変更したり、画像を表示するようにすると、よりアート的に楽しいものになるでしょう。試してみてください。

ちなみに、安価で手のひらサイズのPC、Raspberry Piを使って時計を作ることもできます。Raspbery Piなら省エネなので、電気代もそれほどかかりませんし、なでしこ3も動かすことができます。この夏の自由研究として、自作の時計ガジェットを作るのも楽しそうです。

自由型プログラマー。くじらはんどにて、プログラミングの楽しさを伝える活動をしている。代表作に、日本語プログラミング言語「なでしこ」 、テキスト音楽「サクラ」など。2001年オンラインソフト大賞入賞、2004年度未踏ユース スーパークリエータ認定、2010年 OSS貢献者章受賞。技術書も多く執筆している。