MovableType: 2008年2月アーカイブ

前のエントリーHatena starを付けてみるで、はてなスターをつけてみたところ、更に良い方法があるということをはてなスターのお返事で教えてもらいました。

TREND SPOTTINGさんのMovable Type4にはてなスターを設置2なのですが、このとおりに設置してみると、あらま上手く行っています（こちらのサイトでテストしてみた）。

似たようなことをやったけれども、上手く行かなかった、、と思いましたが、"ブログ記事の詳細"と"ブログ記事の概要"両方にspanを付けなかったからかな。。前回方法では、二つのヘッダーのテンプレートを作るため、ヘッダーの内容を変える時に両方ともやらなければいけないので、こちらの方法に変えていこうと思います。

方法のメモ

１．はてなスターにアクセス。ログインして右上のBlogsをクリック。

２．"外部のブログサイトを登録する"にblogのURLを入れ、追加する。

３．トークンが発行される。出てきたHTMLコードをコピーする。
MovableTypeの管理画面より、
　デザイン＞テンプレート＞クイックフィルタ　テンプレートモジュール＞ヘッダー
のheadタグの中に、コピーしたコードをペーストする。

４．トップページのタイトルの横に設置させるために、Hatena.Star.EntryLoader.header...以下の一行を加え、保存。以下のものがheadタグ内に加えられた。

<script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script> 　　<script type="text/javascript"> Hatena.Star.EntryLoader.headerTagAndClassName = ['span','star']; Hatena.Star.Token = 'your トークン'; 　　</script>

５．　デザイン＞テンプレート＞テンプレートモジュール＞ブログ記事の詳細
の、"ブログ記事のメタデータ"のモジュールインクルードの上にある、

<h1 id="page-title" class="asset-name entry-title"><$MTEntryTitle$></h1>

<h1 id="page-title" class="asset-name entry-title"><$MTEntryTitle$><span class="star"><a href="<$MTEntryPermalink$>" class="hidden">スター</a></span></h1>

６．　デザイン＞テンプレート＞テンプレートモジュール＞ブログ記事の概要
の、"ブログ記事のメタデータ"のモジュールインクルードの上にある、

<h2 class="asset-name entry-title"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h2>

<h2 class="asset-name entry-title"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><span class="star"><a href="<$MTEntryPermalink$>" class="hidden">スター</a></span></h2>

７．再構築して、出てくるか確認。

TREND SPOTTINGさん、ありがとうございました。

Hatenaのサービスで、はてなスターというものがあります。はてなスターとは、

日々ブログを読んでいていいなと思っても、コメントを書いたりトラックバックを送るのは敷居が高く、気持ちが十分に書き手に伝わらずに終わってしまうことも多いでしょう。はてなスターは既存のブログにワンクリックで☆がつけられます。あなたのいいなと思った気持ちを☆に変えて、世界のブログに☆をつけよう！ （はてなスターはじめてガイド - Hatena Star）

というもので、ちょっと良かったなというエントリーに☆を付けてあげるというものです。このサービスを自分のblog内でも設置できるということなので、設置してみることにしました。

（追記）
改良版を、次のエントリー"Hatena starを付けてみる　その２"にて行ってみています。そちらの方が変更点が少なく良いと思います。

方法は、MovableType4.1で設置しているTREND SPOTTINGさんのMovable Type4にはてなスターを設置を参考にしてみました。

１．はてなスターにアクセス。ログインして右上のBlogsをクリック。

２．"外部のブログサイトを登録する"にblogのURLを入れ、追加する。

３．トークンが発行される。出てきたHTMLコードをコピーする。
MovableTypeの管理画面より、
　デザイン＞テンプレート＞メインページ＞ヘッダー
のheadタグの中に、コピーしたコードをペーストする。

４．トップページのタイトルの横に設置させるために、Hatena.Star.EntryLoader.header...以下の一行を加え、保存。以下のものがheadタグ内に加えられた。

<script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script> 　　<script type="text/javascript"> Hatena.Star.EntryLoader.headerTagAndClassName = ['h2','asset-name']; Hatena.Star.Token = 'your トークン'; 　　</script>

５．記事個別ページ用のヘッダーを作成する。まず、モジュールテンプレートにあるヘッダーの中身全てをコピーする。

６．"モジュールテンプレート一覧"より"モジュールテンプレートの作成"して、上記をコピーする。

７．記事個別ページに合わせるように、下の行の'h2'を'h1'に書き換える。

Hatena.Star.EntryLoader.headerTagAndClassName = ['h1','asset-name'];

８．"ヘッダー個別リンク用"などと任意の名前を付けて保存。

９．個別ページでの"ヘッダー"を作成した"ヘッダー個別リンク用"に変える。
　デザイン＞テンプレート＞アーカイブテンプレート＞ブログ記事

<$MTInclude module="ヘッダー"$

<$MTInclude module="ヘッダー個別リンク用"$>

１０．　デザイン＞テンプレート＞アーカイブテンプレート＞ブログ記事＞ブログ記事の詳細
の、"ブログ記事のメタデータ"のモジュールインクルードの上にある、

<h1 id="page-title" class="asset-name entry-title"><$MTEntryTitle$></h1>

<h1 class="asset-name"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h1>

１１．再構築して、出てくるか確認。

個別記事のタイトルを認識させるところが少しややこしい。はてなスターが必要とする情報は、タイトルとpermalinkのURLということですが、メインページと個別ページでタグとpermalinkが違っていて、それぞれに作る必要があった。メインページではタグがh2、個別ページではh1と異なり、また個別ページではタイトルにpermalinkされていないので、１０．で追加させている。

Not quick a Nineさんのはてなスター付けましたでは、divタグでArticleTitleクラスを認識させているが、上手く行かなかった。。残念。そのため、ヘッダーのテンプレートを二つ作り、それぞれでタイトルを認識させようとしています。

ほとんど、TREND SPOTTINGさんのMovable Type4にはてなスターを設置のエントリーをなぞっただけですが、上手く行ったようです。良い記事がありましたら、☆を付けてもらえたらうれしいです。

引用するときに使用するblockquoteタグについて、少しcssをカスタマイズしてみようと思います。段が出来るだけで、あまり目立たないのでもう少し目立つようにしてみました。

blockquote {
margin: 10px 15px 10px 15px;
padding: 15px 25px 15px 25px;
line-height: 1.6;
font-size: 12px;
font-family: Verdana, Arial, sans-serif;
background-color: #E2BCFF;
border: #E2BCFF 1px solid;
}

これで、このように少し（結構？）目立つようになりました。
（blockquote内、少し整形しました）

サイドバーにトラックバックに関するものが表示されていなく、ウェジットを見てみてみてもどこにもありませんでしたので、"最近のトラックバック"のウェジットを作ってみようと思います。

最近のコメント一覧のツリー化もしているので、この"最近のトラックバック"でもツリー化してみようと思います。"最近のコメント"のウィジットを参考にしてみましたが、ポイントとして、

１．mt:IfNonZero tag="mt:BlogPingCount"
最近のコメントでは"mt:BlogCommentCount "だったところを、トラックバックの"mt:BlogPingCount"として、mt:IfNonZeroのトラックバックありの時だけ表示するようにしている。

２．トラックバックに使われているMTタグは、pingsという名前で使われている。

３．MTPings lastn="10"
MTPingsのモディファイアlastn="10"で10個の記事を表示することにした。

４．最近のコメント一覧のツリー化の時のようにjavascriptを入れる。引数を"trackbacklist"にした。

<mt:IfNonZero tag="mt:BlogPingCount"> <mt:PingsHeader> <div class="widget-recent-pings widget"> <h3 class="widget-header">最近のトラックバック</h3> <div class="widget-content" id="trackbacklist"> </mt:PingsHeader>

<ul>
<MTPings lastn="10">
<li><a href="<$MTPingURL$>" target="_blank"><$MTPingTitle$></a><br/>
from <$MTPingBlogName$> (<$MTPingDate format="%y/%m/%d"$>)</li>
</MTPings>
</ul>

</div>
</div>
<script type="text/javascript">
<!--
generateNormalTree("trackbacklist");
//-->
</script>

<mt:PingsFooter>
</mt:PingsFooter>
</mt:IfNonZero>

こんな感じで、ウィジットを作成してみました。そしてウィジットセットでサイドバーに入れてみると表示できました。（正確には、ホームページウィジェットの中に、mt:includeで最近のトラックバックのウィジットを入れました。）

いろいろなblogなどでサイトの更新情報をRSSで配信されていますが、そのフィードをこのblogのサイドバーに表示してみることにしました。

参考にしたサイトは、小粋空間さんのRSS Feed（フィード）を表示するです。説明にあるように、javascript->PHP->rssフィードの取得->HTMLという流れで、テキストとして出力され、使用感が良さそうです。

１．もととなるスクリプトの集まり"Feed2JS"を、こちらSo What is "Feed to JavaScript"?のDownloadにあるeduforgeのリンク先、Eduforge: Feed to JavaScript (Feed2JS): ファイルリストよりダウンロード。

２．適当な位置にフォルダごとアップロード。今回も、$MTBlogURL$の位置、つまりindex.htmlのある位置にアップロードした。

３．ファイル、フォルダのパーミッションを755にする。

４．動作テスト : ダイレクトリンクでfeed2js/magpie_debug.phpをブラウザから実行。

http://www.xxxxx.net/feed2js/magpie_debug.php

そして、表示設定をする。

http://www.xxxxx.net/feed2js/build.php

Show channel? : no
Number of items to display. : 5
Show/Hide item descriptions? How much? : 0
Use HTML in item display? : no
Show item posting date? : yes
Time Zone Offset : +9
Target links in the new window? : n
UTF-8 Character Encoding : use UTF-8 character encoding
Podcast enclosures : yes

５．コードの生成 : "Generate Javascript"でコード生成。

６．movabletypeのウェジットを新しく作成し、このコードを埋める。

７．文字コードの変更。このサイトはEUC-JPなので、そのままでは文字化けする。そのため、
feed2js/feed2js.phpの136-139行目付近の、

$rss = @fetch_rss( $src );
mb_convert_variables("EUC-JP","UTF-8",$rss);

再構築後、上手く表示されました。いろいろなところで使うことができそうですね。

blogのサイドバーの一番上にmy statusという一言をつけています。今の状態で、短期的な思ったこと、やっていることちょこっとしたメモなのですが、簡単でアプリもいろいろあるTwitterで書き込み、それをblogに出しています。

方法は、Going My Way: Twitter の Status を自分のブログに貼り付け可能な Javascript Badgeを参考に、Twitter / Get a Badge for Your Siteより作成しました。

自分の場合は、"other"を選択、"HTML/javascript"のタイトル無し一件表示で、コードをコピーして、movabletypeでウィジットをつくり表示させることが出来ました。liタグで出力していて、頭に点がついているので、jsのファイルを見直せたらいいな。表示の仕方はFlashも格好良かったのですが、ちょっと目立ちすぎということでテキストにしました。

Twitter自体も使ってみると結構面白く（いまさらですが、、）、160バイトで区切れているので簡潔なんですよね、メッセージが。

TwitterではAPIもあったりしていろいろ出来そうですし、初心者からの説明サイトもありました。

• 先取り！ Twitter使いへの道 AtoZ：第1回　Twitterキホンのキホン｜gihyo.jp ... 技術評論社
• Twitter Fan Wiki - This is the unofficial place where Tw...

また、windowsで使えるTwitter用クライアントが幾つかあり、

• "Twit" : ヒビノアワ: Twit Ver0.90公開しました
• "Tween" : Windows用Twitterクライアント[Tween]ベータ公開 - きりの日記

など、便利に使わせて頂いています。

つぶやきというのも、大切な気がしますね。今からtwitterというのも良いのではないでしょうか。

MovableType4.1にシステムを入れ替えてから、あるサイトへの更新の送信が止まっていることに気がついて、どうもフィードがおかしいなと思っていました。

それで、どこがおかしいのかしばらくわからなかったのですが、よく見てみると前のシステムまであったindex.xmlがなくなって、デフォルトではrss.xmlになっているではないですか。（はじめはrss.xmlの存在にも気づかなく）それではだめなので、とりあえず以前も使用したこともあるatom.xmlに変更。うまくフィードしてくれるようになりました。

どうもMovableType4.1のテンプレートのコメントの表示方法が気に入らず、カスタマイズしてみます。小粋空間さんでツリー化させる方法が載っているので、それに沿ってやってみようと思います。

１．maketree.jsをスクリプト(小粋空間さん)よりダウンロード。

２．$MTBlogURL$の位置、つまりindex.htmlのある位置にアップロード

３．コメント欄のテンプレートを変える
　デザイン＞テンプレート＞ウィジェット＞最近のコメント
を以下のようにする。

<mt:IfNonZero tag="mt:BlogCommentCount"> <mt:CommentsHeader> <div class="widget-recent-comments widget"> <h3 class="widget-header">最近のコメント</h3> <div class="widget-content" id="commentlist"> </mt:CommentsHeader>

<MTEntries recently_commented_on="5">
<a href="<$MTEntryLink$>"><MTEntryTitle></a>
<ul>
<MTComments lastn="5" sort_order="descend">
<li><a href="<$MTEntryLink$>#<$MTCommentID$>">
<MTCommentAuthor></a> (<$MTCommentDate format="%y/%m/%d"$>)</li>
</MTComments>
</ul>
</MTEntries>

</div>
</div>

<script type="text/javascript">
<!--
generateNormalTree("commentlist");
//-->
</script>
<mt:CommentsFooter>
</mt:CommentsFooter>
</mt:IfNonZero>

４．インクルード文の挿入
　デザイン＞テンプレート＞メインページ＞ヘッダー
のHeadタグの中に入れる。

<script type="text/javascript" src="<$MTBlogURL$>maketree.js" charset="<$MTPublishCharset$>"></script>

５．線の画像をサイドメニューのツリー化スクリプト（改）(小粋空間さん)よりダウンロード。そして、MTの入っているマシンの適当な位置にアップロード。今回はmt-static/images/にいれた。

６．スタイルシートの追加
　デザイン＞テンプレート＞スタイルシート
で現在のテンプレートで使用しているcssファイルの位置を調べ、以下のものを、５．で入れた線の画像のリンク位置を修正してから書き込む。

ul.tree { margin: 0!important; padding: 0!important; font-size: 9px; list-style: none!important; }

ul.tree ul {
margin: 0!important;
padding: 0!important;
}

ul.tree li {
margin: 0!important;
padding: 0 0 0 16px!important;
background-image: url(http://www.tetra-blue.net/weblog/mt-static/images/tree_end_dotted.gif);
background-repeat: no-repeat!important;
list-style: none!important;
}

ul.tree li.end {
background-image: url(http://www.tetra-blue.net/weblog/mt-static/images/tree_end_dotted.gif);
list-style: none;
}

これで再起動して上手く行きました。小粋空間さん、毎度ですがありがとうございました。

URLの前に付く小さなアイコンfaviconは、headタグの中にそのファイルのある位置を指定するのですが、Movable Type4では簡単にfaviconを設置する"FaviconManager"というプラグインがあり、インストールしてみました。

blog.aklaswad.comさんのサイトで公開しているもので、こちら（blog.aklaswad.com: Favicon Manager）に説明があります。例によって、とりあえず自分で行ったインストール手順をメモメモ。

１．上記のサイトからFaviconManagerのzipファイルをダウンロード、解凍。

２．このフォルダをアップロード。アップロード先は、
~/cgi-bin/mt/plugins/

３．初期設定を管理画面で行う。
　設定＞プラグイン
で表示されている"FaviconManager"を選択、設定を開く。

４．faviconの画像のあるアドレスを記す。

５．保存し、再構築。

で上手くいきました。いちいちheadに書くのも面倒ですし、入れ替えも容易にできそうで便利ですね。

Movable Typeのプラグインで、サイト内の関連しているエントリーを表示する"RelatedEntries"というプラグインがあり、導入してみました。自分と相手をお互いに関連付けられるので、相互に容易にリンクさせることが出来、エントリーの内容の補足がしっかり出来そうです。

このプラグインはThe blog of H.Fujimotoさんのサイトで開発されたもので、使用に関しても説明されています（エントリーの関連付けを行うプラグイン(MT4専用版・その1) - The blog of H.Fujimoto、その２、その３）。

ということで、ここでは今回上手くいったインストールの流れをメモしておきます。

１．作者のサイトよりダウンロードし、解凍する。

２．このフォルダをアップロード。アップロード先は、
~/cgi-bin/mt/plugins/

３．.cgiや.plのファイル属性などを755に変更。

４．初期設定を管理画面で行う。
　設定＞プラグイン
で表示されている"Related Entries"を選択、設定を表示。
関連付けるブログの初期値・1ページ当たり表示件数を確認、保存（デフォルトでも大丈夫そう）。

５．関連付ける保存したブログ記事を一覧から辿り（一覧＞ブログ記事）、の下の方にある、アクションをドロップした中にある、プラグインアクションのものを選択（今回は文字化けしていた）、Goをクリック。

６．関連付けるエントリーを選択。片方、相互、また同じMovableType内のほかのblogとも関連付けが可能。

７．表示させる場所にタグなどを埋め込む。今回は個別記事の本文の終わりに置こうと思う。
　デザイン＞テンプレート＞アーカイブテンプレート＞ブログ記事＞ブログ記事の詳細
の終わりのほうに、

<MTEntryIfRelatedEntries force="1">
<p>関連する記事：<$MTEntryRelatedEntriesCount force="1"$>件</p>
<ul>
<MTEntryRelatedEntries force="1">
<li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a> (<MTBlogName>, <$MTEntryDate format="%Y/%m/%d"$>)</li>
</MTEntryRelatedEntries>
</ul>
</MTEntryIfRelatedEntries>

８．他Blogの関連するエントリーも出力するために、force="1"の属性を入れている。

９．保存して表示されるか実際に確認してみる。

ということでうまく設置できました。

エントリー中にソースコードを書きたいときに、そのままにしてしまうとwebページではコードの文字が変換されてしまいます。そこで、preであったりcodeであったりというタグを使用するのですが、どうもうまく行かなく、なぜか表示されない。

そのために大文字の"＜"を使用するなど方法はありますが、エントリーにソースコードを表示する方法 (MovableTypeカスタマイズまとめサイト)にあるように、

<　=　&lt;
>　=　&gt;
"　=　&quot

を使用するのがいいのかもしれない。サイトには、MovableType用のplaginのリンクもあるようなのですが、入れてみたところうまくいかない。入れ方が悪いのか、MT4に対応していないのか。

いちいち&lt;などを書くのは面倒そうですが、TeraPadなどエディターの検索置換を使えば楽に変換できそうなので、この方法がとりあえずのところMT4でソースコードを記述するのにいい方法なのかもしれません。

Movable Type4.1に新しく追加された機能として"カスタムフィールド"があり、追加してみました。

この機能は記事作成時のダッシュボードの画面に、予め書き込む枠を作成しておくものです。テキストからドロップダウン、ラジオボタンなどエントリー上で結構な頻度で使用されるものについて、初めから書き込む欄があれば便利、、というものですね。

作成は、カスタムフィールドを使用する | Movable Type 4 ドキュメントや小粋空間: Movable Type 4.1 カスタムフィールドの使用方法がとても参考になりました。

今回は、ブログの記事の後に本文の後に"参考サイト"を付け加える、ということを行ってみようと思います。

１．管理画面（ダッシュボードの画面）上の
設定＞カスタムフィールド
にある"フィールドを作成"を選ぶ。

２．システムオブジェクト　：　ブログ記事
名前　：　参考サイト
説明　：　参考サイトを表示
種類　：　テキスト（複数行）
ベースネーム　：　refsites
テンプレートタグ　：　refsites
などとして保存。

３．管理画面（ダッシュボードの画面）上の
設定＞カスタムフィールド
に"参考サイト"が表示されている。

４．管理画面（ダッシュボードの画面）上の
新規作成（または一覧）＞ブログ記事
にある"表示オプション"の"参考サイト"をチェックしてＯＫをクリック。
参考サイトの枠が出現する。

５．この内容を表示するために、ブログ記事のテンプレートにタグを追加する。
　デザイン＞テンプレート＞アーカイブテンプレート＞ブログ記事＞ブログ記事の詳細
にて、

<MTIfNonEmpty tag="refsites">
<div class="asset-body">
<dl><dt>参考サイト : </dt>
<dd><$MTrefsites$></dd></dl>
</div>
</MTIfNonEmpty>

６．作成時に

<ul>
<li></li>
</ul>

作成時にul, liを作らなければいけないのが少し面倒というくらいで、結構使えそうです。必要に応じてその他のものも作れば、便利になりそうです。

以前から、サイトに記されている言葉に反応していろいろな広告が出てくるのが面白くてgoogle adsenseを貼り付けているのですが、Movable type4.1に新しくしたので貼りなおしています。

Movable type4.1で個別ページなどどこにあるのか少しわかりずらかったので、adsenseを貼っているページがダッシュボードのどこにあったのか簡単にメモしておきます。

・個別ページ
　デザイン＞テンプレート＞アーカイブテンプレート＞ブログ記事
ここが個別ページのデザインになり、その中の"プログ記事の詳細"のインクルードモジュールの最後のほうに加えた。（バナー468×60）
上下にbrタグ、またcenterタグを付けて整形。

・カテゴリー別、月別などのアーカイブ
　デザイン＞テンプレート＞アーカイブテンプレート＞ブログ記事リスト
"ヘッダー"のインクルードモジュールの後に、～の最近のブログ記事などあり、これがアーカイブの種類によって変化する。その下に追加して、"ブログ記事概要"のインクルードモジュールに続く。
div class="entry-tags" 、centerタグで囲み、下にbrタグを付けて整形。（バナー468×60）

・検索・タグ
　デザイン＞テンプレート＞システムテンプレート＞検索結果
"ヘッダー"のインクルードモジュールの後に、h1タグで囲まれた～と一致するものの後に、"ブログ記事概要"のインクルードモジュールの前に、追加。（バナー468×60）
上下にbrタグ、またcenterタグを付けて整形。

・サイドバー
　デザイン＞ウィジェット
にて新しいウィジェットを作成。div class="widget-powered widget"、div class="widget-content"に囲ませて、そのまま追加。（スカイスクレイパー120×600）作成後、
　デザイン＞ウィジェットセット＞3カラムのサイドバー(メインorサブ)
にて作成したウィジェットをドラッグ＆ドロップで、利用可能からインストール済みに移動。

そして再構成することにより、しばらくして表示されるようになりました。