以前から気になっていた、GUIビルダー。
ちょうど構築中のGoogleサイトにボタンを作りたいと思っていたので、
この機会に少しGUIビルダーの使い方を勉強しようと思います。
まず、超基本的な使い方を学ぶべく、
Googleサイト上にボタンを表示し、ボタン押下でメッセージを表示する。
というUI（ユーザーインタフェース）を作ってみます。
■参考元
ただでさえ少ないGoogle Apps Script関連の参考文献。
「GUIビルダの使用」 且つ 「Googleサイト上で動かす」となると、もうほんとに
極めて情報が少ないです・・・・・・（；-；） あぁ、先がおもいやられる(*´Д｀)=3
とにかく、そんな中で今回、主に参考になったのは下記のサイト。
【Googleを追いかけろ！】
http://www5d.biglobe.ne.jp/~pog/userguide/builder.html
【Google Developers】
https://developers.google.com/apps-script/uiapp
そして、もう一つ。
過去の記事で紹介したことのある、Google Apps Scriptを新規作成する際に
「ウェブアプリケーションとしてのスクリプト」を選択した際に予め記入されている
下記のスクリプトです。
■手順とスクリプト
今回は、Googleサイトの中からスクリプトを作成します。
まずは、Googleサイトの「サイトを管理」を開きます。
左側のメニューから「Appsスクリプト」を選択し、「新しいスクリプトを追加」ボタンを押下。
スクリプトエディタが開いたら、一旦名前を付けて保存します。
「ファイル」から「ユーザーインタフェースを構築...」を選択します。
※たまに、グレーアウトしていて選択できないことがありますが、何度か保存すると、
選択できるようになります。
次の画面が、GUIビルダーです。
左側に「ボタン」「ラベル」「テキストボックス」などがずらーっと並んでいます。
（これらをコンポーネントと呼ぶようです。）
この左側から「ボタン」と「ラベル」を中央の画面にドラッグ&ドロップします。
ここで、一旦保存しておきましょう。メニューバーの「ファイル」→「保存」です。
ここでは、デフォルトの「MyGui」という名前で保存しました。
※このファイル名は、後ほどスクリプト内で使用します。
次に、作成したボタンの表示を変えます。
右側にボタンのプロパティ一覧がありますので、その中の「テキスト」を任意のものに
変更します。
※IDというものもあります。これも後ほどスクリプトで使用します。
同様に、作成したラベルの表示を変えます。
ちなみに、このラベルには、ボタンを押した後に表示されるメッセージを書いています。
これで、ボタンを押した後に表示される画面のイメージができました。
ここで一旦保存して、スクリプトエディタに戻ります。
スクリプトエディタに下記のスクリプトを記入します。
☆簡単コード解説☆
2～9行目 ： 作成したUIを起動させるスクリプト
13～21行目 ： ボタンクリック時の処理を定義するスクリプト
-----------------------------------------------------
2行目 ： UIを起動するスクリプト。 必ず”doGet()”を使う。
※Google Developersによると、
単純に画面表示のUIならば、”doGet()”
何か処理をさせるUIならば、”doGet(e)” を使うようです。
3行目 ： UIインスタンスを生成する （決まり文句のようなもの）
4行目 ： 自分が作成したUI、”MyGui”を呼び出す
6行目 ： ボタンクリック時の処理を定義しているfunction、”myClickHandler”
を使用できるようにする
8行目 ： UIを終了する （決まり文句のようなもの）
-----------------------------------------------------
16行目 ： GUIで作成した「ラベル」を、IDを指定して呼び出す
17行目 ： 「ラベル」が”visible=true”、見えるようにする
18～19行目 ： UIを終了する （決まり文句のようなもの）
※”app.close();”が必要か否か、よく分かっていません・・・。
16・17行目以外は、ほぼ決まり文句のようなものと考えていいかと思います。
（ファイル名やファンクション名、IDは書き換える必要がありますよ～～。）
長くなったので、今日はここまで。
■予告編
明日は、今日の続きを書きます。
0 件のコメント:
コメントを投稿