Home > スポンサー広告 > User JavaScriptの練習 - JSONP

スポンサーサイト

スポンサー広告

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

Comments:-

Comment Form

Trackback+Pingback:-

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

Home > スポンサー広告 > User JavaScriptの練習 - JSONP

Home > user javascript > User JavaScriptの練習 - JSONP

User JavaScriptの練習 - JSONP

user javascript

JSONP (JavaScript Object Notation with Padding)は、JSON データに関数名を付けたデータ形式。

関数名({
    "プロパティ名" : 値,
    "プロパティ名" : 値
});

JSONPは Script要素でデータを読みこみ、JSONPに付けた関数名の関数を用意しておくことによって、コールバック関数として実行できる。Script要素を使うので XMLHttpRequestのようなドメインの制約がなく、外部のドメインを呼び出せる。

var script = document.createElement('script');
script.type = "text/javascript"; 
script.src = JSONPデータAPIのURL;
document.body.appendChild(script);

function 関数名(オブジェクト){
    // オブジェクトの処理
}

Script要素にデータを読みこんでいるので、関数はグローバル関数にする必要がある。

Operaのサイトにはてなブックマークのタグを表示する User JavaScript

スクリプトを適用した Operaのサイト

はてなブックマークエントリー情報取得APIのJSONP形式のデータを利用して、Opera(www.opera.com, jp.opera.com)のサイトを開いた時、ヘッダの下にはてなブックマークに付けられたタグを表示する User JavaScriptを書いてみた。

はてなブックマークエントリー情報取得APIのURL
http://b.hatena.ne.jp/entry/json/?url=(ブックマークされているURL)&callback=(関数名)
// ==UserScript==
// @include    http://www.opera.com/*
// @include    http://jp.opera.com/*
// ==/UserScript==

document.addEventListener('DOMContentLoaded', function (){
    var script = document.createElement('script');
    script.type = 'text/javascript'; 
    script.src = 'http://b.hatena.ne.jp/entry/json/?url=' + encodeURIComponent(location.href) +
                 '&callback=displayHatenaBookmark';
    document.body.appendChild(script);
}, false);

function displayHatenaBookmark(obj){
    // ブックマークのタグを取得
    var tags = new Object();
    for (var i = 0; i < obj.bookmarks.length; i ++ ){
        for (var j = 0; j < obj.bookmarks[i].tags.length; j ++ ){
            if (tags[obj.bookmarks[i].tags[j]]){
                tags[obj.bookmarks[i].tags[j]] ++ ;
            } else {
                tags[obj.bookmarks[i].tags[j]] = 1 ;
            }
        }
    }

    // タグを表示
    var content = document.getElementById('wrap4');
    div = document.createElement('div');
    var t = '';
    for (var i in tags){
        var span = document.createElement('span');
        span.innerText = i;
        span.style.padding = '0 7px';
        div.appendChild(span);
        t += '<span>' + i + '</span>';
    }
    content.insertBefore(div, content.firstChild);

    // はてなブックマークの画像とユーザ数を表示
    var div = document.createElement('div');
    var image = document.createElement('img');
    image.src = 'http://d.hatena.ne.jp/images/b_entry.gif';
    var link = document.createElement('a');
    link.href = 'http://b.hatena.ne.jp/entry/' + obj.url;
    var user = document.createElement('img');
    user.src = 'http://b.hatena.ne.jp/entry/image/' + obj.url;
    div.appendChild(image);
    link.appendChild(user);
    div.appendChild(link);
    content.insertBefore(div, content.firstChild);
}

参考にしたページ

Comments:0

Comment Form

Trackback+Pingback:0

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/149-ff27354d
Listed below are links to weblogs that reference
User JavaScriptの練習 - JSONP from Karafuto Blog

Home > user javascript > User JavaScriptの練習 - JSONP

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

Page Top

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