CMS「Etomite」はWebデザイナーが扱いやすいか?~(2)デザイン編


オープンソースのCMS(コンテンツ管理システム) "Etomite"についての2回目は、導入・運用時にデザイナーの扱いやすさはどうか?という辺りを中心に評価していきます。

---§---§---§---§---§---§---§---§---§---

(2)デザイナーが扱いやすいか?
導入コストや納期、さらに運用中のデザインの改編コストなどにも関わる点です。
デザイン要素をさわるだけ、逆に機能(プログラム)追加だけのために、いちいちプログラマ、デザイナーを総動員するツールでは使い物になりません。デザインがテンプレート・ドリブンであることは最低限必須で、さらに扱いやすさはどうかという点をチェックしました。

※デザイナーとひとくくりしていますが、ビジネス用途でという前提なので、Webデザインに関するスキルはもちろん、(X)HTML/CSSマークアップのスキルをもつ担当者を想定しています。

■日本語化
Etomiteはダブルバイト言語をサポートしており、日本語化は容易です。

日本語Languageファイル(japanese.inc.php)を本家フォーラム

Etomite > Etomite Community > Translations > Japanese

からダウンロードしてきて、

(Etomite設置場所)/manager/includes/lang

にアップロードします。

次に、Etomiteの管理パネルで文字コードを指定します。先ほどの言語ファイルの文字コードと合わせることがポイントです。このjapanese.inc.phpはEUCで書かれていますので、もしこだわりがないのなら
[管理>Etomite設定>サイト設定]のエンコーディングで「Japanese〔EUC〕-euc-jp」を選択すればOKです。

※もしUTF-8など他の文字コードにしたい場合は、あらかじめjapanese.inc.phpを目的の文字コードに変換しておきます。

※ちなみに、この作業はIEではなくFireFox、Operaなどのブラウザで行うのがよさそうです(設定過程で激しく文字化けして先に進めなくなります)。

■テンプレート、CSSについて
Etomiteでは、管理パネルの[リソース>リソース管理>テンプレート管理]でテンプレートを作成・編集します。特に難しい技はいらず、(X)HTMLでガリガリ書いていくだけです。

他のCMSなどでは、ヘッダ部はヘッダ用、本文は本文用・・・と1ページが複数のテンプレート・ファイルで構成されているソフトもありますが、Etomiteの場合は単純で、1テンプレ完結型です。しかも直接ファイルを編集しないので(管理パネル上で編集するため、FTPなど不要)、対象となるテンプレ・ファイルを探し回ることもなく、それゆえデザイナーが把握しやすいつくりになっていると思います。

テンプレートは複数登録可能で、TOPページを含め各ページごとにテンプレートを選択できます。つまり、「会社情報」「サービス・プロダクト」などコンテンツ・グループ毎にデザインやメニューを変えられるというわけです。


■スニペット(Snippet・一種のアドイン)、チャンク(Chunk)の組み込み方
[リソース>リソース管理]

スニペットやチャンクは拡張機能の一種です。
両者の違いは、スニペットは「生の」PHPコードで、これに対してチャンクは(X)HTMLのコード(PHPは動作しない)という点です。

動的生成パーツはスニペットで、共通で表示させるHTMLパーツはチャンクとして登録しておき、テンプレート上の表示させたい場所に

[[(スニペット名)]] や{{(チャンク名)}}

のように書くと呼び出されます。

Etomiteの場合、MovableTypeのような独自のテンプレート・タグは本当に最小限しかなく、このスニペットやチャンクを使って機能を拡張していくのが主流です。

スニペットは、本家のSnippet Library(スニペットライブラリー)にいろいろ揃っていますので、独自に開発する前にまずこちらを覗いてみてください。

導入にはインストールというほどの作業は必要なく、Library上のソースをコピーして管理パネルに&ペースト、好みのスニペット名をつけて保存するだけです。一方チャンクの方はHTMLの固まりですから部品としてさらに容易に使いこなせると思います。

■他サイトへのリンク
[コンテンツ>ウェブリンクの作成]

メニューの中に、他サイトへのリンクを加えたい場合があろうかと思います。このときは、ドキュメントの作成(通常のページ作成)ではなく、「ウェブリンクの作成」を選び、ジャンプ先のURLなど入力します。

Etomiteではこの「ウェブリンク」は「ドキュメント」と同様、親ドキュメントの指定ができるので、下記のように、「会社情報」配下にリンクメニュー(例ではIR情報の他サイト)をおきたい場合なども対応可能です。

TOPページ
 ├ 会社情報
 │  ├ ドキュメント1
 │  ├ ドキュメント2
 │  ├ IR情報の他サイト(ウェブリンク)
 │  ├ ドキュメント3
 ├ 製品とサービス
・・・


■WISWIGエディタは?
コンテンツ編集用のエディタは、TinyMCEHTMLAreaのいずれかを選択します。Etomiteで残念なのは、HTMLAreaなどの使い勝手の悪さと、吐き出すコードの品質が今ひとつという点です。
この点は、本家フォーラムの3/21付けのアナウンスによればFCKeditor導入が予定されているようですので、期待したいところです。

次回はEtomiteの評価記事3回目です。「(3) 変化への対応力はあるか?」 と題して書こうと思います。