経緯（復習）
研究室の論文管理が煩雑なので，PubMedから情報を収集するフォーマットと，それを簡単に編集できるプログラムを書いたらいいんじゃない？と思い，取り組むことに。するとPubMed IDをアドレスに指定すると，xmlでデータを取得できることを知る。PubMed IDから論文のリストを作ろう（調査編） JavaScriptのjqueryやajaxをうまく利用すると論文の必要なデータもオンザフライで取得できることが分かった。PubMed IDから論文のリストを作ろう（実装編 その１）
ネット上で色々出来たほうが楽しいよね。
実装編 その１でデータを取得することは出来たのですが，プログラムを書き換えないとPubMed IDが変えられないとか，そいつは実用的じゃないよねん，というわけでインターフェイスを作ることにする。
JavaScriptの簡単そうなフォームを探せ
後で見た目をこだわるにしても簡単なところから入ったほうが良かろうということでググる。Java scriptのお勉強 lesson2 うむ，簡単そうだ。どれどれ。
Java scriptのお勉強 lesson2 テキストフィールドに入力された数値を数値変数に変換して，2倍にした値をテキストエリアに出力します。
よさげだ。コードお邪魔します。
一部抜粋して掲載させて頂きます。
www.mech.tohoku-gakuin.ac.jp/nken/e-learning/javascript/lesson2.html
<script language="JavaScript"><!--
function make_text(){
document.getElementById('output_text').value=""
+eval(document.getElementById('string1').value)*2+"\n"
}
// --></script>
</head>
<body bgcolor=white text=gray>
<font color="slateblue"><b>Java scriptのお勉強 lesson2</b></font><br>
<br>
テキストフィールドに入力された数値を数値変数に変換して，2倍にした値をテキストエリアに出力します。
数値入力： <input type="text" size=70 id="string1"><br><br>
<input type="button" value=" 計算結果 " onClick="make_text()">
<input type=reset value=" リセット ">
<textarea id="output_text" cols="70" rows="20" WRAP=ON></textarea>
2005 Nagashima Labo.<br><br>
<input type="text" size=70 id="string1">で入力した値をmake_text関数内で値を得て数値にして二倍にして<textarea id="output_text" …に引き渡していると。分かりやすい。
さあ，これを先ほどのプログラムに利用すっぞ。
outp.html
<h2>Please input PubMed ID(comma-delimited) and push Results button.</h2>
<input type="text" size=70 id="string1"><br><br>
<input type="button" value="Results" onClick="make_text()"><!--クリックしたら，make_text関数を実行-->
<input type="button" value="Reset" onClick="make_blank()"><!--クリックしたら，make_blank関数を実行-->
<br><br><br>
<h2>Publication Lists (Preview)</h2>
<div id="news">Now loading... (If you cannot see this page,
Please refer to this <a href="news.html">link</a>.
</div>
<br><br>
<h3>HTML</h3>
<textarea id="output_text" cols="70" rows="20" WRAP=ON></textarea><!--htmlの中身を document.getElementById('output_text').value=… から出力-->
</div>
</div>
<!-- inner --></div>
<!-- contents --></div>
<footer>
<small><img src="../../_shared/img/footer_copy.png" width="147" height="14" alt="（C）H2O Space. Mynavi"></small>
<!-- footer --></footer>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var html=''//グローバル変数
function make_text(){
$.ajax({
url:'http://eutils.ncbi.nlm.nih.gov/entrez/eutils/esummary.fcgi?db=pubmed&id='+document.getElementById('string1').value,//入力値をxmlに入れる//読み出すURL
dataType:'xml',//受信するデータの種類
async:true,//非同期通信を有効にするか
success:function(xml){
html='';
$(xml).find('DocSum').each(function(){//DocSumが１つの論文
var title = $(this).find('Item').filter('[Name^=Title]').text();
var PubDate = $(this).find('Item').filter('[Name^=PubDate]').text();
var pubmed = $(this).find('Item').filter('[Name^=pubmed][Type^=String]').text();
//子ノードがないないものはfilterをかけて属性ごとに取得。
var authorlist = '';//子ノードがあるものは中身をみる。
$(this).find('Item').filter('[Name^=AuthorList]').each(function(){
var authornum = $(this).find('Item').length;//著者数を数えて
for(var i = 0; i < authornum;i++){
var author = $(this).find('Item').eq(i).text();
authorlist += author + '.,';//リストに加えていく。
}
});
html += '<li>' + authorlist +' '+ title + ', ' + PubDate + ', ' + '<a href="http://www.ncbi.nlm.nih.gov/pubmed/'+pubmed + '">PubMed:'+pubmed+'</a></li>\n';
//１つ追記。
document.getElementById('output_text').value="<ul>"+html+"</ul>\n"
});//テキストフィールドに入れる。
$('#news').html('<ul>' + html + '</ul>');//全て追加した所で<div id="news">内に取得
},
error: function(html){
alert('Fell the data loading, Please access later');
}
});
}
function make_blank(){
$('#news').html('');//出力値を空に
document.getElementById('output_text').value="";
}
</script>
詳しくはプログラム中を見てほしい。基本的には先程のプログラムで得ていた値をxmlに渡す形に変更して得られたデータを本文中に記載にする形とhtml形式でテキストエリアに出力する形に分けている。
おまけ
というか，個人的にはこれが大事なのだけど，microdata出力バージョンも作りました。microdataほにほに，ということは後ほど宣伝したいと思います。
outpmicro.html
<h2>Please input PubMed ID (comma-delimited) and push Results button.</h2><input type="text" size=70 id="string1"><br><br><input type="button" value="Results" onClick="make_text()"><input type="button" value="Results with microdata" onClick="make_micro()"><input type="button" value="Reset" onClick="make_blank()"><br><br><br><h2>Publication Lists (Preview)</h2><div id="news">Now loading... (If you cannot see this page, Please refer to this <a href="news.html">link</a>.</div><br><br><h3>HTML</h3><textarea id="output_text" cols="70" rows="20" WRAP=ON></textarea></div></div><!-- inner --></div><!-- contents --></div><footer><small><img src="../../_shared/img/footer_copy.png" width="147" height="14" alt="（C）H2O Space. Mynavi"></small><!-- footer --></footer><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript">var html=''//グローバル変数function make_text(){$.ajax({ url:'http://eutils.ncbi.nlm.nih.gov/entrez/eutils/esummary.fcgi?db=pubmed&id='+document.getElementById('string1').value,//22674858,22434880',//読み出すURL dataType:'xml',//受信するデータの種類 async:true,//非同期通信を有効にするか success:function(xml){ html=''; $(xml).find('DocSum').each(function(){//DocSumが１つの論文 var title = $(this).find('Item').filter('[Name^=Title]').text(); var PubDate = $(this).find('Item').filter('[Name^=PubDate]').text(); var pubmed = $(this).find('Item').filter('[Name^=pubmed][Type^=String]').text(); //子ノードがないないものはfilterをかけて属性ごとに取得。 var authorlist = '';//子ノードがあるものは中身をみる。 $(this).find('Item').filter('[Name^=AuthorList]').each(function(){ var authornum = $(this).find('Item').length;//著者数を数えて for(var i = 0; i < authornum;i++){ var author = $(this).find('Item').eq(i).text(); authorlist += author + '.,';//リストに加えていく。 }}); html += '<li>' + authorlist +' '+ title + ', ' + PubDate + ', ' + '<a href="http://www.ncbi.nlm.nih.gov/pubmed/'+pubmed + '">PubMed:'+pubmed+'</a></li>'; //１つ追記。 }); $('#news').html('<ul>' + html + '</ul>');//全て追加した所で<div id="news">内に取得 document.getElementById('output_text').value="<ul>"+html+"</ul>\n"//+document.getElementById('string1').value }, error: function(html){ alert('Fell the data loading, Please access later'); }});}function make_micro(){$.ajax({ url:'http://eutils.ncbi.nlm.nih.gov/entrez/eutils/esummary.fcgi?db=pubmed&id='+document.getElementById('string1').value,//22674858,22434880',//読み出すURL dataType:'xml',//受信するデータの種類 async:true,//非同期通信を有効にするか success:function(xml){ html=''; $(xml).find('DocSum').each(function(){//DocSumが１つの論文 var title = $(this).find('Item').filter('[Name^=Title]').text(); var PubDate = $(this).find('Item').filter('[Name^=PubDate]').text(); var pubmed = $(this).find('Item').filter('[Name^=pubmed][Type^=String]').text(); //子ノードがないないものはfilterをかけて属性ごとに取得。 var authorlist = '';//子ノードがあるものは中身をみる。 $(this).find('Item').filter('[Name^=AuthorList]').each(function(){ var authornum = $(this).find('Item').length;//著者数を数えて for(var i = 0; i < authornum;i++){ var author = $(this).find('Item').eq(i).text(); authorlist += author + '.,';//リストに加えていく。 }}); html += '<li>' + authorlist +' '+ title + ', ' + PubDate + ', ' + '<meta itemprop=\'reference\' content=\'pmid:'+pubmed+'\' \\><a href="http://www.ncbi.nlm.nih.gov/pubmed/'+pubmed + '">PubMed:'+pubmed+'</a></li>\n'; //１つ追記。 }); $('#news').html('<ul>' + html + '</ul>');//全て追加した所で<div id="news">内に取得 document.getElementById('output_text').value='<ul itemscope itemtype="http://schema.org/BiologicalDatabaseEntry">'+html+"</ul>\n"//+document.getElementById('string1').value }, error: function(html){ alert('Fell the data loading, Please access later'); }});}function make_blank(){ $('#news').html(''); document.getElementById('output_text').value="";}</script>
