このブログを検索

2012年12月29日土曜日

フォーム自作(テキスト・チェックボックス)(3)

■きゃー、一年が終わってしまう。。。

   なんとか年内には!と駆け込み投稿です。

   テキスト入力・チェックボックス選択内容をスプレッドシートに保存し、
   Googleサイトに新規にページを追加する、というスクリプトの続きです。

   前回までで下準備・BUIビルダーを利用したUI作成まで紹介しましたので、
   今回は、スクリプトのご紹介です。


■スクリプト全文はこちら

   以下のURLに、スクリプトの全文と実際に動かして試せるようにしています。

    https://sites.google.com/a/mypleis.com/gas_mypleis/GAS_ALL/15_form


■簡単スクリプト解説

   スクリプト全文は上記のURLで確認して頂くとし、ブログ上では一部抜粋して
   簡単解説してみようと思いま~す。

   さて、前々回の記事で、次の3つのfunctionの外枠だけ作成されていると思います。

     (1)function doGet(e) { }
          ・・・UIを起動するためのfunction

      (2)function checkHandler(e) { }
          ・・・チェックボックス選択時の処理を定義するためのfunction

      (3)function myClickHandlerButton(e) { }
          ・・・「登録」ボタン押下時の処理を定義するためのfunction

      この3つのfunctionを一つずつ簡単に解説します。

 <(1)function doGet(e){}>

    ⇒フォームの入力項目のうち、「年代」を選択するチェックボックス用の設定。
        -チェックボックス毎に対応するユーザープロパティ(※1)の箱を準備する。
           例) 「age1」という名前のユーザープロパティを作成し、
              「false」という値を格納する。

        ※1 ユーザプロパティとは、ユーザー毎に値を保管することができる入れ物のこと。
             (似たようなもので、スクリプトプロパティという入れ物もあります。
              今回のケースでは、多分どちらでもOKです。)

             以下の手順で確認することができます。
               ・スクリプトエディタ → ファイル → プロジェクトのプロパティ


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




    ⇒フォームで「登録」ボタンを押下した後に表示されるダイアログボックスの外枠作成。
     ダイアログボックスの中身は、GUIビルダーで作成済み。
     上から順に、下記のような意味。
         -createDialogBox(autoHideの可否,modalの可否)という
                       構文で、それぞれ次のような意味
                        autoHide…ダイアログボックスを複数表示する場合、
                               自動的に古いボックスを閉じる
                        modal…ダイアログボックス表示時に、それ以外の
                             部品(ボタン等)を使用不可状態にする
         -ダイアログボックスのID 設定
        -ダイアログボックスをドラッグで移動できるように設定
        -ダイアログボックス表示位置設定(上から○○px)
        -       同上          (左から○○px)
        -ダイアログボックスタイトルバーの表示設定
        -ダイアログボックスの大きさ設定(幅+高さ)
        -ダイアログボックスを非表示に設定
        -BUIビルダーで作成済みの部品名”DialogPanel”を呼び出し
        -呼び出したPanelを今作成したダイアログボックスの外枠に追加
        -ダイアログボックスをアプリに追加

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



   ⇒GUIビルダーで作成したAnchor(=リンク)の表示タブ設定
       -どのタブでリンクを開くかは、”.setTarget()”で設定します。
       -括弧()の中に、以下のいづれかを書きます。
           新しいタブで開く場合   : ”_blank”
           現在のタブで開く場合  : ”_self”
       -今回は、「現在のタブ」で開くようにしています。
       -尚、GUIビルダーを使ってリンク(=Anchor)を作成する場合、GUIビルダー上では
        「新しいタブで開く」しか設定できない(というか、設定するプロパティがない)ので、
        スクリプトエディタでスクリプトを書く必要があります。



今日はここまで