このブログを検索

2012年9月18日火曜日

【GUIビルダー】フォーム自作・SS保存(2)

■とりあえずできたところまで

   前回の記事で、フォームの枠組みとフォームの表示(テキストボックスの配置等)まで
   書きました。

   今日は、その続きで、

     「フォームに入力」 → 「SubmitButton押下」 → 「スプレッドシートに保存」

   というところまで書きたいと思います。

   ※今日は、フォームの入力項目のうち、テキストボックス・テキストエリアのみ


■残念なことに・・・

   実は、前回紹介した参照元のサイトでも書いてあったのですが、、、

   Google Apps Scriptの ”Form Panel”はまだ日本語対応していません!

   よって、フォームへの入力内容は「半角英数字のみ」。
   これじゃぁ全然使えない・・・・ っていうか、作り始めてから気付いてガックシ。
   Googleさん、早く日本語対応してーーーー(><)

   近い将来きっと日本語対応されるはず!と期待して、とりあえず完成目指します。。。


■手順・スクリプト

    スクリプトエディタに戻って、スクリプトを修正します。

   ”Form Panel”&”SubmitButton”を用いた場合は、フォームの中に入力された値を取得
   するために、”doPost(e)”というfunctionを使うようです。



   それ以外は、基本的には「過去記事: 【GUIビルダー】テキストボックス入力・SS保存」と
   一緒です。
   (※Panelやテキストボックス等の【ID】・【名前】は適宜修正してくださいね~)



     ☆簡単コード解説☆   ※赤字のみ

       10行目    : ボタンクリック時に紐付けるfunction名を”doPost”に修正
    
       23~38行目 : 入力された値を取得したい部品をIDを指定して呼び出す
    
       41・44行目  : ”e.parameter.(部品名)”で、部品(ここでは、テキストボックス)に
                 入力された値を変数に格納

       56行目    : スプレッドシートの値を保存したい範囲(range)を指定
                   -「A列+データのある最終行の次の行」を起点として
                    右に4セル分(=D列まで)

       58行目    : 指定したrangeに、左から「タイムスタンプ」「タイトル」「本文」「年代」
                 のデータを書き込む


   これでスクリプトは一旦OKとします。
   (チェックボックスの実装は、今試行錯誤中なのでまた次回)


GUIビルダーに戻って、SubmitButton のイベント→マウスクリック時に”doPost”を選択。




   ”Form Panel”の大きさを、一画面に表示できる大きさに変えます。


   これで、一旦終了。


■動作テスト

   では、スプレッドシートの「共有設定」を一般公開にし、





   もう画像は省略しますが、「バージョン管理」→「ウェブアプリケーションとして導入」して、
   表示されたURLにアクセスします。



   フォームが表示されましたね~。
   


   スクロールもできます。



   「タイトル」というテキストボックスと「本文」というテキストエリアに半角英数字を入力。



   登録ボタンを押下すると、一旦フォームが消えます。




   保存用のスプレッドシートを開いてみると、データが反映されていま~す。




今日はここまで


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

   以下のURLから、今の段階のフォームをお試し頂けます。

   https://sites.google.com/a/mypleis.com/gas_mypleis/GAS_ALL/11_form_w_formpanel

   ※「年代」「ジャンル」のチェックボックスには入力されてもSSには反映されません==;


■ ぼやき

   今回のフォーム自作は、自分的には頑張ってる割に、日本語入力できないし、
   チェックボックスの実装がうまいこといかないし(多分簡単なスクリプトのはずなのに)、
   な~~んか報われない感じ。

   とりあえず一段落したら、今度は”Form Panel”を使わない方法でフォームっぽいものが   
   できないか、試してみようと思います・・・・。


■予告編

    明日は、もしできていればチェックボックスの実装方法を書ければなぁ、と思っています。

0 件のコメント:

コメントを投稿