このブログを検索

2012年12月31日月曜日

フォーム自作(テキスト・チェックボックス)(5)


■課題

   うーん、本当は来年に課題は持ち越したくないのですが、
   次の点が気になっています。

      ①親ページの指定
         -本来は、「15_form」というページ名の下に新規ページを追加したいが、
          現状ではホームの直下に追加されてしまう。
         (確か、以前は親ページの指定ができてた気がするのですが、
          いつものごとく3歩進んで2歩下がっているので、またやり直し。。。)

      ②ページ名がユニークであるかを事前にチェック
         -かなり前から気になっていた課題。
          フォームの入力欄「タイトル」に入力された文字列をページ名(表示用)
          としてサイトにページ追加しています。
          このページ名が、既に存在しているページ名である場合、
          作成したページがサイトから閲覧できない仕組みになっています。
          
          フォームを送信した時点で、既に同ページ名が存在していないかを
          確認するような処理を追加したいなぁと思っています。

      ③ボタン押下後の処理が重い
        -これは、一応課題認識していますが、多分永久放置(笑)。
          実際にお試し頂いた方はお分かりだと思いますが、
         「登録」ボタン押下後、ダイアログボックスが表示されるまで結構時間が
         かかります。

こんなところでしょうか。
来年には解決できるかしら。うん、がんばる。


今日はここまで。
というか、今年はここまでーーーーヾ(*´Д`*)ノ☆bye-bye☆ヾ(*´Д`*)ノ

拙いド素人ブログを読んでくださった皆様。
アドバイスや励ましのお言葉をくださった皆様。 
ユーザー会で直接お会いしてお声掛けくださった皆様。

本年は大変お世話になりました。心よりお礼申し上げます。
   
どうぞ良い年末年始をお過ごしください^-^*


2012年12月30日日曜日

フォーム自作(テキスト・チェックボックス)(4)

■簡単スクリプト解説の続き

   いきなり本題から。
  
   スクリプト全文はコチラから。

   https://sites.google.com/a/mypleis.com/gas_mypleis/GAS_ALL/15_form




 <(2)function checkHandler(e){}>



   ⇒フォームの入力項目のうち、チェックボックスをチェックされた際の処理を定義。

      -『e.parameter[e.parameter.source]』は次のような意味を指す。
            [e.parameter.source] :クリックで選択された部品名を取得
            (e.parameter[:::]) : 部品名[…]の値を取得

        -”var age = e.parameter…”の行で、チェックボックスがマウスクリックされたことで
              選択された場合    ⇒  true
              選択解除された場合 ⇒  false
           のどちらかの値を変数”age”に格納する。
           
        -”UserProperties.…”の行で、選択されたチェックボックス[age*]のユーザプロパティの
           値を、1行前で変数”age”に格納した値(true/false)にする。

         (例 : 部品名[age1]にチェックが入った場合)

              変数age = [age1]の値 = true
              ユーザプロパティ(age1 , true)

   
  <(3)function myClickHandlerButton(e){}>

   フォームの「登録」ボタンを押下された際の処理を定義しているfunctionです。


     ⇒フォームへの入力項目に、「””(空欄)」あるいは”false”を格納し、リセットする。
       (※この処理、不要かしら・・・ 悩み中。)

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


     ⇒テキスト類は、”e.parameter.[部品名]”で入力値を取得し、各変数に格納。
       チェックボックスは、事前に作成したユーザープロパティに保管されている値を
       読み取り、それぞれの変数に格納。

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


      ⇒チェックボックスの値を、”true/false”表記からチェック項目名に変換。
          例) age1 = 幼少期(0歳~6歳頃)

      ⇒以下の処理を配列checkBoxArray[]の長さの回数繰り返す。
           配列ageArray[i番目]の値が”true”の場合、
               ①配列age_txtArray[i番目]にcheckBoxArray[i番目]の文字列を格納
                                 (↑幼少期(0~6歳頃)など。)
               ②変数age_txtに、①の内容を追加
           配列ageArray[i番目]の値が”false”の場合、    
               配列age_txtArray[i番目]に空白を格納

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


     ⇒フォーム入力項目「タイトル」「本文」が空欄でない場合、スプレッドシートに保存する。
         -テキストボックスに入力された値を保存するスプレッドシートを指定
                   ・SpreadsheetApp.openById()のカッコ内に、前回記事の下準備①
                     メモ帳等にコピーしたスプレッドシートIDを貼り付け

                   ・.getSheets()[0]で、スプレッドシート内の一番左端のシート
                     を指定
                       ※.getSheetName()で、シート名を指定する方法も有

         -指定したスプレッドシートの内、データを書き込む場所を指定
                   -getRange(<*1>,<*2>,<*3>,<*4>)の()の中は、下記の通り
                       <*1>:一番初めのデータを書き込む行番号
                       <*2>:一番初めのデータを書き込む列番号
                            (A=1、B=2、C=3・・・・・)
                       <*3>:データの選択範囲の行数
                       <*4>:データの選択範囲の列数

                   -例えば(2,1,1,2)と指定した場合だと、
                      「セル”A2”を起点として、1行と2列分」を指定
                                ↓
                      「セル”A2:B2”」を指定、となる

         -指定した範囲に、「日時」と「テキストボックス入力値」等を書き込む


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

本当は、今までバラバラと散乱して書いた内容を今回集結させようと思いましたが、
もうくたばりそうなので、過去記事参照ですませちゃいます(o´Д`)=з

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

今日はここまで!!!!!

2012年12月29日土曜日

フォーム自作(テキスト・チェックボックス)(3)

■きゃー、一年が終わってしまう。。。

   なんとか年内には!と駆け込み投稿です。

   テキスト入力・チェックボックス選択内容をスプレッドシートに保存し、
   Googleサイトに新規にページを追加する、というスクリプトの続きです。

   前回までで下準備・BUIビルダーを利用したUI作成まで紹介しましたので、
   今回は、スクリプトのご紹介です。


■スクリプト全文はこちら

   以下のURLに、スクリプトの全文と実際に動かして試せるようにしています。

    https://sites.google.com/a/mypleis.com/gas_mypleis/GAS_ALL/15_form


■簡単スクリプト解説

   スクリプト全文は上記のURLで確認して頂くとし、ブログ上では一部抜粋して
   簡単解説してみようと思いま~す。

   さて、前々回の記事で、次の3つのfunctionの外枠だけ作成されていると思います。

     (1)function doGet(e) { }
          ・・・UIを起動するためのfunction

      (2)function checkHandler(e) { }
          ・・・チェックボックス選択時の処理を定義するためのfunction

      (3)function myClickHandlerButton(e) { }
          ・・・「登録」ボタン押下時の処理を定義するためのfunction

      この3つのfunctionを一つずつ簡単に解説します。

 <(1)function doGet(e){}>

    ⇒フォームの入力項目のうち、「年代」を選択するチェックボックス用の設定。
        -チェックボックス毎に対応するユーザープロパティ(※1)の箱を準備する。
           例) 「age1」という名前のユーザープロパティを作成し、
              「false」という値を格納する。

        ※1 ユーザプロパティとは、ユーザー毎に値を保管することができる入れ物のこと。
             (似たようなもので、スクリプトプロパティという入れ物もあります。
              今回のケースでは、多分どちらでもOKです。)

             以下の手順で確認することができます。
               ・スクリプトエディタ → ファイル → プロジェクトのプロパティ


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




    ⇒フォームで「登録」ボタンを押下した後に表示されるダイアログボックスの外枠作成。
     ダイアログボックスの中身は、GUIビルダーで作成済み。
     上から順に、下記のような意味。
         -createDialogBox(autoHideの可否,modalの可否)という
                       構文で、それぞれ次のような意味
                        autoHide…ダイアログボックスを複数表示する場合、
                               自動的に古いボックスを閉じる
                        modal…ダイアログボックス表示時に、それ以外の
                             部品(ボタン等)を使用不可状態にする
         -ダイアログボックスのID 設定
        -ダイアログボックスをドラッグで移動できるように設定
        -ダイアログボックス表示位置設定(上から○○px)
        -       同上          (左から○○px)
        -ダイアログボックスタイトルバーの表示設定
        -ダイアログボックスの大きさ設定(幅+高さ)
        -ダイアログボックスを非表示に設定
        -BUIビルダーで作成済みの部品名”DialogPanel”を呼び出し
        -呼び出したPanelを今作成したダイアログボックスの外枠に追加
        -ダイアログボックスをアプリに追加

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



   ⇒GUIビルダーで作成したAnchor(=リンク)の表示タブ設定
       -どのタブでリンクを開くかは、”.setTarget()”で設定します。
       -括弧()の中に、以下のいづれかを書きます。
           新しいタブで開く場合   : ”_blank”
           現在のタブで開く場合  : ”_self”
       -今回は、「現在のタブ」で開くようにしています。
       -尚、GUIビルダーを使ってリンク(=Anchor)を作成する場合、GUIビルダー上では
        「新しいタブで開く」しか設定できない(というか、設定するプロパティがない)ので、
        スクリプトエディタでスクリプトを書く必要があります。



今日はここまで

         

2012年12月21日金曜日

フォーム自作(テキスト・チェックボックス)(2)

■UI構築まで

   あぁ、師走師走師走ε=ε=ε=ε=ε=┌(; ・_・)┘
   いそがし~いそがし~~ランチとかショッピングとかパーティーとかでいそがし~(笑)

   はい。本題。
   テキスト入力・チェックボックス選択内容をスプレッドシートに保存し、
   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 (←デフォルト)
         -テキスト   : 登録



  IDや名前等の設定例は下記の通りです。(④TextBoxの例)




上記①~⑦の部品が、下記のような階層で配置されていることを確認する。



   部品⑥チェックボックス”age1~6”のプロパティ【イベント】のうち、「マウスクリック」に
   ”checkHandler”を選択する。



   <入力フォーム箇所>の最後。
   部品①Scroll PanelをPC画面の縦の長さで表示される長さにまで縮める。
 


これで<入力フォーム箇所>は終了で~~すフゥ(o´Å`)=з


 <ダイアログボックス箇所>

  続いてダイアログボックス箇所の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構築は終了ですー。


今日はここまで


■予告編

   次回は、スクリプトの解説を載せます♪

  

2012年12月19日水曜日

フォーム自作(テキスト・チェックボックス)(1)

■年内までになんとか!

   ながらく取り組んできたフォームの自作。年内にはなんとか!と思って
   いましたが、どうにか目途が立ってきました( ´∀`)

   作成中のスクリプト、テキストボックスに入力・チェックボックスから任意の項目を
   選択した後、次のような動作をするものです。

     ①スプレッドシートに、テキストボックス・チェックボックスへの入力内容を
      保存

     ②入力内容をGoogleサイトの指定の場所に新規ページとして作成

     ③ダイアログボックスを表示し、「続けて書く」ボタン押下でフォームを 
       リフレッシュ
 
     ④ダイアログボックスの「戻る」ボタン押下でフォーム画面を閉じる
       (Googleサイトの特定ページへリンク)

     ⑤ダイアログボックス内のURLを押下で、特定のページへリンク
      

   
   ピンと来られた方は正解。
   このスクリプトは、今までにご紹介した下記のスクリプトを合体させたものです。

     過去記事 : 【12】テキスト入力フォーム自作(FormPanelなしver)

              【14】チェックボックス(ボタン式)


   単純に合体させただけなのですが、おさらい?も含めて一から作る過程を載せようと
   思いま~す。


■せっかちさん(笑)のために

   「細かい説明は別にいいよ!」という方のために、先に完成版とスクリプトを公開
   しています。
   
   下記のURLをご確認くださいませ~~。

   https://sites.google.com/a/mypleis.com/gas_mypleis/GAS_ALL/15_form


     ※一部今後修正する予定もありますが、ご了承くださいね~~★


■下準備

   下準備としてすることは、下記の2点。

     ①フォーム入力内容を保存するスプレッドシートを準備

     ②スクリプトエディタを開いて保存

   
  <下準備①>

    Googleドライブ ⇒ 作成 ⇒ スプレッドシート でスプレッドシートを作成



    名前を付けて保存


   
    1行目に保存したいフォームの項目名(タイトル)を記載


    スプレッドシートのIDをどこかにメモ (後ほど使います。)




    ↑の赤い文字列がIDです。



  <下準備②> 

    今回もスタンドアローンとして作成しますので、
    Googleドライブ ⇒ 作成 ⇒ スクリプト でスクリプトエディタを作成



    名前を付けて保存


    以下の3つのfunctionの外枠を準備 (※function名は任意)

      (1)function doGet(e) { }
          ・・・UIを起動するためのfunction

      (2)function checkHandler(e) { }
          ・・・チェックボックス選択時の処理を定義するためのfunction

      (3)function myClickHandlerButton(e) { }
          ・・・「登録」ボタン押下時の処理を定義するためのfunction



ちょっと長くなったので、今日はここまで。


■予告編

   次回は、このスクリプトのユーザーインタフェースを作成する過程をつづります。

2012年12月14日金曜日

【閑話休題】GASユーザー会メンバーズトークレポ(4)

■今日で最終回

   今日はメンバーズトークレポの最終回、③パネルディスカッションの内容を
   載せまーす。

    (会の構成は下記の通り)


      ①ユーザー事例紹介   ←終了
      ②Google製品紹介他   ←終了

      ③パネルディスカッション  ←今回 
      ④お楽しみセッション    ←終了
      ⑤交流会           ←終了



■パネルディスカッション

   <話者紹介>
     モデレーター : 株式会社ケーティーコンサルティング 有江氏 
     パネラー    : 株式会社JTB情報システム 石田氏   (以下、JTB)
                日本大学 相川氏    (以下、日大)
                株式会社ポピンズ 渡邉氏   (以下、ポピンズ)

   <パネラー概要>
     日大   : 大学、約11万アカウント
     ポピンズ : 保育事業、約380アカウント
     JTB     : 旅行業、約2万アカウント
       
   <質疑応答>
     Q.アカウント情報の入れ替えはどのように実施しているか。
     A. 日大  : プロビジョニングAPIを使用してユーザー情報編集。
       ポピンズ  : 導入パートナー社の無料ツールを使用。
       JTB   : 手作業
            
       ⇒3社中2社は、Google Apps導入時に導入パートナーを利用     

     Q.Google Apps導入に伴う失敗談は。
     A. 日大  : シングルサインオンのAPIが当初動作しなかった。
       ポピンズ : メールがすべて迷惑メールフォルダに入っていた。
       JTB   : メール移行過程で、一部のメールがGmailに移っていなかった。

     Q.トラブル発生時、Google検索でも解決策が見当たらない場合の対処法は。
     A. 日大  : Googleが解決してくれるのを待つ!
       ポピンズ : Google Apps導入パートナーに相談する、あるいはパートナーが
              掲載しているApps障害ニュースを確認する。
              それでも解決しない場合、Googleが解決してくれるのを待つ!
       JTB   : パートナー(リセーラー??)に相談する。
              テスト環境が準備できる場合、テスト環境にエラーを再現する。
 
     Q.Apps移行に伴い、メールアドレスの管理規定等を見直ししたか。
     A. 日大  : 特に見直ししていない。GmailはすべてSSLで暗号化されているので
              以前のメーラーよりセキュリティが向上したので問題ないと考える。

     Q.シングルサインオンで2段階認証しているか。
     A. 日大  : していない。シングルサインオンでの2段階認証はできないと思う。

     Q.Apps導入に伴う削減効果は。
     A. ポピンズ : Gmailになったことによる削減効果が大きい。
              (サーバーコストの削減等)
       JTB   : Gmailとドライブの組み合わせによる削減等。
               例)ファイル添付メール送信 ⇒ パスワード送信の2度手間廃止


以上
 
正直キーワードしか拾えていないので、あまり参考にならないかもしれませんが、
とりあえずメンバーズトークではどんな話題が出るのか、というイメージが出来れば、
次回のメンバーズトーク出席への後押し位にはなるかしら?


あ、そうそう最後に一つ。

参加者の構成は、

   IT部門 6 : 経営企画(管理)部門 4
   男性  9 : 女性 1

という感じでしょうか~~。

超余談ですが、わたくし以前は【男性50 対 女性 1(←私だけ)】という部署で
務めていたこともありますので、女子が少ないシチュエーションに懐かしさを感じました。

もし今回のメンバーズトークの内容で、質問やより詳しく知りたい!という方が
いらっしゃれば、当然私は答えられませんが(A;´・ω・)、答えてくれそうな方を
ご紹介することはできるかもしれませんので、メッセかコメント下さいね~。


2012年12月13日木曜日

【閑話休題】GASユーザー会メンバーズトークレポ(3)

■このネタで引っ張る

   今週一杯、レポで引っ張ろうという意図がバレバレですが、
   今日も引き続き12/10(月)に開催されたメンバーズトーク@東京・六本木の
   レポです。

   会の構成は下記の通りで、今日は②のレポです。

      ①ユーザー事例紹介   ←終了
      ②Google製品紹介他   ←今回

      ③パネルディスカッション  ←次回 
      ④お楽しみセッション    ←終了
      ⑤交流会           ←終了



■②Google製品紹介他

   (1)Google Maps & Earth Update

      Geocordingの一例として、次のような活用方法を紹介。

  
         スプレッドシートに住所録作成
               ↓
         住所を緯度・経度表記に変換
               ↓
         A点からB点の距離算出
               ↓
         ある地点の周辺画像URLを取得し、スプレッドシートに画像表示 
          ”=getMapURL()”               ”=image()”
               ↓
         上記のデータをGoogle Map上にマッピング

       ⇒Google Map上で、案件の位置と近い人を把握し、作業指示し、
        案件場所へのチェックインから作業終了までの一連の処理を管理。


    <個人の感想>
      上の例示は、タクシー会社さんの配車なんかをイメージしているのかな?
      周辺画像URLとイメージ画像の取得がこんなに簡単にできるとは!
      これは試してみたい。     
           

   (2)Google Cloud Platform Update

      今までの一般的な基盤と異なり、このプラットフォームを利用すると、
      Google Apps・会社様独自のアプリ・他社アプリ等どのアプリでも適応する製品。

      これにより、下記のようなメリットがある。
        ・アプリの開発サイクルが早い
        ・災害対策は不要(Googleが代行している)
        ・インフラが不要

      下記のようなGoogle製品をこのプラットフォーム上で活用してはどうか。
        ・Cloud Storage : 人用ではなくシステム用のファイル格納サービス
        ・BigQuery : 大量データ高速解析サービス


    <個人の感想>   
      正直、インフラだの基盤だのという単語が出た瞬間に、思考停止。。。

  
   (3)Google Search Appliance Update

     Googleドライブ以外の場所に格納したファイルを、あたかもGoogle検索(ネットの)
     のように、高速かつ簡単に検索することができる製品。
       
       ・他社類似製品では、ファイルにタグやインデックスが必要だが、
        当該製品では不要。
       ・ファイルの権限設定も可能で、権限があるもののに検索結果に表示される。
       ・売上グラフなどのグラフ表示も自動作成・表示可能。
     
  
     <個人の感想>
       個人的にも周辺的にも一番興味を魅かれた製品。
       ファイルが増殖し、いつの間にか行方不明になっていったファイル達に
       皆さん心当たりがあるのではないでしょうか。
       
       検索速度と検索ワードとの関連性の強弱を自動識別して表示される性能には、
       長年培われたGoogleさんのノウハウが凝縮されていましたねー。

       ま、個人の私には「Googleデスクトップ検索」で充分ですが。


   (4)Google Apps Update

       新しい機能は下記の3つ。

        ①管理者権限を組織単位に付与できる。
  
        ②添付ファイルの容量を10Gまで可能に
           -但し、Googleドライブを利用しての受け渡しになる
            (一旦ファイルをGoogleドライブにアップロードし、それを共有する方法)
           -メール受信者にファイル閲覧権限が有るか否かを自動チェック
           -Google利用者以外も利用可能

        ③Google Take Out機能追加
           -Googleに預けたデータを一括エクスポートすることができる
            (Googleのサービスを利用停止する際に役立つ)
        

   (5)Google Enterprise Support & Operation Update

       Google Appsの顧客満足度調査の結果報告及び改善策の提示。
        -顧客満足度調査結果 : 全項目において日本は世界ワースト1
        -改善策  : アンケート回答者へのフォローアップ等
         
       ※おまけ※
        顔文字を利用すると、満足度が84%UPするとか!??
        私もこのブログで顔文字多様してるのは、じつは戦略でした(嘘)


今日はここまで

■予告編

   明日は、レポ最終回、パネルディスカッションの内容です。