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 は苦手だなぁ……もう少しスマートに書けないものなのかな。