1.モチベーション

今日の天気や明日の天気を知りたい時は、スマホの専用アプリで天気を調べることが多いと思いますが、スマホのアプリであると画面から数多くのアプリの中からお天気アプリを探し立ち上げるという作業が必要になります。この作業をいつも億劫に感じていました・・。そこで常時天気予報を表示しているモニターがあれば、わざわざ立ち上げる手間も省け便利だと思い、今から紹介する作品を作りました。

2.製作した作品

現在時刻が15時より前ならば、本日の天気と最高気温と最低気温を表示する。
現在時刻が15時以降ならば、明日の天気と最高気温と最低気温を表示する。
1時間に1回情報が自動更新される。
「更新」ボタンをクリックすれば情報が更新される。
モニターに天気予報は常時表示されている。

3.システム構成

Vue.jsは表示部分を担当し、APIにアクセスしお天気データを取得する動作はnode.js上で動かすjsファイルにて実装することにしました。CORS policy(ajaxをクロスドメインで実行しようとするとAPI側でアクセス拒否される)によりVue.jsから直接外部のお天気APIにアクセスはできません。よって、node.js上のjsファイルを介して、お天気APIよりお天気情報を取得することにしました。
APIにアクセスしお天気データを取得する動作はnode.js上のjsファイルにて実装することにしました。Vue.jsからnode.js上のjsファイルにはライブラリaxiosを使用しております。vue.jsにてPromise形式にてAPIにアクセスするライブラリとしては定番のものです。また使用しているお天気APIは、livedoorのお天気WebサービスAPIです。使用方法は、リンク先に記載されていますのでご覧ください

4.使用したデバイス

ラズベリーパイゼロWHと、ラズベリーパイ専用3.5インチモニターを調達してきました。
下記サイトより購入することができます。

・ラズベリーパイゼロWH
・ELECROW 3.5インチ HDMI液晶モニター

ELECROW 3.5インチ HDMI液晶モニターの設定方法はここでは言及しませんが、こちらのサイトに設定方法が書いてあります。

5.ソースコード

5-1 Vue-CLIのインストール

環境構築には、Vue-CLIのインストールが必要です。Vue-CLIのインストールはこちらに記載しています。

Vue-CLIのインストールが完了すると、下記図にて記載のディレクトリが生成されていると思います。

5-2 コードファイルの配置

こちらに必要ファイルをアップロードしました。
Otenki.vueは、Vue-CLIの /scr/componentsに配置してください。
otenki.jsは、node.jsが動作する任意の場所にインストールしてください。