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

https://www.amazon.co.jp/dp/4873114683