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

はじめに

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

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

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

htmlへの追記

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

view raw dictionary.html hosted with ❤ by GitHub

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

データの変換

	(defn clj->js
	"Recursively transforms ClojureScript maps into Javascript objects,
	other ClojureScript colls into JavaScript arrays, and ClojureScript
	keywords into JavaScript strings."
	[x]
	(cond
	(string? x) x
	(keyword? x) (name x)
	(map? x) (.-strobj (reduce (fn [m [k v]]
	(assoc m (clj->js k) (clj->js v))) {} x))
	(coll? x) (apply array (map clj->js x))
	:else x))

view raw core.cljs hosted with ❤ by GitHub

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

google visualization API読み込み

	(.load js/google "visualization" "1.0" (clj->js {:packages ["corechart" "table"]}))
	(defn main []
	(.setOnLoadCallback js/google init))

view raw core.cljs hosted with ❤ by GitHub

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

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

表データの作成

	(defn- convert-to-table-data
	[entry]
	{:c [{:v (:pos entry)} {:v (:text entry)}]})
	(defn- create-data
	[entries]
	(clj->js
	{:cols
	[
	{:id "pos" :label "POS" :type "string"}
	{:id "text":label "Meaning" :type "string"}]
	:rows (vec (for [entry entries] (convert-to-table-data entry)))}))

view raw core.cljs hosted with ❤ by GitHub

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

表の描画

	(defn- draw-table
	[entries]
	(.draw
	(js/google.visualization.Table. (dom/get-element :result))
	(js/google.visualization.DataTable. (create-data entries))))

view raw core.cljs hosted with ❤ by GitHub

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

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

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

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