사전 API 「데사쿠」 REST판 API를 사용해 보았다

개요



'데사장'이라는 사전 API가 있습니다.
htps : //로 가자. jp /에서 v / 가서 x. 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에 전달하게 되지만 코드의 어딘가에서 숫자로 취급하여 0이 채워지면 올바르게 정보를 얻을 수 없습니다. 이 점만, 조금 빠졌습니다 ...
    예: ItemID 가 003276 로 들어왔을 때, 어딘가에서 수치로 형태 변환되어 3276 가 되어 버리면 안됩니다.

    좋은 웹페이지 즐겨찾기