ちょうど10ヶ月ほど前に、MovableTypeとWordPressを比較したCMSとしてのMovableTypeとWordPressという記事を書きました。

その記事は結論から言えば、「MovableTypeは素晴らしい、WordPressはブログだ」という締めくくりで終わっているんですが、最新のWordPressに触れてみたところ、その認識が全く180度変わってしまいました。

そこで、最新の認識としてWordPressがどういった物であるか、MovableTypeとはどのように違うのかを、プログラマーの視点から比較してまとめてみたいと思います。

CONTINUE READING

WordPressからTwitterに投稿するプラグインの決定版

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を自動取得に

元のスクリプトでは実行時に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' ] });

ソースコード

こちらのリンクからダウンロードするか、下記ソースコードを保存して利用して下さい。

動作確認は下記環境で行っています。

  • InternetExplorer7
  • Firefox4
  • Opera10
(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で利用する

非常に便利な右クリック辞書として有名なLingoesですが、GoogleChromeや最新のFirefox4などでは右クリックで単語を翻訳することができなくなってしまいました。
こんな時どうしたらいいかというと、Lingoesには3つの翻訳タイプがあります。

Lingoesの翻訳タイプ

右クリック翻訳

そのままの通り、右クリックしたときに、マウスカーソルの下にある単語を翻訳します。

ハイライト翻訳

文字をドラッグして選択状態にしたときに、その選択状態の単語を翻訳します。

クリップボード翻訳

文字列をクリップボードにコピーしたときに、その単語を翻訳します。

右クリック翻訳以外を利用する事で解決

このうち、GoogleChromeやFirefox4で利用できなくなってしまったのは「右クリック翻訳」です。
その他のハイライト翻訳やクリップボード翻訳はそのまま利用ができるので、そちらを使うことで解決をすることができます。

ショートカットキーで便利に

ちなみに各翻訳機能はタスクバーに表示されているLingoesのアイコンを右クリックするか、ショートカットキーでon/offの切り替えができます。

うかつにクリップボード翻訳をONのままにしておくと、何か文字列をコピーするたびに翻訳ウィンドウが出てしまいちょっとイライラするので、利用するときのみショートカットキーでONにする方法が一番ベターかと思います。

  • 右クリック翻訳 … ALT + G
  • ハイライト翻訳 … ALT + Z
  • クリップボード翻訳 … ALT + B