2012年3月 Archive

今月（2012年3月）サイトでカスタマイズした箇所をまとめたエントリです

• コメントをDisqusに切り替え
• Disqus導入に伴い、コメント数カウント表示を廃止
• サイト内検索をGoogle カスタム検索に置き換え
• Internal linkへのrel=nofollowの削除

Disqus導入については以下に記事にしています

• DISQUSへコメントのインポートが完了した
• ブログのコメントにDISQUSを導入

単に設置するだけならば、それほどに時間のかからない Disqus ですが、カスタム設定とかしようとおもうと、結構時間をとったりします（Helpページが英文のみというのもあって）。

disqus_identifier という変数名のセットがあって、そこにユーニークなIDを入れることになっているのですが、説明をみてもよくわからない部分があったので、WordPressのプラグインが出すコードを参考にすると以下のようなパターンなようでした。

• var disqus_identifier = エントリID エントリーパーマリンク

よって、これに値するMTタグは以下のようにしてみることにしました。

ウェブページに「webpageの接頭辞＋ページベース名」を入れることにして、エントリーページはエントリーID＋パーマリンクという形です。

<MTIfCommentsActive>
<$mt:EntryClassLabel setvar="entrytype"$>
・・・・・
var disqus_identifier = <mt:If name="entrytype" eq="ウェブページ">'webpage:<$mt:PageBasename encode_js="1"$>'<MTElse>'<$MTEntryID$> <$mt:EntryPermalink$>'</mt:If>;

＊（注）上のコードは一部抜粋のため、そのままペーストして使うと正常に出力されない場合がありあます。

内部リンクに対するnofollow指定の解除ですが、検索結果ページでパンくずリストか反映されていたりするなど、重要度が低くなってきたので内部リンクへのnofollow は解除していくということとしました。

今月のカスタマイズは以上です。以下に過去のカスタマイズ記録リストがあります

• 当ブログのカスタマイズ記録

６１回ラジオNHK杯決勝戦将棋トーナメントのもようがNHKラジオ第1にて中継がありました。

あまり将棋には興味はなかったりするのですが、なにげにつけたラジオで将棋の中継をやっているのを初めて聴いておもわず聴き入ってしまいました。

棋譜とか局面はどうするのだろうか、と思っていたらインターネットで同時に配信されていたのですね。

• ことしもやります！ ラジオNHK杯 将棋トーナメント 第61回決勝戦 羽生善治 NHK杯 対 渡辺明 竜王

＊現在は、感想戦ということで棋譜を最初から再生することのできる形になっているようです。

で、結果のほうは既に出ているようですが、羽生善治２冠が渡辺明２冠を下し通算で１０回目の優勝を果して「名誉NHK杯」の称号を手にしたとのことです。

• 羽生２冠 初の"名誉ＮＨＫ杯"　NHKニュース

DISQUSのインポートツールによるMovableTypeからのコメントのインポートが完了しましたので手順メモです。

用意するもの：

• Disqusアカウント
• Movable Type （ver. 4.x 以降）
• WXRファイル出力用のインデックステンプレート

作業の流れ：

1. WXRファイルを出力するテンプレートを作成する(*)
2. テンプレートをブログのインデックステンプレートとして作成し、XMLファイルとして構築する
3. 出力されたファイルをダウンロードして内容を確認 (ブラウザで開いてパースエラーがないかなど)
4. Disqusでインポートの対象となるサイトを選択→ Tools → Import → Generic (WXR)
5. Upload your WXR XML file にローカルにあるファイルを指定してアップロード
6. アップロード後メッセージが表示される。コメントの取り込みが24時間以内に完了する旨が記されているのでしばらくまつ
7. 完了のメッセージが表示される

アップロード後以下のようなメッセージがDisqusの管理画面に表示されています。

一日ほど経過後に完了のメッセージが表示されていました。この時点ですでに管理画面にはインポート済のコメントが表示されていて、記事ページにも反映されていました。

Emailが記載されていなかったコメント投稿者ですが、Disqusのほうのメールアドレスで登録されてしまうようです（仕様と思われる）。EmailアドレスがDisqus上でひも付けされている場合にはアイコンが表示されるようになっているもようです。

* 検索してみると、既に作成されているかたのエントリが見つかるのですが、自分で納得いく部分がなかったので作成してみました。

出来上がったインデックステンプレートは以下のページにサンプルとして公開してあります。

• DisqusコメントにインポートするためのWXRテンプレートサンプル - maRk lab

作成については、Disqus公式のMovable Type用プラグイン同梱のWXRのテンプレートのファイルと WordPress で作ってるブログでエクスポートしたファイルを参考にしています。

まあこのファイル使うと、ブログ記事をWordPressにごっそり移行とかできたりもするのですが、なんというか、ファイル単位でテンプレートタグで出力できるのもMovableTypeの機能性ですよね。

MTの卒業制作としてWXRを自力で組むっていうのはどうでしょうか、とふと思いました。

はてなブログにTypePad Connectのコメントシステムを入れてみたのでそのメモです

以前、FC2ブログに設置してみましたが、そのはてなブログの場合となります。

追記：　はてなブログに「記事下」のHTML編集機能が備わりましたので、そこに TypePad で登録して得たコードを設置する方法でよくなりました。

• FC2ブログのコメントにTypePad Connectを設置

なお、今のところ、はてなブログとTypePad Connect双方がベータ版運用の状態で、先のことまでこちらは予想がつきませんので、今の時点で設置してみたら出来たという程度のものです。

まずは、TypePad（TypePad Connect経由のログインでTypePadのダッシュボードになるので、普通にTypePadにログインでも同じとおもわれます。*当方は米国TypePad Microで使用しています）のほうへいき、はてなブログの登録をします（TypePadのヘルプを参照してください サービスの種類はOtherで）。

必要事項を入力のあと、サイトの登録用コードを取得します。自分がやった限りでは、始めの1.のほうのコードのみでOKです。

はてなブログへいき、「＋モジュールを追加」をクリックします。HTMLのモジュールを選択して（3月8日よりモジュールの機能強化で変更になっている）、 既に入力されているタグは一旦消して、テキストボックスに先ほどのコードをペーストします。

で、以下は任意ですが、エントリページ以外でTypePadコネクトが表示されないように制御しておきます。

取得コードの、

• var TPConnect = {};

のある最初のscript要素を以下に

var l=document.location.href;
var blog='http://<自分のはてなブログのHome URL>/entry/';
if(l.indexOf(blog)!=-1){
        var TPConnect = {};

        TPConnect.tpc_url = '';
        TPConnect.tpc_title = document.getElementById('tpc_post_title').innerHTML;
        TPConnect.tpc_message = document.getElementById('tpc_post_message').innerHTML;

}

変更後、「デザインを変更する」で確定します。

以下にコンテンツ側のほうに設置する例を示しておきますが、あくまでも仮設置用です。メンテナンスするかしないかは、こちらの気分次第ですのであしからず。

<!-- TypePad Connect -->
<script>
var l=document.location.href;
var blog='http://tsuredureweblog.hatenadiary.jp/entry/';
var blogName = ' - ' + 'maRkの';

function set_metaTitle(){
   var meta_title = document.title.replace(blogName,'');
   var postTitle = document.getElementById('tpc_post_title');
   postTitle.appendChild(document.createTextNode(meta_title));
}

if(l.indexOf(blog)!=-1){
var elm = document.getElementsByTagName('footer');
for (var i=0; i<elm.length; i++){
var c=elm[i].getAttribute("class");
   if (c='entry-footer') {
      var div=[];
         for (var j=0; j<3; j++){
                var tpcid = new Array('tpc_thread', 'tpc_post_title', 'tpc_post_message');
                div[j]= document.createElement('div');
                div[j].setAttribute('id',tpcid[j]);
                 if (j>0)  div[j].style.display='none';
                       elm[i].appendChild(div[j]);
                 }
        set_metaTitle();
        var TPConnect = {};
        TPConnect.tpc_url = l;
        TPConnect.tpc_title = document.getElementById('tpc_post_title').innerHTML;
        TPConnect.tpc_message = document.getElementById('tpc_post_message').innerHTML;

    break;
   }
 }
}
</script>

// 以降に<script type="text/javascript" src="http://profile.typepad.com/services/embed/...... のコードを入れる

最初のscript要素を上のようなものにして（var blog= ''には自分のとこのURL）、 この下に、本来のConnect 設置用コード内にある、外部 JavaScript 呼び出しの部分（<script type="text/javascript" src=......）をいれます。

以下は実際のTypePad管理画面上で受け取ったコメントのキャプチャです。

テストしたページ

• https://tsuredureweblog.hatenadiary.jp/entry/2012/03/08/224504

Mac用のテキストエディタmiで編集したファイルをOpera Nextで開くための設定のやりかたです

miでツールのブラウズにOperaとあるので、試してみても何もおこらなくてガクってなったので、どうしたものかと設定してみたという話です。

ライブラリとかを探してもmiがブラウザへのパスとかのあるファイルが見当たらなかったもので、試しにモード設定のところで、ツールの設定変更してみたら、起動することができました。

正解かどうかはわからないですが、

<<<BROWSE(Opera)

となっているのを、

<<<BROWSE(Opera Next)

に書き換えてあげるだけ。こちらが入れてるのはOperaの現行ヴァージョンでなくて、Opera Nextのほう。要は、Launchpad で表示されている名前を入れればよかったと。

同じ理屈で、Google Chrome からでもひらくことができるようにもしてみました。

以下に、実際に開いてみたものの動画を用意しておきました。

• mi open Opera Next - YouTube

これまで使用していたMovableTypeシステムのコメント機能をDISQUSのほうに切り替えをしました。

既に、使用中のMTOSとWordPressのほうでは導入しており、ずいぶんと出遅れていますが、このブログとおよびwww.markdiary.com内のページにDISQUSを入れました。

MovableType への DISQUS の設置ですが、DISQUSよりプラグインが提供されています（入手はDISQUSの管理画面よりおこなうことができます）。ですが、今回はプラグイン使用をせずに、Universal Code のほう（install のページで下のほうにある）を利用して行なう事にしました。プラグインとの違いですが、自分でテンプレートを編集の作業がでてくるのと、これまでのMTシステムのコメントからインポートするという機能が利用できないといったくらいです。

WordPressのほうのDISQUSプラグインでは、管理画面からフレーム内にDISQUSサイトの表示ができて管理画面で操作できるのですが、MovableTypeのDISQUSプラグインにはそういった機能はありません（ヴァージョンアップもWordPress用ほどにはおこなわれていないようです）。

ということで、これまでいただいたコメントはDISQUS上で管理しないと割り切っていれば(WXR 自作すればなんとかなりそうだけど、ここでは触れないでおきます)、プラグインでなくて、Universal Code でも特に問題なく使うことができます。

切り替えのメモ

ここからは、MovableTypeでの切り替えのメモとして記しておきます。そもそものDISQUSの登録方法とかは省略します(新UIのほうの画面でみています)。

コードスニペットの入手は、自分が登録したサイト(ドメイン単位とおもわれる)のSettingsタブからInstallタブへ、下部にDisqusアイコンがあるのでクリック。

Embed code に記載されているコードを、コピーしてテキストエディタにペースト。エディタでvar disqus_shortname = 'example' のexampleの文字を、登録したサイトに設定しておいた「ショートネーム」に置き換えします(このショートネームは設定すると後から変更できないことになっているので注意)。

コメントのテンプレートをDISQUS用に差し替える

テーマごとに構造が違うので大雑把な形で書くと以下のようなテンプレートモジュールを作成しておいて、いままでインクルードしていたコメントモジュールと差し替えるだけです。

<mt:Comments>
MTCommentsのループ
これまでいただいたコメント表示を残すためのもの
</mt:Comments>
<!-- DISQUSのコードスニペットここから -->
<div id="disqus_thread"></div> 
・・・・・・・
<!-- コードスニペット最後まで -->

なお、この例ではもとのコメントフォームを一切取り払った形のものです。

コメントフォームは残す形にするとか、noscript要素に独自のフォームをいれてスクリプト停止の環境にもつかえるようにするなどといったカスタマイズも考えられます。

• Dashboard - DISQUS (要ログイン)