このブログを検索

2012年8月31日金曜日

【GUIビルダー】テキストボックス入力・表示(3)

■かなり苦労したのです

   昨日と一昨日に亘って書いた、テキストボックスに入力した内容を表示するという
   スクリプト。
   完成に行きつくまでにか~~~な~~~~り~~~~~苦労したのです(;´・д・)

   それは、一昨日の投稿でも書きましたが、参考にしたスクリプトを、そのまま書いてある
   スクリプトとGUIを忠実に作成してもきちんと動かないという事態に陥ったため。

 
   今日は、エラーの内容とその解決編についてです。


■こんなエラーでした

   丸3日程、下記のような状態で、どうにもこうにも先に進まず頭を抱えていました。

   名前をテキストボックスに入力し、Clickボタンを押しても・・・


   「undefined さん、こんにちわ!」と表示されます。
   
   私には、ちゃんとした「松田優香」という名前があるっちゅーねん!!!



   ボタンも機能しているし、メッセージは表示されているので、問題は、

      ”var txt = e.parameter.TextBox1;”

   という構文で、正しく入力された値を取得できていないことは明白です。


■解決策は2つ

   この状態を打開するには、次の2つのことが必要でした。

        ①GUIビルダーで”Panel”を配置すること

       ②GUIビルダーで配置したテキストボックスのプロパティ内、
        「フォーム」の中にある「名前」に”TextBox1”と記入すること


   ①については、参考にしたサイトの一つに、次のような記述がありました。
    
addCallbackElement(panel1)で引数をパネルに設定している。ここがミソで、こうするとパネルに乗っかっているコントロールの全ての値がイベントハンドラであるsubmit(e)のeに入ってくる。
      (引用:   http://blache90.tumblr.com/post/7195167628

   テストしてみましたが、確かにパネルの有無で、「undifined」となるか否かが変わります。


   次に、②について。
   きっかけになったのは、下記の掲示板サイトです。

      【stackoverflow】
       http://stackoverflow.com/questions/10627839/gui-not-passing-values-to-spreadsheet


   この一番下にある書き込みに、「IDだけではなく、フォーム属性の<名前>もきちんと
   記入していることを確認!」というような内容がありました。

   そこで、テキストボックスのプロパティで<名前>の箇所に”TextBox1”と記入すると、
   やっと”undefined”の文字が消えてくれたのです。

   
   ”app.addCallbackElement()”や、”app.addClickHandler()”といったスクリプトは、
   ()の中にGUIの部品の【ID】を記入しますが、
   ”e.parameter”のあとの”.(ピリオド)”には、GUIの部品の【名前】を書くのですね。


■予約編

   明日は、テキストボックスに入力された値を、スプレッドシートに記載されるようにしてみたいと
   思います。
    

2012年8月30日木曜日

【GUIビルダー】テキストボックス入力・表示(2)

■昨日の続き・・・

   昨日に引き続き、今日も以下のようなユーザーインタフェースを作成する手順を
   書きたいと思います。

     テキストボックスを表示し、そこに入力した値を表示する 

   昨日の段階で、GUIビルダーを使った画面作成とスクリプトの記入は終了しました。
   今日は、作成したユーザーインタフェースをGoogleサイト上に載せて、
   動作テストをします。


■Googleサイトでつかえるようにする

   過去の記事で詳しくGoogleサイトでつかえるようにする方法を載せていますので、
   ここでは簡略に流します。

   まず、「ファイル」→「バージョン管理」でバージョン作成。



   次に、「公開」→「ウェブアプリケーションとして導入」を押して、公開。


   Googleサイトの任意のページを開き、「ページを編集」する画面に。

   「挿入」から「Appsスクリプトガジェット」を選択し、作成したスクリプトを選んで追加!





   ページを保存すると、こんな感じにできました~~~。



■動作テスト

   では、動作を確認するべく、テキストボックスに名前を書き込みます。


   そして・・・
   「Click」ボタンを押下!



   「松田優香さん、こんにちわ!」ですって~~~。
   はい、こんにちわ~~~♪♪


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

   今回作成したユーザーインタフェースは、こちらのURLで実際に動作をお試し頂けます。
   
   【GAS公開構築用】mypleis
   https://sites.google.com/a/mypleis.com/gas_mypleis/GAS_ALL/5_txtbox



   このスクリプトは、特に入力した値をスプレッドシートに保存したりしない、一時的なもの
   ですので、遠慮なく適当に入力してみてくださいね。
   (入力内容は、私にも誰にも見えませんので~。)


■予告編

   明日は、今回の「テキストボックス入力・表示」するユーザーインタフェースを作成した際に
   はまった内容と、その解決策をご紹介します。


2012年8月29日水曜日

【GUIビルダー】テキストボックス入力・表示(1)

■テキストボックスを設ける

   引き続き、GUIビルダーを使ったUI(ユーザーインタフェース)作りを頑張っています。
   今回作成を試みているUIは、

     テキストボックスを表示し、そこに入力した値を表示する

   というものです。

   さてさて、ちゃんと作れるかしら~~~~。


■参考元

   今回参考にしたのは、以下のブログ。

      【初心者のためのGoogle Apps Scriptプログラミング入門】
      http://libro.tuyano.com/index3?id=647004&page=5

      【Journals and Reflexion】
      http://blache90.tumblr.com/post/7195167628

   そして、参考書「Google Script」に載っていた次のようなスクリプト。

    ☆Google Script : Enterprise Application Essentials

       (P.39-40抜粋)



       amazonURL→Google Script: Enterprise Application Essentials


■ダメだしする訳ではないのですが・・・

   何度も何度も助けられているサイトや参考書ですし、決してダメだしするつもりでは
   ないのですが、、、、

   上記の3つに載っているスクリプト、そのままそっくりコピペしてみても、 どれも正しく
   動作しません!!!!!

   結果的には、なんとか完成に漕ぎ着けましたが、なぜ3つが3つとも重要な情報が
   欠けているのでしょう・・・・・・・。

   私が躓いた部分というのは、もうごくごく初歩的なことで、書くに値しないようなことなの
   かしら・・・。
   それとも、気付かない内に私が何か変なことしただけ?見落とし??

   謎は残りますが、とにかく私なりに作成したスクリプトと、注意すべき点をご紹介したいと
   思います。


■手順とスクリプト

    今回も、Googleサイトの中からスクリプトエディタを開きます。(※詳細は過去の記事参照)
    (「サイトを管理」→「Appsスクリプト」→「新しいスクリプトを追加」)




   名前を付けて保存し、「インターフェース構築...」を押下し、GUIビルダーを開きます。



   左側から、下記の部品を中央の画面に配置します。

      ①Panel (様々な種類のPanelがありますが、今回はVertical Panelを使用)
      ②Label (指示メッセージ表示用)
      ③TextBox
      ④Button
      ⑤Label (テキスト入力内容表示用)

   ※②~⑤の部品は、全て①Panelの中に配置します。
    右側コンポーネントツリーで、Panelの階層下に②~⑤が表示されていればOKです。




   配置した①~⑤のプロパティを、次のように変更します。(あくまで、例です。)

      ①Panel     : 【ID】mainPanel
      ②Label    : 【ID】Label1  【テキスト】お名前をご入力ください。
      ③TextBox : 【ID】TextBox1 【名前】TextBox1 【テキスト】(空欄)
      ④Button  : 【ID】Button1 【テキスト】Click!
      ⑤Label     : 【ID】Label2  【テキスト】(空欄)

   ※赤字の部分、決してお忘れなく!



   これで、GUIビルダーを使った作業は終了です。
   名前を付けて「保存」します。

   


   尚、今回はGUIビルダー内で、「ボタン押下時の処理」は追加していません。

   スクリプトエディタに戻ったら、下記のスクリプトを記入します。




      ☆簡単コード解説☆

       <解説>
          2~15行目 : 作成したUIを呼び出し、クリック時の処理(サーバーハンドラー)
                   を作成するスクリプト
         19~30行目 : テキストボックスに入力された値を取得し、表示するスクリプト

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

         2~4行目 : 省略(決まり文句)

         6~7行目 : 作成したUIのうち、必要な部品をIDを指定して呼び出し、
                  それぞれ変数に格納

         9行目    : ボタンクリック時の処理を定義しているfunction"myClickHandler"
                  を使用できるようにする
      
          11行目   : 引数(=テキストボックスに入力される値)をPanelに設定する

          12行目   : ボタンクリック時の処理にfunction"myClickHandler"を紐付ける

         14行目   : 決まり文句

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

         19~22行目 : 省略

         24行目    : テキストボックス(名前="TextBox1")に入力された値を取得する

         25~27行目 :  取得した値が"(空欄)"でなければ、"Label2"に次の値を格納
                      テキストボックスに入力された値+”さん、こんにちわ!”

         29~31行目 : 決まり文句
     

   これで、「保存」すれば、終了です。


力尽きたので、今日はここまで。


■予告編

   明日は、今日紹介したスクリプトがどんな出来上がりになったかをお見せします。

2012年8月28日火曜日

【GUIビルダー】Googleサイト上でボタン・メッセージ表示(3)


■またまた昨日の続きです

   昨日・一昨日に引き続き、次のようなスクリプトを作る過程をご紹介します。

    Googleサイト上にボタンを表示し、ボタン押下でメッセージを表示する。

   
   予想以上に長くなって、3回にも分けてしまってすみません(汗)
   今日でやっとこさ完結です!
 
   昨日の記事で、ウェブアプリケーションとして公開するところまでご紹介しました。
   今日は、そのアプリをGoogleサイト上に表示する手順です。


■Googleサイトで使うには・・・

   まず、Googleサイトを開いて、アプリケーションを使いたいページの編集画面を開きます。



   メニューの「挿入」から「Appsスクリプトガジェット」を選択します。



   スクリプトを選択:という一覧の中に、今回作った「【GAS】ボタン・メッセージ表示」という
   スクリプトがあることを確認し、選択します。



   タイトルやサイズ等を任意で変更し、「保存」します。



   ページの編集画面も「保存」すると、ページ上にボタンが♪♪♪♪




■動作テスト

   表示されたボタンをぽちっっとクリックしてみます!




   あぁ~~~~、ちゃんとメッセージも表示されました~~~。

   今回は、ながーい戦いでした()´д`()ゲッソリ・・・


今日はここまで。


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

今回作成したユーザーインタフェースは、こちらのURLで実際に動作をお試し頂けます。
   
   【GAS公開構築用】mypleis
   https://sites.google.com/a/mypleis.com/gas_mypleis/GAS_ALL/4_btn_msg




■予告編  

   次回も、GUIビルダーを使った簡単なUIを作ってみる予定です。 

2012年8月27日月曜日

【GUIビルダー】Googleサイト上でボタン・メッセージ表示(2)

■昨日の続きです

   昨日に引き続き、次のようなスクリプトを作る過程をご紹介します。

    Googleサイト上にボタンを表示し、ボタン押下でメッセージを表示する。

   
   昨日の記事では、スクリプトを書くところまでご紹介したので、今日はその続きから。


■手順・スクリプト

   スクリプトを書いたら、一旦保存し、GUIビルダーに戻ります。



   ボタンを選択し、右側のプロパティ内「Events」の「On Mouth Click」という所で、
   リストボックスから”myClickHandler”を選択。


   これで、「ボタンをマウスクリックした際の処理」=「スクリプトで定義した”myClickHandler”」
   が紐づけられました。

   
   続いて、ラベルを選択し、右側のプロパティ内の「Visible」を「false」に変えます。



   すると、中央の画面から、ラベルが”visible=false”、見えなくなります!

   (※見えなくなった状態でラベルを選択するためには、右側の一番上にある、
    ”component tree”で”Label1”(←ID)を選択すると、そのプロパティが出てきます)




   これで、完了。
   あとは、保存してGUIビルダーを閉じます。




■ウェブアプリケーションとして公開する

   スクリプトとGUIを作ったら、今度はそれをGoogleサイトで使用できるようにするために、
   ウェブアプリケーションとして公開する必要があります。

   まずは、スクリプトエディタに戻って、念のため保存します。
   次に、「ファイル」→「バージョンを管理」を開きます。


   「Save new version」をクリックすると、「version1」として、現時刻のバージョンができます。


   「OK」を押してスクリプトエディタに戻ったら、
   今度はメニューから「公開」→「ウェブアプリケーションとして導入」を選択します。



   すると、ウェブアプリケーションとして公開して良いかどうかの確認画面が出ます。
   ここで、「バージョン」や「アプリの公開制限」等が設定できます。



   任意で設定を変更し、OKボタンを押下。
   すると、「ウェブアプリケーションを公開しました」というようなメッセージが出ます。



   ふぅ、これでウェブアプリケーションとして公開されました。
   あともう一息です!


またまた長くなったので、今日はここまで!


■予告編

   明日も、今日の続きです。明日で完結です!

2012年8月26日日曜日

【GUIビルダー】Googleサイト上にボタン・メッセージ表示(1)

■GUIビルダーを使ってみる!

   以前から気になっていた、GUIビルダー。
   ちょうど構築中のGoogleサイトにボタンを作りたいと思っていたので、
   この機会に少しGUIビルダーの使い方を勉強しようと思います。

   まず、超基本的な使い方を学ぶべく、

     Googleサイト上にボタンを表示し、ボタン押下でメッセージを表示する。

   というUI(ユーザーインタフェース)を作ってみます。


■参考元

   ただでさえ少ないGoogle Apps Script関連の参考文献。
   「GUIビルダの使用」 且つ 「Googleサイト上で動かす」となると、もうほんとに
   極めて情報が少ないです・・・・・・(;-;)   あぁ、先がおもいやられる(*´Д`)=3

   とにかく、そんな中で今回、主に参考になったのは下記のサイト。

      【Googleを追いかけろ!】
      http://www5d.biglobe.ne.jp/~pog/userguide/builder.html

      【Google Developers】
      https://developers.google.com/apps-script/uiapp


   そして、もう一つ。
   過去の記事で紹介したことのある、Google Apps Scriptを新規作成する際に
   「ウェブアプリケーションとしてのスクリプト」を選択した際に予め記入されている
   下記のスクリプトです。



■手順とスクリプト

   今回は、Googleサイトの中からスクリプトを作成します。
   まずは、Googleサイトの「サイトを管理」を開きます。


   
   左側のメニューから「Appsスクリプト」を選択し、「新しいスクリプトを追加」ボタンを押下。




   スクリプトエディタが開いたら、一旦名前を付けて保存します。



   「ファイル」から「ユーザーインタフェースを構築...」を選択します。

    ※たまに、グレーアウトしていて選択できないことがありますが、何度か保存すると、
      選択できるようになります。



   次の画面が、GUIビルダーです。
   左側に「ボタン」「ラベル」「テキストボックス」などがずらーっと並んでいます。
   (これらをコンポーネントと呼ぶようです。)

   この左側から「ボタン」と「ラベル」を中央の画面にドラッグ&ドロップします。  



   ここで、一旦保存しておきましょう。メニューバーの「ファイル」→「保存」です。
   ここでは、デフォルトの「MyGui」という名前で保存しました。

   ※このファイル名は、後ほどスクリプト内で使用します。



   
   次に、作成したボタンの表示を変えます。
   右側にボタンのプロパティ一覧がありますので、その中の「テキスト」を任意のものに
   変更します。
    ※IDというものもあります。これも後ほどスクリプトで使用します。



   同様に、作成したラベルの表示を変えます。
   ちなみに、このラベルには、ボタンを押した後に表示されるメッセージを書いています。



   これで、ボタンを押した後に表示される画面のイメージができました。
   ここで一旦保存して、スクリプトエディタに戻ります。

   スクリプトエディタに下記のスクリプトを記入します。


      ☆簡単コード解説☆

          2~9行目  : 作成したUIを起動させるスクリプト
         13~21行目 : ボタンクリック時の処理を定義するスクリプト

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

         2行目 : UIを起動するスクリプト。 必ず”doGet()”を使う。
                
                ※Google Developersによると、
                    単純に画面表示のUIならば、”doGet()”
                     何か処理をさせるUIならば、”doGet(e)” を使うようです。
  
         3行目 : UIインスタンスを生成する (決まり文句のようなもの)

         4行目 : 自分が作成したUI、”MyGui”を呼び出す

         6行目 : ボタンクリック時の処理を定義しているfunction、”myClickHandler”
                を使用できるようにする

         8行目 : UIを終了する (決まり文句のようなもの)

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

         16行目 : GUIで作成した「ラベル」を、IDを指定して呼び出す

         17行目 : 「ラベル」が”visible=true”、見えるようにする

         18~19行目 : UIを終了する (決まり文句のようなもの)
                    ※”app.close();”が必要か否か、よく分かっていません・・・。


   
       16・17行目以外は、ほぼ決まり文句のようなものと考えていいかと思います。
   (ファイル名やファンクション名、IDは書き換える必要がありますよ~~。)


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


■予告編

   明日は、今日の続きを書きます。

2012年8月25日土曜日

【閑話休題】構築中のGoogleサイトを公開します!

■百聞(文)は一見にしかず

   今まで、Google Apps Scriptでの奮闘過程を、プリントスクリーンした画像をペタペタ
   貼り付けることで説明してきました。

   ですが、もし私なら、実際にどういう画面表示&動作をするのか確かめたい!と
   思うのではないかと。ひょっとすると、今後そのように思ってくださる方もいらっしゃる
   かもしれないのではないかと。

   そこで、百聞は一見にしかず、いえ、この場合は、百文は一見にしかず!でしょうか。
   ということで、リアルタイムに構築中のGoogleサイトを公開しようと思います。


■URLはこちら

   ご興味のある方は、下記にアクセスしてみてください。

              https://sites.google.com/a/mypleis.com/gas_mypleis/



   Google Apps Scriptを使っていじっているのは、主に「自伝を書く」というページに
   なります。

   フォームに適当にテスト入力して頂いても構いません~。
   (但し、定期的に削除してしまうと思いますが・・・・)


■留意点

   リアルタイムに毎日いじっていますので、アクセスするタイミングによっては、
   ブログに載せている状態と少し異なる可能性もあります。

   また、自分のアカウント以外のGoogleアカウントで動作テストをしていないため、
   想定の動きをしない可能性があります。
   その際は、その旨ご指摘頂ければ、大変ありがたいです。


今日はここまで。

2012年8月24日金曜日

Googleサイトでできないこと

■備忘です

   ここ数日、色々と試行錯誤を繰り返す上で、現時点(2012年8月)ではGoogleサイト上で
   できない処理というのが幾つかあることが分かりました。

   備忘として、記録していこうと思います。
   (今後も、発見し次第、ラベル「Googleサイトでできないこと」に追加していきます。) 

 
■(1)そもそもGoogle Apps Scriptでできないこと

   ・ページのリフレッシュ(再読み込み)ができない
     ・・・Javascriptにある"reflesh()"という関数は、使用できない。


■(2)Google Apps Scriptではできるけど、Googleサイトではできないこと

   ・サイト上にメッセージボックスを表示できない
     ・・・Google Apps Scriptの"Browser.msgBox()"は、サイト上では使用できない。



2012年8月23日木曜日

Googleサイトに埋め込んだフォームをリフレッシュする

■自動再読み込みはできないらしい

   ここのところ連日頭を悩ませている問題。
   それは、「Googleサイトに埋め込んだフォームから入力・送信後に、自動的にページを
   再読み込みしてフォームをリフレッシュできない」、ということ。

   「再読み込み」ボタンを押下、あるいは「F5」キーを押せば済む話なのですが、例えば
   ご年配の方や、パソコンが苦手な方でも、迷わずに連続してフォームに入力してもらえる
   ようにしたいのです。


   昨日の記事に、そんなことをぼやいてみると、「匿名」様から以下のURLが参考になるの
   ではないか、との有難いコメントを頂きました!

   早速見てみると、確かに私とまったく同じことを悩んでいるという掲示板の投稿が!!!


http://productforums.google.com/forum/#!topic/apps-script/JuF66XTyxRA


   最後まで読んではっきりしたのは、Google Apps Scriptでは、ページの再読み込みは
   できない、ということでした・・・・・・(*´Д`)=з
   
   お蔭様で、この方法は潔く諦めよう!と踏ん切りがつきました☆


■苦肉の策ですが・・・

   で、結局どのようにするに至ったかというと、

     「フォームを埋め込んでいるページへのリンクボタンを作成する」

   という方法です。

   フォームを埋め込んでいるページから、フォームを埋め込んでいるページを再度開く!
   イコール、再読み込みと同じ動きになる、と考えたのです。

   
   今日の段階では、こんな感じです。
   


   みにくいですが、一番下に、「戻る」と「続けて自伝を書く」というボックスを準備し、
   それぞれ、ハイパーリンクしています。

   フォームを送信後、「続けて自伝を書く」という文字をクリックすると、またフォームが
   でてきます。



■課題

   発想自体は悪くないかな?と思っているのですが、
   本当は、「戻る」「続けて自伝を書く」というボックスを、きちんとしたボタンにしたいところ
   です。

   (今は、【標準で準備されているテキストボックス+リンク】。このあたりが苦肉の策。。。)


■予告編

   明日からしばらく、GUIビルダーを使ってユーザーインタフェースを構築する方法を
   お勉強していこうと思います。   

2012年8月22日水曜日

【ぼやき】行き詰まり

■止まっています・・・

   Googleフォームから送信した後に下記の画面が表示されたままなのが気に入らないので、  
   Googleサイトにページを新たに追加した後に自動的にページが再読み込みされるように
   しようと試みていますが・・・





   ネットで検索しても、それらしい方法が見当たりません~~~(ノд`@)

   検索ワードが悪いのかしら・・・
   「google apps script」「Googleサイト」「リロード」「再読み込み」等を組み合わせて検索
   してるのですが、見当違いなサイトばかり。う~~~ん。


■発想を変えてみるも・・・

   「自動で再読み込み」させるという方法は一旦忘れて、「指定のサイトのページを開く」
   ということならできるのでは?と思い、またまた検索するも、やはり引っかからず。

   ページの冒頭に「ボタン」を作って、そこを押すとフォームが出てくるという方法なら
   できそうかも~~~??


   と、うだうだ調べたり考えたりでくたびれてしまったので、今日はおしまい。


■予告編

   次回も、フォーム送信後にまた新しく入力するフォームを表示させる方法を考えます。

   
   

2012年8月21日火曜日

Googleサイト上のページレイアウト変更

■見やすいレイアウトにする

   Googleフォームの内容をGoogleサイトのページに追加する際に、
   各項目の間に区切り線を追加し、見やすくしたいと思います。
   (ついでに、レイアウトも少し改善しようかと・・・)

   具体的な改善ポイントは下記の通り。

     ・項目の間に区切り線を表示
     ・項目のタイトルを表示
     ・上記で表示した項目のタイトルを大きな見出しで表示

  
    ※本日の内容は、Google Apps Scriptというより、HTMLの超基礎的な話になります。


■スクリプト

   今回修正したのは、既に記載しているスクリプトの内、下記の一文。


   これを、次のように変更しました。


      ☆簡単コード解説☆

        ※<>内に書かれているのは、全てHTMLです。

         <br>      ・・・ 改行
         <h4>~</h4> ・・・ 見出し (1~6段階まであり、それぞれ大きさが異なる)
         <hr>      ・・・ 横罫線


   これで、どのような表示になるかというと、こんな感じです。


   どうでしょう???多少はそれっぽくなってきましたかな。


■スクリプト全体像



今日はここまで。


■予告編

   次回は、Googleサイト上でフォーム送信後(=ページ追加後)、自動的にGoogleサイトを
   再読み込みするようにしたいと思います。