寝太郎の江戸風呂。ね！

[PR]

2024/11/23 (Sat.)

アップロードしたファイルのリストを Google Spreadsheets で公開。

このブログ「寝太郎の江戸風呂。ね!」にアップロードしたファイルの数も80近くになりました。忍者ブログに用意されているファイルのアップロードの管理画面では、扱いにくい量です。そこでは15ファイルまでしか一度に表示できません。過去にアップロードしたファイルを調べようとすると、ページナビゲーションでたどるしかありません。

そこで、今後はファイルリストを Google Spreadsheets にも記載することにしました。「ウェッブ上で一般公開」という設定にしました。誰でも検索、閲覧できます

Google Spreadsheets の File List のURL

FileList

Google Visualization Query Table で File List のデータを取得。

せっかく Google Spreadsheets にアップしたので、Google Visualization Query Table でこの File List のデータを取得しましょう。検索機能もつけましょう。ソースコードは、ほぼ「 Google Visualization Table Query に検索ボタン」で紹介したサンプルファイルのものを踏襲します。

サンプルページ

File List

2010/11/04 (Thu.) Trackback() Comment(0) Google Visualization

Google Spreadsheets をデータソースとする掲示板

これまで数回にわたり、Google Spreadsheets をデータソースとする掲示板を紹介してきました。いよいよ最終形に近い形が見えてきたので、ここで紹介することにしました。

実際のサンプルは、次のページでご覧下さい。

サンプルページ

特徴

上記サンプルの「Public Message Board」の特徴は、次のとおりです。

投稿リストと投稿フォームの一体表示

Google Spreadsheets があらかじめ用意してる入力フォームをカスタマイズしたページをインナーフレームに表示しています。このフォームから投稿すると、すみやかにその内容が投稿リストに表示されます。

投稿の検索

検索窓に入力された文字列で投稿内容を検索して表示します。"message"または"name"のいずれかに検索文字列が含まれる投稿をリストに表示します。

ページ処理

検索結果は、10件ずつ表示されます。過去のデータを見たい場合には、次頁ボタンを押していきます。

注意

完成版ではありません。動作に不安定な部分があります。ソースコードもこれまでの実験版のツギハギなので、統一が取れていなかったり、過不足のある記述があったりします。

関連記事

ここに至るまでの途中の成果を記事にしているものがあります。参考に次に示します。

• Google Visualization Table Query に検索ボタン
• Google Visualization Query Table のページ処理
• Google Visualization Table の page イベント
• Google Spreadsheets の入力フォームのページを作成する。
• Google Spreadsheets のフォーム機能とGoogle Visualization API
• iframe のロードイベントを捉える。
• Google Spreadsheets のデータを Google Visualization API で表示する。その２
• Google">Google Spreadsheets のフォーム機能を利用して掲示板を作成する。

2010/10/27 (Wed.) Trackback() Comment(0) Google Visualization

Google Visualization Table Query に検索ボタン

Google Visualization で Google Spreadsheets のデータを表示する際、検索ボタンがあると便利と思い、作成してみました。

Google Visualization Query のクエリ文を作成する際に、where句を付加するという仕組みです。
そのために、まず、検索ボタンが押された際に、テキストボックスから文字列を取得します。
次にカラム数を調べ、カラム(column)のいずれかに検索文字列が含まれている(contains)ものを抽出ます。

次の sendWhere は検索ボタンが押された時に実行される関数です。

sendWhere=function(){
  if(!search){

    search=true;
    keyword=document.getElementById('keyword').value;

    sourcePage=0;

    queryWhere="";


    if(keyword!=''){

      queryWhere =' where '
                 +cols.join(" contains '"+ keyword +"' or ");

      queryWhere+=" contains '"+ keyword + "'";

    }

    statement=querySelect
              +queryWhere
              +queryOrder
              +queryLimit
              +queryOffset;
    query.setQuery(statement);

    query.send(handleResponse);
  }

}

なお、search 変数は、検索が実行されているかどうかのステータスを管理するためのもので、リクエストの重複を避けるためのものです。ここに記載していませんが、クエリレスポンスを受け取った時に false に設定し直して、新しい検索ができるようにします。

サンプルページ

2010/10/25 (Mon.) Trackback() Comment(0) Google Visualization

Google Visualization Query Table のページ処理

Google Visualization Table では、データソースとして Google Spreadsheets を利用できます。ローカルなデータをデータテーブルとして利用することもできますが、本格的なアプリケーションを構築するのなら、Google Spreadsheets を利用することになるでしょう。

Google Visualization Table でデータソースとして Google Spreadsheets を利用する場合には、クエリを発行して、そのレスポンスからデータテーブルを取得します。そして、これを数件ごとのページに分けて表示するには、テーブルオプションの設定を行います。このページナビゲーションを実現するための設定には、２つのやり方があります。１つは標準的ページ処理方法で、もう１つはカスタマイズによるページ処理方法です。

標準的ページ処理方法

標準的ページ処理方法は、Google Visualization Table があらかじめ用意しているページナビゲーションです。テーブルオプションの page プロパティの値を'enable'にするだけで、ページ処理が実現します。

この方法を用いたサンプルページは、「Google Visualization Query Table の標準ページ処理の例 」です。

カスタマイズによるページ処理方法

カスタマイズによるページ処理方法は、テーブルオプションの page プロパティの値を'event'にすることが前提です。このように設定することで、テーブルに page イベントが発生したときに実行される関数を登録することができます。

テーブルに page イベントが発生したときには、イベントオブジェクトの page プロパティの値を捕捉できます。「次頁」ボタンが押されれば「1」、「前頁」ボタンが押されれば「-1」がその値となります。この数値を使って、次に行うべき処理を決めます。

カスタマイズによるページ処理方法を行うのは、たいてい新しいクエリを発行する場合です。一度に取得するデータ数を制限しておき、必要に応じてクエリを再発行して次のデータを取得しようというものです。該当するデータの量は膨大だが、表示することになるデータが少ない場合、該当するデータのすべてを受け取るのは 無駄です。要求の多いデータを初めに表示しておき、必要に応じて次のデータを問い合わせられるようにしておけばよいでしょう。

この方法を用いたサンプルページは、「Google Visualization Query Table のページイベントの処理の例」です。

なお、該当するデータの多くを表示する可能性が高い場合には、ローカル側で該当するデータをすべて保持する「Google Visualization Query Table の標準ページ処理の例」で示す方法の方がよいでしょう

サンプルページ

参考

2010/10/19 (Tue.) Trackback() Comment(0) Google Visualization

Google Visualization Table の page イベント

前回の「Google Visualization Events」では、Google Visualization のイベント処理の設定方法とそれを使った簡単な例として select イベントを紹介しました。今回は Google Visualization Table に用意されている page イベントについて述べましょう。

Google Visualization Table の 標準のページ処理

Google Visualization Table では、draw メソッドを実行する時に設定する第二引数であるテーブルオプションの設定でページ化を実現します。４行ずつのページにする設定は次のとおりです。

table.draw(data, {page: 'enable', pageSize:4});

こう設定することでテーブルの左下にページナビゲーションボタンが出現して、次のページに進めたり、前のページに戻れるようになります。

Google Visualization Table の page イベントの設定

Google Visualization Table では、標準のページ処理ではなく、カスタマイズした処理を設定できる方法が用意されています。それはページナビゲーションボタンをクリックした時に指定した関数を実行するというイベント処理の方法です。これを実現するためには、まずテーブルオプションの page プロパティの値を'event'に設定します。そして、page イベントが発生した時に実行する関数を登録します。

table.draw(data,{page:'event', pageSize:4, startPage:1});

google.visualization.events.addListener(
 table,
 'page',
 pageHandler
);
function pageHandler(e) {
   alert(e['page']);
}

この例では、テーブルオプションの startPage の値を 1 に設定しているで、最初に表示されるのは２ページ目です。そして、前ページボタンを押すと「0」、次ページボタンを押すと「2」がアラート表示されます。しかし、それで終わりです。前ページも次ページも表示されません。

page イベントからの再表示

テーブルオプションの page プロパティの値を'event'に設定した場合、標準のページ処理は行われなくなります。例えば、次ページボタンを押しても次のページは表示されません。ただ次ページの番号がイベント処理関数に送られるだけです。

次ページボタンを押したら、次のページが表示されるようにするには、イベント処理関数でその処理を記述しなければなりません。すなわち、送られてきたイベントオブジェクトから page プロパティを取得します。そして、この値をテーブルオプションの startPage の値としてテーブルを再表示するのです。

function pageHandler(e) {
   alert(e['page']);
   var options={page:'event', pageSize:4, startPage:e['page']};

   table.draw(data,options);

}

サンプルページ

次のページでは、上記の記述例を実際に確かめることできます。

参考

2010/10/18 (Mon.) Trackback() Comment(0) Google Visualization