Web制作現場で感じたPowerCMSのメリット
2016年2月8日（月）株式会社LAB フロントエンド・エンジニア
安倍 英樹

講演者紹介安倍 英樹（あべ ひでき）•

2007年から東京の大手Web制作会社に勤務。フロントエンド・エンジニアとしての活動を始める。

•

2011年に福山市へUターンし、現在に至る。

•

Movable Type歴は約10年。

このセッションのポイント
PowerCMSの導入により、•柔軟にコンテンツを構成・提供することが可能になる。

•

カスタマイズがしやすく、分かりやすい管理画面にすることができる。

このセッションの講演内容•前提となる用語の解説•

Webサイトでよく見られるコンテンツ提供例とMovable Type + PowerCMSでの実現方法•

分かりやすい管理画面の作成例

前提となる用語の解説 1•

ウェブサイト
ごく一般的に「ウェブサイト」と呼ばれるもの全体を管理する単位•

ブログ
ニュース・IR情報など、情報のまとまりを管理する単位。
ブログ ディレクトリ

前提となる用語の解説 2•

記事
主に時系列に沿って公開していくページ。
ニュース・コラムなどを掲載するページ。

•ウェブページ
記事以外のページ。
製品紹介ページ・会社案内ページなど。

おことわり•万一講演中にインターネットに接続できなかった場合を考慮して、また分かりやすさの向上のため、事例として取り上げるWebサイトの画面をキャプチャさせていただきました。

Webサイトでよく見られるコンテンツ提供例とMovable Type + PowerCMSでの実現方法

ニュースの一部をピックアップ表示するパターンhttp://www.univ.gakushuin.ac.jp/news/

ピックアップ表示の実装の概要•

時系列で表示しているニュースの他に、特に見てもらいたい記事をピックアップして別枠に表示している•

例えば…
企業：注力している製品の開発スケジュール、自治体：マイナンバーの通知について、など

PowerCMSでの実演

ピックアップ表示のポイント•

記事の一覧からピックアップしたい記事をドラッグ＆ドロップする操作で実現できる•

ピックアップ表示が可能な数は制作時にご相談（デザイン等も勘案して決定）•

日時指定公開と同時にピックアップ表示も可能通常のMovable Typeだと…
•

カスタムフィールド or カテゴリで実現•

表示/非表示の設定が手間•

テンプレートも複雑になる可能性

複数のコンテンツから記事・ページをピックアップするパターン

http://www.ctc-g.co.jp/

実装の概要•ブログ（ ディレクトリ・情報のまとまり）を越えて、記事・ウェブページをピックアップし表示する。

•

例えば…
企業：製品情報・IR情報などからピックアップおすすめの情報・旬の情報をピックアップしてユーザーへ推薦。活気のある観光サイトに。
http://tomomonogatari.com/

PowerCMSでの実演

ポイント
•

記事・ページの一覧からピックアップしたい記
事・ページをドラッグ＆ドロップする操作で実現できる•

記事・ページの並び順もドラッグ＆ドロップで自由に入れ替えることができる

ニュースの事例と同様に操作できるページ毎にお問い合わせ先を表示するパターン

実装の概要•コンテンツ毎にお問い合せ先を表示したい•

例えば…
企業：製品毎にお問い合わせ窓口を設けている自治体：コンテンツ毎に担当する部署が異なる

http://www.city.fukuyama.hiroshima.jp/soshiki/norinsuisan/2067.html

ポイント1•

部署・お問い合せ先などの情報を、「カスタムオブジェクト」機能によりデータベースのように管理。

ポイント2•

CSV形式のファイルをアップロードすることにより、データの一括登録・一括更新が可能（PowerCMSはCSVインポート機能標準搭載）•

1件〜数件データを登録後、管理画面よりCSV形式のファイルをダウンロードすると編集しやすい。

ポイント3•「カスタムオブジェクト」のデータは、「カスタムフィールドPro」機能で追加される独自のフィールド形式により、簡単な操作で記事・ウェブページとデータを紐付けすることができるテンプレート例（参考）<mt:PageDataContactTo><h3>お問い合せ先</h3><h4><$mt:DepartmentName$></h4><table><tr><th scope="row">TEL</th><td><$mt:DepartmentDataTel$></td>
</tr>
<tr>
<th scope="row">FAX</th><td><$mt:DepartmentDataFax$></td></tr></table></mt:PageDataContactTo>

ポイント4•

データ入力画面の項目は、管理画面において簡単に追加することができる

分かりやすい
管理画面の作成例

定型入力フィールドの事例

実装例•

例えば自動車や船舶の仕様表

Movable Type
標準機能の場合

Movable Type標準機能の場合•入力するフィールド数の分だけカスタムフィール
ドが縦に並んでいくので、視認性が悪くなる•

フィールド表示順の制御も手間がかかるPowerCMSの「スニペットフィールド機能」を利用した場合

PowerCMSの場合•オリジナルの入力フィールドをHTML・MTML（Movable Typeのテンプレートを記述する言語）で作成することで、必要な入力フィールドを分かりやすくまとめることができる

入力フィールドのコード例（参考）<table class="table-cf-ship-spec"><tbody><tr><th scope="row">全長×幅×深さ</th><td><input type="text" name="size" value="<$mt:Var
name="size" escape="html"$>"></td>
</tr>
<tr>
<th scope="row">載貨重量トン数</th><td><input type="text" name="burden" value="<$mt:Var
name="burden" escape="html"$>"></td></tr></tbody></table>カスタムダッシュボードここまでのデモは、全てこのカスタムダッシュボードから編集画面にアクセスできるようにしていましたポイント•

HTML/CSSで自由に管理画面のレイアウトが可能•

制作会社とお客さまの打ち合わせにより、使いやすい管理画面を作ることができるダッシュボードのコード例（参考）
これもHTMLだけで書けます。MTMLも使えます。
<div class="dashboard-container"><style scoped>/* ダッシュボードのスタイル。scoped属性が効くようになればベスト。 */</style><p><$mt:Date format="%Y年%m月%d日 %H:%M"$>です。<$mt:AuthorDisplayName$>さん（ID:<$mt:AuthorID$>）こんにちは。</p><ul class="list-dashboard-01"><li><a href="/mt/mt.cgi?
__mode=list&amp;_type=department&amp;class=department&amp;blog_id=2"><
img src="/assets/cms/icon_database.png" alt="" class="icon">部署一覧</a>/* 以降ボタンの繰り返し */</ul></div><!-- /.dashboard-container -->補足制作会社とPowerCMS•

Movable Typeを知っているエンジニアであれば、少しの追加学習で先に紹介した機能が使えるようになる•（MT::Objectを利用して拡張していれば）特定の技術者に依存したCMSになりにくい。
MTの知識があれば誰でもカスタマイズすることができる

まとめ

まとめ
•

PowerCMSは柔軟にコンテンツ配信を実現する機能を搭載している•

簡単な操作で記事のピックアップ、データの紐付けが可能•

カスタマイズをしてより使いやすい管理画面にすることができる• 迅速な情報配信の実現・コストの低減・メンテナンス性の向上を図ることができる。
• 運用を見据えたCMS構築ができる。

ご清聴ありがとうございました