このブログを検索

2012年9月4日火曜日

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

■今日のゴール

   以前、このブログにて「Googleサイトでできないこと」という記事の中で、
   Googleサイト上では、”Browser.msgBox()”というメッセージボックスを表示させる関数は
   使えない、ということを書きました。

   それは間違いないのですが、いくらなんでもメッセージボックスが表示できないなんて、
   不便すぎるーーー(´Д`。)!!と、ぼやいて色々と調べていましたら、

            ダイアログボックスというものがあるらしい!!


   と、いうことで、今日はこのダイアログボックスをGoogleサイト上で表示させるスクリプトを
   作ってみます。


■参考元

   今回主に参考にしたのは、以下のサイトです。

   【Libro : 初心者のためのGoogle Apps Scriptプログラミング入門】
   http://libro.tuyano.com/index3?id=650003&page=5

   最近おなじみのサイトですね。
   ブラウザにメニューバーを追加し、メニュークリック時にダイアログボックスを表示させる
   スクリプトが紹介されています。
   


■手順・スクリプト

   まず、今回もGoogleサイトから「サイトの管理」→「Appsスクリプト」を開き、
   「新しいスクリプトを追加」します。



   
   スクリプトエディタが開いたら、以下のスクリプトを記述し、「保存」します。





        ☆簡単コード解説☆

          1~30行目  : UIサービスの起動
                      -GUIビルダーで作成したUIの呼び出し
                      -関連するfunctionの呼び出し
                      -ダイアログボックスの作成

          32~39行目 : ボタンクリック時の処理を定義

          41~48行目 : ダイアログボックス内のボタンをクリック時の処理を定義

       -------------------------------------------------------------------

          1~4行目   : 割愛 (決まり文句)
  
          6行目     : function”myClickHandlerButton”を呼び出し

          7行目     : function”myClickHandlerDialog”を呼び出し

          9~16行目  : ダイアログボックスの枠組みを作成
           (9行目)        -createDialogBox(autoHideの可否,modalの可否)という
                       構文で、それぞれ次のような意味
                        autoHide…ダイアログボックスを複数表示する場合、
                               自動的に古いボックスを閉じる
                        modal…ダイアログボックス表示時に、それ以外の
                             部品(ボタン等)を使用不可状態にする

           (10行目)    -ダイアログボックスのID 設定

           (11行目)    -ダイアログボックスをドラッグで移動できるように設定

           (12行目)    -ダイアログボックス表示位置設定(上から○○px)

           (13行目)    -       同上          (左から○○px)

           (14行目)    -ダイアログボックスタイトルバーの表示設定

           (15行目)    -ダイアログボックスの大きさ設定(幅+高さ)

            (16行目)    -ダイアログボックスを非表示に設定

         18~20行目 : パネルの作成(サイズ・表示する文字の設定)

            22行目 : ボタン作成

            23行目 : ボタンに、ボタンクリック時の処理を定義したfunctionを紐付け

            24行目 : ボタンをパネルの中に配置するよう設定

            26行目 : パネルをダイアログボックスの中に配置するよう設定

         27~35行目 : 割愛 (決まり文句)

            36行目 : ダイアログボックスを表示する設定

         37~44行目 : 割愛 (決まり文句)

            45行目 : ダイアログボックスを非表示にする設定


   これで、スクリプトは完了!


スクリプトの説明が思いのほか長くなったので、
今日はここまで。

  
■予告編

   明日は、今日の続きです☆