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

スポンサーサイト

スポンサー広告

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

Comments:-

Comment Form

Trackback+Pingback:-

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

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

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

User JavaScriptの練習 - JSON

user javascript

JSON (JavaScript Object Notation)は、JavaScriptのオブジェクトを表記する構文を使っているデータ形式。

{
    "プロパティ名" : 値,
    "プロパティ名" : 値
}

JavaScriptで JSONのデータを扱う時は、eval関数を実行することでオブジェクトとして使えるようになる。その時データの前後を「(」「)」で括る必要がある。

var オブジェクト名 = eval('(' + JSONのデータ + ')');

JSONのデータをオブジェクトにするもう一つの方法は、データを返り値にする関数オブジェクトを作成する。その関数を実行することでオブジェクトが返ってくる。

var func = new Function("return " + JSONのデータ);
var オブジェクト名 = func();

はてなブックマークのエントリーページでブックマークされた日時の範囲を表示する User JavaScript

はてなブックマークのエントリーページでブックマークされた日時の範囲を表示する User JavaScript

はてなブックマークエントリー情報取得APIのJSON形式のデータを利用してみた。ブックマークされた日時はページをスクロールして、「このエントリーをブックマークしているユーザー」を見れば分かるので、このスクリプトは必要ないが、練習ということで。

はてなブックマークエントリー情報取得APIのURL
http://b.hatena.ne.jp/entry/json/?url=(ブックマークされているURL)

JSONデータ

({
    "count":"ブックマーク数",
    "bookmarks":[
        {"comment":"コメント","timestamp":"時刻","user":"ユーザ名","tags":[タグの配列]},
        {"comment":"","timestamp":"","user":"","tags":[]},
        {"comment":"","timestamp":"","user":"","tags":[]}
    ],
    "url":"URL",
    "eid":"エントリーID",
    "title":"タイトル",
    "screenshot":"スクリーンショットのURL",
    "entry_url":"エントリーページのURL"
})

はてなブックマークエントリー情報取得APIのデータにはあらかじめ前後に「(」「)」が付いているから、eval関数を実行する時データの前後に「(」「)」は必要ない。

// ==UserScript==
// @include    http://b.hatena.ne.jp/entry/*
// ==/UserScript==

document.addEventListener('DOMContentLoaded', function (){

    function main(){
        var time = new BookmarkTimestamp();
        time.getUrl();
        time.onload(time.url, time.parse);
    }

    function BookmarkTimestamp(){};

    BookmarkTimestamp.prototype = {
        // ブックマークされたURL
        getUrl : function (){
            var dl = document.getElementsByTagName('dl')[0];
            var pageUrl = location.href.substring(28);
            if (! isNaN(Number(pageUrl))){
                pageUrl = dl.getElementsByTagName('a')[0];
            }
            this.url = 'http://b.hatena.ne.jp/entry/json/?url=' + encodeURIComponent(pageUrl);
        },

        // APIの解析
        parse : function (text, self){
            var entry = eval(text);
            var timestamp = entry.bookmarks[entry.bookmarks.length - 1].timestamp + 
                            '  ~  ' + entry.bookmarks[0].timestamp;
            if (entry.count == 1){
                var timestamp = entry.bookmarks[0].timestamp
            }
            self.show(timestamp);
        },

        // 日時を表示
        show : function (timestamp){
            var dl = document.getElementsByTagName('dl')[0];
            var dt = document.createElement('dt');
            dt.innerText = '\u65E5\u6642\uFF1A';
            dt.style.marginLeft = '-100px';
            dl.appendChild(dt);
            var dd = document.createElement('dd');
            dd.innerText = timestamp;
            dl.appendChild(dd);
        },

        // XMLHttpRequest
        onload : function (url, callback){
            var self = this;
            var request = new XMLHttpRequest();
            request.onreadystatechange = function() {
                if (request.readyState == 4 && request.status == 200)
                    callback(request.responseText, self);
            }
            request.open('GET', url, true);
            request.send(null);
        }
    }

    main();

}, false);

参考にしたページ

Comments:0

Comment Form

Trackback+Pingback:0

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

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

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

Page Top

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