javascriptとmicrodata(調査中)その6 -PubMedIDから論文のAbstractを取得して表示させよう。
ここから前回までの話からぴょっと飛ぶのだけど,NCBIではPubMedIDからその論文に関するデータをxml形式で取得できるサービスを行っている。ありがとう牧場。ありがとう@i_87さん!!
PubMedのアブストラクトの取得
そしてリンク先はちょっと古くなっているのでここで更新させていただくと,説明書きは以下のリンク先からご覧ください。
EFetch
ここでは詳しい説明は省略しますが,
http://eutils.ncbi.nlm.nih.gov/entrez/eutils/efetch.fcgi?db=pubmed&id=22674858&retmode=xml
のようにid=の後にPubMed IDを入れるとxml形式でデータが得られます。ここでabstractを入手してtextにして表示させようというわけです。
xmlの入手にはjQuery.ajax()を使います。ajax部分だけ抜粋して書いてみると
$.ajax({ url:'http://eutils.ncbi.nlm.nih.gov/entrez/eutils/efetch.fcgi?db=pubmed&retmode=xml&id='+ contenttext,//読み込むURL dataType:'xml',//受信するデータの種類 async:true,//非同期通信を有効にするか success:function(xml){ html=''; title = $(xml).find("ArticleTitle").text();//titleの読み込み abstract = $(xml).find("AbstractText").text();//abstractの読み込み popuptext = title + "\n\n" + abstract ;//popup用の文章 }, error: function(html){ alert('Fell the data loading, Please access later'); //失敗したら } });
こんな感じでデータを入手出来ます。今回はタグが<ArticleTitle>
や<AbstractText>
と取りたいものそのものになっていたのであっさり取り出せて便利でした。ここで,そのまま前のjavascriptを使ったら,ajaxが後で読まれて誤ったポップアップが出てしまう事態となってしまったので,
$(document).ajaxComplete(function(){ を使ってajaxが終わったらポップアップ出してよ☆的なコードに書き換えました。(あっさり書いたけどここに行きつくのにむっちゃ時間かかった。)
jQueryでajax:非同期通信時、実行順番を保障する方法
ありがたや↑美しや↑(何故誤字が多いのかはよく分からない。きっと疲れていたのだろう。)
あとポップアップウィンドウ内で改行が出来ない!みたいなことがあったのですが,white-space: pre-wrap; で解決しました。(←あっさり書いたけどここに…以下略…!!)
参考:white-space - ソース中の空白・Tab・改行の表示の仕方を指定する
さて,以上を踏まえてひと通りコードを掲載しておきましょう。前回も書きましたが,コードはかなり以下のリンク先のコードを利用させていただいています。
[jQuery] ヘルプメッセージをポップアップして表示する方法
下のコードは後でダウンロード出来るように近いうちにどこかに置いておきます。
css
.popup_help { padding: 0 3px; color: #66f; font-weight: bold; cursor: pointer; } .popup_help_window { max-width: 500px; position: absolute; padding: 6px 15px; background-color: #fff; border: 5px double #ccc; display: none; color: #333; font-family: 'Helvetica Neue'; font-size: 12px; line-height: 1.5em; border-radius: 10px; box-shadow: 5px 5px 5px #ccc; white-space: pre-wrap; }
(function($) { $.fn.popupHelp=function(config) { /** * marginTop: 表示対象とウィンドウの高さの差分です。 * 0を指定すると、上端が揃います。 * marginLeft: 表示対象とウィンドウの横の差分です。 * 0を指定すると、左端が揃います。 * className: ウィンドウに設定するクラス名です。 * speed: ウィンドウを表示する際の秒数[ms]です。 */ var defaults = { marginTop: 0, marginLeft: 20, className: "popup_help_window", speed:10 } var options = $.extend(defaults, config); // ヘルプウィンドウのオブジェクトを準備します。 var popupObj = $("<div>").addClass(defaults.className).appendTo($("body")); var html='';//グローバル変数 var title = ''; var abstract = ''; var contenttext = ''; var popuptext = ''; return this.each(function() { $(this).mouseover(function() { // 表示対象にマウスが重なった時の処理です。 contenttext = ''; // ウィンドウにメッセージを設定します。 contenttext = $(this).attr('content'); //:以後のみを切り出します。 contenttext = contenttext.split(":")[1]; var offsetTop = $(this).offset().top + defaults.marginTop; var offsetLeft = $(this).offset().left + defaults.marginLeft; $.ajax({ url:'http://eutils.ncbi.nlm.nih.gov/entrez/eutils/efetch.fcgi?db=pubmed&retmode=xml&id='+ contenttext,//読み込むURL dataType:'xml',//受信するデータの種類 async:true,//非同期通信を有効にするか success:function(xml){ html=''; title = $(xml).find("ArticleTitle").text();//titleの読み込み abstract = $(xml).find("AbstractText").text();//abstractの読み込み popuptext = title + "\n\n" + abstract ;//popup用の文章 }, error: function(html){ alert('Fell the data loading, Please access later');//失敗した場合 } }); $(document).ajaxComplete(function(){ popupObj.text(popuptext); // ウィンドウのオフセットを計算します。 // ウィンドウの位置を整え、表示します。 popupObj.css({ "top": offsetTop, "left": offsetLeft }).show(defaults.speed); }); }); $(this).mouseleave(function() { // 表示対象にマウスが重なった時の処理です。 // ウィンドウを隠しつつ,textを空にします。 popupObj.hide("slow").text(""); }); }); }; })(jQuery);
html
<!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]").popupHelp({"marginTop": 20, "marginLeft": 40}); }); </script> </head> <body> <header> <h1 id="header_title">論文要旨をポップアップして表示するサンプル<br /></h1> </header> <ul itemscope itemtype="http://schema.org/ScholarlyArticle"><li>Morita M., Igarashi Y., Ito M., Chen YA., Nagao C., Sakaguchi Y., Sakate R., Masui T., Mizuguchi K., Sagace: a web-based search engine for biomedical databases in Japan., BMC Res Notes, 2012 Oct 31, 5:604, <span itemprop='entryID' content='pmid:23110816' ><a href="http://www.ncbi.nlm.nih.gov/pubmed/23110816" target="_blank">PubMed:23110816</a></span></li> <li>Nagao C., Izako N., Soga S., Khan SH., Kawabata S., Shirai H., Mizuguchi K., Computational design, construction, and characterization of a set of specificity determining residues in protein-protein interactions., Proteins, 2012 Oct, 80(10):2426-36, <span itemprop='entryID' content='pmid:22674858' \><a href="http://www.ncbi.nlm.nih.gov/pubmed/22674858" target="_blank">PubMed:22674858</a></span></li> <li>Blower TR., Short FL., Rao F., Mizuguchi K., Pei XY., Fineran PC., Luisi BF., Salmond GP., Identification and classification of bacterial Type III toxin-antitoxin systems encoded in chromosomal and plasmid genomes., Nucleic Acids Res, 2012 Jul, 40(13):6158-73, <span itemprop='entryID' content='pmid:22434880' \><a href="http://www.ncbi.nlm.nih.gov/pubmed/22434880" target="_blank">PubMed:22434880</a></span></li> </ul> </body> </html>
以上,これはずっと前からやりたかった実装だから出来てよかった!
結果のイメージはこんな感じ。pubmedIDが入ったmicrodataとちょいとタグをhtmlに入れるとなんとタイトルと要旨を自動で取って来てくれるのだ!!!!
デモでお試しください。不具合等ありましたら教えて下さい。
デモ