eZ Publish 実装はじめの一歩

eZ Publish実装はじめの一歩

藤田　拓 @teilnehmenhttp://teilnehmen.jp

Sunday, March 28, 10

http://teilnehmen.jp

http://teilnehmen.jp

eZでは何もかもがオブジェクト！なのでクラスでいろいろ管理

eZではオーバーライドで変更！eZではテンプレートと設定もオーバーライドで変更します。

なのでオリジナルは絶対さわらないように！

eZ３大ポイント！

siteaccssで複数の見せ方を！管理画面、公開画面、ステージ画面、携帯用画面等々


クラスとオブジェクト

自動車クラス

タイヤクラス

窓クラス

ヘッドライトクラス

自動車クラスはいろいろなクラスから成り立っています。自動車クラスはいろいろな変数を持っています。

自動車クラスに具体的なオブジェクトや値を与えると自動車オブジェクトになります。

全長

全高

名前

eZでは何もかもがオブジェクト！


どうやらヘッドライトや窓は必須じゃないらしい。。

逆に名前や全長等はこの世に存在するあらゆるものに与件としてあるもの。

スラスト SSC

(Thrust SSC, SuperSonic Car)

イギリスで設計・製作されたジェットエンジン搭載の自動車。

http://ja.wikipedia.org/wiki/%E3%82%B9%E3%83%A9%E3%82%B9%E3%83%88SSC

開発には Richard Noble、Glynne Bowsher、Ron Ayers、Jeremy Blissらが携わった。1997年10月15日、アメリカ合衆国ネバダ州において時速1,227.985キロメートル（時速763マイル）の自動車の速度記録を打ち立てた。この数値はマッハ1.016であり、世界で初めて音速を超える公式記録を残した自動車でもある。運転はイギリス空軍中佐のアンディ・グリーンが務めた。

クラスとオブジェクトeZでは何もかもがオブジェクト！

自動車オブジェクト




コンテンツクラスeZでは何もかもがオブジェクト！

ページスタック

ページ

ページ

ページスタック

ページ

ページユーザーアセット


記事（

Article）

クラス



記事（

Article）

オブジェクト

=　記事ページ



記事（

Article）

クラス設定　１



記事（

Article）

クラス設定　２



画像（

Image）

クラス



画像（

Image）

オブジェクト

=　画像ページ



画像（

Image）




画像（

Image）




ユーザー（

User）

クラス



ユーザー（

User）

オブジェクト

=　ユーザーページ



ユーザー（

User）




ユーザー（

User）




記事クラスに属性（Attribute）を追加してみる：設定

行列データタイプで「属性の追加」

追加されると下記のような入力画面がでてきて、必要事項を入力



記事クラスに属性（Attribute）を追加してみる：入力



記事クラスに属性（Attribute）を追加してみる：出力


出力されない、、理由：テンプレートで行列データタイプを表示させるための記述がないから表示させるにはテンプレートに{attribute_view_gui attribute=$node.data_map.spec}とか書くとでてくる


実際、eZのオブジェクトはどんなデータを持っているのか？


http://ez.no/doc/ez_publish/technical_manual/4_x

ezauthorezbasketezbinaryfileezcontentbrowsebookmarkezcontentbrowserecentezcontentclassezcontentclassattributeezcontentclassclassgroupezcontentclassgroupezcontentlanguageezcontentobjectezcontentobjectattributeezcontentobjecttranslationezcontentobjecttrashnodeezcontentobjecttreenodeezcontentobjectversionezcurrencydataezdateezdatetimeezimagealiashandlerezimagelayerezimageobjectezinformationcollectionezinformationcollectionattributeezkeywordezlocaleezmatrixezmediaezmultioptionezmultioption2

ezmultipriceeznodeassignmentezoptionezorderezorderitemezorderstatusezpolicyezpriceezproductcategoryezproductcollectionitemezrangeoptionezroleezsectionezsimplifiedxmlinputezsubtreenotificationruleeztimeezurlezuserezvatruleezvattypeezxhtmlxmloutputezxmlinputhandlerezxmloutputhandlerezxmltext

object

まずは一番よく使われるezcontentobjecttreenodeを

見てみましょう（別紙：ezcontentobjectnode）




テンプレートを少し編集して属性を表示

１eZでは何もかもがオブジェクト！

eZのドキュメントルートからみて右記ファイルをエディタで開く

　design/base/override/tem

plates/full/article.tpl

その後、

{$node|attribute(show,1)}を

1行目に挿入。

<=

これはやっちゃいけないこと！！！！

（※）通常はテンプレートに直接記述するのではなく、テンプレートをオーバーライドしてください。



２eZでは何もかもがオブジェクト！




その後、

{$node.data_map|attribute(show

,1)}を1行目に挿入。

<=



やっちゃいけないこと（既存テンプレートに直接記述）ついで

にさらに予習的に

{$node.data_map}を

インスペクトしてみた。

data_mapの直下にはクラス設定にある属性が存在している。



３eZでは何もかもがオブジェクト！




その後、

{$node|creator(show,1)}を

1行目に挿入。

<=



やっちゃいけないこと（既存テンプレートに直接記述）ついで２

{$node.creator}をインスペクトしてみた。

creatorの直下にはオブジェクトとしてユーザー情報がある


オブジェクトが保有する属性は豊富eZでは何もかもがオブジェクト！

クラスで定義した属性がdata_map内にオブジェクトとして保有されている。かつ、eZ Publishのシステムから付与された属性も付与されている。上記の値を適宜呼び出して、テンプレートに組み込んでいく



オブジェクト名前url情報所有者情報ノード番号オブジェクト番号作成日時編集日時etc...

属性

•はノードツリー上（サイトマップとか）で管理できる•は作成することができる•は編集することができる•はゴミ箱にいれることができる•は削除することができる•はバージョン管理をすることができる•は多言語バージョンを持つことができる•はExport/Importすることができる•はワークフローに流すことができる•は権限管理の対象となる•は権限管理の主体となることができる•は他オブジェクトと関連することができる•はテンプレートで表示することができる•はテンプレートから新規作成／編集／削除することができる•は時刻により制御できる•はコピー（移動）することができる•は他のオブジェクトとの集合体（サブツリー）としてコピー（移動）することができる•はセクションをもつことができる（セグメンテーション）•は検索することができる•はリンクマネジメントシステムを利用できる等々、、


コンテンツオブジェクト



では実際に目的をもってクラスを作ってみましょう


ブログ実装用クラスの作成～リベンジのための～

以前の勉強会、テンプレート実装で思いっきりコケた実装実演を今日こそ。。


まずどんなブログをつくるか機能+ 記事を新規作成／編集／削除できる+ その記事についてコメントができる+ ブログはサイト上のどこにでも設置できる

相対的位置関係 + ブログトップ + 記事1 + コメント1 + コメント2 + コメント3 + 記事2 + コメント1 + コメント2 + コメント3 + 記事3 + コメント1 + コメント2 + コメント3

各ページの概要ブログトップ + 記事は直近５件をタイトルと本文２０文字まで

記事ページ + 自記事のテキスト／画像要素を出す + コメントへのリンク + コメントの一覧コメントは直下のコメントをとってくればよい

コメントページ + 投稿ページを作る


クラスの定義／作成名前 id データタイプデータタイプ補足必須？ URL名に使う? ノード名に使う?

ブログ名 title テキスト／text 1～255 レ 1

URL名 url_title テキスト／text 1～127 1

ブログの説明 description テキストブロック／textblock 初期5行表示ids ids 識別子／identifier 接頭語top 桁数 3桁 auto 2

ブログトップ id: blog_top　　コンテナ: yes

名前 id データタイプデータタイプ補足必須？ URL名に使う? ノード名に使う?

記事名 title テキスト／text 1～255 レ 1

URL名 url_title テキスト／text 1～127 1

記事本文 body XMLタグ／xmlblock 初期5行表示レ

画像 image 画像／image 2MBまで

コピーライト copyright テキスト/ text 1～127

公開日時 opendate 日時/datetime 現在日時をデフォルト値にレ

ids ids 識別子／identifier 接頭語entry 桁数 5桁 auto 2

ブログ記事 id: blog_entry　　コンテナ: yes

名前 id データタイプデータタイプ補足必須？ URL名に使う? ノード名に使う?

ユーザー名 title テキスト／text 1～127 レ 1

e-mail email テキスト／text 1～127

コメント本文 body XMLタグ／xmlblock 初期5行表示レids ids 識別子／identifier 接頭語comment 桁数 6桁 auto 1

ブログコメント id: blog_comment　　コンテナ: no


クラスの定義を実装ここはWeb管理画面での作業になります。

「システム設定」↓

「クラス」(ここでクラスグループを新規作成するか

または、Content内へ遷移。新規作成した場合は、

そのクラスグループに遷移）

↓クラスを新規作成する場所としての

クラスグループへ移動（デモでは新規作成した「Blog」グループ）

あとは、新規クラスを作成


とりあえず現状でブログを作成

ブログトップ

ブログ記事

コメント

とりあえずできてるけどこれは実用に耐えない。。


コンテンツ投入はできる。足りないのは見た目。

つまり

コンテンツ出力つまり

テンプレート実装Sunday, March 28, 10

ヘッダー（header）

グローバルナビゲーション（gl_navi)

コンテント（content）サイドナビside_navi

フッター（footer）

よくあるパターンで実装します


ちょっと設定について

• デフォルトの設定ファイルはsettings/に入っています。全ての設定とコメ

ントが付いています。

• 設定に該当するファイル名.ini

• システムの特定な部分を管理しています

• 一番重要な設定ファイルはsite.iniです

• /settings直下にデフォルト設定ファイルがあります: 絶対に変更してはいけ

ません！

• コメントがかかれており（英語。。）、デフォルトの値を持っています

eZではオーバーライドで変更！


設定を変更するにはオーバーライド！settings

override

siteaccess

pub

cp

site.ini.append.php

site.ini.append.php

site.ini.append.php

site.ini

すべてを上書きするoverrideフォルダにあるものはsiteaccessフォルダ配下の設定をも上書きします。

siteacces pub用のsite.ini設定

siteacces cp用のsite.ini設定

デフォルトのsite.ini設定直接変更してはだめ！

上書きする設定ファイル名.iniに.append.phpを付与するのが吉（＊）つけなくても動くんだけど、rewriteの設定次第では中がみえちゃいます！（データベース接続設定とか諸々）

eZではオーバーライドで変更！


方針

現状のテンプレートも残しつつ新しいテンプレート実装する

新しいテンプレートセットと設定セットを用意するために

新しいSiteaccessを用意！


Siteaccessとは？Siteaccessとはその名の通り、サイトにアクセスした人にどんなサイトを閲覧させるかを指示する設定内容を格納する仕組みです。Siteaccess毎に利用するデザインや設定内容、そしてデータベースまでもが個別に指定できます。


Siteaccessの設定•利用できるSiteaccessはsite.iniのグローバルオーバーライドに記述することが必要です。(settings/override/site.ini.append.php)

•Siteaccessはsettings/siteaccessの直下にフォルダとして設置します。

•上記サブディレクトリはSiteaccessに同じ名前にします。

•settings/siteaccess直下のsiteaccessフォルダには各サイト用の設定を記載した設定ファイル群を設置します。

settings

override

siteaccess

pub

cp

site.ini.append.php [SiteAccessSettings]CheckValidity=falseAvailableSiteAccessList[]AvailableSiteAccessList[]=pubAvailableSiteAccessList[]=cp

settings/override/site.ini.append.php内の記述

はフォルダ


新しいSiteaccessフォルダの作成eZ Publishドキュメントルート直下のsettings/siteaccess以下のフォルダをみると下記のようになっている。pubはインストールの際に設定した公開用のSiteaccess、cpは管理用のSiteaccsss。adminとsetupは触らないで下さい。

pubをフォルダ毎コピー

pubのコピーにnewという名前を

つける


Override配下のsite.iniに新しいSiteaccessを登録

[SiteAccessSettings]CheckValidity=falseAvailableSiteAccessList[]AvailableSiteAccessList[]=pubAvailableSiteAccessList[]=cpAvailableSiteAccessList[]=new

[SiteAccessSettings]CheckValidity=falseAvailableSiteAccessList[]AvailableSiteAccessList[]=pubAvailableSiteAccessList[]=cp

http://example/index.php/new/

その後、下記URLにアクセスすると。。


http://ezstudy/index.php/new/

http://ezstudy/index.php/new/

アクセスできませんこれは新しいSiteaccessにログインしてないユーザーが

アクセスできない設定になっているため。ロールの設定で変更してもいいですが、

とりあえず管理者アカウントで入りましょう。


みれました！当然のことながらpubのコピーなので同じです。


では別のデザインを当てていきたいのですが


すいません、その前にもう一個Siteaccessを作らせてください。。。

さっき作成したnewと同様の手順でoriginalというのを作成します。

というのも、デフォルトでデザインにあたっているテンプレートの大元やオーバーライドの状況を

お見せしたいからです。


Plainでインストールした場合、eZ Publishドキュメントルート直下のdesignフォルダ内にはadmin、base、plain_site、standardという４つのフォルダがあります。その中にはデザインを司るファイル一式が存在します。

　design情報が入ってる場所

admin　　　管理画面用base 　　　さっきからみている公開用plain_site 　実は空！standard　　一番ベースのテンプレート


　どのdesign情報を選ぶのか決める記述

[DesignSettings]SiteDesign=plain_siteAdditionalSiteDesignList[]=base

eZドキュメントルート直下のsettings/siteaccess/pub/site.ini.append.php、

つまり、Siteaccessのpub内にあるsite.ini.append.phpの

[DesignSettings]セクションを見てみます。

この記述の意味は1. まずデザインplain_site内のデザイン情報を使え

2. もし該当するものがなければデザインbaseを使えplain_siteは空なので、baseを利用していることになります。


さっきつくったsiteaccess「original」にstandardデザインのみ当ててみる

[DesignSettings]SiteDesign=standard

公開サイトに使えなさそうなデザインが表示されます。


ここまでのsiteaccessとdesignのマッピング状況

pub

new

original

cp



[DesignSettings]SiteDesign=admin


ということで新しいデザインをnewサイトに当てましょう。

pub

new

original

cp



[DesignSettings]SiteDesign=admin

[DesignSettings]SiteDesign=new





newサイトのsite.ini.append.php変更[DesignSettings]SiteDesign=newAdditionalSiteDesignList[]=base

designフォルダ内のplain_siteをコピーしてnewフォルダを作成


デザインnewフォルダ内の構造

重要！

重要！


overrideとtemplatesフォルダ内にテンプレートを置いていくと新しいデザインが作れます！


と、ここでeZの基礎概念を

少し。。


どのテンプレートがどこに適用されるの？


　これがeZの基本構造


　先ほどの構造に対応したものがシステムURL！

http://example.url/index.php/content/view/full/2


http://www.example.com/index.php/content/view/full/34


















リクエストURLに対してのmodule処理の流れ


http://example.url/index.php/content/view/full/2

トップページが表示されるトップページのnode idが2だから




http://example.url/index.php/user/login

ユーザーモジュールのログインビューつまりユーザーログイン画面が表示される




http://example.url/index.php/content/edit/1

コンテンツモジュールのeditビューでobject id １を渡すとトップページの編集画面になるトップページのobject idは１だから




でもこんなかっこわるいURLはいやだ！


　だから仮想URLにマッピング

ノードにオブジェクトをマッピングすることで仮想URLを生み出すパンくずリストやサイトマップはノード構造で作られる


URLリクエストから表示されるまでの流れ

1. eZ Publishにリクエストがあった際にURLを確認します。

2. 仮想URLテーブルにURLが存在する場合、システムは相当

するシステムURLにプロセスします。

3. 仮想URLテーブルに存在しない場合、eZ Publishはシステム

URLとして解析します。

4. システムURLに該当しない場合、Kernelエラーを出力します。


さて、ついにテンプレート実装


どのテンプレートがどこに適用されるの？

に戻ります。

それを知るためのデバッグ設定をまず。


デバッグ設定で「Debug output」、「 Template debug」、「List of used templates」をチェックしてSetをクリックします。その際、プルダウンはGlobal(override)になっていることを確認してください。


Debug output

リクエストがきてから表示されるまでのプロセスが表出されます。処理の時間が表示されます


Template debug

HTMLソースレベルでどのテンプレートが利用されているかわかります。


モジュールのビュー用テンプレートファイルのパス

実際に利用されているテンプレートファイル

List of used templates


テンプレートオーバーライド　１

モジュールのビュー用テンプレートファイルのパスと同様のパスを利用デザイン内templatesフォルダから設置するとそちらが利用されます！

pagelayout.tplで試してみましょう！

pagelayout.tplはtemplatesフォルダ直下に存在します。なので、design/new/templates/pagelayout.tplを作成して中にaaaaaと書いて保存しましょう。


pagelayout.tplが白紙になればすべて白紙！

aaaaa＋デバッグ画面になりました。実はpagelayout.tplは非常に重要なテンプレートなのです。


PagelayoutとModule Result

Point! テンプレートのとっかかりで理解すべき点がここ。テンプレート系統は大きくみて２つに分かれます。

一つはいわゆる「ガワ」それがpagelayout.tplなのです。

もう一つはそのURLに固有の内容、つまりモジュールの処理を行ったビューの結果としてのmodule_resultになります。


Pagelayout変数の王様$module_result.content

先ほど記載したaaaaaの下に{$module_result.content}と付け加えると。。

結構な量の情報がでてきました。これは文字通りモジュールの処理結果としてのビューが出力されています。


Pagelayout変数の王様$module_result.content

先ほどはトップページをみましたが、ブログトップへのリンクをクリックしてブログトップでもどうなるか見てみましょう

こちらも入力欄に沿った情報がでてきました。では、ここでHTMLソースをみてみましょう。


$module_result.contentで引っ張ることができるnode/view/full.tpl

ブログトップのHTMLソースをみると。。

node/view/full.tplという文字列がみえます。これは該当しているノードに割り当てられているコンテンツオブジェクトを表示するためのメインのテンプレートになります。では、こちらもdesign/new/templates/node/view/full.tpl

を作成して上書きしてしまいましょう。今度はbbbbbといれてみます。


これではあまりに、、、

ではbbbbbの下に{$node|attribute(show,1)}と書いてみてください。


これは冒頭にオブジェクトとクラスの話をした際にでてきたものです。つまり、ノードオブジェクト情報です。

$nodeという変数を使えば、該当しているノードの情報に詰め込まれた様々な情報をとることができます！


attribute(show)http://ez.no/doc/ez_publish/technical_manual/4_0/reference/template_operators/miscellaneous/attribute

オブジェクト内の属性値を渡り歩くための便利なオペレータ、attribute(show)

利用の仕方は、{$オブジェクト変数|attribute(show)}

ちなみにattribute(show,1)とやると1階層下までattribute(show,2)とやると2階層下まで取得できます。ちなみにattribute(show)は2が指定されています。

では先ほどの{$node|attribute(show,1)}を{$node.data_map|attribute(show)}に書き換えてみてください。


http://ez.no/doc/ez_publish/technical_manual/4_0/reference/template_operators/miscellaneous/attribute

http://ez.no/doc/ez_publish/technical_manual/4_0/reference/template_operators/miscellaneous/attribute

オブジェクトはピリオド「.」でつなぐとオブジェクト階層を下っていくことができます。

では、{$node.data_map.title.data_text}と記載してみましょう。Sunday, March 28, 10

このノードに割り当てられているブログトップオブジェクトのブログ名に記載された「ブログトップ」という文字列が表示されました！では、残りの設定属性値も取得するテンプレートを書いてみましょう


<h1>{$node.data_map.title.data_text}</h1>

<p>{$node.data_map.description.data_text}</p>

<p>このブログトップオブジェクトのidsは{$node.data_map.body.value}です。</p>

すこしだけページっぽくなってきた、、

でもこのオーバーライドだとブログトップのfullviewもブログ記事のfullviewも同じテンプレートが当たってしまう。


テンプレートオーバーライド　２ちょっとトップページをみてみましょう。

おや？前と変わらない。fullはすべてdesign/new/templates/node/view/full.tplが当たっているのではないのか？では、HTMLソースをみてみます。

design/base/override/templates/full/folder.tplというのが当たっているようだ。。


テンプレートオーバーライド　２settings

override

siteaccess

new override.ini.append.php

実は該当siteaccess内（今回はnew）にはoverride.ini.append.phpというものがあります。このファイルでデフォルトのテンプレート（今回であればnode/view/full.tpl）を全く別の自由なテンプレートファイルにマッピングすることができます。その際、どういった条件の時にそのファイルをマッピングするかという条件はいろいろ選べます。＃トップページの場合は、folderクラスだった場合


テンプレートオーバーライド　２

各ブロックに必要な情報は• オーバーライドブロックの名前• オーバーライドするテンプレート• 代わりに使われるテンプレート• オーバーライドテンプレートが入ってるフォルダ• オーバーライド条件の組み合わせ

オーバーライドルールの優先順位はファイル内での位置で決定されます。複数のブロックを利用できる場合、eZ Publishは最初のものを使います

ルール

[full_folder]

Source=node/view/full.tpl

MatchFile=full/folder.tpl

Subdir=templates

Match[class_identifier]=folder


テンプレートオーバーライド　２


ここまでがeZ Publishにおける特徴的な部分つまり壁でした。あとはなんとかなるかな。


ということでここからはざくざくつくっていきます。

（実演）


メニュー｜メニュー｜メニュー｜メニュー｜メニュー｜メニュー

ツリーサイトマップ

サイト名

ブログ記事タイトル

写真

本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文

コメント（件数）｜日付

トップ

コメント投稿

ブログ記事一覧+ ○○○○○+ ○○○○○+ ○○○○○+ ○○○○○

コメント一覧+ ○○○○○+ ○○○○○+ ○○○○○+ ○○○○○

ユーザーログイン



ツリーサイトマップ

サイト名


写真本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文

ブログトップ


写真本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文

コメント（件数）｜日付コメント投稿

コメント（件数）｜日付コメント投稿

ブログ記事一覧+ ○○○○○+ ○○○○○+ ○○○○○+ ○○○○○

コメント一覧+ ○○○○○+ ○○○○○+ ○○○○○+ ○○○○○




ブログ記事一覧+ ○○○○○+ ○○○○○+ ○○○○○+ ○○○○○

コメント一覧+ ○○○○○+ ○○○○○+ ○○○○○+ ○○○○○

サイト名


写真本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文

日付

ブログ記事

本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文

コメント投稿

コメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメント

コメント投稿者名

コメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメント

コメント投稿者名



include情報


グローバルナビゲーション（gl_navi)



templates

parts

pagelayout.tpl

headtag.tpl

header.tpl

gl_navi.tpl

footer.tpl

side_navi.tpl

（＊）headtagは<head></head>内の記述


近く、実装したコードを公開しますね。


Technology

eZ Publish 実装 はじめの一歩

eZ Publish 実装はじめの一歩