【GUIビルダー】フォーム自作・SS保存（１）

■やっとこさ着手

　　　ここのところケアレスミス多発で思うようにスクリプトが作れず、ムキーーー[○･｀Д´･○]
　　　という状態でしたが、やっとこさちょっぴり形になってきました。
　　　
　　　今やろうとしているスクリプトは何かというと、今までGoogleフォームで作っていた
　　　「新しく自伝を書く」というページ（=自伝入力用のページ）を、Googleフォームではなく
　　　それっぽいフォームを手作りしようというものです。

　　　　　（今のページはこんな感じ）

https://sites.google.com/a/mypleis.com/gas_mypleis/GAS_ALL/3_google_form




■参照元

　　　今回参考にしているのは、主に以下の2つです。


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

　　　　　　　　－最近こちらのサイトばっかり・・・　
　　　　　　　　　 でも、検索してもここ以外にいいサイトが出てこなくなってきたんですよね～。
　　　　　　　　－最もシンプルなフォームの作成方法を用いて説明されています。


　　　　　【過去記事】　：　テキストボックス入力・SS保存

　　　　　　　　－今回のスクリプトは、この記事で紹介したスクリプトをベースにして
　　　　　　　　　コピー＆ペーストして作ります。


■手順・スクリプト

　☆下準備・保存用SS作成☆


　　　まずは、今回のスクリプトのベースとなる「テキストボックス入力・SS保存」というスクリプトを
　　　コピペします。
　　　このスクリプトは、テキストボックスに入力された値を「スプレッドシートに保存する」という
　　　スクリプトですので、スプレッドシートの中に組み込まれています。
　　　このスプレッドシートごとコピーすると、スクリプトも一緒にコピーされます。

　　　まずは、フォームに入力されたデータを保存するためにスプレッドシートを準備します。
　　　今回予定しているフォームの入力項目は、以下の4項目。

• タイトル
• 本文
• 年代
• ジャンル

　　　これらの項目をスプレッドシートの1行目に記入します。

　　　フォームに入力されたデータを保存するためのスプレッドシートはこれでOK.

　　　次に、スクリプトエディタを開きます。

　　　スクリプトは一旦このままで、名前を変更して「保存」し、

　　　「インターフェース構築…」からGUIビルダーを開きます。

　　　----------ポイント-------------------------------------------------------

　　　　・スタンドアローンのUIとして作成したい場合は、次のどちらかの方法でスクリプトを作成
　　　　　する。
　　　　　　　　①「Googleドライブから」
　　　　　　　　②「Googleドライブ→スプレッドシート→スクリプトエディタから」

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



　☆枠組み作成☆

　　　GUIビルダーが開いたら、フォームを作るための枠組みを作成します。
　　　フォームの枠組みを作るために必要な部品は下記のとおり。
　　
　　　　　　①Scroll Panel　　：　フォームが画面表示サイズより大きくなった時にスクロール
　　　　　　　　　　　　　　　　　 できるようにするため

　　　　　　②Form Panel　　 ：　フォームの範囲を定義し、”SubmitButton”で一括データ取得
　　　　　　　　　　　　　　　　　　できるようにするため

　　　　　　③任意のPanel　（例：Vertical Panel）　：　実際のフォームの中身を配置するため

　　　　　　④SubmitButton　：　”Form Panel”の中に配置された項目に入力されたデータを
　　　　　　　　　　　　　　　　　　一括取得するためのボタン
　　　

　　　これらの①～③部品を、下図のように「入れ子状態」に配置します。

　　　このように面倒くさいことをしなければいけない理由は、”Scroll Panel”も”Form Panel”も　　
　　　それぞれの直下には一つの「子ども」しか持つことができないからです。

　　　Scroll Panelの直下には、Form Panelを配置したら、それで満杯。
　　　Form Panelの直下には、Vertical Panelを配置したら、それで満杯。
　　　したがって、実際のフォームの中身は全てVertical Panel等の中に配置する、という
　　　三層構造になってしまうようです。

　　　
　　　そして、この入れ子の中に④SubmitButtonを配置すれば、枠組み完成です。

　　　ちなみに、このSubmitButtonは、Form Panelのためだけにあるボタンのようです。
　　　Form Panel以外の場所には配置できないようになっていました。
　　　SubmitButtonのいいところは、Form Panel内に入力されたデータを一括で取得できる
　　　という点だと思います。


　　　----------ポイント-------------------------------------------------------

　　　　・”Scroll Panel””Form Panel”の直下には、一つの部品まで。

　　　　・”SubmitButton”を使い、”Form Panel”の中（直下でなくてもOK）に入れる。

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



　☆フォームの中身作成☆

　　　上記で配置したVertical Panelの中に、フォームの中身を配置していきます。

　　　左側の部品（コンポーネント）一覧から、必要な部品を中央にドラッグ＆ドロップ。

　　　
　　　テキストを任意のものに変えて、

　　　部品数が多いので、【ID】を分かりやすいものに変更します。
　　　

　　　テキストボックス及びテキストエリア、チェックボックス等のデータが入る部品には、
　　　【名前】を設定します。

　　　


　　　----------ポイント-------------------------------------------------------


　　　　　・テキストボックス等のデータ入力用の部品には、【ID】と【名前】の設定を忘れずに。　　　

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



あーーー、無駄にすんごく長くなってしまいました・・・・・・・・・・
なので、今日はここまで。


■予告編　　

　　　次回の更新は、来週火曜日です。
　　　次回は、今日の続きです。