BH14.14/TogoStanza

TogoStanza の進化とポータルサイトの整備

== TogoStanza JavaScript 化 ==

これまでの TogoStanza はサーバが Ruby で書かれていたため、
* インストールの際に依存関係が多く手間があった
* サーバサイドでロジックを Ruby で書く必要があった
* SPARQL クエリをサーバ側で行う必要があった
* ブラウザ側の JavaScript でデータ処理を行いたい場合 Ruby のオブジェクトを JSON にシリアライズして HTML に即値で埋め込んで渡す必要があった
* レンダリングされた HTML からインタラクティブに SPARQL クエリを行った結果を反映したい場合、本来 JavaScript でできる SPARQL クエリと結果のレンダリングを、サーバに JSON を返す機能を事前に定義しておき API として呼び出す必要があった
これを、JavaScript で実装できるようにすることにより、
* 前提知識を Web 技術だけに絞ることができる
* インタラクティブな AJAX 操作をシンプルに記述できる
* サーバ側の負荷を軽減できる
などのメリットが得られる。

また、Web Components により IFRAME から脱却し、スタンザ間の連携などをページ内で実現できるようにすることが可能となる。

これらを実現するために、[https://www.polymer-project.org/ Polymer] を利用して実装を行っている。

* ディレクトリ構成
** my_stanza
*** index.js
*** metadata.json
*** template/stanza.rq
*** template/stanza.html

ユーザは index.js に SPARQL クエリのテンプレートと、結果をレンダリングする HTML のテンプレートを指定。
テンプレートでは、外部から parameters を渡し、handlebars によって変数の埋め込みを行う。

<pre>
Stanza(function(stanza, params) {
  params["key"] = "value"
  var config = {
    endpoint: "http://endpoint.org/sparql",
    template: "stanza.rq",  // template ディレクトリ以下のファイル名を指定
    parameters: params
  }
  var data = {}
  stanza.query(config).then(function(result) { ... })
  var option = {
    template: "stanza.html"  // template ディレクトリ以下のファイル名を指定
    parameters: data
    selector: "#stanza"
  }
  stanza.render(option)
});
</pre>

render 関数では stanza.html に値がバインドされる。

<pre>
<div id="stanza"></div>
</pre>

このスタンザの埋め込みは Web Components により、link 要素でスタンザを読み込み、スタンザ名のタグにスタンザに渡すオプションを指定して行う。

<pre>
<!DOCTYPE html>
<meta charset="utf-8">
<html>
  <head>
    <script src="http:// ... /webcomponents.js"></script>
    <link rel="import" href="スタンザ名1">
    <link rel="import" href="スタンザ名2">
  </head>
  <body>
    <スタンザ名1 オプション名=値></スタンザ名1>
    <スタンザ名2 オプション名=値></スタンザ名2>
  </body>
</html>
</pre>

複数の SPARQL 結果を処理してレンダリングする場合は、個々の SPARQL が非同期なので jQuery を使って同期する。

<pre>
Stanza(function(stanza, params) {
  var query1 = stanza.query(config1)
  var query2 = stanza.query(config2)

  $.when(query1, query2).then(function(result1, result2) { ... }
})
</pre>

HTML テンプレートで指定した DOM にイベントを定義し AJAX の SPARQL コールを行ってスタンザ内の DOM を書き換える場合、
クリック等のインタラクションを行う DOM の ID と、その結果を差し込むための DOM ID をテンプレートの HTML に用意しておく。

<pre>
<div id="stanza">
  <div id="result">{{foo}}</div>
  <div id="update"></div>
</div>
</pre>

ここで result 要素がクリックされた場合に update 要素を差し替えるには、たとえば jQuery の on で差し替え用の stanza.query と stanza.render を定義する。

<pre>
Stanza(function(stanza, params) {
  stanza.query(config).then(function(result) { ... })
  stanza.render(option)
  // いったんスタンザが表示されたあと、ブラウザでクリックイベントが発生してから下記の SPARQL 検索を行いスタンザの HTML に結果を差し込む
  $('#result').on('click', function(params) {
    var config2 = {
      endpoint: "http://endpoint.org/sparql"
      template: "partial.rq",
      parameters: params
    }
    stanza.query(config2).then(function(result2) { ... })
    var option2 = {
      template: "partial.html",
      parameters: params2
    }
    stanza.render(option2)
  })
})
</pre>

HTML をレンダリングした後に、DOM 要素に対して D3.js などで SVG を追記するなど DOM の加工を行う場合は、stanza.render 関数のあとに実行する。

<pre>
Stanza(function(stanza, params) {
  var results = {}
  stanza.query(...).then(function(data) { results = ... })
  stanza.render(...)
  d3.select("#graph").append("svg").data(results)...
})
</pre>

これまでの TogoStanza サーバにあったジェネレータ、テスト用サーバは Go によるコマンドで実装中。

TODO:
* 下記 metadata.json を利用してヘルプページをクライアント側でレンダリングする JavaScript を提供する
* データダウンロード機能
* スタンザ間連携のための仕組みをデザインする

== TogoStanza メタデータ ==

[[SPARQLthon27/StanzaMetadata]] でドラフトを作成したスタンザメタデータのための JSON を拡張し、JSON-LD によるメタデータ表現 (片山 2/3) を導入することにより、ウェブアプリ側でヘルプページをレンダリングしたり、フィルタリングしたり、質問応答のための入力と次に提示できるスタンザのコンテクストを定義するとともに、メタデータ自身を RDF として管理できるようにしたい。

<pre>
{
    "@context": { "": "http://togostanza.org/resource/stanza#" },
    "@id": "http://togostanza.org/stanza/environment_attributes",
    ":label": "Environmental attributes",
    ":definition": "Basic information of an environment ontology.",
    ":parameters": [
        { ":key": "meo_id",
          ":example": "MEO_0000006",
          ":description": "MEO identifier. (e.g., MEO_0000006)",
          ":required": true
        }
    ],
    ":usage": "<iframe src=\"http://togogenome.org/stanza/environment_attributes?meo_id=MEO_0000006\"></iframe>",
    ":type": ":Stanza",
    ":context": ":EnvironmentContext",
    ":display": ":TableDisplay",
    ":provider": "Database Center for Life Science",
    ":license": "CC-BY",
    ":author": "Stanza Togo",
    ":address": "hoge@example.org",
    ":created": "2015-02-03",
    ":updated": "2015-02-03"
}
</pre>

これを検証のため Turtle にするとこんな感じ

<pre>
@prefix : <http://togostanza.org/resource/stanza#> .
@prefix xsd: <http://www.w3.org/2001/XMLSchema#> .

<http://togostanza.org/stanza/environment_attributes>
        :type           :Stanza ;
        :context        :EnvironmentContext ;
        :display        :TableDisplay ;
        :label          "Environmental attributes" ;
        :definition     "Basic information of an environment ontology." ;
        :parameters [
                :key            "meo_id" ;
                :description    "MEO identifier. (e.g., MEO_0000006)" ;
                :example        "MEO_0000006" ;
                :required       true
        ];
        :usage          "<iframe src=\"http://togogenome.org/stanza/environment_attributes?meo_id=MEO_0000006\"></iframe>" ;
        :provider       "Database Center for Life Science" ;
        :author         "Stanza Togo" ;
        :address        "hoge@example.org" ;
        :license        "CC-BY" ;
        :created        "2015-02-03"^^xsd:date ;
        :updated        "2015-02-03"^^xsd:date .
</pre>

ただ、JSON-LD における ":hoge" が必ずしもキレイかどうか、@context: { "": "http://..." } の空文字キーが分かりにくいなどから、明示的なプレフィックス定義をしたほうが良いかも

<pre>
{
    "@context": {
        "stanza": "http://togostanza.org/resource/stanza#"
    },
    "@id": "http://togostanza.org/stanza/environment_attributes",
    "stanza:label": "Environmental attributes",
    "stanza:definition": "Basic information of an environment ontology.",
    "stanza:parameters": [
        { "stanza:key": "meo_id",
          "stanza:example": "MEO_0000006",
          "stanza:description": "MEO identifier. (e.g., MEO_0000006)",
          "stanza:required": true
        }
    ],
    "stanza:usage": "<iframe src=\"http://togogenome.org/stanza/environment_attributes?meo_id=MEO_0000006\"></iframe>",
    "stanza:type": "stanza:Stanza",
    "stanza:context": "stanza:EnvironmentContext",
    "stanza:display": "stanza:TableDisplay",
    "stanza:provider": "Database Center for Life Science",
    "stanza:license": "CC-BY",
    "stanza:author": "Stanza Togo",
    "stanza:address": "hoge@example.org",
    "stanza:created": "2015-02-03",
    "stanza:updated": "2015-02-03"
}
</pre>

TODO:
* stanza:usage は JavaScript 版 Web Components では変更が必要
* 各スタンザの受け付ける質問 (stanza:key) と、次につながる stanza:context を定義する
* 全スタンザの metadata.json を準備する
* TogoStanza ポータルサイトで metadata.json を利用したスタンザのフィルタリング、ヘルプ表示を行う

== TogoStanza ポータルサイト ==

スタンザの使い方、作り方を紹介し、世の中のスタンザの一覧をとりまとめるポータルサイトを構築する。
上記 metadata.json (JSON-LD) を各スタンザから取得し、スタンザの一覧、絞り込み、ヘルプ表示、連携などを提供する。

[http://penqe.com/togostanza/ TogoStanzaポータル開発途上版]