Home > スポンサー広告 > WikipediaAPIで検索するブックマークレット

スポンサーサイト

スポンサー広告

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comments:-

Comment Form

Trackback+Pingback:-

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/151-f10d98f7
Listed below are links to weblogs that reference
スポンサーサイト from Karafuto Blog

Home > スポンサー広告 > WikipediaAPIで検索するブックマークレット

Home > javascript > WikipediaAPIで検索するブックマークレット

WikipediaAPIで検索するブックマークレット

javascript

WikipediaAPI

WikipediaAPIWikipediaを検索することができるAPI。現時点では、ウィキペディア日本語版をタイトルで前方一致検索しているようです。

Wikipediaの情報のダイジェストを XML、RSS、JSON、PHP、HTML、TSV、JavaScriptの形式で返す。

WikipediaAPIのURLは
http://wikipedia.simpleapi.net/api?keyword=(検索文字列)&output=(出力方式: xml,rss,json,html,javascript,php,tsv)&callback=(関数名)

返ってくるデータ JSONの場合

[
{"language":"ja","id":(Wikipedia内の管理コード),"url":(WikipediaにリンクするURL),"title":(キーワードのタイトル),"body":(本文のダイジェスト),"length":(本文の長さ),"redirect":(別キーワードへのリダイレクトがあるか。ある 1、ない 0),"strict":(キーワードと完全一致するか一致する 1、しない 0),"datetime":(更新日時)},
{"language":"ja","id":"","url":"","title":"","body":"","length":,"redirect":,"strict":,"datetime":""},
{"language":"ja","id":"","url":"","title":"","body":"","length":,"redirect":,"strict":,"datetime":""}
]

選択した文字列を WikipediaAPIで検索するブックマークレットを作ってみた

  • 文字列が選択されていない場合は入力ダイアログを出す。何も入力されなければそこで終了。
  • WikipediaAPIで一致する情報がなければ、「キーワードに一致しませんでした」と表示して、消す。
  • 当てはまる情報があれば、左上に表示する。
  • リンクをクリックすると、Wikipediaのキーワードのページを開く。
  • 情報の表示されたところ以外をクリックすると、表示している要素を消す。

選択した文字列を WikipediaAPIで検索するブックマークレット

javascript:(function (){

    var word = window.getSelection().toString();
    if (! word){
        word = prompt('キーワードを入力してください');
        if (! word) return;
    }
    word = word.substring(0, 1000);
    load();

    function load(){
        var script = document.createElement('script');
        script.type = 'text/javascript'; 
        script.src = 'http://wikipedia.simpleapi.net/api?keyword=' + encodeURIComponent(word) + '&output=json&callback=displayWikipediaapiSearch';
        script.addEventListener('load', function (){
            document.body.removeChild(script);
        }, false);
        document.body.appendChild(script);
    }
})();

// コールバック関数
function displayWikipediaapiSearch(ary){
    var flag, div;
    createDiv();

    if (! ary){
        displayNull();
    } else {
        displayData();
    }
    if (! flag){
        addEvent();
    }
    displayWikipediaapiSearch = null;

    function createDiv(){
        if (document.getElementById('wikipediaapidiv')){
            div = document.getElementById('wikipediaapidiv');
            div.innerHTML = '';
            flag = true;
        } else {
            div = document.createElement('div');
            div.id = 'wikipediaapidiv';
            document.body.appendChild(div);
            flag = false;
        }
    }

    // キーワードに一致しなかった場合
    function displayNull(){
        div.style.cssText = 'position: fixed; top: 2px; left: 2px; color: black; background-color: white; z-index: 99; margin: 0px; padding: 3px; border: solid 1px black; font-size: 14px; width: auto; height: auto;';
        div.innerHTML = 'キーワードに一致しませんでした';
        setTimeout(function (){document.getElementById('wikipediaapidiv').style.display = 'none';}, 2500);
    }

    function displayData(){
        div.style.cssText = 'position: fixed; top: 2px; left: 2px; background-color: white; z-index: 99; margin: 0px; padding: 3px; border: solid 1px black; text-align: left; line-height: 1.3; width: 400px; height: 150px; overflow: auto;';
        for (var i = 0; i < ary.length; i ++){
            var link = document.createElement('a');
            link.href = ary[i].url;
            link.innerHTML = ary[i].title;
            link.style.cssText = 'color: blue; background-color: white; font-size: 14px; text-decoration: underline;';
            div.appendChild(link);
            var br = document.createElement('br');
            div.appendChild(br);
            var inf = document.createElement('div');
            inf.innerHTML = ary[i].body;
            inf.style.cssText = 'color: black; background-color: white; margin: 4px 0 14px; font-size: 14px; line-height: 1.3; border-bottom: dotted 1px gray; padding: 4px;';
            div.scrollTop = 0;
            div.appendChild(inf);
        }
    }

    function addEvent(){
        div.addEventListener('click', function (e){
            e.stopPropagation();
        }, false);
        // クリックして終了
        document.addEventListener('click', function (){
            if (document.getElementById('wikipediaapidiv')){
                document.getElementById('wikipediaapidiv').style.display = 'none';
            }
        }, false);
    }
}

Operaのコンテキストメニューから WikipediaAPIを使う

Operaのメニューファイルの[Hotclick Popup Menu]に下記を追加すれば、右クリックメニューから WikipediaAPIで検索できるようになる。

Item, "WikipediaAPI検索"="Go to page, "javascript:(function (){var word=window.getSelection().toString();if(!word){word=prompt('キーワードを入力してください');if(!word)return;}word=word.substring(0,1000);load();function load(){var script=document.createElement('script');script.type='text/javascript';script.src='http://wikipedia.simpleapi.net/api?keyword='+encodeURIComponent(word)+'&output=json&callback=displayWikipediaapiSearch';script.addEventListener('load',function (){document.body.removeChild(script);},false);document.body.appendChild(script);}})();function displayWikipediaapiSearch(ary){var flag,div;createDiv();if(!ary){displayNull();}else{displayData();}if(!flag){addEvent();}displayWikipediaapiSearch=null;function createDiv(){if(document.getElementById('wikipediaapidiv')){div=document.getElementById('wikipediaapidiv');div.innerHTML='';flag=true;}else{div=document.createElement('div');div.id='wikipediaapidiv';document.body.appendChild(div);flag=false;}}function displayNull(){div.style.cssText='position: fixed; top: 2px; left: 2px; color: black; background-color: white; z-index: 99; margin: 0px; padding: 3px; border: solid 1px black; font-size: 14px; width: auto; height: auto;';div.innerHTML='キーワードに一致しませんでした';setTimeout(function (){document.getElementById('wikipediaapidiv').style.display='none';},2500);}function displayData(){div.style.cssText='position: fixed; top: 2px; left: 2px; background-color: white; z-index: 99; margin: 0px; padding: 3px; border: solid 1px black; text-align: left; line-height: 1.3; width: 400px; height: 150px; overflow: auto;';for(var i=0;i<ary.length;i++){var link=document.createElement('a');link.href=ary[i].url;link.innerHTML=ary[i].title;link.style.cssText='color: blue; background-color: white; font-size: 14px; text-decoration: underline;';div.appendChild(link);var br=document.createElement('br');div.appendChild(br);var inf=document.createElement('div');inf.innerHTML=ary[i].body;inf.style.cssText='color: black; background-color: white; margin: 4px 0 14px; font-size: 14px; line-height: 1.3; border-bottom: dotted 1px gray; padding: 4px;';div.scrollTop=0;div.appendChild(inf);}}function addEvent(){div.addEventListener('click',function (e){e.stopPropagation();},false);document.addEventListener('click',function (){if(document.getElementById('wikipediaapidiv')){document.getElementById('wikipediaapidiv').style.display='none';}displayWikipediaapiSearch=null;},false);}}""

参考

自分好みのガジェットを作る! Windowsサイドバーガジェット作り入門:第3回 ガジェットを作ってみる(中編)|gihyo.jp … 技術評論社

Comments:0

Comment Form

Trackback+Pingback:0

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/151-f10d98f7
Listed below are links to weblogs that reference
WikipediaAPIで検索するブックマークレット from Karafuto Blog

Home > javascript > WikipediaAPIで検索するブックマークレット

おまかせリンク(R)
全記事表示リンク
Search
Meta
Feeds

Page Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。