2007年9月21日

Movable Type4 導入方法について(改ページ篇)

◆記事に改ページ機能を付加する

Movable Typeには、何故か改ページという概念がないようです。
今のブログのように、がつがつ日記を書く人のことを想定していなかったのでしょうか。
外部プラグインにて、2種類ぐらい提供がされています。
どちらを使用しても問題はないので、好みの方を使うのがよいでしょう。


☆DivPages.pl

改ページプラグインとして、Movable Typeの配布元にも紹介されているプラグインです。
配布元はThe blog of H.Fujimotoさんのサイトです。

設定方法はMovable Typeの配布元が詳しいですが、こちらでも紹介します。

1.
配布元サイトから、「プラグインのダウンロード」をクリック。
「DivPages.txt」を、「DivPages.pl」にリネームします。
※エクスプローラーの設定にて、「ファイルの拡張子を表示する」設定にして下さい。

2.
FTPソフトでMovable Typeのインストールフォルダ内にある「plugins」フォルダにアップロードします。


これでインストール完了です。
続いて、ソース上の設定を行います。

1.
テンプレートの「アーカイブテンプレート」にある「ブログ記事リスト」を開き、<MTEntries>の直前に、下記のタグを挿入します。

<$MTDivPagesInit per_page="n"$>

「per_page="n"」のnには、1ページあたりに表示するエントリーの件数を指定します。
例:1ページに5件なら「per_page="5"」。per_pageを省略すると10件になります。


2.「MTEntries」を「MTEntriesDivPages」に置き換える
続いて、<MTEntries>を終了タグも含め<MTEntriesDivPages>に置換します。


3.下記のタグを表示させたいところに置く

下記のソースを「アーカイブテンプレート」にある「ブログ記事リスト」にて追加をします。


<MTDivPagesIfMulti>
<form id="page_sel" name="page_sel" action="get">
<div>
<MTDivPagesIfPrevPage><a href="<$MTDivPagesFirstPageLink$>">先頭ページ</a>|<a href="<$MTDivPagesPrevPageLink$>">前のページ</a>|</MTDivPagesIfPrevPage>
<select name="page_num" onchange="location.href('<$MTDivPagesCurPageLink mode="relative"$>?page=' + document.page_sel.page_num.value);">
<MTDivPagesLoop all="1">
<option value="<$MTDivPagesNumber$>"<MTDivPagesIfCurPage> selected="selected"</MTDivPagesIfCurPage>><$MTDivPagesNumber$></option>
</MTDivPagesLoop>
</select>ページ/<$MTDivPagesCount$>ページ
<MTDivPagesIfNextPage>|<a href="<$MTDivPagesNextPageLink$>">次のページ</a>|<a href="<$MTDivPagesLastPageLink$>">最終ページ</a></MTDivPagesIfNextPage>
</div>
</form>
</MTDivPagesIfMulti>


先ほど編集した<MTEntriesDivPages>の直後に記載するのがよいでしょう。


4.
再構築を行うと、反映されます。
が、時間が掛かるのでまずは「月間のみ」などから試して行きましょう。


☆PageBute.pl

個人的にオススメしたい改ページプラグインがこちらです。
配布元はスカイアークシステムさんのサイトです。
設定方法はDivPagesと大差ありません。

1.
配布元サイトから、「PageBute:ダウンロード」をクリック。
zipファイルをダウンロードし、PageBute.plを解凍します。

2.
FTPソフトでMovable Typeのインストールフォルダ内にある「plugins」フォルダにアップロードします。


これでインストール完了です。
続いて、ソース上の設定を行います。

1.
テンプレートの「アーカイブテンプレート」にある「ブログ記事リスト」を開き、<MTEntries>の直前に、下記のタグを挿入します。

<MTPageContents count="n">

「count="n"」のnには、1ページあたりに表示するエントリーの件数を指定します。
例:1ページに5件なら「count="5"」。countを省略すると10件になります。


2.下記のタグを表示させたいところに置く

下記のソースを「アーカイブテンプレート」にある「ブログ記事リスト」にて追加をします。

<MTIf name="datebased_archive">
<MTPageContents count="10">
<MTEntries>
<$MTEntryTrackbackData$>
<$MTInclude module="ブログ記事の概要"$>
<$MTPageSeparator$>
</MTEntries>
</MTPageContents>
<div class="content-nav">
<MTIfPageBefore><$MTPageBefore delim="<<前のページへ "$></MTIfPageBefore><$MTPageLists delim=" | "$><MTIfPageNext><$MTPageNext delim=" 次のページへ>>"$></MTIfPageNext>
</div>
<MTElse>
<MTEntries limit="auto">
<$MTEntryTrackbackData$>
<$MTInclude module="ブログ記事の概要"$>
</MTEntries>
</MTIf>


3.
再構築を行うと、反映されます。
が、時間が掛かるのでまずは「月間のみ」などから試して行きましょう。


DivPagesとの大きな違いは、<MTEntries>を残すということです。
使いやすい方を使うのがよいと思います。


※ご注意
Movable Typeのバージョンアップのとき、ついプラグインを削除してしまわないこと。
過去ログページが出なくなってしまうので、要注意です。

Movable Type4 導入方法について(著作者名と更新時間篇)

◆記事の末尾に生成時間と著作者を表示する

実はMovable Typeの標準設定だと、これらが表示されないんですね。
誰が書いたか、とか何時何分に更新されたか表示したい人向けです。


ユーザー設定

まず、ユーザー名の設定をします。
右上のこのタブから、「ユーザー」を選択して、自分のユーザーをクリックします。
Movable TypeへのログインIDに、ニックネームを付けることが出来、それをブログ上で表示することが出来ます。
表示したい内容に合わせて設定します。

次に、「テンプレート」の「テンプレートモジュール」にある「ブログ記事のメタデータ」(でなくても、表示したいところ)を編集します。


<a href="<$MTEntryPermalink valid_html="1"$>">Permalink</a> |

途中にある「Permalink」というワードは、ブログ記事で「続き」を読む部分を出す時に表示させるリンクの表示名です。
「続きを読む」など、適当に編集してよいと思います。

次に、ユーザー名などを表示させます。
先ほどの「Permalink」の後の|の後ろに付けても良いのですが、それだと「続きを読む」をクリックした時に、著作者名が表示されなくなります。
そのため、この場所に入れることにします。


</MTIf>
</MTIf>

Postby <$MTEntryAuthorDisplayName$> <$MTEntryDate format="%X"$><br />
<$MTInclude module="カテゴリ"$>

<br />タグを入れたのは、改行のためです。
もちろん、表示の仕方はいろいろとあるので、カスタマイズはお任せします。

で、ここで2つのタグが登場しました。
MTEntryAuthorDisplayNameタグMTEntryDateタグです。
詳しいことは、それぞれのタグリファレンスをご覧下さい。

ほかにも、はてなブックマークボタンなど、ソーシャルブックマークのボタンを置いてみたりするのもありだと思います。

Movable Type4 導入方法について(CAPTCHA画像篇)

◆コメント欄にCaptcha画像を表示する

CAPTCHA画像

Movable Type4では、標準でCAPTCHAの設定が出来るようです。
スパムコメント対策に導入をしたい方向けです。


ちょっと変更するだけ

上のタブから「設定」→「ブログの設定」→「コメント」にある、「CAPTCHAプロバイダ」を「Movable Type規定」にするだけ。
実に簡単です。

あとは、「テンプレート」の「テンプレートモジュール」にある、「コメント入力フォーム」を開いて、コメントを修正すればよりよくなります。

「Movable Type規定」だと、CAPTCHA画像は6桁英数固定のようですが、カスタマイズする方法もあるはず。
どうすればよいのだろう…
良かったら教えて下さい。

2007年9月20日

Movable Type4 導入方法について(カレンダー篇)

さて、ブログのデザインも出来たところで、ちょこちょことカスタマイズをして行きましょう。
このサイトで行っているカスタマイズを中心に載せておきます。
また、他にも面白いカスタマイズ方法があれば、コメントやトラックバック等でお知らせ下さい。


◆カレンダーを表示する

カレンダー

なぜか標準テンプレートではデフォルトで表示されないカレンダー。
何故かと思っていたら、タグ記述にありました。

「テンプレートモジュール」の「サイドバー」(右か左のどちらか)にカレンダーのものがあります。

<MTIfArchiveTypeEnabled archive_type="Daily">
<dd class="side" id="calendar">
<table summary="投稿した日にリンクする月別のカレンダー">
<caption class="calendarhead"><$MTDate format="%B %Y"$></caption>
<thead>
<tr>
<th abbr="Sunday"><span class="sunday">Sun</span></th>
<th abbr="Monday"><span class="weekday">Mon</span></th>
<th abbr="Tuesday"><span class="weekday">Tue</span></th>
<th abbr="Wednesday"><span class="weekday">Wed</span></th>
<th abbr="Thursday"><span class="weekday">Thu</span></th>
<th abbr="Friday"><span class="weekday">Fri</span></th>
<th abbr="Saturday"><span class="saturday">Sat</span></th>
</tr>
</thead>
<tbody>
<MTCalendar>
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td<MTCalendarIfToday> class="today"</MTCalendarIfToday>><MTCalendarIfBlank><MTElse><span class="day"></MTElse></MTCalendarIfBlank>
<MTCalendarIfEntries>
<MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a></MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank>
<MTElse></span></MTElse></MTCalendarIfBlank></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
</tbody>
</table>
</dd>

</MTIfArchiveTypeEnabled>

ここのMTIfArchiveTypeEnabledタグが妙に浮いています。
本来ならば、MTIfArchiveTypeタグの方が正しいと思うのですが…

もしも、トップページのみや特定の場合のみ表示する場合は、「MTIfArchiveTypeEnabled」を「MTIfArchiveType」に置換(終了タグも)して、typeを正しく設定すると良いでしょう。
また、いつでも表示させたい場合は、MTIfArchiveTypeEnabledタグを取り払ってしまうとよいです。

Movable Type4 導入方法について(デザイン篇)

記事も書けるようになったところで、次に気にしたいのはやっぱりデザインです。
Movable Type4のデザインはいろいろとカスタマイズできますが、ちょっと敷居が高い感じです。


テンプレートの変更

まずは、上部分から「デザイン」→「スタイル」を選択します。
すると、ブログのデザイン選択画面らに切り替わります。


ブログのデザイン選択画面

デフォルトでいくつかのデザインテンプレートがあるので、この中から良さそうなモノを選ぶのもありです。
とは言え、オリジナルデザインで作りたい、という気持ちも確かにあります。

ブログデザインは、上部分から「デザイン」→「テンプレート」を選択すると表示されます。
Movable Type4では、ちょっと面倒なことに、5つのテンプレートカテゴリに分かれています。

・インデックステンプレート
・アーカイブテンプレート
・テンプレートモジュール
・システムテンプレート
・ウィジェット

詳しくは下記のサイトをご覧下さい。

※Movable Type テンプレートの種類と役割
http://movabletype.jp/documentation/designer/template-types.html


で、テンプレートを編集する時に注意すべき事が。

記事の表示形式に注意

テンプレートの中にある「メインページ」や「スタイルシート」などを編集して、自分好みのデザインにして行くのですが、デフォルトの編集形式は「強調表示なし」(黒のAボタン)を押してから編集して下さい。
そうでないと、正しくタグが反映されない場合があります。

上級者になると、Movable Type テンプレートタグリファレンスがあれば何でも作れる、と言う感じなのでしょうが、初心者にはまず無理です。

そこで、比較的自分のデザインに改変しやすいテンプレートを紹介します。
いくつか探してみましたが、個人的には小粋空間さんのテンプレートがオススメです。


※小粋空間: Movable Type テンプレート
http://www.koikikukan.com/archives/2005/09/01-235555.php

本文中の「12.テンプレート」を検索、そこから少し下部分にある「Movable Type 4」のXHTML 1.0 Strict(utf-8 版)ファイルをダウンロード。
zipファイルでも、lzhファイルでも、解凍できる方を選んで下さい。

解凍したら、mtmlファイルをテキストエディタで開いて、下記サイトを参考に、該当ファイルを入れ替えて下さい。


※小粋空間: Movable Type テンプレート
http://www.koikikukan.com/archives/2007/08/13-005555.php

「各ファイルは下記の対応にしたがって、デフォルトテンプレートと入れ替えてください」以下を参照して下さい。
・テンプレートモジュールの新規作成の方法は、左上にある「モジュールテンプレートを作成」を選択して下さい。
・ブログ記事作成の項でも書きましたが、Movable Type4の自動生成によって、長文のもの(特にスタイルシート)が途切れて保存される場合があります。
 保存に失敗した時は、落ち着いて再度貼り付け直して下さい。
 テキストエディタにバックアップを取っておくのは絶対に忘れないで下さい。でないと水の泡になる可能性があります。
・あと、テンプレートを保存すると、文末に勝手に改行が1つ追加されます。
 何度も編集していると、改行が増えまくってちょっとウザくなるので、テキストエディタ上で編集するのがよいでしょう。


ブログのデザインがだいたい決まったところで、次は改良やちょっとした表示変更設定についての紹介をして行きたいと思います。

→続きを読む

2007年9月19日

Movable Type4 導入方法について(記事作成篇)

続いて、Movable Typeで記事を書いてみましょう。
基本的に、ブログの管理ツールとほぼ同一です。


ブログ記事を書く

まずは、上部分から「新規作成」→「ブログ記事」を選択します。
すると、ブログの記事作成画面に変わります。


ブログの記事作成画面

ちょっと不親切な感じですが、ブログ経験者ならわかるインターフェース。
上の1行枠がタイトル欄、真ん中部分が記事欄です。
ブログの設定の際に「改行を変換」にしておくと、テキストエディタのように使用できるので楽です。
また、ブログの本文・追記の切り替えは、上部分にある「本文」「続き」で切り替え可能です。

タグやカテゴリ、キーワードなど、ブログと記載項目には大差ありません。
また、「出力ファイル名」と「トラックバック送信先URL」は、自動で入力されるため無記入でよいです。


自動保存中…

Movable Type4の最大の売りともいえる、記事の自動保存。
ブログの編集中に記事が何らかのことで失われても、再度ページを開いた時には復活している、という素晴らしいシステムです。
たしかに便利なのですが、上記のように「自動保存中」と表示されている時に「保存」ボタンを押してしまうと、場合によっては記事の後半部分が失われてしまうことがあるので、結局のところメモ帳などのテキストエディタで編集した方が良い場合も。
次のバージョンアップでは、この自動保存をするかしないか選択できるようにして欲しいです。

ブログの記事が書けたところで、「保存」ボタンを押すことで記事が生成され、設定してあればブログ内容を外部のサイトに通知します。
さて、記事も問題なく書けているようであれば、サイトのデザインにも目を向けてみましょう。

2007年9月18日

Movable Type4 導入方法について(ブログ設定篇)

さて、無事にインストールが完了したところで、Movable Type4で生成されるブログの設定を進めて行きましょう。


ログイン画面

設定したID/PASSを入力し、ログインをしましょう。
前の記事から続けて読んでいる方は、既に下記の画面が出ているかもしれません。


ダッシュボード

ここは「ダッシュボード」と呼ばれる所。
ここからいろいろと設定ページに飛ぶことが出来ます。
人によって順番はいろいろとありますが、簡単に説明できるところは簡単に、難しいと思うところは細かく説明したいと思います。


設定タブ

まずは、上部分から「設定」→「ブログの設定」を選択。
いろいろと設定できるので、順番に設定して行きましょう。
それぞれ設定したら、下部の「変更を保存」ボタンを押して保存するのを忘れずに。

◆全般
・「名前」でブログの名前を、「説明」でブログの説明を記述しましょう。
 特に「説明」は意外と目にすることが多くなるので、あまり恥ずかしくない程度に。
・ライセンスについては、ご自由に。

◆公開
・「サイトURL」と「サイトパス」については、インストール時に設定したものが入っているはずです。
・あとは特に変更しなくて良いと思います。

◆ブログ記事
・「新しく作成するブログ記事の初期値」の「テキストフォーマット」を「改行を変換」にしておきましょう。テキストエディタ気分で記述できます。
・AAや「…」などを多く使う方は、勝手に文字が置き換えられることを防ぐために「Word特有の文字を置き換える」の設定を「置き換えない」か「エンティティ」にした方が良いです。

◆コメント
・デフォルト設定では、「Movable Typeに登録されたユーザーしか書き込めない」という設定になっています。
 これを防ぐには、「コメントポリシー」を「すべて自動的に公開する」に設定しておきます。
・また、コメントスパムを防止するため書き込み時にパスワードを求める場合は「CAPTCHAプロバイダ」を選択します。
・コメント自体を受け付けない場合は、「コメントを受け付ける」のチェックを外して下さい。

◆トラックバック
・特に変更しなくて良いと思います。
・トラックバック自体を受け付けない場合は、「トラックバックを受け付ける」のチェックを外して下さい。

◆登録/認証
・コメントのユーザー認証を外すには、「認証なしコメント」だけをチェックして、あとのチェックは全て外して下さい。

◆スパム
・特に変更しなくて良いと思います。

◆ウェブサービス設定
・「更新通知」は、ブログに新規記事が書き込みされると、特定のサイトに更新を通知する機能です。
 「その他」部分には、大手サイトのアップデートピングを登録するといいでしょう。

Movable Type4 導入方法について(インストール篇)

ブログサイトの移転のためにMovable Type4(以下MT4)を導入したのですが、初心者にはちょっととっつきにくい感じですね…
おいらも詰まった部分とかを、備忘録がてら書いて行きたいと思います。


◆まずMT4の置き場所。
「独自のブログが作れる」というMT4ですが、レンタルサーバがないと話になりません。
かつ、MySQLなどデータベースが使用できるレンタルサーバでないといけません。
ここでは、さくらインターネットを例に進めて行きます。
※さくらインターネットの場合、「ライト」ではMySQLが使用できないので、「スタンダード」「プレミアム」「プロ」のサービスであることが前提です。
※もちろん、MySQL等が使える他社のサーバでもOKです。


◆MT4のインストール方法
MT4は有料、というイメージが大きいですが、実は非営利での使用であれば、個人・法人問わず無料でも使用できます。
ちなみにアフィリエイトは非営利の範囲内と書かれています。
下記引用です。

個人ライセンスとは、個人名義でダウンロードされ、個人所有のサーバーやレンタルサーバーで個人的な日記等を書くためのライセンスです。この用途であれば、アフィリエイトをおこなうことに問題はありません。


ダウンロードは下記のサイトから行うことが出来ます。

・Six Apart - Movable Type のライセンスと購入について
http://www.sixapart.jp/movabletype/license.html

・個人ライセンス(無償)ダウンロード
http://www.ecbuyers.com/b2c/link/sixapart/mt_personal/


結構ファイル容量が大きいので、注意して下さい。


◆サーバへのアップロード
MTをインストールする人はFTPは普通に使えるものだと信じているのですが…
もしもそうでなかったら、ちょっとハードルが高いかもしれません。
→FFFTPの説明についてはこちらのサイトが詳しいです。

また、ダウンロードしたファイルはきちんと解凍してください。


FTPにログインをして、cgi-binフォルダ(さくらの場合は任意)の中に、新規フォルダを作成します。
フォルダ名はmt4だの何だの、適当なファイル名を付けてください。
その中に、先ほど解凍したファイルをアップロードします。
※アスキー、バイナリの選択についてですが、FFFTPの「自動選択」に任せておいて大丈夫でした。

約12MBほどあるので、アップロードに失敗したら、中にあるフォルダごとにアップロードするといいです。


アップロードした図

Movable Type3と違って、mt-config.cgi-originalのリネーム、および編集を行わなくて良いというのが最も大きいです。
つい編集してしまうと、設定時にDBIエラーが発生してインストールできません。

アップロードが完了したら、cgiファイル、cgi-originalの属性を755に設定します。


※備忘録
ちなみに、バージョンアップ等で差し替えをする時は、上書きするよりも、個別フォルダを一旦削除してからアップするといいです。
それだけでアップロード失敗の可能性がだいぶ減ります。
※このとき、pluginsフォルダに自分で追加したプラグインは消さないように…
※mt4フォルダルートにある、cgiファイルなどは消さずにそのまま上書きでよいですが、mt-config.cgiファイル(MT4では自動生成されます)だけは上書きしないように…


ログインページ

次に、MT4をインストールしたフォルダにある、index.htmlファイルを読むようにURLを入力します。
上記のような画面が出れば、OKです。


残念なことに、ここから先のキャプチャを取り忘れていたので、こちらのサイトを見て進めて行くとよいです。
※Movable Type インストールガイド さくらインターネット編
http://www.movabletype.jp/documentation/mtinstall_mt_sakura.html


無事ブログページがアップできたら、次のステップです。

→続きを読む

1