あぁ、師走師走師走ε=ε=ε=ε=ε=┌(; ・_・)┘
いそがし~いそがし~~ランチとかショッピングとかパーティーとかでいそがし~(笑)
はい。本題。
テキスト入力・チェックボックス選択内容をスプレッドシートに保存し、
Googleサイトに新規にページを追加する、というスクリプト。
前回は下準備だけで終わってしまいましたので、今日はUIを構築する
ところまでを載せま~す。
■UI構築
まずは、スクリプトエディタのファイル → ユーザーインタフェース構築を選択し、
BUIビルダーを開きます。
名前を付けて、保存。
今回作成するUIは、大きく次の2つに分類することができます。
(1)入力フォーム部分
: テキスト入力欄やチェックボックスを配置する箇所
(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 件のコメント:
コメントを投稿