このブログを検索

2012年8月26日日曜日

【GUIビルダー】Googleサイト上にボタン・メッセージ表示(1)

■GUIビルダーを使ってみる!

   以前から気になっていた、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は書き換える必要がありますよ~~。)


長くなったので、今日はここまで。


■予告編

   明日は、今日の続きを書きます。