Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Magento cafe plus #12

601 views

Published on

Magento Cafe Plus #12で使用した資料です。
デザインテーマカスタマイズの話と、ユニットテストの話を取り上げています。

Published in: Software
  • Be the first to comment

  • Be the first to like this

Magento cafe plus #12

  1. 1. Magento Cafe Plus #12
  2. 2. 最近のMagento
  3. 3. Magento 2サンプルデータ
  4. 4. Magento2 Docker
  5. 5. 翻訳プロジェクト
  6. 6. デザインカスタマイズのレシピ
  7. 7. レイアウトXML再入門
  8. 8. レイアウトXMLで使えるタグ タグ名 親要素 子要素 layout なし ハンドルタグ ハンドルタグ layout block reference remove block ハンドルタグ block block action action block パラメータタグ reference ハンドルタグ block block action remove ハンドルタグ update ハンドルタグ パラメータタグ action パラメータタグ パラメータタグ
  9. 9. タグで使える属性 タグ名 属性名 ハンドルタグ translate module block name type template output as before / after action method ifconfig module translate reference name remove name パラメータタグ helper update handle
  10. 10. nameとasの違い • as属性の値はテンプレート上で呼び出すときにの み使用。レイアウトXMLでas属性の値を指定しても 無駄。 • name属性はas属性がないときはas属性の代わりを する。レイアウトXML上で要素を指定する場合は常 にname属性の値を指定する。
  11. 11. パラメータタグのhelper属性 • helper属性を与えることで、Helperクラスのメソッド に処理を委譲することができる – 翻訳させたり、変数によるテンプレートやURL切り替えな どができる • パラメータタグの子要素で更にパラメータタグを定 義することで、Helperのメソッドに与えるパラメータ を定義できる
  12. 12. 例1 <reference name="customer_account_navigation"> <action method="addLink" translate="label" module="myext" ifconfig="myext/mygroup/myparam"> <name helper="myext/label/getLinkLabel"/> <path>myext/page</path> <label helper="myext/label/getLinkLabel"/> </action> </reference>
  13. 13. 例2 <customer_account_login> <reference name="head"> <action method="setKeywords"> <keywords helper="core/data/__"> <value>Some keywords</value> </keywords> </action> </reference> </customer_account_login>
  14. 14. CSS/JSの削除 • あるページのCSSやJSが邪魔なんだけど・・・ • あるページに付けたいjQueryのプラグインがバー ジョンあわなくて(ry • なんてときに便利な技
  15. 15. 例 <reference name="head"> <action method="removeItem"><type>skin_css</type><nam e>css/styles.css</name><params/></action> <action method="addItem"><type>skin_css</type><name>c ss/custom.css</name></action> </reference>
  16. 16. テーマの継承関係 • 1.9まで – 現在テーマ → 現在テーマのdefault → base/default • 1.9から – 現在テーマ → 親テーマ → base/default – etc/theme.xmlをうまく使うこと
  17. 17. facade • Mage_Core_Block_Template_Facade • appendで既に定義されている別ブロックを自分の 子ブロックとして定義できる • 商品ページで多用 – 他のページではつかってない・・・
  18. 18. テンプレートとブロックのあれこれ
  19. 19. jsをフッターに持ってきたい • page/html_headを使う – 別のnameで定義して、テンプレートも別指定にする • Mage_Page_Block_Html_HeadにはJS/CSSタグを生 成する機能がある • ただし、全部をフッターに持ってこれないので注意 – Translatorとかは無理だった気が・・・
  20. 20. テンプレートがなくても出力したい • Mage_Core_Block_Text_Listや Mage_Core_Block_Text_Tagを使う • あるいは独自でなにか実装してしまう
  21. 21. 特定のページだけテーマを変えたい • CMS/カテゴリ/商品であれば、設定で対処可能 • ではそれ以外のページの場合はどうする?
  22. 22. フォールバックをうまく使う • マークアップをできるだけ共通化する – CSSとJSだけで出来るだけ見た目を調整する • レイアウトXMLを使って、部分的にテンプレートや CSS/JSを入れ替える • つまりは変更点を局所化し、メンテしやすくする
  23. 23. 静的ブロックの埋め込み • 方法は2通り – レイアウトXMLであらかじめ定義しておく – PHPコードをテンプレート上で直接書く • 静的ブロックを1個処理するのに最低でも2〜3本の SQLが「アクセスごとに走る」点に注意 – 便利だからと闇雲に埋めるのはNG – ブロックキャッシュをうまく使わないとサイトが遅くなる – またはフルページキャッシュの導入
  24. 24. 商用テーマの功罪 • 商用テーマは便利な機能がワンパッケージになっ ている – 素早くサイトを立ち上げたい時には大変便利 – ある程度カスタマイズしてあるので、要件に合うときは すごく楽 • 反面、テーマ乗り換えの時が大変 – テーマ同士に含まれる機能の競合 – 機能の移植・統合・再実装・・・などなど
  25. 25. ユニットテスト〜M1とM2〜
  26. 26. Magentoとユニットテスト • そもそもMagento1の開発段階ではユニットテスト の概念がなかった (phpunitなどは既にあったのだが・・・) • サードパーティ実装のEcomDev_PHPUnitや公式の Test Automation Framework(TAF)を使ってユニット テストをやるケースが続いていた。 (ただし、TAFは対応が遅かった)
  27. 27. 1.9.2.0での追加 • 公式のMTF(Magento Testing Framework)の同梱 – ただし、1.9.2.0だけの話 • とはいえ公式にユニットテストのフレームワークが 付属することは喜ばしい
  28. 28. Magento2では? • そもそもの前提としてユニットテストだけでなく、パ フォーマンステストやマイグレーションテストまで付 属 • テストコードを付属させるのが「当然」の流れに • Magento Connectに公開するためには、テストコー ドを付属させることが絶対条件
  29. 29. ユニットテストの実際
  30. 30. EcomDev_PHPUnitの場合 • EcomDev_PHPUnitをまずインストールする – PHPunitももちろん必要 • エクステンションのconfig.xmlに追記する • ドキュメントを読みながらテストコードをコツコツ書く – Modelだけじゃなく、BlockやControllerのテストもできる ので、色々試すとGood
  31. 31. config.xml <phpunit> <suite> <modules> <My_Extension /> </modules> </suite> </phpunit>
  32. 32. テストケース • app/code/コードプール/My/Extension/Test に配置する • テストする単位でファイルを分ける • もっと詳しく知りたい場合は、 http://www.ecomdev.org/wp- content/uploads/2011/05/EcomDev_PHPUnit- 0.2.0-Manual.pdf を
  33. 33. テストケースの例 class My_Exension_Test_Model_Customer extends EcomDev_PHPUnit_Test_Case { public function setUp(){} public function tearDown(){} public function testSomething(){} }
  34. 34. Magento2の場合 • そもそもユニットテスト機能はフレームワークに統 合されている • もちろんベースはPHPUnitなので、PHPUnitの経験 がある人の知識は無駄にならない • テストケースは、Myextension/Test/Unit に置く • もちろんMTFも利用可能
  35. 35. 作り方 • app/code/My/Extension/Test/Unit以下にコードを 置く • namespaceを定義し、 PHPUnit_Framework_TestCaseを継承する • あとはPHPUnitのお作法通り書いていく
  36. 36. Magento Testing Frameworkの場合 • 1.9.2なら標準でついてくる – https://github.com/magento/mtf • 基本的に、Test Automation Frameworkの改良版 • Seleniumと連携してテストを行う、と言うもの • 正直、フロントエンドのテストは辛い。主にバックエ ンドのテスト向け
  37. 37. フロントエンドのテストが難しい理由 • マークアップに差がありすぎる – デフォルトのマークアップで調整しきれればよいが、通 常何かしらマークアップに変更が入っている • テストケースの変更が多い – Webサイトなのだからこれは当たりまえ • 決済系のテストをどうするか、はそれなりに課題
  38. 38. そもそも論 • ユニットテストの担当範囲をどこまでにするか? – Model/Block/Helperレベル? – Controllerまでやるべき? • Magento2的解釈では、 – Model/Block/HelperとControllerの一部 → ユニットテスト – それ以外 →MTF, api-functional, integration, performanceなどの 専用テストツールを用いる

×