Hatena::Groupkdri

KazusaAPI開発日誌 このページをアンテナに追加 RSSフィード

2007-07-02

Yahoo! UI Library をつかってみる

|  Yahoo! UI Library をつかってみる - KazusaAPI開発日誌 を含むブックマーク はてなブックマーク -  Yahoo! UI Library をつかってみる - KazusaAPI開発日誌  Yahoo! UI Library をつかってみる - KazusaAPI開発日誌 のブックマークコメント

WEB+DB Press vol 39 のCSSの特集のコラムに Yahoo! UI Library (YUI) が扱われていたので、使ってみることに。YUI は BSD ライセンスで公開されているので再利用しやすい。

screenshot screenshot

YUI のなかでも、各種ブラウザで表示が同じになるような CSS、AutoComplete、DataSource、DataTable、Menu、TabView、Tooltip をさしあたって利用してみたい。


ダウンロードする

YUI は SourceForge で公開されている。http://developer.yahoo.com/yui/download/ から SourceForge のダウンロードサイトへリダイレクトされる。yui_2.2.2.zip は 7.6MB ありやや大きめ。

展開されたファイルのなかにローカルで動作するAPIドキュメントがある。これは便利。

まとめ

Yahoo! UI Library (YUI) のダウンロードに必要な情報を紹介しました。


YUI の DataTable で blast_hits の結果を表示する

|  YUI の DataTable で blast_hits の結果を表示する - KazusaAPI開発日誌 を含むブックマーク はてなブックマーク -  YUI の DataTable で blast_hits の結果を表示する - KazusaAPI開発日誌  YUI の DataTable で blast_hits の結果を表示する - KazusaAPI開発日誌 のブックマークコメント

rails アプリで、テーブル状のデータを JSON 形式で blast_hits サーバからとりだして(XHR)、ソート可能なテーブルを表示することを YUI で試してみます。

目標

  1. XHR 経由で JSON 形式のデータをリモートサーバから取得する
  2. すべてのカラムでソート可能にする
  3. database と accession にはほかのリソースへのリンクをつける

方法

テーブル状のデータは blast_hits の REST API から取得します。JSON 形式で id = 1 のデータを取得するにはつぎの URL を使用します。

blast_hits の hits コントローラからは blastall -m8 のようなデータを取得できます。ここでは簡単にするためにつぎの項目だけを使用しました。

  1. Target database
  2. Target accession
  3. Target description
  4. Score
  5. Positive
  6. Identity

JSON 形式のテーブル用データはつぎのような感じです。テーブルの一行分がArrayのなかのHashに格納されています。

{Hits: [
       {accession: "AT1G52030.1", 
        identity: 51.2, 
	score: 43, 
	positive: 58.5, 
	description: " | Symbols: MBP1.2, F-ATMBP, MBP2 | MBP2 (MYROSINASE-BINDING PROTEIN 2) | chr1:19349759-19351951 REVERSE", 
	db: "TAIR_pep"}
	]
}

これはつぎのような ruby のコード(Hash の Array の Hash)でつくられています。

{:Hits => [{:accession => accession, 
            :db => database,
	    :identity => identity,
	    :score => score,
	    :positive => positive,
	    :description => description}
	  ]
}.to_json

YUI の DataTable の Yahoo Developer Network を参考しました。ほとんどそのまま写しています。

screenshot

つぎのコードで必要そうな js ファイルをインクルードしました。

<%= javascript_include_tag 'yui/yahoo/yahoo' %>
<%= javascript_include_tag 'yui/dom/dom' %>
<%= javascript_include_tag 'yui/event/event' %>
<%= javascript_include_tag 'yui/connection/connection' %>
<%= javascript_include_tag 'yui/datasource/datasource-beta-debug' %>
<%= javascript_include_tag 'yui/datatable/datatable-beta-debug' %>

必要そうな CSS ファイルをリンクしました。

<%= stylesheet_link_tag 'yui/reset/reset' %>
<%= stylesheet_link_tag 'yui/fonts/fonts' %>
<%= stylesheet_link_tag 'yui/datatable/assets/datatable' %>

このように使用するためには、yui/build 以下のファイルを適当に rails アプリの public/stylesheets/yui や public/javascripts/yui の中にコピーする必要があります。

テーブル表示に必要な JavaScript を書くための準備をします。

<script type="text/javascript">
# ここにテーブル表示のための Javascript を書いていきます。
</script>

結果

データの取得は DataSource でおこないました。

var myDataSourceJ = new YAHOO.util.DataSource("http://localhost:3000/hits/2.json"); 

Example のようにローカルへのアクセスの場合は http:// などが不要のようです。


データソースのデータ形式を指定します。JSON の場合はつぎのようにします。

myDataSourceJ.responseType = YAHOO.util.DataSource.TYPE_JSON; 

no title 周辺でデータタイプが定義されています。


つぎに JSON 形式のデータを処理するスキーマを指定します。

myDataSourceJ.responseSchema = { 
  resultsList: "Hits", 
  fields: ["db","accession","score","identity","positive","description"]
}; 

テーブルのデータでは Hits キーの値(Array)が行データになっています。さらに、行データのうち、アクセスするものを fields で指定します。ここで指定したフィールドのアクセサが作られます。

resultsList 以外に利用できるのは、no title あたりに記載されていました。


表示するテーブルのカラムを設定します。

var myColumnHeaders = [ 
    {key:"db",        text:"database"},
    {key:"accession", text:"Accession"},
    {key:"score",     text:"Score"},
    {key:"identity",  text:"Iden(%)"},
    {key:"positive",  text:"Posi(%)"},
    {key:"description", text:"Definition *"}
]; 
var myColumnSetJ = new YAHOO.widget.ColumnSet(myColumnHeaders); 

myColumnHeaders は JSON なんですね。key はデータのなかのアクセサを指して、text は表示するテーブルのカラムに表示する文字列です。


テーブルを表示します。

var myDataTableJ = new YAHOO.widget.DataTable("json", myColumnSetJ, myDataSourceJ); 

第一引数("json")がテーブルを表示する id です。


テーブルは id="json" のタグに差し込まれます。

<div id="json"></div> 

テーブル用の CSS です。

<style type="text/css">
#json {margin:1em;}
#json table {border-collapse:collapse;}
#json th, #json td {padding:.5em;border:1px solid #000;}
#json th {background-color:#696969;color:#fff;}/*dark gray*/
#json th a {color:white;}
#json th a:hover {color:blue;}
#json .yui-dt-odd {background-color:#eee;} /*light gray*/
</style>

ここまでで、目標の一つ目(XHR 経由で JSON 形式のデータをリモートサーバから取得する)が達成できました。


つぎにカラム毎のソートを試してみました。

つぎのようにカラム定義に sortable:true を追加しました。

var myColumnHeaders = [ 
    {key:"db",        text:"database",  sortable:true},
    {key:"accession", text:"Accession", sortable:true},
    {key:"score",     text:"Score",   type:"number", sortable:true}, 
    {key:"identity",  text:"Iden(%)", type:"number", sortable:true}, 
    {key:"positive",  text:"Posi(%)", type:"number", sortable:true}, 
    {key:"description", text:"Definition *", sortable:true} 
]; 
var myColumnSetJ = new YAHOO.widget.ColumnSet(myColumnHeaders); 

このように変更すると、テーブルのヘッダのカラム名にリンクができます。カラム名をクリックする毎に昇順降順が切り替わるようになります。


つぎに値にリンクをつけてみます。

databaseカラムと accessionカラムの値に任意のリンクをつけます。

リンクは、表示する文字列への formatter を利用します。はじめに fomatter 用の関数を定義します。innerHTML のレシーバがここでの表示するセルになっています。

var formatUrlDb = function(elCell, oRecord, oColumn, sData) {
    elCell.innerHTML = "<a href='" + oRecord.dburl + "' target='_blank'>" + sData + "</a>";
};
var formatUrlAcc = function(elCell, oRecord, oColumn, sData) {
    elCell.innerHTML = "<a href='" + oRecord.accurl + "' target='_blank'>" + sData + "</a>";
};

sData がそのときの text: の値で、oRecord がそのときのレコードオブジェクトです。ここでは、データの dburl というフィールドに database 用の URL が格納されていることを期待しています。したがって、JSON 形式のデータとしてつぎのようなものを期待しています。

{Hits: [
       {accession: "AT1G52030.1", 
        accurl: 'http://example.com/TAIR/AT1G52030.1", 
        identity: 51.2, 
	score: 43, 
	positive: 58.5, 
	description: " | Symbols: MBP1.2, F-ATMBP, MBP2 | MBP2 (MYROSINASE-BINDING PROTEIN 2) | chr1:19349759-19351951 REVERSE", 
	db: "TAIR_pep",
        dburl: 'http://example.com/TAIR/"}
	]
}

これまでのデータに accurl と dburl が追加しました。

このデータに利用するためには、さらに、データソースのスキーマに dburl と accurl アクセサを追加指定します。

myDataSourceJ.responseSchema = {
  resultsList: "Hits",
  fields: ["db","accession","score","identity","positive","description","dburl","accurl"]
};

最後に、formatter 指定をカラムヘッダの定義に追加しました。

var myColumnHeaders = [ 
    {key:"db",        text:"database",  sortable:true, formatter:formatUrlDb}, 
    {key:"accession", text:"Accession", sortable:true, formatter:formatUrlAcc}, 
    {key:"score",     text:"Score",   type:"number", sortable:true}, 
    {key:"identity",  text:"Iden(%)", type:"number", sortable:true}, 
    {key:"positive",  text:"Posi(%)", type:"number", sortable:true}, 
    {key:"description", text:"Definition *", sortable:true} 
]; 
var myColumnSetJ = new YAHOO.widget.ColumnSet(myColumnHeaders); 

formatterで関数名を指定出来るのは,おもしろいですね。


まとめ

rails アプリで YUI をつかってリモートサーバからデータを JSON 形式でとりだして、ソート可能なテーブルを表示することを試してみました。

テーブルへのソート機能やリンク付けの追加が非常に簡単に追加できました。

Exampleとの違いを列挙します。

  1. データソースがローカルファイルでなくてリモートサーバ
  2. データを取得するときのGETの引数が不要

コード

...
トラックバック - http://kdri.g.hatena.ne.jp/nakao_mitsuteru/20070702