2013-06-06

javascriptとmicrodata（調査中）

micodata javascript

先日のエントリの続きになるわけだが，論文のmicrodataが埋め込まれているとその要旨をポップアップで表示してくれるようなツールを作りたいと考えている。

まず，既存のものに何があるのかという調査から。
Sagaceで使用しているポップアップのjavascriptを見てみる。
どうやらpoptitle.jsというものを利用しているらしい。軽量ツールチップ「poptitle.js」
ダウンロードした上記のプログラムを置いて，画像が必要な場合には画像をおいて，以下のように書けば利用可能だ。

略
<head>
<script type "text/javascript" src="js/poptitle.js"></script>
</head>
<body>
ほにゃほにゃ
<a href="http://sagace.nibio.go.jp/" title="創薬・医薬のための横断検索システム">Sagace</a>
<a href="http://www.ncbi.nlm.nih.gov/Taxonomy/Browser/wwwtax.cgi?mode=Info&id=39442" popimg="http://sagace.nibio.go.jp/images/icon/Mus_musculus_L.png" title=" " alt="マウス" width="96" >Mouse</a>

これで”創薬・医薬のための横断検索システム”というポップアップとマウスの画像がそれぞれ入手できる。
なんたる簡単！
poptitle.jsをみてみると，

 setPopobj:function(id) {
            var alt = "", ary = document.getElementsByTagName(id);
            for(var i=0, len=ary.length; i<len; i++) {
                popobj = ary[i];
                if(popobj.title) {
                    popbox = document.createElement("div");
                    popbox.setAttribute("id", "popbox");
                    document.body.appendChild(popbox);
                    alt = (popobj.alt) ? "<" + title_tag + ">" + popobj.alt + "</" + title_tag + ">" : ""; 
                    popobj.setAttribute("poptitle", alt + popobj.title);
                    popobj.removeAttribute("title");
                    popobj.removeAttribute("alt");
                    if(popobj.popimg) {
                        popobj.setAttribute("popimg", popobj.popimg);
                    }   
                    pop.addEvent(popobj, "mouseover", pop.showTitle);
                    pop.addEvent(popobj, "focus", pop.showTitle);
                    pop.addEvent(popobj, "mouseout", pop.fadeOut);
                    pop.addEvent(popobj, "blur", pop.fadeOut);
                }   
            }   
        },
creatPopbox:function() {
            pop.setPopobj("a");
            pop.setPopobj("img");
        },

でまず，document.getElementsByTagNameを使っているらしい。そこから"a"タグと"img"タグを取って来ている。
document.getElementsByTagNameはどうやらとても便利らしく，特定のタグの要素を取って来てくれているっぽい。
他の簡単なプログラムでテストしてみよう。

<html>
<head>
<title>getElementsByTagName example</title>
<script type="text/javascript">
function div1ParaElems()
{
var div1 = document.getElementById("div1")
var div1Paras = div1.getElementsByTagName("arema");
var num = div1Paras[0].title;
    alert("div1 要素には " + num + " の <arema> 要素があります");
}
</script>
</head>
<body style="border: solid green 3px">
<div id="div1" style="border: solid blue 3px">
      <arema title="korededouda">Some div1 text</arema>
</div>
<button onclick="div1ParaElems();">
div1 要素内の要素を表示</button><br />
</body>
</html>

MOZILLA DEVELOPER NETWORK-document.getElementsByTagName
これで，div1 要素には " korededouda " の要素があります。
とアラートが出る。コンテンツの内容を工夫すれば，microdataも拾えそうな気がしてきた。

2013-06-05

論文とmicrodata

これから書くことはほとんど自分のメモ的なことになってしまうけれど。少し前にmicrodataにおいて論文のcitation（引用）はどうマークアップするべきかということが話題になった。 public-vocabs@w3.orgというschema.org拡張のための（他にも色々話しているけれども）そんなことを議論するためのメーリングリストがあるのである。

私が今興味があるのは，citation（引用）より，reference（参照）で，参照のmicrodataが埋め込まれていたら何か良いことが出来ないかな。ということを考えているのだけども，どの書き方が綺麗で，分かりやすいか，ここにメモ的に書いておく。もともとは我々が提案しているBiologicalDatabaseEntryに組み込む予定 WebSchemas/BioDatabasesだったが，汎用性を高めるためにはもう既に定義されている語彙である，ScholaryAtricleで新規プロパティとして採用してもらった方が良いのではないかということで，落ち着いている。最初に我々が考えたシンプルな表記方法をどう変えたら良いのか，ちょいとここで思考を借りる事にしよう。

最初考えていたシンプルな方式。

<div itemscope itemtype="http://schema.org/BiologicalDatabase">
 Kanehisa M, et al. Nucleic Acids Res. 40, D109-D114 (2012).
 [<meta itemprop='reference' content='pmid:22080510'/>
   <a href="http://www.ncbi.nlm.nih.gov/pubmed/22080510">pubmed</a>]
</div>

ScholarlyArticleの場合にはこうなる。

<div itemscope itemtype="http://schema.org/ScholarlyArticle">
 Kanehisa M, et al. Nucleic Acids Res. 40, D109-D114 (2012).
 [<meta itemprop='entryID' content='pmid:22080510'/>
   <a href="http://www.ncbi.nlm.nih.gov/pubmed/22080510">pubmed</a>]
</div>

microdataの書き方については他の方の記事を参考にしていただくとして，基本的には，最初のタグにどの語彙で書きますよ宣言をして（itemscope itemtype="http://schema.org/ScholarlyArticle"）
　itemscope:範囲はこっからだよ。
　itemtype：これからこんな語彙使います！！
その中の当てはまるプロパティは何で（この場合referenceだったり，entryIDだったり）
　itemprop:囲まれている範囲の語彙のこんなプロパティを使います，よろしく！
という順序で書いていく。itemidとitemrefというものもあるのだけど，煩雑になるから，使わなくて良い時は使わない方針でいくとする。

語彙の宣言も複数あると面倒になるからなと思ってたけど，entryIDを使うなら，BiologicalDatabaseに既存のプロパティとして組み込むのは無理だなぁということが分かった… 組み込むならreferenceIDとしないと無理だなぁということ。

間違いなく説明不足だと思うのだけど，google等の検索エンジンでmicrodataを使ってもらうためには，schema.orgという大手検索エンジンが共通して使う語彙一覧に登録してもらうことが必要条件で（必要十分でないことが悲しい）それに生物学的なデータベースのための語彙を登録してもらうために頑張ってます。その語彙策定の中で，どのプロパティを使うのか，ということを決める時に，必ずしも全てがオリジナルなプロパティである必要はなく，他の既存のプロパティを採用しても良いということがある。

既に我々はentryIDを生物学的なデータベースのためのプロパティとして提案してしまったので，referenceのためのIDとするなら，やっぱりScholarlyArticleを使う必要があるなぁということ。

<div itemscope="" itemtype="http://schema.org/BiologicalDatabaseEntry">
Entry:
 <span itemprop="entryID">H00653</span>
</div>

が既に入っていたら，

<div itemscope="" itemtype="http://schema.org/BiologicalDatabaseEntry">
Entry:
 <span itemprop="entryID">H00653</span>
   <div itemscope itemtype="http://schema.org/ScholarlyArticle">
       Kanehisa M, et al. Nucleic Acids Res. 40, D109-D114 (2012).
       [<meta itemprop='entryID' content='pmid:22080510'/>
       <a href="http://www.ncbi.nlm.nih.gov/pubmed/22080510">pubmed</a>]
  </div>
</div>

こうなるなぁ。もしreferenceIDをBiologicalDatabaseEntryのプロパティとしても加えるなら

<div itemscope="" itemtype="http://schema.org/BiologicalDatabaseEntry">
Entry:
 <span itemprop="entryID">H00653</span>
  Kanehisa M, et al. Nucleic Acids Res. 40, D109-D114 (2012).
       [<meta itemprop='referenceID' content='pmid:22080510'/>
       <a href="http://www.ncbi.nlm.nih.gov/pubmed/22080510">pubmed</a>]
</div>

となるので気持ちスッキリするかも。

あぁ，ただグラフ的に考えると，どのエントリが何であるのかということを明示するとなるとitemidを使用することが好ましいので

<div itemscope="" itemtype="http://schema.org/BiologicalDatabaseEntry">
Entry:
 <span itemprop="entryID">H00653</span>
   <div itemscope itemtype="http://schema.org/ScholarlyArticle" itemid="pmid:22080510">
       Kanehisa M, et al. Nucleic Acids Res. 40, D109-D114 (2012).
       [<meta  itemprop='entryID' content='pmid:22080510'/>
       <a href="http://www.ncbi.nlm.nih.gov/pubmed/22080510">pubmed</a>]
  </div>
</div>

このように itemid="pmid:22080510"を書くと，後々このidの文献に対応する引用部分はなあに？みたいなことに使えるかもしれない。ただ，microdataのざっくりした性質から行くと，このページにある文献データは◯◯と〇〇と〇〇です。程度の記述でも良いかもしれない。

いまいち分かりにくいと思うが，後で説明したい。（あくまできぼんぬ。）

2013-05-24

maoringとこのblogについて

普段はmaoringoとして活動しています。

最近は医薬系のデータベースを統合する活動がメインです。

このブログではmicrodataの普及を目指して，直感的に理解できるようなブログを

書けたらと思っています。

maoring

maoring blog

このブログはセマンティックウェブ関連の技術的なあれこれを綴ったブログです。

javascriptとmicrodata（調査中）

論文とmicrodata

maoringとこのblogについて