Webクライアントの実装(2)

はじめに

おはようございます。当ブログにアクセス頂き、ありがとうございます。
新学期が始まり、そろそろ会計とマネジメントの授業に集中せねばとプレッシャーを感じている、たなけんです。
本エントリでは、Google visualization APIを利用したUIの実装について記載します。

Webクライアントの実装(2)

Closure Libraryでは多彩なUIコンポーネントが用意されています。しかし、Closure LibraryのUIコンポーネントはややオーバースペックであるため、Google visualization APIを利用し、表形式で結果を表示したいと思います。

htmlへの追記

Google jsapiを利用するため、下記の内容をindex.htmlのヘッダ部に追記しました。

データの変換

JSONをClojureオブジェクトへ変換する関数です。
semperosnのgistで公開されていた関数をコピーさせて頂きました。

google visualization API読み込み

ライブラリを読み込み、読み込み後にinit関数を実行するよう設定します。

• google/loadメソッド: ライブラリを読み込む
• google/setOnLoadCallbackメソッド: ライブラリ読み込み後に実装する関数を指定

表データの作成

サーバから返された値から、google.visualization.Tableクラスのコンストラクタが要求する形式のデータを作成します。

表の描画

div要素resultに表を描画します。

• js/クラス名 特殊形式: 指定されたクラスをJavaScriptのオブジェクトとして利用する
• google.visualization.Tableクラス: テーブルを描画するクラス。引数に、描画する位置となる要素を指定する
• google.visualization.DataTableクラス: データを司るクラス。引数にデータとなるJSONを指定する

今回の作業は以上。最後までお読み頂きありがとうございました。

たなけん(作業時間45分)