tDiaryのソーシャルボタン系をJavaScript化してみた
jQueryの学習を兼ねて、日記のフッタに表示しているソーシャルボタンを、JavaScriptを使って読み込むようにしてみた。 現在のプラグイン（section_footer2.rb）を修正するのは影響が大きすぎるので、新しいプラグイン（socialbutton.rb）として切り出してみた。 ボタンの表示にはjQueryプラグインであるjQuery.socialbuttonを使用している。
ソース
GitHubのtdiary/tdiary-contribへコミットした。 jQuery.socialbuttonも一緒にcontribへ入れてしまっている（ので、まずかったら元に戻します）。
使い方
以下のRubyファイルをtDiaryのプラグインフォルダへコピー。
- plugin/socialbutton.rb
- plugin/ja/socialbutton.rb
- plugin/en/socialbutton.rb
以下のJavaScriptファイルをtDiaryのjsフォルダへコピー。
- js/socialbutton.js
- js/jquery.socialbutton.js
あとはtDiaryの設定画面でsocialbutton.rbを有効にすると、設定画面のサイドバーに「その他 - ソーシャルボタン」という設定項目が追加される。 ここで表示したいボタンを選択すれば、フッタにそのボタンが表示されるようになる。
また、section_footer2.rbと機能が重複するので、section_footer2.rbは無効にしている。
所感
jQueryはキマるとシンプルに書ける。今回のコードのメインはわずかにこれだけ。 セクションごとにリンクとタイトルを取得し、設定画面で指定したボタンをフッタに追加している。
$('.section').each(function() {
var url = $(this).children('h3').children('a').get(0).href;
var title = $(this).children('h3').children('a').attr('title');
var socialbuttons = $(this).find('.socialbuttons');
$.each(config.enables, function(i, service) {
var options = callbacks[service](url, title);
$.extend(options, config.options[service]);
$('<div class="socialbutton"></div>')
.css("float", "left")
.css("margin-right", "0.5em")
.appendTo(socialbuttons)
.socialbutton(service, options);
});
});
JavaScript側にてリンクとタイトルをDOMから取得しているので、Rubyプラグイン側のコードはかなりシンプル。 設定値（表示するボタン＆Twitterのvia）を $tDiary.plugin.socialbutton 変数へ渡すことと、JavaScriptを呼び出しているだけ。
12 def socialbutton_js_settings
13 enable_js('jquery.socialbutton.js')
14 enable_js('socialbutton.js')
15
16 add_js_setting('$tDiary.plugin.socialbutton')
17 # convert array to json
18 add_js_setting('$tDiary.plugin.socialbutton.enables',
19 %Q|["#{@conf['socialbutton.enables'].split(',').join('", "')}"]|)
20
21 if @conf['socialbutton.twitter.via'] != ''
22 options = "{ twitter: { via: '#{@conf['socialbutton.twitter.via']}' } }"
23 else
24 options = "{}"
25 end
26 add_js_setting('$tDiary.plugin.socialbutton.options', options)
27 end
JavaScript化でサーバ側の負荷はある程度は下がりそう。 でも、読み込むJavaScriptファイルが増えることで、ページの表示時間は逆に増えている気がする（ちゃんと計測していないけど）。 ファイル数が増えるようなら、サーバ側であらかじめJavaScriptファイルを連結する仕組みが必要になるかも。
jQueryは最初はほとんど書けなかったけど、お昼にオライリーのjQuery本を買ってきてから感覚をつかめるようになった。