どうも、まさとらん（@0310lan）です。
みなさんは、「Google Apps Script（以下、GAS）」を使ったことがあるでしょうか？
昔は、スプレッドシートのマクロ的な使い方であったり、Googleサービスを連携するために使うことが多かったような気がします。
しかし、今ではGASを単体で利用できるようになり、簡単なWebアプリを作って公開したり、スプレッドシートを「データベース」代わりに使ったりなど、かなり柔軟な利用ができるようになりました。
そこで今回は、簡単なサンプル事例として「天気予報」の外部JSONデータをGASで取得&加工し、シンプルな「お天気Webアプリ」を作る方法をご紹介しようと思います！
GASは、独自に提供されているAPIを除けば、ごく普通のJavaScriptなので誰でも扱いやすいプログラミングが出来るようになっています。
■Google Apps Scriptを使ってみよう！
それでは、早速GASを使ってみましょう。
使い方は簡単で、普段利用しているGoogleドライブを開いたら、「新規」→「Google Apps Script」を選択するだけです！
初めて利用する人は、もしかしたら「Google Apps Script」の項目が表示されてないかもしれません。
そんな時は、「アプリを追加」をクリックして表示されるリストの中から選択しておきましょう。
そして、自動的にGASを利用するための「コードエディタ」が表示されたらOKです！
あとは、このエディタを使ってどんどんプログラミングしていきましょう！
それと、忘れないうちに任意の「プロジェクト名」も入力しておくと良いでしょう。
■必要なファイルを準備しよう！
さて、GASでプログラミングする準備が整いましたので、まずは恒例の「Hello World」を表示するだけのWebアプリを作ってみましょう！
先ほどの「コードエディタ」には、あらかじめ「コード.gs」ファイルが作られており、その中に「myFunciton()」という空の関数が作られています。
まずは、これを「doGet()」関数に書き換えて保存します。
GASを使ったプログラムでは、まずこの「doGet()」関数が一番最初に自動で読み込まれるようになっています。
そのため、Web上に表示させたいコンテンツを、この「doGet()」内に入れるようにしていきます。
次に、HTMLファイルを作成しましょう！
ファイルメニューの「新規作成」から選ぶことができます。
ファイル名は好きなモノで構いませんが、今回は「page.html」としました。
GASのHTMLファイルでは、基本的に「body要素」内のHTMLを記述すればOKなので、デフォルトのコードを一度削除して「h1タグ」で「Hello World!」を記述しましょう。
あとは、先ほどの「コード.gs」ファイル内にあった「doGet()」関数に、この「h1タグ」を表示するようにプログラミングすれば良いわけです。
ただ、プログラミングと言っても、追加するのはたったの2行です！
// コード.gs function doGet() { // 「page.html」を読み込んで、利用可能な状態にする var html = HtmlService.createTemplateFromFile("page"); // HTMLをレンダリング return html.evaluate(); }
GASでは、HTMLを扱うためのさまざまな機能をまとめた「HtmlService」という独自オブジェクトが提供されており、これを利用することで簡単にWebアプリが作れるようになっています。
その中で、今回は「createTemplateFromFile()」という機能を使って、先ほど作成した「page.html」を読み込み、「evaluate()」を使ってレンダリングされたHTMLを返すようにしています。
これで、「Hello World」を表示するだけの簡単なWebアプリは完成です。
■Webアプリを公開してみよう！
それでは、今作ったWebアプリを実際に公開してみましょう！
まずは、「バージョン」を作成するため、ファイルメニューから「版を管理」をクリックします。
今回作るバージョンの「簡単な説明」を入力して保存します。
最後に、公開メニューから「ウェブアプリケーションとして導入」をクリック！
先ほど作った「➀バージョン」を指定し、アクセスできるユーザーを「➁全員(匿名ユーザーを含む)」にして「導入」ボタンをクリックします。
すると、URLが生成されるのでコピーしてブラウザからアクセスしてみましょう！
見事に、「h1タグ」へ記述した「Hello World!」が表示されていますね！
URLをシェアすれば、通常のWebサイトと同じように、誰でも閲覧することが出来るので便利です。
■「お天気情報」を取得してみよう！
さて、基本的なGASのプログラミングと公開方法が分かったところで、今回作るサンプルデモで利用する「お天気情報」の取得に挑戦してみましょう！
登録不要で、天気情報をJSON形式で取得できる定番サービスとして、今回は「Weather Hacks」を使ってみました。
使い方はとても簡単で、以下のURLに天気情報が欲しい場所の「地域番号」を付与するだけで、JSONデータを取得できます。
http://weather.livedoor.com/forecast/webservice/json/v1?city=【地域番号】
「地域番号」は、コチラから確認することができ、例えば「神奈川県横浜市」の天気情報を取得する場合はこうなります。
http://weather.livedoor.com/forecast/webservice/json/v1?city=140010
あとは、GASでこのURLを使ってJSONデータを取得し、欲しい情報だけ抽出すれば良いですね！
そこで、1つ新しい関数「weatherData()」を作成しましょう。
この中に、JSONデータを取得するプログラムを書いていきます。
GASでは、外部ドメインのJSONデータを取得する方法として、「UrlFetchApp」という機能が提供されています。
「fetch()」に、先ほどの天気情報を取得するURLを記述すればOK！
// コード.gs function weatherData() { var url = "http://weather.livedoor.com/forecast/webservice/json/v1?city=140010"; // 天気情報のJSONデータを取得 var json = UrlFetchApp.fetch(url).getContentText(); var jsonData = JSON.parse(json); // ログの表示 Logger.log(jsonData); return jsonData; }
「Logger.log()」を記述することで、取得したJSONデータのログを確認することが出来ます。
上部メニューの関数を「➀weatherData」に設定し、「➁実行ボタン」をクリックしてみてください。
初回のみ、外部ドメインにアクセスする許可を求められると思いますので、承認しておきましょう。
関数が実行されたら、表示メニューの「ログ」を選択するか、キーボードの「Ctrl + Enter」を叩くことでログが表示され、しっかりとJSONデータが取得できているのが分かります！
この中から、必要な情報だけ抽出してWebに表示させれば、今回のサンプルデモは作れそうですね！
■「お天気Webアプリ」を作ろう！
さて、JSONデータは取得できましたが、これをHTMLファイルの「page.html」で利用できなければWeb上に表示することが出来ませんよね？
このような場合にGASでは、専用のタグをHTML内に記述することで、「コード.gs」で作った関数を呼び出したり、値を出力するようなことが可能になっています。
それでは、「page.html」内を全て削除して、以下のコードを記述してみましょう！
<!-- page.html -->
<?
// 「コード.gs」のweatherData()を実行しJSONを取得
var data = weatherData();
// JSONデータ内にある「title」要素を取得
var title = data["title"];
?>
<!-- 取得した「title」要素をh1タグで表示 -->
<h1><?= title ?></h1>
このコードでは2種類の専用タグを利用しており、その基本的な使い方は以下のとおり！
１，<? ?> （処理を記述する） ２，<?= ?> （値を出力する）
そして、再度バージョンを作成＆公開し、ブラウザで確認すると取得したJSONデータ内にある「title」要素の文字列が見事に表示されているのが分かります！
さらに、GASはHTMLの「DOM要素」を簡単に追加するため、「output.append()」という機能が提供されています。
これを使って、天気情報の概要を表示するサンプルコードは以下のとおり！
<!-- page.html -->
<?
output.append('<p>' + data["description"]["text"] + '</p>');
?>
このように書くと、新しく「pタグ」を生成したうえで天気情報の概要を表示することが出来るわけです。
これを応用すれば、少し複雑なJSONデータを整形しながらHTMLコンテンツを動的に生成することも可能です。
<!-- page.html --> <ul> <? var count = data["forecasts"].length; // 天気情報のフォーキャストをli要素で生成 for(var i=0; i<count; i++) { output.append('<li>' + data["forecasts"][i]["dateLabel"] + ' ' + data["forecasts"][i]["date"] + '<br />' + data["forecasts"][i]["telop"] + '<br />' + '<img src="' + data["forecasts"][i]["image"].url + '">' + '</li>'); } ?> </ul>
あとはスタイルを整えるだけで、オリジナルの「お天気Webアプリ」の完成です！
ぜひ、URLをシェアして友人に自慢してみましょう！
今回作成したサンプルデモの全ソースコードはコチラから閲覧できます。
github.com
■paizaについて
paizaでは、プログラミングスキルチェック問題(14言語に対応)を多数ご用意いたしております。もちろん今回使用しているJavaScriptにも対応しておりますので、「JavaScriptでプログラミング問題を解いてみたい」「自分のスキルを試してみたい」という方にもピッタリです！
paizaでプログラミング問題を解くと、結果によりS・A・B・C・D・Eの６段階で自分のスキルのランクが分かります。問題はレベルごとに分かれており、初心者から上級者の方まで挑戦していただけますので、自分のプログラミングスキルを客観的に知りたいという方は是非チャレンジしてみてください！！
プログラミング問題による学習コンテンツ(paiza Learning)もございますので、「まったくのプログラミング未経験者です」「初心者なのでプログラミング学習から始めたいな」という方もぜひご利用ください。
さらに、paizaが運営する無料オンラインプログラミング実行環境サービス「paiza.IO (パイザ・アイオー)」では、JavaScriptはもちろん、多数プログラミング言語のプログラミングが面倒な環境構築なしに無料でできますのでぜひご利用ください！
■まとめ
今回ご紹介したように、GASを使うと簡単にWebアプリを作って公開するところまでを手軽に無料で実施できるのが分かると思います。
また、今回はHTMLコンテンツを表示するためにGASが提供する「HtmlService」を使いましたが、「ContentService」という機能を使えばJSONデータを「JSONP」形式に変換して吐き出す処理も簡単に作れるので、より活用範囲が広がると思います。
他にも、Googleサービスと連携したり、プログラムを定期実行させるような使い方も可能なので、ご興味ある方はぜひトライしてみてください！
paizaは、技術を追い続けることが仕事につながり、スキルのある人がきちんと評価される場を作ることで、日本のITエンジニアの地位向上を目指したいと考えています。
自分のスキルを磨いていきたいと考えている方におすすめなのが「paizaラーニング」。オンラインでプログラミングしながらスキルアップできる入門学習コンテンツです。初心者でも楽しくプログラミングの基本を学ぶことができます。
そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
