«前の日記(2011-06-12 (日)) 最新 次の日記(2011-06-15 (水))»  

まちゅダイアリー


2011-06-13 (月)

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

jQueryクックブック(jQuery Community Experts/株式会社クイープ)

本日のツッコミ(全7件) [ツッコミを入れる]
T.T (2011-06-17 (金) 00:01)

tDiary 3.0.2,Ruby 1.8.7-p248に設置してみました.設定にソーシャルボタンの項目は出たのですが,有効にしてもボタンが表示されません.プラグインは**/misc/pluginの中,jsファイルは**/jsの中に設置してあります.どこか問題はあるでしょうか.

まちゅ (2011-06-17 (金) 00:08)

ブラウザーのキャッシュをクリアしてみてください。<br>古い00default.jsが残っていて動かない場合があります。

T.T (2011-06-17 (金) 00:49)

早速のお返事ありがとうございます.クリアしたり,他のブラウザでアクセスしましたが,表示されません.日記のソースを見ると<div class="socialbuttons"></div>というのが追加されていたのでプラグイン自体は動いているみたいですが…….

まちゅ (2011-06-17 (金) 01:12)

(1)設定画面の左下にソーシャルボタンの設定があります。そこで、表示するボタンを選んでいますでしょうか。<br>(2)JavaScriptのコンソールに何かエラーがでていますでしょうか。<br>(3)差し支えてなければ日記のURLを教えてください。

T.T (2011-06-17 (金) 13:20)

(1)設定はしています.とりあえず,Facebookとはてなをチェックしています.<br>(2)特には.<br>(3)http://www.kh-web.org/journal/<br>お手数をおかけします.

まちゅ (2011-06-17 (金) 13:37)

日記を確認しました。<br>3.0.2だとJavaScript(socialbutton.js)が読み込まれないですね。<br>HEADの環境じゃないと動かないみたいです。ごめんなさい。<br>7月末予定の3.0.3リリースまではsection_footer2プラグインを使っていただく方がよさそうです。

T.T (2011-06-17 (金) 14:09)

ありがとうございます.実はsection_footer2はエラーが出て動かないので今回飛びついたのでした.<br>次のリリースを待ちます.