このブログを検索

2012年9月28日金曜日

【ぼやき】なぜだろう・・・・

■うーむ。

    昨日、じゃなかった一昨日だ。
   一昨日皆様に公開したスクリプト↓

   【テキスト入力フォーム自作(FormPanelなしver)】
   https://sites.google.com/a/mypleis.com/gas_mypleis/GAS_ALL/12_form_no_formpanel

   またしても、共有設定を「一般公開」しているにも関わらず、「権限がありません」
   という表示がでてしまっているようです。

   折角アクセスしてくださったS様、ただいま原因調査中ですので、少々お待ち下さい(><)

    スプレッドシートの方もスクリプトの方も、どちらも誰でも閲覧できるようにしてるんだ
   けどな~~~。。。

   なぜだろう。。。


■余談

   ところで、今日?昨日?で2000アクセス突破しました♪
   えへへへへ~~~。
   最近ちょっと手が回らなくなってきましたが、ちびちび頑張るぞー。

2012年9月26日水曜日

テキスト入力フォーム自作(FormPanelなしver)(3)

■昨日の続き
     
   昨日までのスクリプト(=自作フォーム)をまたまた改良します。
   今回は、『「登録」ボタン押下時に、自動的にGoogleサイトに新しページを追加し、
   フォームの入力内容を表示する』 ようにしたいと思います。

   スクリプトの全体の動きはこんな感じ。


      ① フォーム入力 : TextBox&TextArea
           ↓
      ② 「登録」ボタン押下
           ↓
      ③ スプレッドシートに保存
           ↓
      ④ フォーム入力画面にダイアログボックス表示
           ↓
            →⑤ ダイアログボックス内「続けて書く」ボタン押下
                  ↓
              ⑥ フォームリフレッシュ
           ↓
            →⑦ ダイアログボックス内「戻る」ボタン押下
                  ↓
              ⑧ 元のサイトに戻る
           ↓
      ⑨ Googleサイトに新規ページを作成し、フォーム入力内容を表示


   今日は⑨の処理を追加します。 


■スクリプト

   今回は、昨日のスクリプトに、下記のスクリプトを追加しました。
   スクリプトを追加した場所は、
    「登録」ボタンクリック時の処理を定義するfunction myClickHandlerButton(e)です。
   

   今回追加したスクリプトは、どれも過去記事で載せたものですので、
   説明は割愛します。

     (参照) 
       過去記事 : 「Googleサイトに新規ページ追加
                「親ページ指定
                「ページ名自動生成」
                「ページ追加時に改行
                「ページレイアウト変更」  

   これでスクリプトは完成です。


■忘れちゃいけないひと手間

   スクリプトも書き終えて、よし!動かすぞ―と勢いこんで、大事な作業を忘れていました。
   スクリプトを変更しただけの状態で動作テストしてみると、以下のようなエラーがでました。

      「その操作を実行するには承認が必要です。」

   今回、新たにGoogleサイトを操作するスクリプトを追加したので、Googleサイトを操作する
   ための承認作業が必要でした。

   そのひと手間は、下記の方法で行います。

   スクリプトエディタの関数「doget()」を選んで「▼(実行)」ボタンを押下。


   すると、「Googleサイトの操作をするための承認が必要です。」というようなメッセージが
   表示されますので、「許可」ボタンを押します。

   これでOK。


■動作テスト

   これで、再度動作テストしてみます。
   
   アプリケーションにアクセスしてフォームを表示。
   「タイトル」「本文」に入力し、「登録ボタン」を押下します。


   Googleサイトをチェックしてみると、ページ名「read(=自伝を読む)」というページの下に
   ページが追加されました♪ 
    

今日はここまで。


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

   まだまだ中途半端な状態ではありますが、一応皆様ご自由に使えるように、
   下記のページにURLを載せていますので、お試しくださいませ。

   https://sites.google.com/a/mypleis.com/gas_mypleis/GAS_ALL/12_form_no_formpanel


■予告編

   目をつぶっていましたが、そろそろif文の修正に着手しなければ・・・と思っています。
   うまくいけば・・・・・・。

2012年9月25日火曜日

テキスト入力フォーム自作(FormPanelなしver)(2)

■それっぽくなってきました

   昨日に引き続き、今日もFormPanelを使わずにフォームを自作します。
   今日は、以下のような一連の動きをするスクリプトに改良していきます。

      ① フォーム入力 : TextBox&TextArea
           ↓
      ② 「登録」ボタン押下
           ↓
      ③ スプレッドシートに保存
           ↓
      ④ フォーム入力画面にダイアログボックス表示
           ↓
      ⑤ ダイアログボックス内「続けて書く」ボタン押下
           ↓
      ⑥ フォームリフレッシュ
           ↓
      ⑦ ダイアログボックス内「戻る」ボタン押下
           ↓
      ⑧ 元のサイトに戻る


   ①~③までは昨日までで一旦作成しているので、今日は④~⑧です。


■参照元

   上記のように書くと、なんだか大変な作業をするように読めますが、
   新しいことは全くなしです。
   下記の過去記事にある内容と、昨日作ったフォームとを合体させるイメージです。

     ・【GUIビルダー】ボタン・ダイアログボックス・リンク表示


■スクリプト全体像

   今回は、先に完成版のスクリプト全体像を載せちゃいます。
   細かいコード解説は過去記事を参照して頂くとして、ざ~っくりどんなスクリプトになったか
   書きたいと思います。


   (ブログ上に、どのような形でスクリプト&説明を載せたらより分かりやすいか模索中。
    文字が小さかったり、コピペ出来ないのが難・・・・・。皆さまはどうしてるんだろう。)


■手順

   スクリプトは上記でOKなので、今度はGUIビルダーを開きます。
   端折りますが、以下のようにダイアログボックスにあたる部分を作成します。



    (ポイント)

      ☆Panel内に自由に部品を配置したい場合は、「Absolute Panel」を使用

      ☆【名前】【ID】【テキスト】を任意のものに修正

      ☆リンクさせたい場合は、「Button」に「Anchor」をぴったり重ねて、
       「Anchor」のプロパティ内「リンク」にURLを書き込む
    

   尚、フォームに続けて入力したい場合、入力後に単純にダイアログボックスを閉じるだけ
   では、エラーが出てしまうようです。
   ですので、私は「続けて書く」というボタンを押すとフォームのURLへリンクするように
   して、ページをリフレッシュする仕組みにしました。
   

■動作テスト

   まずは、自作フォームのURLへアクセス。
   「タイトル」と「本文」を入力して、「登録」ボタンを押下!



   すると、ダイアログボックスが表示されました。


   一旦画面を移って、スプレッドシートを開くと、ちゃんと入力値が書き込まれてます♪


   で、また元のフォームの画面に戻り、ダイアログボックスの「続けて書く」ボタンを押下。
   ページを再読み込みして、ブランクのフォーム画面になります。


   ダイアログボックスの「戻る」ボタンを押すと、今は下記のページにリンクするように
   しています。


    if文のところがまだ微妙な状態ではありますが、大分フォームっぽくなってきましたね~♪
 

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

   こんな中途半端な状態ではありますが、一応皆様ご自由に使えるように、
   下記のページにURLを載せていますので、お試しくださいませ。

   https://sites.google.com/a/mypleis.com/gas_mypleis/GAS_ALL/12_form_no_formpanel


■予告編

   明日も、if文の箇所は放置したまま、今日のスクリプトを「フォームに入力された内容を
   Googleサイトに新規ページ追加」するというフォームに改良したいと思います。

2012年9月24日月曜日

テキスト入力フォーム自作(FormPanelなしver)(1)

■再挑戦

   先週躓いた「フォーム自作・SS保存」するスクリプト。
   やっぱり悔しいというか気持ち悪いので、方法を変えて再挑戦してみます。

   今度は、"FormPanel"を使わない方法でできないか試してみます。
   ("FormPanel"を使ってしまうと、日本語に対応していないですし、使えな~~い。)

   前回は、初めから完成イメージのフォームをすべて作ろうとしてしまい、手間もかかった
   上に報われなかったので、今回はSmall Startでいきます。

   まずは、 一つのボタンを押下で、「TextBox」と「TextArea」の二つの入力項目に
   入力されたデータをスプレッドシートに保存することができるか、からです。


■手順・スクリプト

   今回も、以前作成した「【GAS】テキストボックス入力・SS保存」というスクリプトを
    コピペして作ります。
   スクリプトを開いて、「ファイル」→「コピー作成」。




   保存用スプレッドシートの1行目を作成予定のフォームに合わせて修正します。
    今回は、「タイトル」「本文」の2項目のみで作ってみます。


   「ツール」→「スクリプトエディタ」でスクリプトエディタを開きます。
   どちらでも構わないのですが、今回は先にGUIを作りますので、GUIビルダーを開きます。

   まずはシンプルに、以下の部品のみを使ったフォームにしてみます。

     ①Scroll Panel  : 画面スクロール用
     ②Vertical Panel : 部品を配置するためのメインパネル
     ③Label ×2   : 「タイトル」「本文」などの表示用
     ④TextBox     : テキスト入力用
     ⑤TextArea     : 長文テキスト入力用
     ⑥ Button     : 入力内容をSS保存する等の処理を動かすトリガー用



    【ID】と【名前】、【テキスト】を任意のものに修正します。


   ⑥Buttonのプロパティから「イベント」→「マウスクリック時」に”myClickHandler”を選択。



   これで、GUIはOK。
   保存して、スクリプトエディタに戻ります。
   
   
   さて。スクリプト。
   先に前置きしますと、以下のスクリプトはかなりイケテナイと思います。
   イケテナイ点は下記の2つ。

      ①if文の中にif文を入れ子にする書き方では、入力項目が2つより多くなった時に
       ものすごく冗長な書き方になってしまう。
          例)「入力項目1=’(空欄)’」且つ「入力項目2=’(空欄)’」且つ
             「入力項目3=’あああ’」の場合の処理を書きたい時など
          
      ②elseの処理が書けていないため、TextBoxおよびTextAreaが未入力の場合、
       スクリプトがきちんと動かない。
   
   上記を踏まえた上で、以下のスクリプトをご覧ください。。。


   これで、「保存」・「バージョン管理」・「ウェブアプリケーションとして公開」すれば、
   それとな~~~く、フォームっぽくなります。


■動作テスト

   URLにアクセスすると、下記のような画面が出ます。



   「タイトル」と「本文」に入力し、「登録」ボタンを押下。



   保存用のスプレッドシートに戻ってみると、入力した値が保存されてまーす。


   試しに、「タイトル」と「本文」を未入力のまま「登録」ボタンを押下すると・・・



   保存用のスプレッドシートには、”undefiend”と出ちゃいますーーー。



   ちなみに、if&else文を色々変えて試してみているのですが、やっぱりelse文の
   箇所がうまく動かないようです。
   Google Apps Scriptがどうのという依然に、私がif文の書き方が分かっていない
   ことが原因かと・・・・・・ 
   これは、こっそりJavaScript?のテキスト読んで勉強しま~す。


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

   こんな中途半端な状態ではありますが、一応皆様ご自由に使えるように、
   下記のページにURLを載せていますので、お試しくださいませ。

   https://sites.google.com/a/mypleis.com/gas_mypleis/GAS_ALL/12_form_no_formpanel


■予告編

   明日は、「if文のところを修正します!」と言いたいところですが、
   それは一旦置いておいて、「登録」ボタン押下時に、ダイアログボックスを表示する
   ようにしたいと思います。

2012年9月21日金曜日

【閑話休題】Google Apps API Japanに登録

■日本語版掲示板

   以前、以下のようなGoogle Apps Scriptに関する日本語の掲示板や意見交換の場が
   あるといいのにな~~~、とチラリと触れたことがありますが。

     【stackoverflow】
     http://stackoverflow.com/questions/tagged/google-apps-script


   日本語版もあったみたいです!

     【Google Apps API Japan】
     https://groups.google.com/forum/?fromgroups=#!forum/google-apps-api-japan




   せっかくなので、グループに登録してみました~~。

   ところで、「Google Apps API」ってなんぞや??
   と思い、ちょっと検索してみました。

   「Google Apps」と「API」とに単語が分かれるみたいで、
   API・・・Application Programing Interfaceの略だそうです。

   あるプラットフォーム(OSミドルウェア)向けのソフトウェア開発する際に使用できる命令や関数の集合のこと。また、それらを利用するためのプログラム上の手続きを定めた規約の集合。個々のソフトウェアの開発者がソフトウェアの持つすべての機能をプログラミングす るのは困難で無駄が多いため、多くのソフトウェアが共通して利用する機能は、OSやミドルウェアなどの形でまとめて提供されている。個々の開発者は規約に 従ってその機能を「呼び出す」だけで、自分でプログラミングすることなくその機能を利用したソフトウェアを作成することができる。
                            (引用元 : http://e-words.jp/w/API.html


   きょとーーーーーん(?´・ω・`)

   はぁ。。。。。。
   たぶん、Google Apps Scriptみたいに、予め構文(doGet()みたいな)が準備されていて、
   その構文を使えば、自分で全部一からプログラミングしなくてもプログラムができますよ、
   っていうもののことなのでしょう。。。


■日本語でも・・・

    グループに登録したので、さっそく中身をさらーーっと眺めてみました。
 
   が、またしても

   きょとーーーーーん(?´・ω・`)???

   英語版の掲示板と、理解できる情報量があんまり変わらない気が・・・。
   もしや、言語の問題以前の問題・・・??

   あわよくば何か分らない時には質問を投稿してみようかな??なんて思っていましたが、
   私の質問なんてアホすぎて一蹴されそう・・・。
   もう少し様子をみよーーっと。


■余談ですが。

   いつも参考にさせて頂いている、【bmoo.net:逆引きGoogle Apps Script】のページにて、   
   私のブログを紹介してくださっていました!

   http://www.bmoo.net/archives/2012/09/314664.html
   
   こちらでも書いてくださっている通り、Google Apps Scriptは私のような初心者でも
   なんとか色々便利に使えるようになっていますので、「そんなにITに詳しくないけど、
   使ってみようかな~~?」という方のお役に少しでもたてれば、と思います。
   

■予告編

   次回の更新は、来週の月曜日です。
   ”Form Panel”を使わずに、フォームを自作することができるか試してみようと思います。
   

2012年9月20日木曜日

Googleフォーム送信後の確認画面編集

■Googleフォームのデフォルト機能

   今日は、Google Apps ScriptもGUIビルダーも忘れ、Googleフォームについてです。
   以前の記事にも書きましたが、Googleフォームに回答を入力して送信した後に、
   次のような画面が出て、フォームが消えてしまうのが非常に気に入りません。



   ここのところ数週間、GUIビルダーで色々試行錯誤していたのも、全てこの事象を
   なんとかしたい!という一心でした。

   で、挫折()´д`()。
   さっさと諦めて「何かいい方法はないかな~~~」といじっていたら、
   今まで気付かなかったGoogleフォームのデフォルト機能を発見しました!

   それは、『フォーム送信後の確認画面を編集できる』というもの。


■手順

   手順はいたって簡単。
   既に作成してあるGoogleフォーム(の台帳)を開いて、「フォームの編集」を押下。



   フォームの編集画面右上にある「その他の操作」→「確認の編集」を押下。


    フォーム送信後に表示される確認画面の編集画面が開きます。
    ここで、任意の表示に書き換えます。
 


   URLをコピペすると、ちゃんとリンクとして認識されるようです。


   「保存」したら、これでOK。

   実際にどんな風に表示されるか見てみます。
   フォームを開いて、「送信」!


   こんな感じで表示されました~~~。



今日はここまで。


■予告編

   次はどんなスクリプトを試してみようか考え中で~す。

2012年9月19日水曜日

【ぼやき】フォーム自作は中断します。。。

■無念・・・

   どうも鬼門のになっている「フォーム自作・SS保存」するスクリプト。
   ついに、意味不明のエラーが出るようになったので、やる気が失せました・・・。
    
   自分の勝手なモットーで、「同じ問題で3日以上悩まない!」のです。


■こんな状態でした

   今後の備忘のために、どういう状態で止まったかを書いておきます。
   躓きは、以下の2点。

     ①チェックボックスが実装できない。
        -「『年代』の選択肢として、チェックボックスを6つ用意し、
         チェックボックスに選択された項目をSSに記入する」という処理を
         させたかったのですが、うまく行きません。。。


     ②保存用のスプレッドシートが「削除された可能性があります」というエラーが出る。
        -昨日はちゃんと動いていて、何も変更していないのに、急に今朝から
         このエラーが出るようになりました。



         スプレッドシートは削除されていないし、スプレッドシートIDを再度書き換えても
         エラーが消えません。

          
■チェックボックスの実装について
 
   ちなみに、チェックボックスを実装するにあたっては、下記のサイトを参考にして
   スクリプトを書きました。

     【bmoo.net : 逆引きGoogle Apps Script】
      http://www.bmoo.net/archives/2012/04/314029.html


   ここのスクリプトを基に、以下のようなスクリプトを書いたのですが。。。



     ★コードのイメージ★     

     24~28行目 : age1のチェックボックスが選択されている(=true)の場合、
               変数"age1"に”0~12,”という値を格納。
               チェックボックスが選択されていない場合(=true以外[=else])の場合、
               変数"age1"に"(空欄)"を格納。

     30~58行目 : age1と同様に、age2~age6の選択の有無を識別し、変数に格納

     60行目    : 上記で値を格納した変数"age1~age6"をくっつけて、変数"age"に
               格納

     あとは、上記のスクリプトでは省略してしまいましたが、スプレッドシートに変数"age"の
     値を記入する、という処理をさせているつもり。


   上記のスクリプトを動かしてみると、
 
     ・age1~age6をすべて選択  :  (0~12,12~25,25~40,40~65,65~)と表示
                          
                          ⇒正常
 
     ・age1とage2~6のいずれかを選択 : 1行目に(0~12,65~)と表示(age1とage6の例)
                             2行目に「タイトル」がundifined、「年代」は空白
                                  と表示

                          ⇒1行目は正常、2行目は異常

     ・age2~age6のいずれかを選択  : 「年代」は空白で表示

                          ⇒異常

    上記の結果から見ると、チェックボックスが選択されていない場合の処理(=else)が
    問題っぽいですが・・・・・。

 
ここまでは分かったものの、先に進まないので、このスクリプトは一旦中断。

血の巡りが良くなったら、また考えてみよ~~かな~。


                            

  
     

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”を使わない方法でフォームっぽいものが   
   できないか、試してみようと思います・・・・。


■予告編

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

2012年9月14日金曜日

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

■やっとこさ着手

   ここのところケアレスミス多発で思うようにスクリプトが作れず、ムキーーー[○・`Д´・○]
   という状態でしたが、やっとこさちょっぴり形になってきました。
   
   今やろうとしているスクリプトは何かというと、今まで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】と【名前】の設定を忘れずに。   

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



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


■予告編  

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