Edited at

GASでページ遷移ありWebアプリケーションの作成(ZaifAPI利用)


関連記事

本記事は、以下の記事の実践編となります。

◯GoogleAppsScript(GAS)でページ遷移を擬似的に実装する方法

http://qiita.com/kakkiichan/items/a6a653bbe113a1dee2eb

◯GAS(GoogleAppsScript)でZaifAPIを利用して通貨ペア一覧と最新価格と出来高を取得する

http://qiita.com/kakkiichan/items/0a48868d49ab57ad1d3f


本記事の概要


本記事の目的

GoogleAppsScriptでWebAPIを呼び出し、なおかつページ遷移のあるアプリケーションの作成方法を理解してもらうこと


想定読者

・GASでどこまでできるのか試してみたい人

・GASで簡単なアプリケーションを作ってみたい人

・APIを使った簡単なアプリケーションを作ってみたい人


完成イメージ

https://script.google.com/macros/s/AKfycbyYG5hjDcwrmbx8IzEQGqCudDhoOYIkJjMVCU2N_pHX4wXgC4TW/exec

プルダウンにはZaifで取引可能な通貨ペア一覧が入っています。プルダウンを選択すると、その通貨ペアの直近の価格と直近24時間の取引量の情報を閲覧できます。

プルダウン選択後には別ページが表示されているように見えますが、実際には一つのプロジェクトファイルでURLパラメーターによる分岐をさせています。


コードの解説


getpairs(),getprice(),getvolume()

それぞれ、

◯getpairs()

Zaifで取引可能な通貨ペア一覧の取得

◯getprice()

→任意の通貨ペアの直近の取引価格の表示

◯getvolume()

→任意の通貨ペアの直近24時間の取引量の表示

この3つのfunctionの詳細は、

◯GAS(GoogleAppsScript)でZaifAPIを利用して通貨ペア一覧と最新価格と出来高を取得する

http://qiita.com/kakkiichan/items/0a48868d49ab57ad1d3f

をご覧ください。


doGet()

Webアプリケーションにアクセスがされた時にはじめに実行されるdoGet()は以下のようになります。


doGet().gs

function doGet(e) {

var pair=e.parameter["pair"]; // URLパラメーターを取得

var pairlist=getpairs(); //通貨ペア一覧を取得

if(pair == null)//もしもパラメーター設定がなければ
{

var selectform="<form><select onChange='top.location.href=value'><option value='#'></option>";
var url="https://script.google.com/macros/s/AKfycbyYG5hjDcwrmbx8IzEQGqCudDhoOYIkJjMVCU2N_pHX4wXgC4TW/exec?pair=";

for(var n in pairlist)
{
selectform +='<option value="'+url + pairlist[n] + '">' + pairlist[n] +'</option>';
}

selectform +="</select></form>";

var t=HtmlService.createTemplateFromFile('Index');
t.pairlist=selectform;
return t.evaluate();

}

else //URLにパラメーター設定があれば
{

var pairtable="<table border='1'><tbody><tr><td>通貨ペア</td><td>取引価格</td><td>取引量</td></tr>";
var price =getprice(pair);
var volume= getvolume(pair);

pairtable += "<tr><td>" + pair+"</td><td>"+ price +"</td><td>"+volume+"</td></tr>";
pairtable +="</tbody></table>";

var t=HtmlService.createTemplateFromFile('pairinfo');
t.info=pairtable;
return t.evaluate();

}
}


まずはじめに、var pair=e.parameter["pair"];でURLの"pair"のパラメーターの値を取得して"pair"変数に格納しています。また、getpairs()を実行し、結果を"pairlist"変数に格納しています。getpairs()の戻り値は配列形式になる点にご注意ください。


doGet().gs

function doGet(e) {

var pair=e.parameter["pair"]; // URLパラメーターを取得
var pairlist=getpairs(); //通貨ペア一覧を取得


続いて、pair変数がnullの場合、すなわちURLにパラメーターが付与されていない場合の処理を行います。


doGet().gs


if(pair == null)//もしもパラメーター設定がなければ
{

var selectform="<form><select onChange='top.location.href=value'><option value='#'></option>";
var url="https://script.google.com/macros/s/AKfycbyYG5hjDcwrmbx8IzEQGqCudDhoOYIkJjMVCU2N_pHX4wXgC4TW/exec?pair=";

for(var n in pairlist)
{
selectform +='<option value="'+url + pairlist[n] + '">' + pairlist[n] +'</option>';
}

selectform +="</select></form>";

var t=HtmlService.createTemplateFromFile('Index');
t.pairlist=selectform;
return t.evaluate();

}


getpair()の戻り値である"pairlist"は配列でしたので、for文で一行ずつHTMLのselectタグを書いていきます。完成したselectタグは、t.pairlist=selectform;でIndexに渡しています。

続いて、pairがnullでない時、つまり何らかの通貨ペアが指定されている時の処理を記述しています。


doGet().gs

 else //URLにパラメーター設定があれば

{

var pairtable="<table border='1'><tbody><tr><td>通貨ペア</td><td>取引価格</td><td>取引量</td></tr>";
var price =getprice(pair);
var volume= getvolume(pair);

pairtable += "<tr><td>" + pair+"</td><td>"+ price +"</td><td>"+volume+"</td></tr>";
pairtable +="</tbody></table>";

var t=HtmlService.createTemplateFromFile('pairinfo');
t.info=pairtable;
return t.evaluate();

}


ここでは、getprice(),getvolume()を使っています。URLに付与された通貨ペアの情報を受け取って、引数にしています。それぞれの関数からの戻り値をHTMLのtableタグに入れて表を作成します。作成した表はt.info=pairtable;でHTMLに渡しています。


Index.html

HTMLの方はほぼGASから受け取った内容を表示しているだけです。doGet()から"pairlist"として渡された情報を<?!= pairlist ?>の部分で表示しています。


Index.html

<html>

<head>
<base target="_top">
</head>
<body>
通貨ペアを選択してください<br>
<?!= pairlist ?>
</body>
</html>



pairinfo.html

通貨ごとの情報ページのHTMLです。doGet()から"info"として渡された情報を<?!= info ?>の部分で表示しています。


pairinfo.html

<html>

<head>
<base target="_top">
</head>
<body>
<?!= info ?><br>
<a href="https://script.google.com/macros/s/AKfycbyYG5hjDcwrmbx8IzEQGqCudDhoOYIkJjMVCU2N_pHX4wXgC4TW/exec">Topへ戻る</a>
</body>
</html>



まとめ

以上が、GASを使ったWebアプリケーションの一例でした。GASは、Googleアカウントをお持ちの方であれば誰でも使えるものですので、興味を持っていただいた方はいろいろ試してみていただければと思います。

〇著者

株式会社メタレピュテーション

代表取締役 新垣

当社サイト「生産性総合研究所」において、GAS関連の記事を執筆中です!

http://productivityresearch.net/category/programing/googleappsscript/