javascriptとmicrodata（調査中）その5
前回までで特定のclassであれば，ポップアップで中身を表示できるようになった。
これをmicrodataでやりたいのだけど…と思った時に，classじゃなくてitempropで認識出来れば良いのでは？ということに気がついた。しかし，どうやって？と調べていたら，ここにも神が舞い降りた。紙でも髪でもなければ，女将でもない！って何ダジャレを！←気にしないでください。
jqueryのセレクタで name属性を使う
セレクタが便利そうなので、jqueryを使ってみました。 elementを選択するには、 id : $("#idname") class : $(".classname") tag : $("tagname") なんてのが使える 他にも便利なセレクタがありますが、名前でも選択が可能です。 以下のように書けばいいです。
$("*[name=target]")
これって・・・「name」属性が"target"のものを取得するということになります。 てことは、別に、nameじゃなくても、idでも、classでも、hrefでもlangとかでも出来るらしい。
なんですと！そんな簡単に出来ちゃうの？ってことでものは試し。itempropで出来ないか考えることにした。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title></title> <link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="popup_help.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="jquery.popup_help.js"></script> <script> $(function() { // ?マークにマウスを載せるとヘルプメッセージを表示させるようにします。 // $("*[itemprop=entryID].popup_help").popupHelp({"marginTop": 20, "marginLeft": 40}); $("[itemprop=entryID]").popupHelp({"marginTop": 20, "marginLeft": 40}); }); </script> </head> <body> <header> <h1 id="header_title">ヘルプメッセージをポップアップして表示するサンプル<br />（プラグイン化）</h1> </header> <div itemscope itemtype="http://schema.org/ScholarlyArticle"> <p> Kanehisa M, et al. Nucleic Acids Res. 40, D109-D114 (2012).</p> [<span itemprop='entryID' content='pmid:12080510'/ data-message="This is an article"> <a href="http://www.ncbi.nlm.nih.gov/pubmed/22080510">pubmed</a></span> ] <br> [<span itemprop='entryID' content='pmid:22080510'/ data-message="This is an article"> <a href="http://www.ncbi.nlm.nih.gov/pubmed/22080510">pubmed</a></span> ] </div> </body> </html>
↓取得する内容がcontentなので一部 popupObj.text($(this).attr('content')); に変更。
(function($) { $.fn.popupHelp=function(config) { /** * marginTop: 表示対象とウィンドウの高さの差分です。 * 0を指定すると、上端が揃います。 * marginLeft: 表示対象とウィンドウの横の差分です。 * 0を指定すると、左端が揃います。 * className: ウィンドウに設定するクラス名です。 * speed: ウィンドウを表示する際の秒数[ms]です。 */ var defaults = { marginTop: 0, marginLeft: 20, className: "popup_help_window", speed: 300 } var options = $.extend(defaults, config); // ヘルプウィンドウのオブジェクトを準備します。 var popupObj = $("<p/>").addClass(defaults.className).appendTo($("body")); // popupObj.appendTo($("body")); return this.each(function() { $(this).mouseover(function() { // 表示対象にマウスが重なった時の処理です。 // ウィンドウにメッセージを設定します。 popupObj.text($(this).attr('content')); // ウィンドウのオフセットを計算します。 var offsetTop = $(this).offset().top + defaults.marginTop; var offsetLeft = $(this).offset().left + defaults.marginLeft; // ウィンドウの位置を整え、表示します。 popupObj.css({ "top": offsetTop, "left": offsetLeft }).show(defaults.speed); }).mouseout(function() { // 表示対象にマウスが重なった時の処理です。 // テキストを空にして、ウィンドウを隠します。 popupObj.text("").hide("fast"); }); }); }; })(jQuery);
これで実行すると，おぬし出来ているではないか！！
ここで疑問が生じる。今回の論文のIDの場合content=pmid:22080510 でどの論文かまで指定してしまっているので，itemtypeは気にしなくて良いのではないだろうか…。邪道だってテンカラ声が聞こえてきそうだが，書き間違える人もいるかもだし，taxon等で必要になったら，
先日調べた"jquery.microdata.js"を使ってitemtypeも取得することにしよう。
悪魔のささやきかも…（苦悩）いやでもBioHackathon中にも取り組めるかもしれないし。
というわけで，取得したcontent内のテキストからPubMed IDを抜き出して要旨を表示するところまで持っていきたい。続く…
