あぁ、師走師走師走ε=ε=ε=ε=ε=┌(； ・＿・)┘
いそがし～いそがし～～ランチとかショッピングとかパーティーとかでいそがし～（笑）
はい。本題。
テキスト入力・チェックボックス選択内容をスプレッドシートに保存し、
Googleサイトに新規にページを追加する、というスクリプト。
前回は下準備だけで終わってしまいましたので、今日はUIを構築する
ところまでを載せま～す。
■UI構築
まずは、スクリプトエディタのファイル → ユーザーインタフェース構築を選択し、
BUIビルダーを開きます。
名前を付けて、保存。
今回作成するUIは、大きく次の2つに分類することができます。
（１）入力フォーム部分
： テキスト入力欄やチェックボックスを配置する箇所
（２）ダイアログボックス部分
： 入力フォーム内の「登録」ボタンを押下した後に表示される
ダイアログボックス
＜入力フォーム部分＞
左側のコンポーネント（=部品）一覧から、次の部品を中央にドラッグ＆ドロップ。
各部品のプロパティを下記の通り変更する。
※以下、あくまでサンプルですので、適宜お好きなものに変えて下さいね★
①Scroll Panel
－ID ： Main Panel
②Vertical Panel
－ID ： Vertical Panel1 （←デフォルト）
③Label ×3
－ID ： Title / Contents / Age
－テキスト ： タイトル / 本文 / 年代
④Text Box
－ID ： Title Text Box
－テキスト ： （空欄）
－名前 ： Title Text Box
⑤Text Area
－ID ： Contents Text Area
－テキスト ： （空欄）
－名前 ： Contents Text Area
⑥チェックボックス ×6
－ID ： age1～6
－テキスト ： 幼少期（・・・） / 学童期（・・・） / ・・・ / 老年期（・・・）
－名前 ： age1～6
⑦Button
－ID ： Button1 （←デフォルト）
－テキスト ： 登録
部品⑥チェックボックス”age1～6”のプロパティ【イベント】のうち、「マウスクリック」に
”checkHandler”を選択する。
＜入力フォーム箇所＞の最後。
部品①Scroll PanelをPC画面の縦の長さで表示される長さにまで縮める。
＜ダイアログボックス箇所＞
続いてダイアログボックス箇所のUIを作りまっす！
左側の部品一覧から中央へ下記の部品を配置します。
①Absolute Panel
－ID ： DialogPanel
②Label ×2
－ID ： Label1、2 （←デフォルト）
－表示 ： 任意（省略）
③Anchor（URL表示用）
－ID ： ReadAnchor
－リンク ： URL
④Button ×2
－ID ： ContinueButton / BackButton
－テキスト ： 続けて書く / 戻る
⑤Anchor ×2
－ID ： ContinueAnchor / BackAnchor
－テキスト ： （空欄）
－リンク ： 各URL
※④のButtonと⑤のAnchorは、④の上に⑤がぴったり重なるように配置する
（Buttonを押したと見せかけて、実はAnchorを押させるという裏ワザ（？）です＾＾；）
以下、プロパティ設定終了後のイメージとリンクの設定箇所の例示です。
後半かなり端折ってしまいましたが、これで保存したらば、UI構築は終了ですー。
今日はここまで
■予告編
次回は、スクリプトの解説を載せます♪
0 件のコメント:
コメントを投稿