Pages Navigation Menu

For Creative Communication

ExpressionEngine 2.5の構造とテンプレートを理解する

一度使ってみたいと思っていたCMS “ExpressionEngine”。電通レイザーフィッシュが「珍しく」EEでリニューアルをしていたのも記憶に新しいのですが、実は2012年12月に、無料版の「Core」が(再)公開されていました(これまでは無料版がなく、全て有償配布だったので試せなかった)。

一念発起して、“Build a portfolio site with ExpressionEngine” というチュートリアルを1つやってみたところ、約1時間半でだいたいのテンプレート構造が理解できました。Movable Type, WordPress, WebRelease等を使っている人なら、比較ですんなり理解できる部分が多いと思います。日本語文献がほとんど見当たらないので、概要のメモを書いておきます。

ExpressionEngineのインストール

ee_core

 

  • 公式サイトから最新バージョンの”Core”をダウンロードし、FTP。
  • MySQLデータベース・アカウントを1つ用意しておく。接頭辞”exp”がつくので、WPやMTのデータベースとも共存可能なはずです。
  • FTP先ディレクトリ、または”admin.php”をブラウザで開くと、対話式のインストールウィザードが始まります。特にアクセス権等の設定は不要でした。
  • インストールが完了すると、「/system/installディレクトリを削除しろ」という表示が出るので、FTPから当該ディレクトリをまるっと削除後、管理画面 “admin.php”にアクセスします。

※公式手順はUser Guideを参照

チュートリアルをやってみる

“Build a portfolio site with ExpressionEngine”(ポートフォリオサイトを作ってみよう)というエントリーの記述に沿って、一通りサイトを作ってみました。英語の記事ですが、「どのメニューのどのボタンを押して、、」という話なので、そこまで難しくないと思います。

▼この通りのサイトができあがる。ダミーの画像文章などは適宜用意して臨みます。

Eetut

DOWNLOAD SOURCE FILE“をの中には、CSSフレームワーク「Blueprint」を利用したチュートリアル用のCSSと、トップ用・詳細用の2枚のHTMLが入っています。この静的なHTMLを、EE用のタグに書き換える作業を通じて、テンプレート化のポイントを学びます。

手順は本文の通りですが、抜粋版を下記に。

(1) チャネル(Channel)を用意する

Expression Engine上でコンテンツをまとめる最大概念が「チャネル」です。WordPressのカスタム投稿タイプに相当すると思います。初期状態では、「固定ページ」や「投稿」に相当するデフォルトのチャネルは用意されていないので、更地から作ることになります。

Adminメニュー>Channes から作業します。

チュートリアルでは、”Projects” “Testimonials” の2つのチャネルを作成します。(初期設定[Preference]を変更する手順がありますが、2.5.5では変更不要でした)

ee_channel

(2) チャネルフィールド(Channel Fields Group, Channel Fields)を用意する

チュートリアルではカスタムフィールド(Custom Fields)と書いてありますが、2.5.5では「チャネルフィールド」に名称が変わったようです。いずれにしても、個々の「入力欄」を指すものです。まさに「カスタムフィールド」ですが、初めからある入力欄は「タイトル」のみで、本文エリアも個別に作成が必要です。

複数のフィールドをまとめた「チャネルフィールドグループ」の概念があり、まとめて再利用が可能です。まず先にグループを作ってから、個々のフィールドを作成します。

ee_cfield

チュートリアルでは、テキスト、テキストエリア、画像(File要素を使用)などを利用します。「関連付け」もできるようです。

※EEは完全に「テンプレートごとに入力欄を細かく設定し、タグで呼び出す」タイプのCMSです。なので、WebReleaseの仕様書フォーマットがそのまま使えると思います。ブロック単位で設計が必要なConcrete5の方が難しそう。>同僚各位。

(3) 画像ファイルの保存先(Upload Destination)を用意する

画像をアップロードする時、どこに保存するかを設定しないといけません。最大サイズ等も指定できます。(チュートリアルでは、この作業をした後、個々のChannel Fieldsを設定する手順です)

(4) チャネルにチャネルフィールドを割り当てる

2で作成したチャネルフィールドを、1で作成したチャネルに割り当てます。Admin > Channes から、Edit Group Assignmentsを選択し、”Channel Field Group” から割り当てるものを選びます。「どの入力欄セットを使うか」の設定です。

チュートリアルでは、チャネル名とチャネルフィールドグループ名は一致しています(一意になるように、チャネル名をチャネルフィールドの接頭辞として使っている)。

※「記事セット」のような階層化、および入力欄の「繰り返し」の処理ができるのか、どうやるかは現在不明です。。プラグインがあるのか?>各位。

(5) 新規エントリーを作成

これで準備完了。Content > Publish(=新規作成) > チャネル名 をクリックし、新しい記事をいくつか作成します。

ee_entry

(6) テンプレート(Template Group, Template)を作成

Design > Templates > Template Manager から、出力用のテンプレートを作成します。テンプレートも2層構造になっており、テンプレートグループ(Template Groups)を作った後、個別のTemplateを作成します。一般的にテンプレートグループ=チャネルに対応し、サイトトップやコンポーネント用の「Sites」というグループも作成します。「Sites」グループでは、設定の”Make the index template in this group your site’s home page?”にチェックを入れることで、Sites/index テンプレートが、サイトトップ用に使われることになります。

各テンプレートグループの”index”は、自動生成かつ消せないものです。チュートリアルの手順では、これを一覧用にし、詳細表示用の”view”を新規作成しています。

ee_tmplmngr

(7) 静的HTMLの一部をテンプレートタグに置換

MT風の「タグ」を使って、テンプレートに出力設定をしていきます。典型的な記法は、

{exp:channel:entries channel="projects"}
 <h1>{title}</h1>
 {projects_description}
{/exp:channel:entries}

といった感じで、まんまMobable Typeの <$mt:entries> の世界です。カスタムフィールド名を {} でくくって差し込み、limitやらoffsetやら、いろいろなモディファイアを使って出力を制御します。WordPressのループよりもあっさりした感じです。

Ee tmpl

チュートリアルの手順はここまでで、全手順を終えると、”Projects” “Testimonial” の最新記事数件がトップに表示されるようなサイトができあがります。

その他の覚え書き(この欄今後追記するかも)

チュートリアル終了後にいろいろ調べて分かったタグ等や機能のメモです。

※筆者はプログラミングがいまいちできない人なので、説明方法が粗いかもしれません。。

まずは公式ユーザーガイドで調べる

といってもすごくわかりにくい構成なので、、根気よく。(WordPress Codexぐらいスマートにしてほしい。。)

{exp:channel:entries} の詳細は、Templates ではなく Modules > Channel に。

If構文は、Templates > Global Template Variables > Conditional Global Variables にあります。

モジュールテンプレートの読み込み

<mt:include>に相当する、モジュールテンプレートの読み込みは、

{embed="site/header"}

などと記述します(Siteグループのheaderテンプレートを読み込んで差し込む)。「エンベッドテンプレート」という表記になっています。EEではこのように、テンプレートパスを template_group_name/template_name で表現します。あっさりしています。これを使ってheader, footer, sidebar等をモジュール化すると、個々のテンプレートはかなりシンプルになります。

記事一覧ページにリンク

「一覧へ」ボタンから、例えば”News”チャネルの一覧ページに遷移させたい場合は、

<a href="{path='news/index'}">

でよいかと。

if構文

{if 条件文} {if:else} {/if}

と書きます。いろんな条件式が使えます。詳しくはConditional Global Variablesページ参照。

“ifNotEmpty”みたいな、「値が入っていれば表示する、空ならトルツメ」は、

{if news_url != ''}<a href="{news_url}">{title}</a>{/if}

とかって書いています(シングルクオーテーション2つ)。<>でもいいのかな。

固定ページの作り方

どうやら結局、固定ページ用のチャネル・チャネルフィールドを先に用意しておかないといけません。が、”Pages”モジュールをインストールした状態では、各エントリーの”Pages”タグから、URIを自由に設定できます。ので、これを使って、ディレクトリ階層っぽい見せ方ができるようです。

管理画面上はフラットで階層化できないので、チャネルで分けて入力欄を共通化するか、カテゴリーでフィルタする処理が必要。ここは、MT/WPに比べると、運用は少し面倒そうです。

Ee pages

カテゴリー、タグ、タクソノミー

カテゴリーやタグも、初期設定では何もないので、Admin > Channel Administration > Categories から作成が必要です。

カテゴリーグループ(Category Group) がタクソノミーに、カテゴリー(Category)がタームに相当します。各チャネルに、複数のカテゴリーグループを割り当てられます(記事を複数の分類軸で整理できる)。カテゴリーは階層化できます。

各カテゴリーにも、固有の入力欄(Category Fields)をつけられるので、カテゴリートップページのカスタマイズも柔軟にできそうです。

Ee categories

* * *

ここまでの内容で、オーソドックスなサイトの「仕様設計」はほぼできると思います!Coreをインストールしていろいろ遊んでみるといいと思います。Twitter Bootstrapのテーマを買ってきて、テンプレート化する、というのもいい勉強になるかと。

筆者は開発者ではなくディレクターなので、特に関西以西でExpressionEngineの開発ができる方を超募集しています!twitter, facebookでのコンタクトやコメント等、歓迎です。

さらに学ぶなら…

  • Show-EE:ExpressionEngineで作られたサイトのギャラリー。
  • EE-hash:英語ばかりですが、最近のEEに関するエントリー、tweetなど。最近もけっこう動いています。

コメントを残す