サイトカレンダをスキップ

«
2017年 10月
»
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31

-

ログイン

ログイン

QRコード

QR code


 掲示板目次 > Magento全般 > カスタマイズ質問 新規投稿 返信投稿
 デザイン変更の勘所
 
admsmith777
 2012年2月26日 22:58 JST (参照数 19349回)  
掲示板 Junior
Junior

状態: オフライン


登録日: 2012年2月24日
投稿数: 22
1.6.1 にてデザインを変更しようと勉強していますが、英文を読んでみたり経験者さんのページを拝見したりしも分からないことだらけで正直お手上げ状態です。何が分からないかというと、

・layout ディレクトリ以下の *.xml と template ディレクトリ以下の *.phtml の関係
画面の構造は HTML で決定されると思うのですが、にも関わらず XML ファイルの存在する意味がわかりません。
・*.xml でできること
XML ファイルで何がどこまでカスタマイズできるのかがわかりません。

おおよそ上記のようなことが分かりません。根本的にmagento のCMS 的な構造が分かってないからだと思いますが、XML ベースで画面を設計する?ということなのでしょうか。。

また、トップ画面(Home page) は管理画面のページ管理で表示されますが、それ以外の画面(商品一覧画面等) がページ管理で表示されないのはそういうものなのですか?

ヒントでも良いので教えていただけると幸いです。

 
プロフィール メール
引用して書き込む
sasakure
 2012年2月27日 06:14 JST  
掲示板 Junior
Junior

状態: オフライン


登録日: 2011年10月 3日
投稿数: 32
まず管理画面のCMSですが、ここで編集する事が出来るのは「固定のページ」です。コンテンツの内容はウィジェットを使用しなければ基本は静的なものになります。


一方、商品一覧のようなページは「何かしらの機能を持つページ」です。モジュールという言い方をしたりします。


商品検索を実行してURLを見てもらうと index.phpの後ろにcatalogsearchというのがあります。これが検索機能の名前になります。
[magentoディレクトリ]/app/code/core/Mage/CatalogSearch を指しています。
(controolersやModelなどでいろいろと処理をするわけですが、その説明は省略します)

etcにconfig.xmlがあるので見て頂くとlayoutディレクトリのxmlが指定されています。(CatalogSearchのconfig.xmlではcatalogsearch.xmlが指定されています)

モジュールは色々な処理を行った最後に画面を表示しますが、その際テンプレートを指定するのではなく、layout.xmlを指定し、そこで詳細な画面構成を指示するようになっています。


[magentoディレクトリ]/app/design/frontend/base/default/layout/catalogsearch.xml を参照してみると、商品検索機能が出力する画面の情報がいくつも記載されています。 検索結果であればcatalogsearch_result_indexタグ内ですかね。ちゃんと確認していませんが多分。

私の環境の場合そこに、3カラムのテンプレートを使うだとか、左に表示したい検索ブロックとそのテンプレートが指定されていたりします。


確かにこのlayoutに関するxmlがあることで、Magentoは複雑に見えてしまうかもしれません。きっと一番シンプルなのは画面の分だけテンプレートを用意し、そこでヘッダ.phtmlの読み込みなど全部行う事でしょう。

でもその分ちょっとした変更でphtmlをたくさん記述したり、バージョンアップ時に修正しないといけない箇所がたくさん出てきます。


layoutのxmlがあることで、
特定機能の時だけ読み込むjsを増やしたり、ブロックを追加したりする事ができます。
私もまだまだlayout.xmlを使いこなせていませんが、かなり融通の利くカスタマイズが出来るみたいです。


長文になってしまいましたが、まとめると
layoutのxmlは画面の構成やモジュール毎のカスタマイズ(jsを追加で読み込んだり)を担当する、設計図。
templateの.phtmlファイルは設計図を元に組み上げるパーツです。
パーツには土台になるものから、細かい部品までありますが、layout.xmlで指定されているのは主に土台のphtmlです。


Magento Connectでフリーのデザインテーマがいくつもあります。
それらを参考にするのがいいかもしれません。
Big Grin

 
プロフィール メール
引用して書き込む
hirokazu_nishi
 2012年2月27日 08:16 JST  
掲示板 管理者
管理者

状態: オフライン


登録日: 2008年2月 9日
投稿数: 470
ほとんどはsasakureさんが書いてくれてるので私はもう少し補足を。

Magentoは高度に設計されたモジュール構造を採用しています。
それはディレクトリ構成やコードを少し見てもらえればわかると思います。

その設計思想はデザインにまで及んでいて、レイアウトXMLというファイル群は、<layout>タグの直下に定義されるタグが事実上URLとほぼ同じ意味を持つようになっています。
(ほぼ、というのは商品やCMSページは独自のルーティング構造を持つので例外だからです)

さて、カスタマイズをしていると、その内容を再利用したくなることがあります。
私のようにMagento専門でやっている事業者やエクステンションベンダーは概してそうで、ある程度経験をつまれた方も同じような想いを抱かれることでしょう。
そんな時に、オリジナルエクステンションを作り、そこに自分のカスタマイズしたレイアウト定義を書いておくのです。

レイアウトXMLでは<reference>というタグを使って既に存在する画面定義に修正を加えることができます。ブロックの追加・削除はもちろん、リンクの追加もできます。
ifconfigという属性を使うことで、管理画面で設定したパラメータのオンオフによってブロックの振る舞いを変えることもできます。

また、静的ブロックを事前に割りつけておくことで管理画面からパーツ単位での更新をする方法もあります。


Magentoは奥の深いシステムです。
知れば知るほどその設計が深いレベルまで及んでいることに驚かされ、最初抱いた複雑さへの抵抗よりもこの設計をわずか1年足らずで完成させたコアチームのスキルに畏敬の念を抱かずにはいられなくなります。

Magento技術サポート・日本語化エクステンション・セキュリティ診断提供中です。日本語ガイドブックの販売・レンタルサーバサービス開始しました。 http://principle-works.jp/
 
プロフィール メール ホームページ
引用して書き込む
admsmith777
 2012年2月27日 11:20 JST  
掲示板 Junior
Junior

状態: オフライン


登録日: 2012年2月24日
投稿数: 22
お二方、お返事ありがとうございます。

ページ管理で表示されるページについて、結局内容をウィジェットを使って記述すれば動的なページとなる訳で、商品一覧画面のような、何かしらの機能をもつページも結局は、動的な部分をウィジェットとして分離すればページ管理にあってもよいのではないかと未だに疑問です。内容によっては動的にでも静的にでもなるので、ページ管理に中途半端に「Home page」があることが気持ち悪いのだと思います。結局、こういうのは慣れだけなんでしょうけども。。

xml の説明のところですが、xml の存在が複雑で、phtml のみの構成の方がシンプルであると私も思います。そう思うのも、xml が柔軟性を生み出すことにまだ実感が無いからだと思います。xml は設計図、phtml はパーツであるとの例えもいまいちピンと来てないのです;

おそらく、このもやもや感はxml で何ができるのかを体験すれば解消されるものと思いますが、*.xml の<layout> タグに含まれるタグについてもう少し具体的に質問させてください。

・default タグは何をするものでしょうか?

・****.xml ファイルの **** の箇所は多々種類がありますが、これは "catalogsearch" のようなモジュール(おおまかな機能) と対になっているのでしょうか?(であれば、page.xml は何でしょう・・?)

・block タグは "ニュースレター" のように、まとまった機能をブロックとしてまとめたものと考えて良いでしょうか?

・reference タグはいろいろなxml ファイル中でみることができますが、そもそも何を参照しているのでしょうか?

・action タグもいまいち用途不明です;

質問ばかりですが、参考サイト(英文でもよいので^^) でもあれば教えていただければと思います。

お願いします。


 
プロフィール メール
引用して書き込む
sasakure
 2012年2月27日 12:22 JST  
掲示板 Junior
Junior

状態: オフライン


登録日: 2011年10月 3日
投稿数: 32
プログラマーでもWebデザイナーでもない、ECサイトの管理者の方は
layout.xmlなど読むことは無いでしょうし、ウィジェットも使う事はあっても作る事はないと思います。
でも、ページを作りたい事ってありますよね。
そんな時に管理画面のCMSを利用されるかと思います。

商品一覧やカート、レジのフローなど、ウィジェットとして持っても、他の画面で利用しないですよね。
仮にウィジェットとして持っても、このウィジェットから遷移しないと表示出来ない。。などの問題があります。
ウィジェットは動的コンテンツかもしれませんが、CMS管理で利用出来るのはどこで呼ばれてもいいようなクローズドな機能です。

xmlファイルについてはこちらのブログで丁寧に説明して下さってますよ Big Grin
http://rack990.sakura.ne.jp/archives/entry-666.html
http://rack990.sakura.ne.jp/archives/entry-668.html

 
プロフィール メール
引用して書き込む
admsmith777
 2012年2月27日 13:03 JST  
掲示板 Junior
Junior

状態: オフライン


登録日: 2012年2月24日
投稿数: 22
sasakure さん、お返事ありがとうございます。

なるほど!結局は「ウィジェットはどこで呼ばれてもいいようなクローズドな機能」ということなんですね。よく分かりました。今回説明いただいた文章でCMS の部分でのもやもやが少しとれた気がします。

そして、参考とするブログは私も拝見しましたが、案内された内容は完全に見落としていました;早速読ませていただきます。ありがとうございました。

 
プロフィール メール
引用して書き込む
hirokazu_nishi
 2012年2月27日 13:08 JST  
掲示板 管理者
管理者

状態: オフライン


登録日: 2008年2月 9日
投稿数: 470
んー。結局私が書いたネタですが(笑)

defaultタグってのは全ページ共通の内容を書くところです。
ここに書いた内容は強制的にすべてのページ対して適用されます。

referenceタグは特定の既に定義されているblockタグを参照して、その内容に対して変更を加えるためのものです。

actionタグはblockタグで定義されているBlockオブジェクトが持っているpublicメソッドを実行するためのタグですね。

私が昔書いたネタがslideshareにあります。

http://www.slideshare.net/hirokazunishi/presentations

参考程度に・・・。

Magento技術サポート・日本語化エクステンション・セキュリティ診断提供中です。日本語ガイドブックの販売・レンタルサーバサービス開始しました。 http://principle-works.jp/
 
プロフィール メール ホームページ
引用して書き込む
admsmith777
 2012年2月27日 18:32 JST  
掲示板 Junior
Junior

状態: オフライン


登録日: 2012年2月24日
投稿数: 22
hirokazu_nishi さん。お返事ありがとうございます。

スライド見させてもらいました。私が質問した答えがそのまま掲載されているようで大変助かります。見直せば見直す程、大変な仕組みなのだと感心しますが、でも・・知ろうとすればする程疑問点が^^

まず、block タグはBlock オブジェクトを呼び出すものと理解しましたが、どのBlock オブジェクトを呼ぶかという点について、type 属性が関係しているのでしょうか?

例えば head タグを形成するブロックは <block type="page/html_head" name="head" as="head"> なのですが、実際 Mage_Page_Block_Html_Head クラスのオブジェクトが呼ばれています。これはどのような原理なのでしょう?

そして、レイアウトXML とは何かという当初の疑問もぼんやりと解決しています。

app/design/frontend/base/default/layout/page.xml ファイルがありますが、これが公開画面全体のページのディフォルト構成を決めるレイアウトXML、レイアウトXML とは画面でどのようなブロックを扱うかを決定するもので、実際のHTML はブロックから出力するもの。この認識であってますか?


お願いします。

 
プロフィール メール
引用して書き込む
hirokazu_nishi
 2012年2月27日 18:44 JST  
掲示板 管理者
管理者

状態: オフライン


登録日: 2008年2月 9日
投稿数: 470
まず、block タグはBlock オブジェクトを呼び出すものと理解しましたが、どのBlock オブジェクトを呼ぶかという点について、type 属性が関係しているのでしょうか?


はい、そうです。

page/html_head はご推察のとおり、Mage_Page_Block_Html_Headを指定します。
pageというのがエクステンションの別名なので、ここは衝突しないように決める必要があります。その上で、Block以下にあるクラス名を「_」で連結して書きます。
ルールがわかれば至極単純です。

app/design/frontend/base/default/layout/page.xml ファイルがありますが、これが公開画面全体のページのディフォルト構成を決めるレイアウトXML、レイアウトXML とは画面でどのようなブロックを扱うかを決定するもので、実際のHTML はブロックから出力するもの。この認識であってますか?


そうです。BlockオブジェクトのtoHtmlメソッドでphtmlファイルを処理した結果を含んだHTMLが出力されるので、レイアウトがあるからパーツが出るわけではありません。
(phtmlファイルがなくてもHTMLの出力自体は可能です)
静的ブロックなどを割り付ける場合は、ブロックが有効でないとパーツが出力されないので、その特性を利用して期間限定のパーツを出すなどの用途に流用ができます。

また、親ブロックから小ブロックを呼び出したり、ブロックを削除したりといろんなことができるので、ここを抑えるだけでもデザインのカスタマイズの幅は大きく広がります。

とはいえ、BlockやModelのことを知らないと最後はどうにもならんこともあるのですが。

Magento技術サポート・日本語化エクステンション・セキュリティ診断提供中です。日本語ガイドブックの販売・レンタルサーバサービス開始しました。 http://principle-works.jp/
 
プロフィール メール ホームページ
引用して書き込む
admsmith777
 2012年2月27日 20:14 JST  
掲示板 Junior
Junior

状態: オフライン


登録日: 2012年2月24日
投稿数: 22
hirokazu_nishiさん、毎度お返事いただきありがとうございます。

私の理解が正しくてよかったです。そして、type 属性についてもおおよそ理解が正しかったみたいですね。実はconcrete5 というCMS を良く使っているので、ブロックの設計は良く似ているところもあり、理解に助かってます。

また質問することもあるかもしれませんが、頂いた情報を整理し、自分なりのテーマをカスタマイズしていこうと思います。ありがとうございました。

 
プロフィール メール
引用して書き込む
内容生成: 7.62 秒
新規投稿 返信投稿


通常 通常
注目トピック 注目トピック
ロック済 ロック済
新着 新着
注目トピック 新着 注目トピック 新着
ロック済トピック 新着 ロック済トピック 新着
ゲストユーザの投稿を見る 
ゲストユーザ投稿可能 
HTML許可 
バッドワードをチェック