ちょうど10ヶ月ほど前に、MovableTypeとWordPressを比較したCMSとしてのMovableTypeとWordPressという記事を書きました。
その記事は結論から言えば、「MovableTypeは素晴らしい、WordPressはブログだ」という締めくくりで終わっているんですが、最新のWordPressに触れてみたところ、その認識が全く180度変わってしまいました。
そこで、最新の認識としてWordPressがどういった物であるか、MovableTypeとはどのように違うのかを、プログラマーの視点から比較してまとめてみたいと思います。
WordPressで記事を書いたときにTwitterに投稿するプラグインは多々ありますが、WP to Twitterというプラグインがとても秀逸だったのでご紹介したいと思います。
まず自分が導入時に一番気にしていたことは、ツイートの内容がどこまで編集できるかということ。
単純にタイトルと記事のリンクをつぶやくプラグインなら数あれど、このプラグインほどカスタマイズ性が高いのはあまりありません。
ツイートの内容がテンプレートで編集できるのは当たり前として、投稿時に加えて編集時にもツイートをする機能を備えています。
これも他にはない機能ですが、投稿時にその投稿の時だけツイートの内容をカスタマイズすることも可能です。
まさに痒いところに手が届く機能。
ダウンロードはこちらのサイトから、またはWordPressの管理画面で「プラグインの追加」からWP to Twitterで検索して下さい。
JavaScriptの動作確認をしていて気づいたのですが、InternetExplorerのJavaScriptには、配列オブジェクトの indexOf メソッドが実装されていません。
すくなくともInternetExplorer8以下には存在していませんでした。
とりあえずForループで検索する方法で代替としたのですが、これは不便きわまりない・・・。
Forループで対応するか、下記サイトのようにArrayオブジェクトのprototypeを拡張する方法もあるようです。
本プラグインにさらに手を加えたものを公開しています。Twitterからのトラックバックを簡単に設置できるjQueryプラグインをさらに改造してページネーションにも対応してみた（2011.08.02）
「@soraiyのjquery.twitterTrackback.jsを改良してみた。」で公開されているTwitterからのツイートを表示するjQueryプラグインに、さらに手を加えたものを作ったので、ここにおいておきます。
元のスクリプトでは実行時にURLを指定しなくてはいけませんでしたが、これを location.half の値を使って自動取得に変更しました。
下記のように、オプションさえ指定しなければ引数無しで記述可能です。
$('#twitterTrackback').twitterTrackbackList();
removeHash オプションを指定することで、URLに含まれるハッシュを削除することができます。これは、ページ内リンクなどでURLにハッシュが含まれる場合、正しくツイートが取得できない問題を回避するためです。
$('#twitterTrackback').twitterTrackbackList({
removeHash: true // デフォルトでtrue
});
callback オプションにコールバック関数を指定することで、自由にHTMLを生成できるようにしました。
このサイトでは下記のような関数を使ってレンダリングしています。
$('#twitterTrackback').twitterTrackbackList({ callback: renderTweets });
function renderTweets(n) {
return (
'<li class="tweet' + n + '"><dl>' +
'<dt><a href="' + this.author.url + '">' + this.author.nick + '</a></dt>' +
'<dd class="date"><a href="' + this.permalink_url + '">' + this.date_alpha + '</a></dd>' +
'<dd class="image"><a href="' + this.author.url + '"><img src="' + this.author.photo_url + '" alt="' + this.author.name + '" width="48" /></a></dd>' +
'<dd class="content">' + this.content.replace(/((http:|https:)\/\/[\x21-\x7e]+)/gi, "<a href='$1'>$1</a>") + '</dd>' +
'</dl></li>'
);
}
コールバック関数の this スコープにはツイートの情報が入っていますので、HTMLと組み合わせて自由にデザインが可能です。
exclude オプションに除外したいユーザー名を配列で指定することで、そのユーザーからのツイートを非表示にします。
自分のツイートを非表示にする場合なんかに利用できます。
$('#twitterTrackback').twitterTrackbackList({ exclude: [ 'jyokyoku' ] });
こちらのリンクからダウンロードするか、下記ソースコードを保存して利用して下さい。
動作確認は下記環境で行っています。
(function($) {
jQuery.fn.twitterTrackbackList = function(options){
var topsyOtterapi = 'http://otter.topsy.com/trackbacks.js';
var self = this;
var tweetHtml = '';
function renderHtml(n) {
return (
'<li class="tweet' + n + '">' +
'<a href="' + this.author.url + '"><img src="' + this.author.photo_url + '" alt="' + this.author.name + '" width="48" /></a>' +
'<ul class="section">' +
'<li class="nick"><a href="' + this.author.url + '">' + this.author.nick + '</a></li>' +
'<li class="content">' + this.content.replace(/((http:|https:)\/\/[\x21-\x7e]+)/gi, "<a href='$1'>$1</a>") + '</li>' +
'<li class="date"><a href="' + this.permalink_url + '">' + this.date_alpha + '</a></li>' +
'</ul>' +
'</li>'
);
}
options = $.extend({
url: window.location.href,
wrapperTag: 'ul',
removeHash: true,
callback: renderHtml,
noTrackback: '<p>Twitterからのトラックバックはありません。</p>',
exclude: []
}, options);
if (options.removeHash) {
options.url = options.url.replace(/#.+/, '');
}
jQuery.ajax({
type: 'GET',
url: topsyOtterapi,
cache: false,
dataType: 'jsonp',
data: {
perpage: '100',
order: 'date',
url: options.url
},
success: function(trackbackData) {
if(trackbackData.response.list.length == 0) {
tweetHtml += options.noTrackback;
} else {
jQuery.each(trackbackData.response.list, function(n) {
for (var i = 0; i < options.exclude.length; i++) {
if (options.exclude[i] != this.author.nick) {
tweetHtml += options.callback.call(this, n);
}
}
});
if (!tweetHtml) {
tweetHtml = options.noTrackback;
} else if (options.wrapperTag) {
tweetHtml = '<' + options.wrapperTag + '>' + tweetHtml + '</' + options.wrapperTag + '>';
}
}
jQuery(self).append(tweetHtml);
},
complete: function() {}
});
};
})(jQuery);
不具合等があれば、コメントかツイッターで報告下さると有り難いです。
非常に便利な右クリック辞書として有名なLingoesですが、GoogleChromeや最新のFirefox4などでは右クリックで単語を翻訳することができなくなってしまいました。
こんな時どうしたらいいかというと、Lingoesには3つの翻訳タイプがあります。
そのままの通り、右クリックしたときに、マウスカーソルの下にある単語を翻訳します。
文字をドラッグして選択状態にしたときに、その選択状態の単語を翻訳します。
文字列をクリップボードにコピーしたときに、その単語を翻訳します。
このうち、GoogleChromeやFirefox4で利用できなくなってしまったのは「右クリック翻訳」です。
その他のハイライト翻訳やクリップボード翻訳はそのまま利用ができるので、そちらを使うことで解決をすることができます。
ちなみに各翻訳機能はタスクバーに表示されているLingoesのアイコンを右クリックするか、ショートカットキーでon/offの切り替えができます。
うかつにクリップボード翻訳をONのままにしておくと、何か文字列をコピーするたびに翻訳ウィンドウが出てしまいちょっとイライラするので、利用するときのみショートカットキーでONにする方法が一番ベターかと思います。