Google Apps Scriptの外部JSONデータ連携で作る「お天気Webアプリ」作成

Google Apps Script（以下、GAS）を使って、「天気予報」の外部JSONデータを取得・加工し、カンタンな「お天気Webアプリ」を作成してみました。

GASで作る「お天気Webアプリ」チュートリアル

お手本にしたのは、paizaさんの「お天気アプリ」です。

知らなきゃ損するGoogle Apps Scriptの外部JSONデータ連携術！すべて無料で作る「お天気Webアプリ」の作り方を大公開！/paiza開発日誌

１　Google Apps Scriptを使ってみます

Googleドライブから「新規作成」「Google Apps Script」を選択。
プロジェクト名を変更します。

２　必要なファイルを準備します

コード.gsで、「myFunciton()」という空の関数を「doGet()」関数に変更して保存。
次にHTMLファイルを作成し、「h1タグ」で「Hello World!」と記述。
今度は、コード.gsファイルの「doGet()」関数に、「h1タグ」を表示するようにします。　
中に入れるのは、
var html = HtmlService.createTemplateFromFile("page");
return html.evaluate();

３　Webアプリを公開して確認しましょう

「版を管理」して保存したら「公開」から「ウェブアプリケーションとして導入」をクリック。
「Hello World!」と表示されることを確認。　　

４　「お天気情報」を取得

「Weather Hacks」を使用し、天気情報をJSON形式で取得します。

天気情報が欲しい場所の「地域番号」を探して、jsonのあとに続くcity=○○に代入します。
今回は、「名古屋」の天気を取得します。


そして、コード.gsに記述するfunction weatherData()は、下記のとおり。


蜘蛛マーク横の表示を、doGetからweatherDataに変更し、三角マークをクリック。
承認後、実行がされます。
「表示」の「ログ」を見ると、データが取得できていることが分かります。

５　「お天気Webアプリ」を作成！

page.htmlの内容を削除し、
<?   ?> （処理を記述する）と<?=   ?> （値を出力する）
でコード.gsで作った関数を呼び出したり、値を出力するようなことを可能にします。
版を管理し、webアプリ導入で、「愛知県名古屋の天気」のタイトルが表示されるのを確認。

このとき、注意しなければいけないのは、プロジェクトバージョンです。
古いバージョンのままだと、「Hello World！」のままになってしまいます。

これらを応用し整形し完成したのが、「愛知県名古屋のお天気アプリ」です。

実務でもいろいろ使えるGAS

【保存版】初心者向け実務で使えるGoogle Apps Script完全マニュアル/いつも隣にITのお仕事

真面目に仕事するのはバカ！業務効率を100倍にするGoogleAppsScriptの魅力

LINEBOTうんま五平餅(岐阜県東濃)を作成/右手にコンパス