だるろぐ

明日できることは、今日しない。

WebMatrix 3: フィードの購読者数を取得する(2: JavaScript 編)

f:id:daruyanagi:20130420221551p:plain

WebMatrix 3: フィードの購読者数を取得する(1:サーバーサイド編) - だるろぐ で吐いた JSON を JavaScript で読み取ってみる。

SocialButtons.js

Scrips フォルダの中にいれておく。jQuery が必要なので、NuGet で入手しておく。

function get_twitter_button(url, dest, text) {
    var share = 'https://twitter.com/share?url=' + url + '&text=' + text;
    var comment = 'https://twitter.com/search/?q=' + url;
    var span = $('<span>').addClass('twitter');
    $('#' + dest).append(span);
    var element;
    element = $('<a>').text('twitter').addClass('service-name').attr('href', share);
    span.append(element);
    element = $('<a>').addClass('count').attr('href', comment);
    span.append(element);
    $.ajax({
        url: 'http://urls.api.twitter.com/1/urls/count.json?url=' + url,
        dataType: 'jsonp',
        success: function (json) {
            element.text(json.count || 0);
        }
    });
}

function get_facebook_button(url, dest, text) {
    var share = 'http://www.facebook.com/sharer.php?u=' + url + '&t=' + text;
    var comment = '';
    var span = $('<span>').addClass('facebook');
    $('#' + dest).append(span);
    var element;
    element = $('<a>').text('facebook').addClass('service-name').attr('href', share);
    span.append(element);
    element = $('<a>').addClass('count').attr('href', comment);
    span.append(element);
    $.ajax({
        url: 'https://graph.facebook.com/' + url,
        dataType: 'jsonp',
        success: function (json) {
            element.text(json.shares || 0);
        }
    });
}

function get_hatena_button(url, dest, text) {
    var share = 'http://b.hatena.ne.jp/add?mode=confirm&url=' + url + '&title=' + text;
    var comment = 'http://b.hatena.ne.jp/entry/' + url;
    var span = $('<span>').addClass('hatena');
    $('#' + dest).append(span);
    var element;
    element = $('<a>').text('hatena').addClass('service-name').attr('href', share);
    span.append(element);
    element = $('<a>').addClass('count').attr('href', comment);
    span.append(element);
    $.ajax({
        url: 'http://api.b.st-hatena.com/entry.count?url=' + url,
        dataType: 'jsonp',
        success: function (json) {
            element.text(json || 0);
        }
    });
}

function get_feed_button(url, dest, text) {
    var share = url + 'feed';
    var comment = url;
    var span = $('<span>').addClass('feed');
    $('#' + dest).append(span);
    var element;
    element = $('<a>').text('feed').addClass('service-name').attr('href', share);
    span.append(element);
    element = $('<a>').addClass('count').attr('href', comment);
    span.append(element);
    $.ajax({
        url: '/FeedCount/' + url,
        dataType: 'json',
        success: function (json) {
            element.text(json.total || 0);
        }
    });
}

function get_social_button(url, dest, text) {
    get_twitter_button(url, dest, text);
    get_facebook_button(url, dest, text);
    get_hatena_button(url, dest, text);
    get_feed_button(url, dest, text);
}

Default.cshtml でテスト

これでだいたいうまく動くはず。

<!DOCTYPE html>

@{
    var page_title = "マイ サイトのタイトル";
}

<html lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta charset="utf-8" />
        <title>@page_title</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <link href="~/Content/SocialButtons.css" rel="stylesheet" />
        
        <script src="~/Scripts/jquery-1.9.1.js"></script>
        <script src="~/Scripts/SocialButtons.js"></script>
    </head>
    <body>
        <div id="social-buttons" class="social-button">
            <script>
                get_social_button('https://blog.daruyanagi.jp/', 'social-buttons', '@page_title')
            </script>
        </div>
    </body>
</html>

今回は別に説明することはなにもない。div#social-buttons 以下にこんな感じの DOM が生成される。

f:id:daruyanagi:20130421155340p:plain

話は変わるけど、最近の Firefox の開発者ツールはかなり進化している。おもにビジュアル的に。機能面では使いこなせていないモノが多数あるので、意見は差し控えておく。

それにしても JavaScript は苦手だなぁ……もう少しスマートに書けないものなのかな。