CiNii JSONとはてなブログでできること

はじめに

旧CiNiiがCiNii Articlesというサービスとなり、JSONの返戻データの形式も変わってしまったため、このエントリーのコードは動かなくなっていることに気がつきましたので、コード部分だけでも動くように修正をしました。2017/11/6

CiNii APIがJSONに対応しました。
http://ci.nii.ac.jp/info/ja/index_2013.html#20131011-3

id:otani0083 が書いてますので詳細はこちらを。
http://otani0083.hatenablog.com/entry/2013/10/19/162832

さて、おーたにさんの記事はPythonで処理してます。サーバサイドでの処理もいいのですが、せっかくのJSONでXMLHttpRequest対応なんだからJavascriptでしょうここは、と偉そうにコメントしてしまっていたので年内にやっつけでもいいので記事書いてすっきりしたいと思います*1。あとは「JavaScript使える！」と超盛り上がって*2わいわいとLi:d techで先着何名の招待をもらったはてなブログを使いはじめたのが2011/11/24であれから２年経ったということなので、初心に戻ってはてなブログとJavascriptで遊んでみました。

はてなブログからCiNii検索

はてなブログからCiNiiの検索結果を取得する感じの一番オーソドックスな活用方法みたいなのを作ってみました。下の検索窓に入力するとajaxでCiNiiへ検索しにいき検索結果がサジェストされます。サジェストされたタイトルの中から、選択すると、その下の枠に「やっつけCSV形式」で他の書誌事項とともに表示されます。

Search CiNii:

Result:

つかっているもの

jQuery
jQuery UI
jQuery UI Autocomplete

あと

CiNii API (JSON)

ソース

はてなブログやホームページなどに貼付けてもらえれば動くと思います。

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
  $(function() {
    function log( message ) {
      $( "<div>" ).text( message ).prependTo( "#log" );
      $( "#log" ).scrollTop( 0 );
    }
	
    $( "#cinii" ).autocomplete({
      source: function( request, response ) {
        $.ajax({
			url:"http://ci.nii.ac.jp/opensearch/search?",
			scriptCharset:"UTF-8",
			data:{
				format : "json",
				title: request.term
			},
			jsonp:"jsoncallback",
			success: function( data ) {
				response( $.map( data['@graph'][0]['items'] , function( item ) {
				  return {
					label: item['title'],
					value: item['title'],
					search_result: '"' + item['title'] + '","' + item['link']['@id'] + '","' + item['dc:publisher'] + '","' + item['prism:publicationName'] + '","' + item['prism:publicationDate'] + '"'
				  }
				}));
			  }
        });
      },
      minLength: 2,
	  select: function( event, ui ) {
        log( ui.item ?
          ui.item.search_result :
		  "Nothing selected, input was " + this.value);
      },
      open: function() {
        $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
      },
      close: function() {
        $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
      }
    });
  });
</script>

<div class="ui-widget">
  <label for="cinii">Search CiNii:</label>
  <input id="cinii" size="60">
</div>
   Powered by <a href="http://ci.nii.ac.jp/">CiNii</a>
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
  Result:
  <div id="log" style="height: 500px; width: 600px; overflow: auto;" class="ui-widget-content"></div>
</div>