Webアプリケーション開発とHtml Service (2/7)

では、実際にGASでWebアプリケーションを作成してみましょう。まずは、プロジェクトの作成からです。これは、Googleドライブから直接作成できます。

Googleドライブの画面を開き、「作成」ボタンのメニューから、＜もっと見る＞内の＜スクリプト＞サブメニューを選んでください。画面に新規のプロジェクトが現れ、そこに作成するプロジェクトとスクリプトに関するダイアログが現れます。

ダイアログの左側には「スクリプトを作成」という表示があり、そこに細かな項目が並んでいます。これらは、実は作成するスクリプトファイルのテンプレートなのです。ここで、「何をするためのスクリプトを作るのか」を選ぶのです。

例えば、「Gmail」を選べば、Gmailの基本的な機能を利用するためのスクリプトが自動生成されます。カレンダーなら、同様にカレンダーを操作したりイベントを追加するためのスクリプトがあらかじめ作成されるのです。「空のプロジェクト」では、空っぽの状態でプロジェクトが作られます。

Webアプリケーションを作成する場合は、「ウェブアプリケーションとしてのスクリプト」というリンクをクリックします。これを選ぶと、ダイアログが消え、新しいプロジェクトにスクリプトファイルが作成されます。非常に面白いのは、そこにWebアプリケーションとしてスクリプトを実行するためのサンプルスクリプトが用意されている点でしょう。

下のリスト欄に掲載したのが、デフォルトで生成されるスクリプトです。既にWebアプリケーションとして利用する場合のスクリプトの書き方については説明をしてきました。よくわからないという方は、以下で学習しておいてください。

http://libro.tuyano.com/index3?id=645006&page=4

「新しくWebアプリケーション用の機能が追加された」といっても、スクリプトの基本は従来と同じです。doGet関数を定義し、そこでGETでアクセスされた際の出力内容を作成します。サンプルスクリプトで行なっているのは、ラベルとボタンからなる簡単なGUIをスクリプトで作成するものです。スクリプトによるGUIの作成は以下で説明してあります。

http://libro.tuyano.com/index3?id=647004

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

// Script-as-app template.
function doGet() {
  var app = UiApp.createApplication();

  var button = app.createButton('Click Me');
  app.add(button);

  var label = app.createLabel('The button was clicked.')
                 .setId('statusLabel')
                 .setVisible(false);
  app.add(label);

  var handler = app.createServerHandler('myClickHandler');
  handler.addCallbackElement(label);
  button.addClickHandler(handler);

  return app;
}

function myClickHandler(e) {
  var app = UiApp.getActiveApplication();

  var label = app.getElementById('statusLabel');
  label.setVisible(true);

  app.close();
  return app;
}