javascriptとmicrodata（調査中）

先日のエントリの続きになるわけだが，論文の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も拾えそうな気がしてきた。

maoring blog

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

javascriptとmicrodata（調査中）