概要
「デ辞蔵」という辞書APIがあります。
https://dejizo.jp/dev/index.html
無償公開版のAPIは、動作保証はしないけれど、商用も含めてどのような目的で利用してもOKとのこと。
- SOAP版とREST版のAPIがありますが、REST版のほうをJavaScriptから使ってみました。
- キーワード入力したら候補一覧がでてくる、その候補をクリックしたら内容が取得される、という流れです。
コード
ざっくりとコードだけですが、見ればわかるだろうという観点で特にコメントや解説なしの手抜きです。不明点あればコメントしてもらえれば回答します。
なお、基本的にJavaScriptですべて制御していますが、クロスドメイン制約を突破するところだけ、PHPを使っています。
参考：ajaxでクロスドメイン通信を実現するphp
ajax.php
<?php
if(isset($_GET["url"]) && preg_match("/^https?:/",$_GET["url"])){
echo file_get_contents($_GET["url"]);
}else{
echo "error ";
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>デ辞蔵 REST版API を使ってみる</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#container').on('click', '#btn_wikipedia', function() {
var txt = $('#input_keyword').val();
if (txt != '') {
getList('wpedia',txt);
}
});
$('#container').on('click', '#btn_ej', function() {
var txt = $('#input_keyword').val();
if (txt != '') {
getList('EJdict',txt);
}
});
$('#container').on('click', '#btn_je', function() {
var txt = $('#input_keyword').val();
if (txt != '') {
getList('EdictJE',txt);
}
});
});
var nowdic = '';
function getList(_dic,_txt){
nowdic = _dic;
var reqPath = "http://public.dejizo.jp/NetDicV09.asmx/SearchDicItemLite?Dic="+nowdic+"&Word="+encodeURI(_txt)+"&Scope=HEADWORD&Match=CONTAIN&Merge=AND&Prof=XHTML&PageSize=20&PageIndex=0";
console.log(reqPath);
$('#result2').html('');
$.ajax({
type: "get",
url: "ajax.php",
data:{
url:reqPath
},
dataType: 'xml',
cache: false,
timeout: 5000,
success: function(xml) {
console.log(xml);
var htmlstr = '<ul>';
$(xml).find("DicItemTitle").each(function() {
var id = $(this).find("ItemID").text();
var title = $(this).find("Title").text();
htmlstr += '<li><a href="javascript:getWord(\''+id+'\');">'+title+'</li>';
});
htmlstr += '</ul>';
$('#result1').html(htmlstr);
},
error: function(XMLHttpRequest, textStatus, errorThrown){
alert('error');
}
});
}
function getWord(_id){
var reqPath = "http://public.dejizo.jp/NetDicV09.asmx/GetDicItemLite?Dic="+nowdic+"&Item="+_id+"&Loc=&Prof=XHTML";
console.log(reqPath);
$.ajax({
type: "get",
url: "ajax.php",
data:{
url:reqPath
},
dataType: 'xml',
cache: false,
timeout: 5000,
success: function(xml) {
console.log(xml);
var htmlstr = '';
var data = $(xml).find("Body").get(0);
var serializer = new XMLSerializer();
htmlstr += serializer.serializeToString(data);
$('#result2').html(htmlstr);
},
error: function(XMLHttpRequest, textStatus, errorThrown){
alert('error');
}
});
}
</script>
</head>
<body>
<h1>デ辞蔵 REST版API を使ってみる</h1>
<p>ドキュメント：<a href="https://dejizo.jp/dev/rest.html" target="_blank">https://dejizo.jp/dev/rest.html</a></p>
<hr>
<div id="container">
<input type="text" id="input_keyword">
<button type="button" id="btn_wikipedia">ウィキペディア日本語版</button>
<button type="button" id="btn_ej">EJDict英和辞典</button>
<button type="button" id="btn_je">Edict和英辞典</button>
<hr>
<div id="result1"></div>
<hr>
<div id="result2"></div>
</div>
</body>
</html>
デモサイト
注意点
ItemID をとってきて、それをまた API に渡すことになりますが、コードのどこかで数値として扱ってゼロが詰められてしまうと正しく情報が取得できません。この点だけ、ちょっとハマりました...
例： ItemID が 003276 と入ってきたとき、どこかで数値に型変換されて 3276 となってしまうとダメです。