Google Apps Script（GAS）でWEBアプリケーションを開発してみる

ブリーフィング

前回

Google Apps Script（GAS）でWEB APIを開発してみる

Google Apps Script（以下GAS）に関して、前回は、APIをエンドユーザーに叩かせる事に挑戦しました。

ただ、下記の課題が残りました。

APIを叩くにはGoogleアカウントでOAuth認証を行う必要性がある

正直、その人が所有するGoogleアカウント内の情報を利用するんでない限り、OAuthで認証をさせる必要性はありません。

アクセスした人の、メアドも、名前も、スプレッドシートにどんなデータを持ってるかなんて、なんの関係もないアプリで、OAuth認証を求めても怪しまれるだけです。

「おいおい、おれのGoogle内の情報、何か抜かれるんかしら？」と…。

今回の課題

なので、今回はエンドユーザーが「認証を必要としないでGAS上の関数を叩く」事を目標にして、「WEBアプリケーションとして公開」する事に挑戦したいと思います。

どうぞ夜露四苦！
ファイッ！

Google Apps ScriptをWEBアプリケーションとして公開

（前回の記事の続きなので、スプレッドシートや、スクリプトエディタの起動などは済ませている、という前提です。）

doGet関数の定義

WEBアプリケーションとしての、エントリーポイントとなる関数を定義する必要性があります。
それが「doGet」関数です。

こんな感じで、最高にイカした実装を行ってください。

/**
 * 初めてのWEBアプリケーション
 */
function doGet()
{
    return ContentService.createTextOutput("Hello Minka!!");
}

ウェブアプリケーションとして導入する

つづいて、ウェブアプリケーションとしての公開手続きを行います。

スクリプトエディタ内メニューの「公開 > ウェブアプリケーションとして導入」を選択してください。

プロジェクトバージョン

「新規作成」を選び、コミットメッセージを適当に入力します。

次のユーザーとしてアプリケーションを実行

今回の目標は、「Googleのアカウントを所有していなくても利用できるアプリケーションの開発」なので、ここは、作成者である自分自身を選びましょう。

アプリケーションにアクセスできるユーザー

漢なら、もちろん匿名も含めたユーザー全員です。
隠し事は、ナシだぜ？

そして、公開手続きが完了すると…

こんなウインドウが表示されるので、何も考えないで表示するURLにアクセスすると…
（もちろんプライベートブラウザでね！）

あれ…？

これ、すごくあっさり成功してる…？
昨日の苦労は一体なんだったのか…。

なんの障害もなく、あっさりWEBアプリケーションを公開できてしまいました。
それじゃつまらないので、もう何個か応用を試してみたいと思います。

おお神よ！我に七難八苦を与え給え！である。

テンプレートを試してみる

HTMLタグを文字列でしか記載できない開発はいやじゃー！
というわけで、テンプレートの使い方もちょこっと試してみましょう。

「ファイル > 新規作成 > HTMLファイル」を選択し、「index.html」ファイルを作成してください。

index.html （せっかくなので、変数的な事も試してみましょう）

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <title><?= title ?></title>
  </head>
  <body>
    <h1><?= title ?></h1>
    <img src="http://minkalee.info/m/images/full/025.jpg" />
  </body>
</html>

内容はこんな感じで。so クール！

そして、そのファイルを読み込むコードはこんな感じで、so クール！

コード.gs

function doGet()
{
  t = HtmlService.createTemplateFromFile('index.html');
  t.title = 'Hello Minka!!';
  return t.evaluate();
}

再度公開手続きを行い、URLにアクセスすると…

パーフェクト…！！

任意の関数を呼び出してみる

これ、関数の呼び出しもいけるんじゃね…？

コード.gs

function callMe()
{
  return "called";
}

index.html

<h2 id="result"></h2>
<script type="text/javascript">
  var callback = function(result)
  {
    document.getElementById("result").innerText = result;
  }
  google.script.run.withSuccessHandler(callback).callMe();
</script>

うん、いけてるな。

これはすばらしい…！！！

これで、ジョーカー3の配合ツールの公開ができそうです！