このブログを検索

2012年9月2日日曜日

【GUIビルダー】テキストボックス入力・SS保存

■前回のスクリプトを改良してみる

   前回までで作成した、『テキストボックスを表示し、ボタン押下時に入力された値と
   メッセージを表示する』、というスクリプト。

   今回は、これに『入力された値をスプレッドシートに保存する』という機能を追加しようと
   思います。


■参考元

   今回参考にするのは、お馴染み「Google Script」の下記のスクリプト。



   そして、前回作成した下記のスクリプトをベースに利用します。


■手順・スクリプト

   まず、入力された値を保存するためのスプレッドシートを新規作成します。




   「A列」に「タイムスタンプ」、「B列」にテキストボックスに入力された値を保存したいので、
   それぞれ「A1」「B1」にタイトル名を記入します。



    名前を付けて、「保存」、と。


   そして、このスプレッドシートのアドレスをチェック。



   アドレスの中の、「http://~~~~key=*********#gid」 の****の箇所をメモ帳などに
   コピーしておきます。
   今回の私の例では、以下の箇所です。(これが、スプレッドシートのIDになります。)



   Googleサイトから「サイトの管理」→「Appsスクリプト」で今回ベースとするスクリプト、
   「【GAS】テキストボックス入力・表示」を選択し、コピペします。





   ひとまず、名前を変えて「保存」。




   そして、下記のスクリプトに書き換えます。
   ※赤字の箇所が、今回修正・追加部分です。


     ☆簡単コード解説☆   ※赤字の箇所のみ

       29~31行目 : テキストボックスに入力された値を保存するスプレッドシートを
                 指定
                   -SpreadsheetApp.openById()のカッコ内に、当該記事上部で
                     メモ帳等にコピーしたスプレッドシートIDを貼り付け

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

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

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

       34~35行目  : 32行目で指定した範囲に、「日時」と「テキストボックス入力値」を
                 書き込む

   

   保存し、バージョン管理した上で、ウェブアプリケーションとして公開!




   いつもの通り、Googleサイトのページ編集画面から、Appsスクリプトガジェットを挿入!





これで、準備OKです♪♪




   (GUIビルダーで、Labelに表示する文字を変えていますが、本筋ではないため割愛しました。)



■動作テスト
   
   テキストボックスに、「これはテストです」と入力して、



   「Click!」ボタンを押下。


   とりあえずメッセージは表示されます。

   そして、ブラウザを更新(あるいはスプレッドシートを開く)してみると、、、、

   じゃーーーんヾ(*・ω・)ノ゜




入力した時間と入力された値がスプレッドシートに保存されていま~~す★


今日はここまで。



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

   今回作成したユーザーインタフェースは、こちらのURLで実際に動作をお試し頂けます。

   https://sites.google.com/a/mypleis.com/gas_mypleis/GAS_ALL/6_txtbox_save


   ※ご注意※
   こちらのユーザーインタフェースは、 入力された値が保存され、且つ第三者に閲覧
   される可能性があります。
   入力される内容にはご注意願います。
  

■予告編

   次回は、 Googleサイト上でダイアログボックスを表示するユーザーインタフェースを
   作ってみようと思います。