寝太郎の江戸風呂。ね！

[PR]

2024/11/23 (Sat.)

トーナメント図作成ツール

今日は、アジア大会サッカーの決勝戦ですね。予選リーグを全勝で突破、決勝トーナメントも勝ち抜いてきたU-21日本代表、金メダルを手にすることができるでしょうか。相手はユースの世界大会で優秀な成績を残したUAEです。トーナメント開始前には、韓国か北朝鮮が決勝戦の相手だと思っていましたがハズレました。それ以上に手強いということでしょう。

さて、今回はその予想をしたときに作成したトーナメント表作成ツールを公開します。

テキストボックスの中に、トーナメントの上から下にカンマで区切った文字列を入力して、ボタンを押すとトーナメント表が作成できます。

IEでは、想定通りに表示されないかもしれません。その場合、FireFoxなどの他のブラウザでご覧下さい。

[つづきはこちら]

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

アップロードしたファイルのリストを 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