CMS

MovableTypeカスタムフィールドの、filtersの動作について

Movable Type のカスタムフィールドで「テキスト(複数行)」という種類のフィールドを利用する際、テキストエリアへの入力内容に改行や空行を含めても、出力される文字列の改行や空行はすべて除去された状態で出力されてしまいます。

本エントリーでは、この事象を解消する方法を紹介します。
小粋空間:カスタムフィールドのテキストエリアに入力した改行をページに反映させる

mtformat

複数行のカスタムフィールドを、本文と同じように<p>と<br />でマークアップするには、「filters="default"」モディファイアを指定するのが良いとされています。

ですが、この方法では詳細に改行を制御できません。
旧来からあった「convert_breaks」モディファイアとどう違うのか、というのも気になりますが、シックスアパート社からも詳細な解説は出ていません。

MovableType4.2で、「改行を変換」「リッチテキスト」などの各フォーマットでのカスタムフィールドの挙動を、詳しく検証してみました。

結論から言うと、
「複数行カスタムフィールドの改行や空行は、再構築時に反映されない」
という解説は、MovableType4.2においては正解ではありません。

複数行カスタムフィールドにモディファイアを何も指定しなかった場合は、「各記事の本文・追記に指定したテキストフォーマット」が優先されるのです。

なので、IDが1の記事のフォーマットが「改行を変換」ならば本文と同じですが、IDが2の記事で「なし」や「リッチテキスト(WYSIWYGエディタ含む)」に変更すると、本文フォーマットが優先され、改行がなくなってしまいます。

MovableType4は後者のフォーマットで使っている人が多いために、上記のような定説ができたのか、バージョン4.0、4.1の挙動が違ったのかはちょっとわかりません。すいません。

mtformat2

なので、何らかのモディファイアでカスタムフィールドの書式を縛ることになるのですが、
一般に推薦される「filters="__default__"」は
完全に固定的なものではありません。

まれなケースですが、フォーマットを「markdown」にしたときのみ、<br />が書き出されず、意図した表示になりません。
また、

  • 「どんなフォーマットを使用しても改行を変換させない」
  • 「<p>はいらないが<br />は変換したい」

ということは、「filters="__default__"」ではできません。
(引数の__default__を別の値にする方法も考えられますが、MovableTypeのコアファイルを調べてもわかりませんでした)
この場合は、昔からあった「convert_breaks」を使用するのが確実なようです。

convert_breaksモディファイアは、本文でのテキストフォーマットを「常に無視」します。
また、「convert_breaks="0"」で、改行を変換させないようにできます。

<br />のみを変換する「nl2br」もconvert_breaksと同じ性質を持っているので、
ちょっと複雑になりますが、下記のようにすると<br />のみ有効になります。

<$mt:CF_HogeHoge convert_breaks="0" nl2br="1"$>

自分だけがブログをカスタマイズ・運用している場合や、カスタムフィールドが本文の一部であればフォーマットが変わっても良いのですが、
大抵のカスタムフィールドは特定のマークアップを行った箇所に出力したり、テーブルのセル内に出力したりと、イレギュラーな使われ方をします。
同じカスタムフィールドでも、出力先のテンプレートによって改行の個別制御が必要なこともあります。

「更新したときの気分」でフォーマットが変わってしまってはのちのち面倒ですし、CMSとしてMovableTypeの構築をする場合は、更新担当者のあらゆる設定変更を想定しなければなりません。

プログラミングにも通じることですが、的確なグローバル・モディファイアを指定することで、想定外の不具合をできるだけ予防しておきたいものです。

CMS

MovableTypeのMTVarまわりで変わったリストを作る

mt-entrylist

先日、MovableTypeで図のような、各カテゴリーのリストが左右二段になり、連番を振ったサイトマップを作りました。

HTMLだと、このような感じです。

※数字もデザインしたかったので、olではなくulでコーディングしています。
olだった場合、連番の代わりにstart属性を与えることになります。

一般に横並びのリストの場合、普通にリスティングしてから、それぞれの<li>要素をCSSのfloatで流すのですが、それだと視線が左右に流れて、あまり見通しが良くありません。
サイトマップがトップページになるデザインだったこともあり、もっと工夫して、新しいパターンを考えたいと思ったのです。

リストを作るにあたって、以下のように考えました。

  1. 出力される件数を調べる
  2. 件数を2で割る
  3. 剰余(1)が出たら前半のリストの件数に加える
  4. 二回に分けてリスティング
  5. 併せて通し番号も振る

PHPを使って、前もって配列にリストを入れ込めばそんなに難しい処理ではありません。
ですが、静的ページへの出力を考えて、できるだけMovableTypeのタグだけでできないものかと思いました。


結局、できたのがこれです。

※改行と、MTIgnoreのコメントを加えています
※2009/01/08 mtIfNonZeroのtagモディファイアを間違って書いてたので修正

興味がある方は、上のをコピペして、実際に試してみてください。

うーん…
MTVarだけで処理しようとすると、複雑すぎます…(´~`;

MovableTypeは4.1以降、配列が登場するので、出力結果を配列に入れ込んで__loop__で繰り返し処理する方法があったかもしれませんが、リストを半分に割ってオフセットしなければならない点は変わりません。

MTIfのtestモディファイアを使うと、Perlの式での条件分岐ができます。
それをうまく利用すれば、前半の計算はいらないかもしれません。

見た目の割に複雑なことはしていないので再構築のパフォーマンスが悪くなることはないのですが、拡張性を考えるともっと改良が必要みたいです。

CMS

絵描き・写真家ブロガーを簡単・無料で受け止める余地はないのか

西村様のお仕事を手がけているとき、ちょうどはてなブックマークでこんなホッテントリがありました。

絵描きさんね、blogに移行したはいいけど不評とかね。見た人には見づらいって言われるし、イラストサイトには向いてないとか、よく言われるんです。ホントに。しょんぼり。

rumblefish – イラストサイトにblogが向いていない理由

こう言ってはなんですが、写真やイラストにこだわりを持つ人は、Web製作者にとって最もハードルが高い存在です。
画像というデザイン性が高いが融通の利かないものと、日記や感想という融通が利くがデザイン性が薄いものの両共存を、一般の人より高いレベルで要求してくるからです。

私もFC2ブログ用にギャラリーテンプレートを作ってみたこともありますが、写真やイラストを一枚一枚、納得行くように見せようとすると、既存の「ブログ的レイアウト」を根本からブチ壊したり、ページ全体に関わるJavaScriptをからめなければなりません。

結局、安定性や更新のしやすさを重視するとMovableType・WordPressといった有料サーバーに設置するブログシステムをいじることになります。
また、写真の並べ方、見せ方、日記や感想をどう扱うかという好みも一人ひとり違うので、規格化も難しいものです。

現状では、要望に応えられるギャラリーを作るには、やっぱりお金がかかってしまうのです^^;


今のところ、この辺がいちばん充実しているのは、MovableType4から実装された「アイテム管理」機能ですね。

mtasset

独自タグ「MTAssets」を使用することで、記事で使用されている写真のみを全て抽出するのはもちろん、余分なファイルを作らず自由なサイズでサムネイル表示したり、写真に記事とは別のタグをつけて一覧を制御したりと、非常に柔軟なギャラリーサイトを生成することができます。

WordPress2.5の「メディアライブラリー」もかなり近いことができるようなのですが、流石に記事とデータベース単位で密接につながってはいないようです。
(この辺、まだWP2.5に対する日本語情報が少ないので私も勉強しなくちゃです)

ということは、MTはライセンスを取れば不特定多数へのレンタルもできるわけなのだから、どっかの企業が
絵描き・写真家向けのテンプレートばかり用意した、MovableTypeレンタルサービス
とか立ち上げたら、受け入れられるんじゃないのか?と。

でも、MTAssetsはサーバーに単独設置するMovableTypeだからこそ可能なシステムであって、不特定多数の膨大な写真とそれに関連するデータベースを無理なく扱えるサーバーとなると、なかなか大変でしょうね。資金もかかるし^^;

CMS

WordPress用本文制御プラグイン「Excontent」

Excontentは、WordPressの記事本文の出力方法を制御するプラグインです。
通常は本文・追記と追記のリンクが自動出力される記事部分を、アーカイブの種類に関係なく個別に出力します。

version1.1(2008-7-3)
ex_morelink関数に間違いがあったので修正しました。

» ダウンロードはこちら< /a>

使用した場合のスクリーンショットはこちら

導入方法

  1. 解凍したzipフォルダに入っている「excontent.php」を、WordPressの「wp-content/plugins」にアップロードします。
  2. その後管理画面にログインし、「Excontent」がプラグインリストに含まれているのを確認してください。
  3. 有効化」すると、次項の関数が使用できるようになります。

拡張される関数

基本の<?php the_content(); ?>の代用として、以下の関数を使用できます。

  • <?php the_excontent([string]display, [boolean]filters); ?>
  • <?php the_exmorelink( [string]more_link_text, [string]before, [string]after); ?>

パラメータ

the_excontent

エントリーループ内で、本文を表示します。

記述例
<?php the_excontent(‘body’, false); ?>

[string]display

(空:default)
<!– more –>の区切りを無視し、全ての記事を表示します。

‘body’
インデックス・アーカイブの区分を無視し、常に<!– more –>の区切り以前を表示します。

‘more’
インデックス・アーカイブの区分を無視し、常に<!– more –>の区切り以降を表示します。

<!– more –>がない場合は何も表示しません。

[boolean]filters

true (default)
記事編集画面での段落(Enter一回押し)を<p>要素に変換します。

false

入力した内容をそのまま表示します(改行の変換は行いません)

the_exmorelink

パーマネントリンクを表示します。シングルページでは何も表示されません。

記述例
<?php the_exmorelink(’[続きを読む]’, ’<p class="extended">’, ’</p>’); ?>

[string]more_link_text
パーマネントリンクの文章を指定します。
[string]before
パーマネントリンクの前に表示する文章を指定します。
[string]after
パーマネントリンクの後に表示する文章を指定します。

利用規定

WordPressはオープンソースのフリーウェアです。
WordPressのコアファイルに関わっているこのプラグインもオープンソース規定に基づいて頒布します。
商用利用、改変、スキンのfunction.phpへの組み込み等、ご自由にお使いください。

尚、基本的に改良の保障はいたしません。

動作確認

WordPress 2.6以降、WordPressME 2.0、WordPressME 2.2のデフォルト環境で動作を確認しています。

make a donation

このプラグインは、フリーウェアです。

でも、あなたのお役に立ちましたら、うぇびんぐさんに何かおごってください^^*

CMS

FC2・MovableType・WordPress...テンプレート・スキン構造の比較

今日は一日、Nucleusの専門書を読んでいました。
テンプレートの仕様や構造はひととおり理解したので、各レンタルブログ・サーバー設置ブログのテンプレートとスキンの仕様をまとめてみました。

あくまで概要ですが、ブログ移転や配布テンプレートの他システム版を考えている方は参考にしてください。

FC2ブログ・忍者ブログ

template_fc2_nin

レンタルブログはご存知の方も多いと思いますが、比較元として掲載します(笑)

テンプレートは「HTML」「CSS」の一枚ずつしかありません。
この一枚のテンプレートファイルの中で、<!–category_area–> (FC2)などのページタイプ条件分岐を組み込み、出力するHTMLを切り分けていきます。条件分岐は少ないですが、livedoorやJUGEMもこのタイプです。

CSSには独自タグを記述することはできません。一般の静的サイトのスタイルシートとほぼ同じと考えて問題ありません。

サイドの、利用者が任意で変更できる部分は、最近は「プラグイン」という名称になっているサービスが多いようです(厳密には、プラグインと言わないのでは…と思いますが)。
FC2・忍者の場合、呼び出す箇所は製作側が自由に指定できます。FC2は3セット、忍者は5セットまでです。

Seesaaブログ

template_seesaa

レンタルブログの中でも、Seesaaは少し構造が異なります。
利用者が自由に変更できる部分は「コンテンツ」と呼ばれ、普通のブログでは本体に属する「記事」もここに含まれます。
セットの場所はヘッダー・メイン・左サイド・右サイド・フッターに一つずつと決まっています。

つまりはヘッダーにブログパーツを入れたり右サイドに記事を入れたりできてしまうので、ブログサービスの中ではかなり扱いにくい分、自由度が高いと言えます。

MovableType

template_mt

MovableTypeはテンプレート構造が細かいのと、CSSもテンプレートで作成できる点が特徴です。
テキスト形式であれば拡張子は問いません。独自タグも有効になります。

テンプレートは「トップページ・アーカイブ・システム」の3ジャンルに分かれていて、必要となるものは全て一枚ずつテンプレートを作成します。
使い回したいコードは「モジュール」として、ユーザーが自由変更できる部分は「ウィジェットセット」として保存し、各テンプレートから呼び出して使用します。

はじめから一般的なブログに必要なテンプレートが全て揃っており、必要ないものを各自削除するか無効化するかを選択することになります。
この仕様と、「モジュールがモジュールを呼び出す」という複雑なデフォルトテンプレートのために、カスタマイズ初心者には少しとっつきにくくなっています。

WordPress

template_wp

WordPressは「オーバーライド」と呼ばれる仕様が特徴です。

最低「index.php」というテンプレートが一枚あれば、デザインテーマが成立します。
他に「home.php」「archive.php」などの専用テンプレートがあればそれを優先しますが、なければ「index.php」の構造をそのまま流用するので、全て用意する必要はありません。

使い回す部分で、大抵のブログに存在するヘッダーやフッターは「パーツテンプレート」、その他各自用意する部品は普通のphpとなります(と言うか全部PHPなんですが)。

「category-(カテゴリーID).php」というように、特定カテゴリー用のテンプレートを作るのも簡単なので、ピンポイント構築や、カスタマイズを勉強しながら暇なときにブログを拡張、ということができるお手軽な構造です。

各テンプレートのファイル名をちゃんと覚えておく必要があるのと、サイドバーのカスタマイズを気軽に出来ないこと、独自タグの記法が分かりにくいのが難点です。
※PHPの関数を、ほぼ素の状態で書きます。細かいこというとテンプレートとは呼べない仕様です

Nucleus

template_nucleus

Nucleusは「テンプレート」の概念が他のブログと大きく異なっています。

テンプレートは系統ごと(大体はインデックス・カテゴリー・個別など、他ブログと同様のタイプで分けるようです)にセットを作成し、
「記事を繰り返す場合の最初・本文・最後」「画像を貼った場合のHTML表記」
「コメントを繰り返す場合の最初・本文・最後」と、細かく指定していきます。

その上で、インデックス・アーカイブなどの「ページ」毎に
「どのテンプレートで」「どの形式のリストを」「何件まで表示するか」
を独自タグで指定して呼び出します。
トップページの新着記事リストであれば、「indexテンプレートで、記事リストを10件」となります。

正直、猛烈に理解しにくい仕様ですが、使いこなせば
「インデックスはサムネイル込みの一覧で」
「日別や検索結果はタイトルだけ、でもカテゴリーは概要も表示」
「個別記事は全部盛り」という細かいデザイン指定ができると思います。

まとめ

CMSをインストールしたレポートをまとめたとき同様、今回もWordPressの簡単さが際立つ形になったなあ…というのが感想です。

個人的には、プラグインやPHPに頼らなくても基本仕様でかなり細かいことができ、タグ名称が直感的なMovableTypeが好みですが、実際にカスタマイズしてみるとWordPressのオーバーライド機能はほんとうに楽です。

まずはindex.phpだけ使って、
超簡単な日記から構築してみてはいかがでしょうか。