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

木内智史之介(シャッチョー)
ミンカさんけっこんしてくださいおねがいします(ズザー
SEGAさん、DIVAの筐体ください(ズザー

ブリーフィング

前回

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」関数です。

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

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

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

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

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

プロジェクトバージョン

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

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

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

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

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

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

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

あれ…?

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

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

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
<!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

1
2
3
4
5
6
function doGet()
{
  t = HtmlService.createTemplateFromFile('index.html');
  t.title = 'Hello Minka!!';
  return t.evaluate();
}

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

パーフェクト…!!

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

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

コード.gs

1
2
3
4
function callMe()
{
  return "called";
}

index.html

1
2
3
4
5
6
7
8
<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の配合ツールの公開ができそうです!