Google Apps Script 講座中級編「GASでWebアプリを公開する」
はじめに
後藤銃士です。腰痛、ようやく痛みが引いてきました。
前回、WebAPIでデータを取得してきましたので、そのデータをWebアプリとして公開したいと思います。
ところでWebアプリってなんね？という人いますか。Webアプリって、早い話ブラウザで表現されるアプリケーションってことで（？）広い意味ではブログだって G Suite だって全部当てはまるかなーって思います。単純に HTML を表示することだってWebサーバにアクセスしてデータとってきてますしね…。まああれよ、硬いことはいわねえ、Webブラウザで表示されるやつは丸っとWebアプリってことで。
GAS ってほんとよく出来ていて、簡単にWebアプリを作ることが出来ます。今回のようにWebAPIでデータとってきて結果を表示するとか余裕なんですよね。というわけで早速いきましょう。
この機能が役に立つのは
GAS で Webアプリと通して即結果を求めたい人向け
講座スタート
いつもどおりコピペだけで大丈夫です。が、その前に HTML ファイルを用意してそっちにもコピペします。 HTML は以下の手順で作って下さい。
新規スクリプト作成画面にて、ファイル＞新規作成＞HTMLファイルを選択します。
で、今回は index.html と入力して OK を押します。
するとこんな画面がでます。
で、今回は以下をコピペして下さい。
<!DOCTYPE html> <html> <head> <base target="_top"> </head> <body> </body> </html> <!DOCTYPE html> <html> <head> <base target="_top"> <title>なろう小説月間ランキングベスト20</title> </head> <body> <a href="https://twitter.com/jijyoron">連絡先：後藤銃士＠GASやっていきましょう</a> <h1>なろう小説月間ランキングベスト20</h1> <ol> <? var spreadsheet = SpreadsheetApp.openByUrl('ご自身のスプレッドシート'); var sheet = spreadsheet.getSheetByName('シート1'); var narouInfo = sheet.getDataRange().getValues(); for(var i=0;i<narouInfo.length;i++){ output.append('<li><a href="https://ncode.syosetu.com/' + narouInfo[i][0] + '/">' + narouInfo[i][1] +'</a></li>'); } ?> </ol> </body> </html>
用意が出来ましたか？では、
新しくタブを開き「script.google.com」を入力してコードを書ける状態にして下さい。 あと、データ保存用にスプレッドシートも用意しておいてね。
そして今回は、コード.gs にまるっとコピペして下さい。
function myFunction() { var rankNum = 20; var rankList = ""; var thisMonth = Utilities.formatDate(new Date(), "JST", "yyyyMM01"); var narouInfo = {}; // なろう小説ランキング情報取得（月間） var narouRankingUrl = "https://api.syosetu.com/rank/rankget/?out=json&rtype=" + thisMonth + "-m"; var response = UrlFetchApp.fetch(narouRankingUrl); // var json=JSON.parse(response.getContentText()); for(var i in json){ if (i > rankNum -1){ break; } rankList = rankList + json[i]["ncode"] + '-'; } Logger.log(rankList); rankList = rankList.slice(0, -1); // なろう小説情報取得 var narouUrl = "https://api.syosetu.com/novelapi/api/?out=json&ncode=" + rankList; response = UrlFetchApp.fetch(narouUrl); // var infoJson=JSON.parse(response.getContentText()); for(var i in infoJson){ if (i == 0){ continue; } rankList = rankList + infoJson[i]["ncode"] + '-'; narouInfo[infoJson[i]["ncode"]] = infoJson[i]; } // スプレッドシートに書き込み var spreadsheet = SpreadsheetApp.openByUrl('ご自身のスプレッドシート'); var sheet = spreadsheet.getSheetByName('シート1'); // 並び替え for(var i in json){ if (i > rankNum -1){ break; } var ncode = json[i]["ncode"]; Logger.log(i + ":" + ncode + " " + narouInfo[ncode]['title']); sheet.getRange(Number(i) +1, 1).setValue(ncode); sheet.getRange(Number(i) +1, 2).setValue(narouInfo[ncode]['title']); } } function doGet() { return HtmlService.createTemplateFromFile('index').evaluate(); }
それでは実行してみましょう。 なお、実行する際は、 myFunction を選択して「実行」すること。
まず、スプレッドシートを確認して下さい。 すると、20件のなろう小説情報が保持されています、ね？
ではこれらの情報をWebアプリケーションにするために、公開＞ウェブアプリケーションとして導入…を選択します。
で、以下のように設定して更新を押します。すると、
現在のウェブアプリケーションの URL と出ますのでこいつをコピペします。この URL に表示されるというわけです。
ブラウザに入力してみるか、「最新のコード」をクリックします。
するとこんな感じで表示されます。やったね！
例によって myFunction() をトリガーで定期更新しておけば、最新の情報が自動更新されます。 WebAPI だけでなく、スクレイピングによって取得してきたデータをこんな風に定期表示しておくことをしておくと結構便利ですし、Web公開することで共有することも可能となります。
軽く、html 側の説明をしておくと、
<? var spreadsheet = SpreadsheetApp.openByUrl('https://docs.google.com/spreadsheets/d/1yWEhaJPlmDKs7ltbX-7UpEplnnCSDnmGdTJikjQFG0U/edit#gid=0'); var sheet = spreadsheet.getSheetByName('シート1'); var narouInfo = sheet.getDataRange().getValues(); for(var i=0;i<narouInfo.length;i++){ output.append('<li><a href="https://ncode.syosetu.com/' + narouInfo[i][0] + '/">' + narouInfo[i][1] +'</li>'); } ?>
<? 〜 ?> の間にコードを書きます。ここの中ではプログラムとして認識してくれますので、あとは、いつもようにスプレッドシートを指定後、データを取り出しては、output.append()で、HTMLタグを出力しています。
今回はHTML側にロジックを書いてますが、コード.gs 側にロジックを書いて、その結果を HTML に付与するという方法もあります。
とにかく一旦スプレッドシートにデータを保持しておく、というのがキモですかね。スプレッドシートを経由しなくても毎回 WebAPI を叩いてもいいのですが、もともと参照しているなろうAPI の月間データは1日1回更新らしいので、アクセス毎に WebAPI 叩くのはリソースを喰うだけで勿体ないです。スプレッドシートに書いておけば、Webアプリケーションで表示するときにスプレッドシートをみればよいですものね。
そんな風にあちこちに気を使いながら実装していけるとよいと思いますし、ここまで出来れば大したものですよ。
今回は以上となります。
それでは、ご覧いただきありがとうございました。
