このブログを検索

2012年9月5日水曜日

【GUIビルダー】ダイアログボックス表示(2)


■昨日の続きです

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

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


■手順

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




   今回GUIビルダーで使う部品(コンポーネント)は、「Button」のみです!
   
   左側の部品一覧から、「Button」を中央へドラッグ&ドロップして、
   右側のプロパティの【ID】を確認し、スクリプト内のIDと一致させます。(例:Button1)
    
   そして、テキストを任意のものに修正します。




   そして、右側プロパティの下の方、「イベント」の「マウスのクリック」から、
   ”myClickHandlerButton”を選択します。   




   これで、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




■予告編

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