WordPress等を利用している場合に、コメントシステムとして大変人気のあるDISQUSというコメントシステムがあります。

詳しくは下記のサイトなどをご覧頂くとして、このDISQUSはPC向けだけでは無く、スマートフォンなどでも表示できるモバイルテーマが標準で附属しています。

しかしこのモバイルテーマ、なぜかPC向けと違い、FacebookやTwitterでログインする機能が省略されてしまっています。

かといってPC版のインターフェースをスマートフォンで利用しようとすると、コメント部分は普通に利用できるものの、ログインウィンドウが画面からはみ出してしまい、相当解像度の高いスマートフォンではないとログインに支障がでてしまいます。

• 投稿の編集 ‹ INSPIRE TECH — WordPress

スマートフォン向け対応できるCSSを書いた

DISQUSはAPIの管理画面から、独自にCSSを適用することが可能です。

そこで、PC向けのログインウィンドウをスマートフォンで見た際にも、綺麗に画面内に収まるようカスタムCSSを作成してみました。

.dsq-popup[id] {
	position: absolute !important;
}

.dsq-popup-container .dsq-popup-close {
	right: 5px;
	top: 5px;
	position: absolute !important;
	z-index: 1200 !important;
}

.dsq-popup-container .dsq-popup-title {
	position: relative !important;
}

.dsq-popup-container .dsq-popup-title h3 {
	font-size: 12px !important;
}

.dsq-popup .dsq-tabbed-modal {
	background: none !important;
}

#dsq-popup-message #dsq-login-disqus iframe {
	height: 300px !important;
}

.dsq-popup-body {
	width: auto !important;
}

.dsq-login-box .dsq-popup-body {
	width: 300px !important;
}

.dsq-popup .dsq-modal-tabs {
	width: auto !important;
	float: none !important;
}

#dsq-popup-message.dsq-popup .dsq-modal-tabs li {
	float: left !important;
	width: 43px !important;
}

#dsq-popup-message.dsq-popup .dsq-modal-tabs li a {
	padding: 4px 6px !important;
	text-align: center !important;
	font-size: 0px !important;
	border-bottom: none !important;
}

.dsq-popup .dsq-tab-container {
	padding: 10px !important;
	font-size: 12px !important;
}

#dsq-popup-message.dsq-popup .dsq-modal-tabs li.dsq-active a {
	border-bottom: none !important;
	-webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
	box-shadow: none !important;
	background: #eee !important;
}

#dsq-popup-message.dsq-popup .dsq-modal-tabs li.dsq-active a:hover {
	border-bottom: none !important;
}

適用方法

適用したいアカウントのアピアランスパネルを開きます。

スクロールして中ほどより下にある、Custom CSSの欄に上記コードを記述して保存します。

JavaScriptの設置

上記CSSだけではポップアップウィンドウの位置がおかしくなるため、下記JavaScriptを設置してください。

jQuery(function($) {
	setInterval(function() {
		$('#dsq-popup-message').css({
			'position': 'absolute',
			'top': $(window).scrollTop() + 10
		});
	}, 1000);
});

スマートフォンでの表示

こんな感じで表示されます。

注意

カスタムCSSはPC版にももれなく適用されてしまうため、PCとスマートフォンで利用する場合には、上記CSSにスマートフォンのみのクラス名やIDなどを追加するなどして、環境によって表示を切り替えられるよう工夫が必要です。

そんな時便利なのが、FacebookのURL Linterです。
下記のURLからアクセスできます。

• URLリンター – Facebook開発者

このツールがいったい何かというと、入力されたURLのWebページに正しくOGPタグが設定されているかをチェックして、正しくなければエラーを、正しければどういった内容で設定されているかをレビューしてくれます。

いわば、OGPのチェックツールですね。

Facebookのキャッシュも削除してくれる

またこのツールは、入力されたURLに関するFacebook上の古いキャッシュデータを削除してくれる役割も持っています。

基本的にFacebookもWebサイトクローラーのような物を持っていて、Webサイトに設定されたOGP情報などをキャッシュとして蓄えています。

いいね！ボタンやシェアボタンなどでWebサイトがFacebookのウォールなどに流れる際は、キャッシュがあればキャッシュからデータを読み込むため、一度Facebookに掲載されたWebサイトのOGPなどを変更しても、再度FacebookのクローラーがWebサイトのデータをキャッシュしてくれないと、データが更新されません。

URL Linterは、入力されたURLの古いキャッシュを削除して、新しいデータで上書きしてくれます。

そのため、OGPを設定したり、設定し直した場合に利用する事で、新しい情報を即Facebookに反映させることができます。

WordPress用のプラグインも

WordPressを利用していて、一度公開した記事がFacebookにキャッシュされてしまっている場合、タイトルや内容を変更したとしても、やはりFacebookのキャッシュが優先されてしまうために変更が反映されません。

そんな時、下記の記事で紹介されているプラグインを利用すると、URL Linterをフックして即Facebook上のキャッシュを書き換えてくれます。

• firegoby » Blog Archive » 保存の際にfacebookのクローラーを再度お招きするWordPressプラグイン

1. Analyticsにログイン
2. 再取得したいアカウント名をクリック
3. 再取得したいプロファイル名の右側にある「編集」をクリック
4. 右上の「データを受信しています」の横にある「ステータスを確認」クリック

15分ほど場所がわからずに悩んだので、覚えておいて損はなさそうです。

そういう場合、元のテンプレートを変更すると、そのテンプレートを読み込んでいる全てのブログをいちいち再構築しなくてはなりません。

そんなとき、QuickRebuildというプラグインが非常に役に立ちます。これは、インストールしたMovableTypeに存在する全てのブログを同時に再構築することがでます。

インストール後、通常の再構築ボタンの横に全てのブログを再構築するボタンが追加されるので、それをクリックすると全てのブログを再構築するためのウィンドウが表示されるので、再構築を実行するブログをチェックして実行するだけというシンプルで素晴らしいプラグインです。

QuickRebuild

http://tec.toi-planning.net/mt/quickrebuild/

紹介ページにはMovableType4対応と記載されているだけで、MovableType5に対応しているかは書いていないのですが、ダウンロードページからバージョン0.5以上をダウンロードすれば、MovableType5以上でも利用できます。

rebuildlet

http://tec.toi-planning.net/mt/rebuildlet/

こちらは同作者の方が、上記のプラグインをブックマークレットとして利用できるように公開しているものです。

ブックマークレットに登録しておくだけで、プラグインをインストールしなくても全てのブログを再構築できるため、多数のサイトを管理している方にはこちらのほうがお勧めです。

こちらもプラグインと同じく、MovableType4でも5でも利用可能です。

いろいろと探してみたところ、下記のアプリケーションにたどり着きました。

Balsamiq Mockups

http://www.balsamiq.com/

特徴としては下記の通り。

• Airアプリなので、WindowsでもMacでも動作する（AdobeのAirが動作すればOK）
• 手書き風のコミカルな画像なので親しみやすい
• インターフェースは英語だが日本語も問題無く利用可能（システムフォントが利用できる）
• iPodやiPhoneのモックもあるので、iOS用のアプリ開発にも利用できる
• 価格が安い（79ドル）

ダウンロードしてから7日間は評価期間なので、是非利用してみてください。