Google スプレッドシートを超簡易DBとして使う その２

ひじょーに間が開いてしまいましたが、GoogleスプレッドシートDB化記事その２です。（その１）

といっても、google visualization APIの記事はこちらで書いたので簡単な説明だけに止めようかと思います。
とりあえずの完成品

こんな順番で説明していきます。

1. ページ読込時の処理
2. レポートを表示する処理
3. 全体ソース
4. まとめ

では行ってみましょー。

１．ページ読込時の処理

/***********************
* ページ読込完了後の処理
***********************/
google.setOnLoadCallback(function() {
    //URLパラメータの取得
    var params = getParm();

    //URLパラメータ[q]に検索ワードが設定されている場合
    if(typeof params["q"] !== "undefined" && params["q"] != ""){
        document.title = "ぼどレポ:" + decodeURI(params["q"]);
        var queryLanguage2 = 'SELECT B, C, D, E, F WHERE B = "' + decodeURI(params["q"]) + '"';

        var query2 = new google.visualization.Query(dataSource2);
        query2.setQuery(queryLanguage2);
        query2.send(dispReports);

    } else {
        //google spreadsheetの情報を取得しdispCalendar関数を実行する
        var query = new google.visualization.Query(dataSource);
        query.setQuery(queryLanguage);
        query.send(dispReportsTable);
    }
});

google.setOnLoadCallbackにページ読み込み後の処理を書いておけばページをOnLoadした時に処理を実行してくれるので便利です。

最初の処理はURLのパラメータをgetParmで取得します。（詳細後述・・・しません。ソース読んでちょ。）

ページの仕様はパラメータ"q"でボドゲ名が指定されている場合はそのボドゲのレポートを表示し、指定されていない場合は、ボドゲのリスト（テーブル）を表示します。

例：http://boardge.blogspot.jp/p/list.html?q=XXXXX
※XXXXXはURLエンコードされたボドゲ名

なので、パラメータ"q"が設定されている場合は、その値でスプレッドシートからボドゲレポを取得するqueryを実行しレポート表示関数(dispReports)を実行し、されていない場合はテーブルを表示する関数(dispReportsTable)を実行します。

２．レポートを表示する処理

/***********************
* レポートを表示する
***********************/
function dispReports(response){
    var el = $('#result');

    if(response.isError()) {
        //エラーの場合はエラーメッセージを出力して処理を終了する
        el.append(response.getDetailedMessage());
        return;
    }

    //URLをパラメータごとに分割する
    var url = location.href;
    var trimUrl = url.slice(0, url.indexOf('?'));

    $("#result").append('<a href="' + trimUrl + '" >ボドゲレポ一覧に戻る</a>');
    var data = response.getDataTable();
    for(var i = 0; i < data.getNumberOfRows(); i++){
        $("#result").append("<h1 ><a href='" + data.getValue(i, 3) + "'>" + data.getValue(i, 2) + "</a></h1>");
        $("#result").append(data.getValue(i, 4));
    }
    $("#result").append('<a href="' + trimUrl + '" >ボドゲレポ一覧に戻る</a>');

}

ここは単純に取得したレポートデータを表示しているだけです。
テーブルを表示する関数(dispReportsTable)もほとんど同じなので割愛ですー。

３．全体ソース

//visualization　APIの読込
google.load("visualization", "1", {packages:['table']});

/**********************
* 定数・変数の定義
**********************/
//データソース URL
//開発用　postList
var dataSource = 'https://docs.google.com/spreadsheet/ccc?key=0Ajmd9EuHdR9ldHlBQ01nOUtzeWc0cDBQa29TdnFuekE&gid=1&pub=0';
//開発用　summary
var dataSource2 = 'https://docs.google.com/spreadsheet/ccc?key=0Ajmd9EuHdR9ldHlBQ01nOUtzeWc0cDBQa29TdnFuekE&gid=0&pub=0';

//Query Language
var queryLanguage = 'SELECT B, C, D, E, F ';

/***********************
* ページ読込完了後の処理
***********************/
google.setOnLoadCallback(function() {
    //URLパラメータの取得
    var params = getParm();

    //URLパラメータ[q]に検索ワードが設定されている場合
    if(typeof params["q"] !== "undefined" && params["q"] != ""){
        document.title = "ぼどレポ:" + decodeURI(params["q"]);
        var queryLanguage2 = 'SELECT B, C, D, E, F WHERE B = "' + decodeURI(params["q"]) + '"';

        var query2 = new google.visualization.Query(dataSource2);
        query2.setQuery(queryLanguage2);
        query2.send(dispReports);

    } else {
        //google spreadsheetの情報を取得しdispCalendar関数を実行する
        var query = new google.visualization.Query(dataSource);
        query.setQuery(queryLanguage);
        query.send(dispReportsTable);
    }

});

/***********************
* レポートを表示する
***********************/
function dispReports(response){
    var el = $('#result');

    if(response.isError()) {
        //エラーの場合はエラーメッセージを出力して処理を終了する
        el.append(response.getDetailedMessage());
        return;
    }

    //URLをパラメータごとに分割する
    var url = location.href;
    var trimUrl = url.slice(0, url.indexOf('?'));

    $("#result").append('<a href="' + trimUrl + '" >ボドゲレポ一覧に戻る</a>');
    var data = response.getDataTable();
    for(var i = 0; i < data.getNumberOfRows(); i++){
        $("#result").append("<h1 ><a href='" + data.getValue(i, 3) + "'>" + data.getValue(i, 2) + "</a></h1>");
        $("#result").append(data.getValue(i, 4));
    }
    $("#result").append('<a href="' + trimUrl + '" >ボドゲレポ一覧に戻る</a>');

}

/***********************
* ボドゲレポテーブル表示
***********************/
function dispReportsTable(response){
    var el = $('#result');

    if(response.isError()) {
        //エラーの場合はエラーメッセージを出力して処理を終了する
        el.append(response.getDetailedMessage());
        return;
    }

    //テーブルデータ
    var data = response.getDataTable();
    var formatter1 = new google.visualization.PatternFormat('<a href="{0}" target="blank_" >{1}</a>');
    var formatter3 = new google.visualization.PatternFormat('<a href="?q={0}" >{0}</a>');
    formatter1.format(data, [3, 2]);
    formatter3.format(data, [0]);

    //列名を設定する
    data.setColumnLabel(0, 'ボドゲ名');
    data.setColumnLabel(3, '最新記事');

    //表示する列を指定
    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, 3]);

    //テーブルを表示
    var visualization = new google.visualization.Table(document.getElementById('result')); 
    visualization.draw(view, {allowHtml: true});
}

/****************************
* URLパラメータを取得する関数
****************************/
function getParm(){
    //return するパラメータと値の配列
    var params = [];

    //処理用一時変数
    var hashes; 
    var hash; 

    //現在ページのURLを取得する
    url = location.href;

    //URLをパラメータごとに分割する
    hashes = url.slice(url.indexOf('?') + 1).split('&'); 

    //パラメータごとに配列に格納する
    for(var i = 0; i < hashes.length; i++) { 
        hash = hashes[i].split('='); 
        params.push(hash[0]); 
        params[hash[0]] = hash[1]; 
    }
    return params
}

ここで超重要ポイント。
データソースURLの変数名は、bloggerの別ページでも共通（？）なので変数名が被らないようにしないとマズイです。（たしか）

４．まとめ

内容うすっ！
でも、ひと通り記事に出来たからOKや！