今日のMovable Type 4.2：AjaxなWYSIWYGエディタ、FCKeditor 2.6 日本語版のテンプレート機能を使い倒す
2008年6月12日 02:38
Movable Typeで、上記画像のような出力結果を得たいときは、どんな作成手段をとるといいだろう？
条件として、ブログ記事やウェブページを作成・修正するのは、HTMLをほとんど知らない顧客だと仮定する。
この場合、直接ソースをタイプする方法はもちろん、Dremaweaver等のWYSIWYGエディタは使えない可能性が高いので、カスタムフィールドに頼ることになるだろうが、テンプレートが複数のパターンになったらどうだろう？MTではなく、MTOSを使わなければならない場合はどうだろう？僕ならFCKeditorで解決する！
カスタムフィールドが使えないMTOSでも、FCKeditorを少しカスタマイズしてあげれば、HTMLに詳しくない人でも簡単にスタイリッシュなエントリーが作れるようになる。
というのが今日のコラムのテーマ。自由自在にエントリーを作りたいけど、HTMLのスキルを持ってない顧客を抱えているWeb制作会社の方とか、企業サイトの更新管理を任されるWeb担当者の方に贈る。
まずは、出力ソースを見てほしい。
◇出力ソース
<div style="clear: both;"><img width="200" height="150" style="margin: 0pt 20px 20px 0pt; float: left;" class="mt-image-left" src="http://localhost/mtos42rc1/files/image/works/nekomimi2b.gif" alt="ネコミミデザイン" title="ネコミミデザイン" /> <div style="width: 255px; float: left;"> <ul> <li><strong>顧客</strong>：毎日コミュニケーションズ</li> <li><strong>カテゴリー</strong>：デモサイト</li> <li><strong>公開日</strong>：2008年3月22日</li> <li><strong>利用システム</strong>：Movable Type</li> <li><strong>コメント</strong>：書籍『Movable Type プロフェッショ ナル・スタイル MT4.1対応』の中で教 材として利用するサンプルサイトの完成 品です。<br /> もちろんMT4.1で構築し、構成、デザ イン、イラスト、マークアップすべてお こなっています。<br /> マークアップはW3Cの基準に準拠して ますので、正確さをご確認ください。ア クセシビリティにも注意を払っておりま す、スタイルシートをはずしてご覧くだ さい。<br /> 書籍では、カスタムテンプレートセッ トで配布しています。</li> <li><strong>URL</strong>：<a href="http://nekomimi.dakiny.com" target="_blank">http://nekomimi.dakiny.com</a></li> </ul> </div> </div>
Web Site Expert #18にも書いたけど、「Movable Type Open Source」はカスタムフィールドが使えない。その上、今のところ代用プラグインもない。でも、FCKeditorをカスタマイズすれば立派な代用品になる。しかも、XHTML＋CSSがわかりさえすれば簡単にカスタマイズできる。
◆新規ブログ記事やウェブページの作成
1. ツールバーセットから、「テンプレート」を選び、任意のカスタムテンプレートを選んでクリックする。
2. 画像を変更したり、文言を修正して保存する。
予めテンプレートをきちんと作っておけば、たったこれだけで、エントリーは完成。とても簡単だ。
以下、カスタマイズ方法を説明。
※このテンプレートは僕が作ったものなので標準には含まれてない。
◆カスタムテンプレートの作り方
▼事前準備：ファイルマネージャーを使えるようにする。
「SourceForge.JP: FCKeditor Japan Project File List」から「FCKeditor_Customkit_v22.zip」をダウンロードする。
1.ダウンロードしたファイルを解凍して以下のファイルを探し
/mt-static/plugins/FCKeditor/fckeditor/editor/filemanager/connectors/php/config.php
33行目と40行目のパスを利用者のWebのファイル保存ディレクトリの環境に書き換える。
// Path to user files relative to the document root.
$Config['UserFilesPath'] = 'http://www.hoge.com/files/' ;// Fill the following value it you prefer to specify the absolute path for the
// user files directory. Usefull if you are using a virtual directory, symbolic
// link or alias. Examples: 'C:\\MySite\\userfiles\\' or '/root/mysite/userfiles/'.
// Attention: The above 'UserFilesPath' must point to the same directory.
$Config['UserFilesAbsolutePath'] = '/virtual/hoge/public_html/www.hoge.com/files/' ;
僕の例（赤字が変更部分）
// Path to user files relative to the document root.
$Config['UserFilesPath'] = 'http://www.dakiny.com/archives/' ;// Fill the following value it you prefer to specify the absolute path for the
// user files directory. Usefull if you are using a virtual directory, symbolic
// link or alias. Examples: 'C:\\MySite\\userfiles\\' or '/root/mysite/userfiles/'.
// Attention: The above 'UserFilesPath' must point to the same directory.
$Config['UserFilesAbsolutePath'] = '/virtual/dakiny/public_html/www.dakiny.com/archives/' ;
変更が完了したら保存してする。画像のアップロードだけならば、これだけで動作する。
2. mt-staticを上書きインストール。
3. ブラウザを再起動して確認。
フィルマネージャーを起動すると、設定した場所に、「image」という名のフォルダーが自動的に作られる。あらかじめ「image」フォルダーがある場合は、そこに画像がアップロードされる。
画像がアップロードできない場合は、パーミッションに問題がある場合が多いので、書き込み可にしてあげること。
参考まで、CORESERVER.JPを使ってる僕は755にしてある。
▼インストール前の注意
セーフモード対策で下記のファイルを同梱してある。
/mt-static/plugins/FCKeditor/fckeditor/editor/filemanager/connectors/php/.htaccess
不要な方はアップロード前に削除しないと不具合がでる。
※ローカルサーバーの場合はまず不要
▼カスタムテンプレートのファイル構造
FCKeditorのテンプレートは、XHTMLファイルと、アイコン画像に分けられる。
XHTMLソースの場所は下記
/mt-static/plugins/FCKeditor/fckeditor/fcktemplates.xml
アイコンは下記
/mt-static/plugins/FCKeditor/fckeditor/editor/dialog/fck_template/images/
にある。
▼カスタムテンプレートの作り方
- アイコンを作る。画像ソフトで100px×70pxの大きさで作り、GIFで保存。
- ソースを編集する。下記ソースをご覧いただきたい。
◇テンプレートのXMLファイルソース
カスタムテンプレートはXMLファイルにXHTMLを埋め込んで作る。下記ソースの文字背景に色がついている部分がカスタムテンプレートの１セット。
<?xml version="1.0" encoding="utf-8" ?>
<!--
* FCKeditor - The text editor for Internet - http://www.fckeditor.net
* Copyright (C) 2003-2008 Frederico Caldeira Knabben
*
* == BEGIN LICENSE ==
*
* Licensed under the terms of any of the following licenses at your
* choice:
*
* - GNU General Public License Version 2 or later (the "GPL")
* http://www.gnu.org/licenses/gpl.html
*
* - GNU Lesser General Public License Version 2.1 or later (the "LGPL")
* http://www.gnu.org/licenses/lgpl.html
*
* - Mozilla Public License Version 1.1 or later (the "MPL")
* http://www.mozilla.org/MPL/MPL-1.1.html
*
* == END LICENSE ==
*
* This is the sample templates definitions file. It makes the "templates"
* command completely customizable.
*
* See FCKConfig.TemplatesXmlPath in the configuration file.
-->
<Templates imagesBasePath="fck_template/images/"> <Template title="商品案内" image="template5.gif">
<Description>左カラムに商品画像、右カラムに商品説明が入ります。</Description> <Html>
<![CDATA[
<div style="clear: both;">
<img style="margin: 0pt 20px 20px 0pt; float: left;" class="mt-image-left" src="http://localhost/mtos42rc1/files/image/works/nekomimi2b.gif" alt="ネコミミデザイン" title="ネコミミデザイン" height="150" width="200">
<div style="width: 255px;float: left;">
<ul>
<li><strong>顧客</strong>：毎日コミュニケーションズ</li>
<li><strong>カテゴリー</strong>：デモサイト</li>
<li><strong>公開日</strong>：2008年3月22日</li>
<li><strong>利用システム</strong>：Movable Type</li>
<li><strong>コメント</strong>：書籍『Movable Type プロフェッショ
ナル・スタイル　MT4.1対応』の中で教
材として利用するサンプルサイトの完成
品です。<br>
もちろんMT4.1で構築し、構成、デザ
イン、イラスト、マークアップすべてお
こなっています。<br>
マークアップはW3Cの基準に準拠して
ますので、正確さをご確認ください。ア
クセシビリティにも注意を払っておりま
す、スタイルシートをはずしてご覧くだ
さい。<br>
書籍では、カスタムテンプレートセッ
トで配布しています。</li>
<li><strong>URL</strong>：<a href="http://nekomimi.dakiny.com" target="_blank">http://nekomimi.dakiny.com</a></li>
</ul>
</div>
</div>
]]>
</Html> </Template> </Templates>
グーレ文字の部分は触る必要はない。構造は以下。
<Template title="テンプレートのタイトル" image="hoge.gif"> <Description>ここにはテンプレートの概要を記述する</Description> <Html> <![CDATA[ 任意のXHTMLソース ]]> </Html> </Template>
仕組みさえ理解できれば、テンプレートを作るのはさほど難しくない。「任意のXHTMLソース」部分に、XHTMLを入力するだけで、かなり複雑なテンプレートでも容易に作成できる。
タグの中以外は、日本語は使えないので、対処方法としては「数値実体参照」を利用することになる。
数値実体参照の変換は下記サイト等を利用いただければいいだろう。
文字列 → 数値実体参照変換
http://yasu.asuka.net/orkut/conv.html
Unicode Number Entity Reference Converter
http://ideas.paunix.org/utfrefcon.htm
◆実際の出力結果
上記のテンプレートを利用すると、こんな画面になる。
- 顧客：毎日コミュニケーションズ
- カテゴリー：デモサイト
- 公開日：2008年3月22日
- 利用システム：Movable Type
- コメント：書籍『Movable Type プロフェッショ ナル・スタイル MT4.1対応』の中で教 材として利用するサンプルサイトの完成 品です。
もちろんMT4.1で構築し、構成、デザ イン、イラスト、マークアップすべてお こなっています。
マークアップはW3Cの基準に準拠して ますので、正確さをご確認ください。ア クセシビリティにも注意を払っておりま す、スタイルシートをはずしてご覧くだ さい。
書籍では、カスタムテンプレートセッ トで配布しています。 - URL：http://nekomimi.dakiny.com
◆まとめ：予算もスキルがない場合は、諦めるんじゃなくて、アイデアで勝負すればいい！
予算もスキルもない場合は、新規作成や修正は運用で解決しがちだが、「ちょっと待て！」と言いたい。運用解決は、顧客は妥協しているだけで満足はしていない。
まして、運用マニュアルを作るのは楽な仕事じゃない。簡単なようで実は大変な作業だ。スキルのない人が対象であるほど、きちんとしたマニュアルを作らねばならない。
そんな時は、まず他の方法がないかどうか考え抜くこと。FCKeditorをカスマイズしテンプレートを作れば、更新にスキルはほとんど必要ない。文字入力が出来て、画像のアップロードができる人なら、誰でもちょっとしたブログ記事やウェブページを作成することができる。
余談
実は、このブログに書いてあることは、6月21日に開催する、WebSig24/7MT4分科会第2回勉強会で行うワークショップの資料として作ったものだが、Open Sourceは利用者に対してもオープンであるべきなので、ワークショップに先行して一般公開とさせていただいた。
参考になれば幸い。
投稿者: Dakiny 日時: 2008年6月12日 02:38 | 
| 
トラックバック
このエントリーのトラックバックURL:
http://www.dakiny.com/mtos/mt-tb.cgi/1647
※文章内容と関係のないトラックバックは固くお断り。
コメント
はじめまして。
今度、WebSig24/7MT4分科会第2回勉強会に参加します。
流れがわかりました。
当日に確認できるよう、
準備進めておきます。
よろしくお願いいたします！
投稿者: ゴトウ | 2008年6月12日 07:14
> ゴトウさん
わざわざ、ブログにコメント残していただき、ありがとうございます。
こちらこそ、よろしくお願いします。
投稿者: Dakiny
|
2008年6月13日 17:49