とまと あんらいぷ…

エンジニアの活動記録とかつぶやきとか

GitHub
スポンサードリンク

初めてのGoogle Apps Script入門(GAS)- 概念の習得

Google App Script(通称GAS)の作成時
How To が書かれているサイトはそれなりにあるけど

WEBアプリとしての考え方や概念がスッキリ入ってくるサイトがなかなか無いので
まとめておきます。

あくまでもイメージの概念の説明であるため
実際のアーキテクトとは異なる部分もあることをご容赦下さい。

まずはScriptファイルを作成可能にする


Googleドライブに移動して、スクリプトの作成ができますが、
その前に新規作成の準備をしなければいけません。
20140413_01_gas

作成ボタンを押して「アプリを追加」を選択します。

20140413_02_gas

「ドライブにアプリを追加」画面で By Google を選択し、「Google Apps Script」を選んで
Google Apps Script を作成できるようにします。

20140413_03_gas

追加し終わったら、「スクリプト」を選びます。

20140413_04_gas

初期ウィザードが出てくるので「空のプロジェクト」を選んでウィザードを閉じます。

20140413_05_gas

はい、これで空のソースコードファイルが作成され、アプリケーション作成準備完了です。
最初に「function myFunction()」っていうメソッドが用意されていますが、いらないので消します。

次に、Google Apps Script で必須のイベントや概念を説明します。

doGetイベント


Google Apps Scriptという名の通り
GASでは、WEBアプリケーション(Application)を使うという概念で成り立ってます。

doGet()は、一番最初にユーザーインターフェースを持つ
アプリケーションにアクセスする時
つまり、WEBサイトへの最初のアクセス時に発生するイベントです。

このイベント内でUIを作成し、return することで
ブラウザ(ユーザーインターフェース)へオブジェクトを返すという処理を行います。

オブジェクトというのは UiInstanceというオブジェクトであり
GAS内では UiApp.createApplication() メソッドで作成します。

・最初にdoGet()が発生するので
 UiApp.createApplication() メソッドでアプリケーションを作る。

最初のアクセス

doGet()

UiApp.createApplication()でアプリケーションを作成する。

doPost(e)イベント


メソッド名の通り、ブラウザから、サーバー側へポスト処理が行われた場合に発生します。

たとえば、doGetイベントで、ブラウザ側に
テキストボックスと「送信ボタン」を作った場合に、
「送信ボタン」でテキストボックスの内容をサーバーに送信したとします。

その時に、doPost(e)イベントが発生し、
引数の e にテキストボックスの内容が格納されてきます。

サーバー側で、 e に入っているテキストボックスの内容を元に
ごにょごにょしたりします。

ブラウザで何かの情報をサーバーに送信

doPost(e) でサーバー側で受け取る

アプリケーションを作るという考え方


GASでは、まずユーザーインターフェースを持つアプリケーションを作成し、
doGetイベントでブラウザにユーザーインターフェースオブジェクトを返します。
これは、WEBにサイト作成でいうところのhtmlを作成するのと同義です。

アプリケーションの作成には
UiApp.createApplication();
メソッドを呼び出します。

アプリケーションは1アクセスの中で1度だけ作成することが可能で、
複数回アプリケーションを作成することはできません。

そのため、UiApp.createApplication() メソッドを2回呼ぶとエラーが発生します。

20140413_06_gas

アプリケーションへの2回目のアクセス方法


一度作成されたアプリケーションは、そのセッション内で常に有効です。
UiApp.createApplication() で作成されたアプリケーションにアクセスする方法は
UiApp.getActiveApplication();
メソッドを呼び出します。

20140413_07_gas

アプリケーションの実演


それでは、初回アクセス時に
「送信ボタン」と「テキストボックス」を持つサンプルWEBアプリケーションを作ってみましょう。

作りは至ってシンプルで

・最初に動くdoGet()メソッドでアプリケーションを作成する。
・ブラウザ側で「送信ボタン」を押された時に、サーバー側でテキストボックスの内容を取り出し、再び画面に表示する

たったこれだけです。
ソースコードはこんな感じ。

Gist

Googleドライブ
初めてのGoogle App Script(GAS)- 概念の習得

doGet()イベントの中で
テキストボックスを作ったり、送信ボタン(submit)を作ってます。
この2つをパネルに入れ込んで、Formにセットしてます。

最後に app.add(form); でアプリケーションにつっこんで、
return します。

20140413_08_gas

実行したところ。

20140413_09_gas

テキストボックスに「テストだよ!」と入れて送信ボタンをクリックします。

すると、doPostイベントが動きます。これがサーバー側の処理です。

doPost(e)メソッドの中で、「e」の内容を取り出します。

doGet()メソッドでテキストボックスを作った時に"txtArea"という名前を付けてます。
doPost(e)の「e」には、様々な情報が格納することができ、
e.parameter にアクセスすると、
formの中に宣言したオブジェクト名をメンバ変数として取り出すことができます。

e.parameter.txtArea

こんな感じです。

「送信ボタン」を押した結果

20140413_10_gas

e の中から、ポストされたformオブジェクトの中身を取り出すことができました。

最後に


というわけで、概念についてざっくり説明しました。
GASはまだまだできることがあり、奥が深いです。

まずは概念を身に付け、ヘルプファイルの土地勘をつかむことが
ストレス無くやりたい事を調べる事ができるようになるコツです。

それでは良きGASライフを!
▼この記事を読んだ方は、こんな記事も読んでいます。▼

スポンサードリンク

テーマ:プログラミング - ジャンル:コンピュータ

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://dalmore.blog7.fc2.com/tb.php/103-f86858a6
この記事にトラックバックする(FC2ブログユーザー)

FC2Ad