【GUIビルダー】テキストボックス入力・表示（１）

■テキストボックスを設ける

　　　引き続き、GUIビルダーを使ったUI（ユーザーインタフェース）作りを頑張っています。
　　　今回作成を試みているUIは、

　　　　　テキストボックスを表示し、そこに入力した値を表示する

　　　というものです。

　　　さてさて、ちゃんと作れるかしら～～～～。

■参考元

　　　今回参考にしたのは、以下のブログ。

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

　　　　　　【Journals and Reflexion】
　　　　　　http://blache90.tumblr.com/post/7195167628

　　　そして、参考書「Google Script」に載っていた次のようなスクリプト。

　　　　☆Google Script :　Enterprise Application Essentials

　　　　　　　（P.39-40抜粋）

　　　　　　　amazonURL→Google Script: Enterprise Application Essentials

■ダメだしする訳ではないのですが・・・

　　　何度も何度も助けられているサイトや参考書ですし、決してダメだしするつもりでは
　　　ないのですが、、、、

　　　上記の3つに載っているスクリプト、そのままそっくりコピペしてみても、 どれも正しく
　　　動作しません！！！！！

　　　結果的には、なんとか完成に漕ぎ着けましたが、なぜ3つが3つとも重要な情報が
　　　欠けているのでしょう・・・・・・・。

　　　私が躓いた部分というのは、もうごくごく初歩的なことで、書くに値しないようなことなの
　　　かしら・・・。
　　　それとも、気付かない内に私が何か変なことしただけ？見落とし？？

　　　謎は残りますが、とにかく私なりに作成したスクリプトと、注意すべき点をご紹介したいと
　　　思います。

■手順とスクリプト

 　　　今回も、Googleサイトの中からスクリプトエディタを開きます。（※詳細は過去の記事参照）
　　　 （「サイトを管理」→「Appsスクリプト」→「新しいスクリプトを追加」）

　　　名前を付けて保存し、「インターフェース構築...」を押下し、GUIビルダーを開きます。

　　　左側から、下記の部品を中央の画面に配置します。

　　　　　　①Panel　（様々な種類のPanelがありますが、今回はVertical Panelを使用）
　　　　　　②Label　（指示メッセージ表示用）
　　　　　　③TextBox
　　　　　　④Button
　　　　　　⑤Label　（テキスト入力内容表示用）

　　　※②～⑤の部品は、全て①Panelの中に配置します。
　　　　右側コンポーネントツリーで、Panelの階層下に②～⑤が表示されていればOKです。

　　　配置した①～⑤のプロパティを、次のように変更します。（あくまで、例です。）

　　　　　　①Panel 　   ：　【ID】mainPanel
　　　　　　②Label　 　 ：　【ID】Label1　　【テキスト】お名前をご入力ください。
　　　　　　③TextBox　：　【ID】TextBox1　【名前】TextBox1　【テキスト】（空欄）
　　　　　　④Button　　：　【ID】Button1　【テキスト】Click!
　　　　　　⑤Label　    ：　【ID】Label2　　【テキスト】（空欄）

　　　※赤字の部分、決してお忘れなく！

　　　これで、GUIビルダーを使った作業は終了です。
　　　名前を付けて「保存」します。

 　　


　　　尚、今回はGUIビルダー内で、「ボタン押下時の処理」は追加していません。

　　　スクリプトエディタに戻ったら、下記のスクリプトを記入します。

　　　　　　☆簡単コード解説☆

　　　　　　　＜解説＞
 　　　　　　　　　2～15行目　：　作成したUIを呼び出し、クリック時の処理（サーバーハンドラー）
　　　　　　　　　　　　　　　　　　　を作成するスクリプト
　　　　　　　　　19～30行目　： テキストボックスに入力された値を取得し、表示するスクリプト

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

　　　　　　　　　2～4行目　：　省略（決まり文句）

　　　　　　　　　6～7行目　：　作成したUIのうち、必要な部品をIDを指定して呼び出し、
　　　　　　　　　　　　　　　　　　それぞれ変数に格納

　　　　　　　　　9行目　　　 ：　ボタンクリック時の処理を定義しているfunction"myClickHandler"
　　　　　　　　　　　　　　　　　　を使用できるようにする
　　　　　　
 　　　　　　　　 11行目　　　：　引数（=テキストボックスに入力される値）をPanelに設定する

　　　　　　　　  12行目　　　：　ボタンクリック時の処理にfunction"myClickHandler"を紐付ける

　　　　　　　　　14行目　　　：　決まり文句

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

　　　　　　　　　19～22行目　：　省略

　　　　　　　　　24行目　　　　：　テキストボックス（名前="TextBox1"）に入力された値を取得する

　　　　　　　　　25～27行目　： 　取得した値が"（空欄）"でなければ、"Label2"に次の値を格納
　　　　　　　　　　　　　　　　　　　　　　テキストボックスに入力された値＋”さん、こんにちわ！”

　　　　　　　　　29～31行目　：　決まり文句
　　　　　

　　　これで、「保存」すれば、終了です。


力尽きたので、今日はここまで。

■予告編

　　　明日は、今日紹介したスクリプトがどんな出来上がりになったかをお見せします。