【GUIビルダー】ダイアログボックス表示（２）

■昨日の続きです

　　　昨日から、ダイアログボックスをGoogleサイト上で表示させるスクリプトを作っています。

　　　昨日の記事で、スクリプトを書くところまでは書きましたので、今日はその続きから。

■手順

　　　スクリプトを書き終えたら、「ユーザーインタフェース構築...」を押下し、画面作成へ。

　　　今回GUIビルダーで使う部品（コンポーネント）は、「Button」のみです！

　　　

　　　左側の部品一覧から、「Button」を中央へドラッグ＆ドロップして、

　　　右側のプロパティの【ID】を確認し、スクリプト内のIDと一致させます。（例：Button1）

　　　　

　　　そして、テキストを任意のものに修正します。

　　　そして、右側プロパティの下の方、「イベント」の「マウスのクリック」から、

　　　”ｍｙClickHandlerButton”を選択します。　　　

　　　これで、GUIビルダーでの作業も終わりです。

　　　名前をスクリプトのものと一致させて「保存」します。（ここでは、”daialogBoxTest”）

　　　今回のユーザーインタフェース全体で使用するコンポーネントは、以下の4つでした。

　　　　　　　①Button　　　　　　：　ダイアログボックスを表示させるため

　　　　　　　②Vertical Panel　 ：　ダイアログボックス内にメッセージやボタンを配置するため

　　　　　　　③DialogBox         ：　ダイアログボックス

　　　　　　　④Button　　　　　　：　ダイアログボックスを閉じるためのボタン

　　　しかし、②～④は、GUIビルダーを使用せずに、スクリプトで作成したので、

　　　結果的にGUIビルダーで作成したのは①のボタン一つのみということになったのです。

　　　さて、GUIビルダーでの作成も完了しました。　

　　　あとは、スクリプトエディタに戻って、「バージョン管理」し、「ウェブアプリケーションとして

　　　公開」！！

 

　　　ダイアログボックスを表示させたいGoogleサイトのページの編集画面を開いて、

　　　「挿入」→「Apps スクリプトガジェット」から今回作成したスクリプトを選択します。

　　　はい、できあがりです～～～♪

■動作テスト

　　　いつものように、動作テストです。
　　　「ダイアログボックス表示」というボタンを押下すると・・・・


　　　ダイアログボックスが表示されました～～～～。

　　　今日も無事完成できてよかった～～。


今日はここまで。



■実際に試してみたい方に


　　　今回作成したユーザーインタフェースは、こちらのURLで実際に動作をお試し頂けます。

　　　https://sites.google.com/a/mypleis.com/gas_mypleis/GAS_ALL/7_dialogbox




■予告編

　　　次回は、ボタンを押すと特定のページへリンクするスクリプトを作りたいと思います。