paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

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

f:id:paiza:20160808195857j:plain
どうも、まさとらん(@0310lan)です。

みなさんは、「Google Apps Script(以下、GAS)」を使ったことがあるでしょうか?

昔は、スプレッドシートのマクロ的な使い方であったり、Googleサービスを連携するために使うことが多かったような気がします。

しかし、今ではGASを単体で利用できるようになり、簡単なWebアプリを作って公開したり、スプレッドシートを「データベース」代わりに使ったりなど、かなり柔軟な利用ができるようになりました。

そこで今回は、簡単なサンプル事例として「天気予報」の外部JSONデータをGASで取得&加工し、シンプルな「お天気Webアプリ」を作る方法をご紹介しようと思います!
f:id:paiza:20160808200047j:plain

GASは、独自に提供されているAPIを除けば、ごく普通のJavaScriptなので誰でも扱いやすいプログラミングが出来るようになっています。

Google Apps Scriptを使ってみよう!

それでは、早速GASを使ってみましょう。

使い方は簡単で、普段利用しているGoogleドライブを開いたら、「新規」→「Google Apps Script」を選択するだけです!
f:id:paiza:20160808200124j:plain


初めて利用する人は、もしかしたら「Google Apps Script」の項目が表示されてないかもしれません。

そんな時は、「アプリを追加」をクリックして表示されるリストの中から選択しておきましょう。
f:id:paiza:20160808200134j:plain


そして、自動的にGASを利用するための「コードエディタ」が表示されたらOKです!
f:id:paiza:20160808200222j:plain
あとは、このエディタを使ってどんどんプログラミングしていきましょう!


それと、忘れないうちに任意の「プロジェクト名」も入力しておくと良いでしょう。
f:id:paiza:20160808200245j:plain


■必要なファイルを準備しよう!

さて、GASでプログラミングする準備が整いましたので、まずは恒例の「Hello World」を表示するだけのWebアプリを作ってみましょう!

先ほどの「コードエディタ」には、あらかじめ「コード.gs」ファイルが作られており、その中に「myFunciton()」という空の関数が作られています。

まずは、これを「doGet()」関数に書き換えて保存します。
f:id:paiza:20160808200345j:plain
GASを使ったプログラムでは、まずこの「doGet()」関数が一番最初に自動で読み込まれるようになっています。

そのため、Web上に表示させたいコンテンツを、この「doGet()」内に入れるようにしていきます。


次に、HTMLファイルを作成しましょう!

ファイルメニューの「新規作成」から選ぶことができます。
f:id:paiza:20160808200401j:plain


ファイル名は好きなモノで構いませんが、今回は「page.html」としました。
f:id:paiza:20160808200411j:plain


GASのHTMLファイルでは、基本的に「body要素」内のHTMLを記述すればOKなので、デフォルトのコードを一度削除して「h1タグ」で「Hello World!」を記述しましょう。
f:id:paiza:20160808200423j:plain
あとは、先ほどの「コード.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アプリは完成です。

※参考
HtmlService丨Google Apps Scriptドキュメント

■Webアプリを公開してみよう!

それでは、今作ったWebアプリを実際に公開してみましょう!

まずは、「バージョン」を作成するため、ファイルメニューから「版を管理」をクリックします。
f:id:paiza:20160808205328j:plain


今回作るバージョンの「簡単な説明」を入力して保存します。
f:id:paiza:20160808205338j:plain


最後に、公開メニューから「ウェブアプリケーションとして導入」をクリック!
f:id:paiza:20160808205349j:plain


先ほど作った「➀バージョン」を指定し、アクセスできるユーザーを「➁全員(匿名ユーザーを含む)」にして「導入」ボタンをクリックします。
f:id:paiza:20160808205406j:plain


すると、URLが生成されるのでコピーしてブラウザからアクセスしてみましょう!
f:id:paiza:20160808205417j:plain


見事に、「h1タグ」へ記述した「Hello World!」が表示されていますね!
f:id:paiza:20160808205434j:plain
URLをシェアすれば、通常のWebサイトと同じように、誰でも閲覧することが出来るので便利です。

■「お天気情報」を取得してみよう!

さて、基本的なGASのプログラミングと公開方法が分かったところで、今回作るサンプルデモで利用する「お天気情報」の取得に挑戦してみましょう!

登録不要で、天気情報をJSON形式で取得できる定番サービスとして、今回は「Weather Hacks」を使ってみました。
f:id:paiza:20160808205507j:plain
使い方はとても簡単で、以下の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()」を作成しましょう。
f:id:paiza:20160808205606j:plain
この中に、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」に設定し、「➁実行ボタン」をクリックしてみてください。
f:id:paiza:20160808205639j:plain


初回のみ、外部ドメインにアクセスする許可を求められると思いますので、承認しておきましょう。
f:id:paiza:20160808205649j:plain


関数が実行されたら、表示メニューの「ログ」を選択するか、キーボードの「Ctrl + Enter」を叩くことでログが表示され、しっかりとJSONデータが取得できているのが分かります!
f:id:paiza:20160808205700j:plain
この中から、必要な情報だけ抽出して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種類の専用タグを利用しており、その基本的な使い方は以下のとおり!

1,<?   ?> (処理を記述する)
2,<?=   ?> (値を出力する)


そして、再度バージョンを作成&公開し、ブラウザで確認すると取得したJSONデータ内にある「title」要素の文字列が見事に表示されているのが分かります!
f:id:paiza:20160808205821j:plain
さらに、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アプリ」の完成です!
f:id:paiza:20160808205852j:plain
ぜひ、URLをシェアして友人に自慢してみましょう!


今回作成したサンプルデモの全ソースコードコチラから閲覧できます。
github.com

paizaについて

f:id:paiza:20150730172136p:plain
paizaでは、プログラミングスキルチェック問題(14言語に対応)を多数ご用意いたしております。もちろん今回使用しているJavaScriptにも対応しておりますので、「JavaScriptでプログラミング問題を解いてみたい」「自分のスキルを試してみたい」という方にもピッタリです!

paizaでプログラミング問題を解くと、結果によりS・A・B・C・D・Eの6段階で自分のスキルのランクが分かります。問題はレベルごとに分かれており、初心者から上級者の方まで挑戦していただけますので、自分のプログラミングスキルを客観的に知りたいという方は是非チャレンジしてみてください!!

プログラミング問題による学習コンテンツ(paiza Learning)もございますので、「まったくのプログラミング未経験者です」「初心者なのでプログラミング学習から始めたいな」という方もぜひご利用ください。

さらに、paizaが運営する無料オンラインプログラミング実行環境サービス「paiza.IO (パイザ・アイオー)では、JavaScriptはもちろん、多数プログラミング言語のプログラミングが面倒な環境構築なしに無料でできますのでぜひご利用ください!

■まとめ

今回ご紹介したように、GASを使うと簡単にWebアプリを作って公開するところまでを手軽に無料で実施できるのが分かると思います。

また、今回はHTMLコンテンツを表示するためにGASが提供する「HtmlService」を使いましたが、「ContentService」という機能を使えばJSONデータを「JSONP」形式に変換して吐き出す処理も簡単に作れるので、より活用範囲が広がると思います。

他にも、Googleサービスと連携したり、プログラムを定期実行させるような使い方も可能なので、ご興味ある方はぜひトライしてみてください!




paizaではITエンジニアとしてのスキルレベル測定や、動画によるプログラミング学習コンテンツ(paiza Learning)を提供しています。テストの結果によりS,A,B,C,D,Eの6段階でランクが分かります。自分のプログラミングスキルを客観的に知りたいという方は是非チャレンジしてみてください。

http://paiza.jp


プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編