Google Apps Script と 基本
Google Apps Script は Google Drive上にSPA( Single Page Application)を作成することが出来るScript です。
その構文はJavascriptであり、Javascriptが分かれば気軽に始める事ができます。
Google による認証 がないとページが見れないため、自然にページ認証が出来、社内アプリなどの閉じた環境で利用するアプリケーション作成に非常に役立ちます。
ここでは、GASの基本的な構築について書いていきます。
まずGoogle Driveを開きます。
新規 > その他 > Google Apps Script を選びます。
コード.gs に次のように打ち込みます。
|
1 2 3 4 5 6 7 8 |
function doGet(){ var pageTemplate = HtmlService.createTemplateFromFile('index'); pageTemplate = pageTemplate.evaluate() pageTemplate.setTitle("タイトル") pageTemplate.setSandboxMode(HtmlService.SandboxMode.IFRAME); pageTemplate.addMetaTag('viewport', 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0'); return pageTemplate; } |
そしてindex.html を作成します。
公開 > WEBアプリケーションとして導入 を行うと、index.htmlの内容が表示されるはずです。
Google Apps Script で HTMLを分割する
Htmlを分割して表示してみましょう。例えばCSSやJavascriptを同じindex.htmlに全部書くのは、可読性の低下を招いてしまいます。
コード.gsに次のように打ち込みます。
|
1 2 3 |
function include(filename) { return HtmlService.createHtmlOutputFromFile(filename).getContent(); } |
そしてsub.htmlを作成します。index.htmlには
|
1 |
<?!= include("sub") ?> |
と表記します。すると、index.htmlの指定部分に、sub.htmlがHTMLの形で読み込まれます。
HTMLにGASから値を渡す
index.htmlが読み込まれた時、コード.gsから値を渡しましょう。index.htmlの内部のjavascriptにデータを渡して、データによってDOMを構築出来ます。
コード.gsに次のように打ち込みます。
|
1 2 3 4 |
function getMyEmail(){ var email = Session.getActiveUser().getEmail(); return email; } |
これは現在アクセスしているユーザーのemailアドレスを取得するコードです。
Google Apps Script は アクセス制限を細かく指定出来ます。Google にログインしていないとアクセス出来ない設定にすると、このemailアドレスを取得する事ができます。
index.htmlには次のように打ち込みます。
|
1 2 3 |
<script> var email = "<?= getMyEmail() ?>" </script> |
先ほどの特殊タグと異なるので注意しましょう。また、scriptタグの中に書く点にも注意しましょう。
また、構造化された配列や連想配列などのデータを渡すときは、以下のように書きます。
|
1 |
var myData = JSON.parse('<?= JSON.stringify(getAll()) ?>') |
取得時にJSONにし、index.htmlのscriptで受け取る際に元に戻しています。
HTMLからGASコードを呼び出す
動作中にコード.gsから関数を実行してみましょう。Ajaxなどの非同期通信によるデータのやりとりを、Google Apps Scriptは簡単に行う事が出来ます。
コード.gs に以下のように打ち込みます。
|
1 2 3 |
function plus(a,b){ return a + b; } |
そして、index.html で次のように打ち込みます。
|
1 2 3 4 5 |
<script> google.script.run.withSuccessHandler(function(c){ console.log(c) }).plus(1,2) </script> |
するとa+bの結果がcとして返され、コンソールに出力されます。
その他、gmail、スプレッドシート、カレンダーにアクセスする事ができます。
そして、無料、なんです。
稟議がいりません。これは素晴らしい事ですね！
いくらでも、スクラップ&ビルドを試して見ましょう！
