このブログを検索

2012年11月9日金曜日

チェックボックス(随時)

■久々のスクリプト

   ちょっと間があいてしまいましたが、チェックボックスを実装するべく、
   オベンキョオベンキョしていました。

   前回の記事で、チェックボックスを実装するには、BUIビルダーを使用せずに、
   直接スクリプトを記述した方が良い、ということが分かりました。

   そこで、今回は、全文スクリプトを記述して次のような簡単なチェックボックスを
   作りました。

    チェックボックスを選択すると、選択したチェック項目名を下段に表示
     

■参照元

   前回の記事と同様に、今回も【bmoo】さんのお世話になりました。

   http://www.bmoo.net/archives/2012/04/314029.html


■スクリプト

   作成したスクリプトは、こんな感じです。
   (ほとんど、bmooさんのコピーに近いですねっっ)




   ☆簡単コード説明☆

     1~33行目  :  UIの定義
                  -外枠作成
                  -チェックボックス作成
                  -チェックボックス選択時の表示用ラベル作成

     34~70行目 :  チェックボックスが選択された際の処理  

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

      2~4行目 : 決まり文句
      
      7~13行目 : Panel”checkboxContainer”の中にチェックボックスを6つ作成
                  ・チェックボックスの表示名をそれぞれ定義
                     ex) 幼少期(0~6歳頃)
                  ・チェックボックスオブジェクトの名前をそれぞれ定義
                     ex) age1
                  ・チェックボックスが選択された際の処理functionを紐付け
 
     16~22行目 : Panel”infobox”にラベルを6つ作成
                  ・各チェックボックスを選択時に表示させたいメッセージを定義
                     ex) age1を選択 ⇒ 「幼少期(0~6歳頃)」と表示
                  ・初めは「Visible = false」で表示されないようにする

     25~32行目 : Panelをアプリに追加する    ※後記「補足」参照

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

     37~70行目 : 各チェックボックス選択時の処理を定義
                  ex) age1を選択 ⇒ info1を「Visible = true」で表示する


    【補足】  
       VerticalPanelが3つも登場したので、念のためどんな配置になっているかを
       簡単に図示します。



■動作テスト

   これで、動作テストしてみます。

   初めの表示はこんな感じ。


   適当にチェックしてみます。(1,3,4,5,6をチェックした際の画面↓)
   すると、下の段に選択されたチェック項目が表示されます。



    チェックを外すと、下の段の表示も消えます。



   とってもシンプルですが、こんな感じで~す。

今日はここまで。


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

   以下のURLに、スクリプト全文+UIを載せています。   https://sites.google.com/a/mypleis.com/gas_mypleis/GAS_ALL/13_checkbox_realtime_v2/13_checkbox_realtime


■予告編

   次回は、今日のチェックボックスを改良して、「保存ボタン押下でSSに保存」できる
   ようにしたいと思います。

10 件のコメント:

  1. 改造してみました!
    https://gist.github.com/4049724

    返信削除
    返信
    1. いつもいつも、本当にありがとうございます!
      改造してくださったスクリプト、拝見しました!!

      冗長だな~~と思っていたスクリプトが大変すっきりと
      なっていて驚きました。
      新しい構文や、「グローバル??」など、今後のお勉強に
      繋がる情報もあり、大変有難いです。

      もし良ければ、改造してくださった版を、このブログで
      紹介させて頂きたいのですが、よろしいでしょうか??

      削除
  2. 全然問題無いです。

    JavaScriptにおけるvarでは、関数の中で宣言するローカルな変数と関数の外でも(中からでも)使えるグローバルがあり、今回は2つの関数から使う配列をグローバルに定義しています。

    返信削除
  3. GUIビルダーを使うとダメ!
    の件について調べてみました。

    結論から言えば、GUIビルダーを利用した場合、クリックしたチェックボックスをハンドラーとして関数を呼び出すように設定しますので、確かに最後に押されたものしか有効にならない、ようですね。

    で、その問題の対策は下記のように、ユーザプロパティに記録させておくようです。
    http://libro.tuyano.com/index3?id=644006&page=4

    ボタンAが押された→ボタンAの状態を記憶
    ボタンBが押された→ボタンBの状態を記憶
    → 描画: 記憶されたA,Bの状態を見て表示

    みたいにするみたいですね!
    なるほど!

    返信削除
  4. サンプルです!
    https://gist.github.com/4063799

    返信削除
  5. わおぉぉぉぉ!
    なんだかすっごいですねヽ(*゚O゚)ノ !!玄人さんですね!

    GUIビルダーを使ってチェックボックスを実装できると、
    スクリプトを書くのがシンドイ私にはとても有難い話です。

    カメなもので、追いつくのに諸時間要しますが、
    是非ともユーザプロパティとやらもマスターして、フォームを
    完成させたいと思います♪♪

    返信削除
    返信
    1. >玄人さんですね!

      まだ触り始めて3日くらいですけど(笑
      仕事の合間にセミナー予習程度に・・。
      でもお陰様でセミナーで20分くらいお話をできるレベルには昇華できた気がします。
      機会マジ大切

      GUIビルダーを使うのもそれはそれでしんどいですね。
      特にレイアウト周りはパーツが思ったところに配置されなくてイラっとしましたw
      例の赤丸青丸の表示も文字を大きくしたら消えちゃったりとか
      わけわかんなくなって・・・。まあ慣れの問題・・・?
      もともとスマホとか業務系アプリとかだとGUIはこんな感じで作るらしいので
      そういう経験が少ないってのも結構理由になってる感はあります<個人的な感想の話


      GUIビルダーで作ったものがコードになって微調整できる、
      とかならいいのかもしれないけどまあまだベータだし と思うことにしています。

      削除
  6. 触り始めて3日で、私の3か月を超えていかれたのですね(´・ω・`)ショボーン
    いいんです、non-ITはカメ並みに地道にがんばるのですρ(・ω・、)イジイジ

    直感的に部品を配置できるのは、素人な人間(=私)には結構便利ですが、仰る通りGUIビルダーで作ったものがコードになってくれるといいな~~と、ほんと思います!

    Googleさんに期待大ですね☆

    返信削除
    返信
    1. 3ヶ月のうち多くは乗っからせていただきましたし、
      あと画面キャプチャを貼ったりとかってのが実際すげえ時間かかるんですよねえ。
      自分はそれがめんどくさくて端折ってしまうタイプ<ブログ書くのに向いてない

      (自分にとって)新しいテクノロジへのキャッチアップ力は社内外でも定評がある(謎)のでどんとこいです!

      削除
  7. お返事遅くてすみません~~(汗)

    ブログ、初めてチャレンジしているのですが、確かに相当めんどいです(笑)
    世の中の方々は、えらくマメなのだなぁ、と感心する日々です(**)

    そして、キャッチアップ力、大事ですね☆
    是非どんどん新情報キャッチして、私にも教えてくださいね~~♪

    返信削除