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本を買ってきてから感覚をつかめるようになった。