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

はじめに

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であれから2年経ったということなので、初心に戻ってはてなブログJavascriptで遊んでみました。

はてなブログからCiNii検索

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







Powered by CiNii

Result:

つかっているもの

あと

  • 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']['rdf:li'] , 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>

なんでJavascriptなのか

サーバサイド処理が必要ないので、HPに埋め込んだりとかそういうところで活用できるのはメリットだと思います。

おわりに

2013年もあと少しですね*3

*1:日本の図書館関係のサービスでXHRに対応したサービスは初ではないでしょうか。

*2:自分だけ?

*3:振り返り書けるかなあ