LoginSignup
6
7

More than 5 years have passed since last update.

Magento1テーマ開発の勘所12点

Last updated at Posted at 2015-12-02

この記事はMagento Advent Calendar 2015の二日目です。

←「Magento Advent Calendar 2015」1日目「Magentoでアクセス集中を乗り切るには〜前編〜」
「Magento Advent Calendar 2015」3日目「Magento1.x開発環境をOS Xに構築する」

新兵@Magento日本コミュニティの@kzkiq2ndです。

2015年11月18日に新バージョンMagento2がリリースされましたが、まだまだ現役なのがMagento1。そこで、僕がMagento1テーマ開発で得た「適切かつ秩序を保つ制作を行うためのヒント」を備忘録として、これからMagentoを学ぶ方向けにまとめたいと思います。

M1開発の勘所. XMLの役割を理解する

MagentoテンプレートエンジンにおけるXMLとは何か?Magentoのテンプレートエンジンの中でXMLは「配置図」の役割を担う。言い換えれば「何を」「何処に」「配置する・しない」を定義する事ができる。

考え方は「共通パーツをいかに冗長なく使い回すか」であり、Railsのpartialsや、WordPressのget_headerなど、テンプレートファイルのコード中で「ここに・何を・配置する」という共通パーツ呼び出し型のテンプレートの延長線上にある。これらは基本的にパーツを表示したいコード位置で呼び出すが、MagentoのXML定義は「呼び出したい場所」と「呼び出したいモノ」両方をセットで定義するのである。

例えば、「レイアウト.phtml」で親ブロックの位置を決め、XMLでその中のどこに「各パーツ.phtml」を当てはめるかを指定するというのもXMLの仕事である。ちょうど以下の様に間を取り持つモノだという認識になる。

レイアウト.phtml <=> 定義.xml <=> パーツ.phtml

親ブロックの位置を記したレイアウト.phtmlの例(2カラムページのphtml)

このXML定義の優れている点は"配置"と"文脈"を分離したことである。おかげで、ECの様な機能とページバリエーションが多いアプリケーションで、何度も何度もパーツ呼び出しを書かないで済む様になっており、同時にMagentoアプリケーションの基礎にある考え方の一つである"継承"を体現している。

例えば以下の様な定義で、ページ毎にテンプレートを書く手間を無くしている。

「全てのページのデフォルト設定として、2カラム左サイドバーレイアウトを利用する」
「会員ログインページでは、左サイドバーに会員情報リンクを表示する」

Magento2ではさらに各パーツセットをcomposerモジュール(例えばカート関連機能モジュール)としてphtml,xml,lessなど全レベルで独立させているが、基本的な考え方は同じである。

M1開発の勘所. 3つの武器

「継承」「拡張」「上書き」が与えられた全てである。

あ、あと「コピペ」。いや、「どこかのサイトからコピペ」の意味ではなくマジメな話です。

Magento開発においては、必要な箇所を変更する、つまり「継承」「拡張」「上書き」いずれかを行うためにコードのコピペを多用することになる。そして、変更を加えたい箇所を正しく見つけ出す事がどれだけ速くなるかが、Magento開発のキモである。

M1開発の勘所. コアや元テーマをいじるな

常に行わなければならないのがMagentoのアップデートである。

Magento1ではアップデートをすると、

  • アプリケーションのコア
  • デフォルトで入っているテーマ
  • コア翻訳.csv

が置き換わる可能性があるため、ここに手を入れるとアップデートで消される。

もし、手を入れた内容が消されたら困るからといってアップデートしないでいると、いつか新聞に不名誉な形で無料の宣伝を出す事になるかもしれない。

また、コアに手を触れる事はMagento1開発の秩序を乱す禁じられた行為である。

コアや元テーマに手を触れてはいけない。

M1開発の勘所. 子テーマ

我々は子テーマのみ作りそして触れることが許されている。

親に手を出してはいけません。

M1開発の勘所. 開発中はキャッシュはOFF

Magento1は機能と柔軟さの代わりに重いアプリケーションであり、その重さをキャッシュで打ち消している。

キャッシュしているということは、修正しても反映しないということである。

開発中はキャッシュはOFFを忘れずに。

M1開発の勘所. IDEを使うと幸せになれる

Magento1はディレクトリが深く、関連するファイルが多いアプリケーションであり、ディレクトリをあちらこちらに移動しながら作業をすることになる。

Magento初学者はまず、どこになにがあるかを把握するまでに苦労するし時間もかかる。
しかしそれはIDEが支援してくれる。プラグインもある。Magento2も同様である。

幸せ。だいたい1万円。

PhpStorm

PhpStormのMagento1開発サポートプラグイン

M1開発の勘所. Git

人の記憶はあいまいであり、Magento開発では同時に複数ファイルを編集することになる。

そして自分が何をしていたのかわからなくなり迷子になる。
納期が迫る。
力技を使い秩序は乱れる。
クソコード。
動かない。
元の状態にすら戻すことはできない。
誰も助けてはくれない。
なぜこんなことになったのか。

「そうか、、Gitを使えば良かったのだ。」

サルでもわかるGit入門

M1開発の勘所. レンタルサーバーで動かすのは諦める

LAMPがあれば動くが、動くと使えるは違う。

Magentoはレンタルサーバーでは"つかえない”

M1開発の勘所. FPC!FPC!

FPCとはフルページキャッシュの事である。Magentoはこれがないとどうしても重い。
Magento2はデフォルトで入っているのに対し、Magento1では有償版となっている。しかし、無償版に使えるエクステンションが存在する。

インストールしましょう。

Lesti::Fpcを使用してMagentoを高速化する | Magento(マジェント)の総合サポートサービス Principleworks(プリンシプルワークス)

M1開発の勘所. 翻訳を上書きしよう

サイト内の文面を適切にデザインすることは重要な事である。Magentoはi18nを前提としたアプリケーションのため、翻訳ファイル.csvを拡張する機能が備わっている。

手順は

  1. 翻訳を探してくる(/app/locale/以下.csv)
  2. 利用している子テーマディレクトリに上書き用CSVを追加する(利用子テーマ/locale/ja_JP/translate.csv)
  3. ↑に上書きしたい言葉と訳語を書く(e.g. "Mage_Catalog::%s - %s","%s - %s")
  4. 管理画面「システム」> 「設定」>「デザイン」>「翻訳」に子テーマ名を指定

M1開発の勘所. エクステンションに注意

エクステンションは便利である。しかし複数のファイルをアプリケーションのさまざまな場所に追加するため、気がつくと秩序が乱れてしまっていることがある。

ところで、私たち開発者には3つの良い選択肢と1つのヤバい選択肢がある。

  1. エクステンションを使わないで実装する
  2. エクステンションの影響範囲を理解して使う
  3. エクステンションの影響範囲をgitでトラッキングしながら使う
  4. エクステンションの影響範囲はわからないしgitもわからないけど使おう

どれがヤバい選択肢か?

M1開発の勘所. M1に日本語の優しさはなく。コードを読み。英語でググる。

Magentoは英語圏のソフトウェアであり、日本語情報はあふれてはいない。しかし我々は信頼がおけなさそうなサイトは1秒以内に立ち去る程度に訓練されたインターネットに生きる人間である。自信を持って英語圏の世界に飛び込み、そして気付く。割と様子は変わらない。

PR. Magento日本コミュニティではMagento2の公式ドキュメントの翻訳を行っております。

Magento1開発の日本語情報ではプリンシプルワークスさんのブログを一読するのがオススメ。

Magento1テーマ開発のチュートリアルはtuts+さんがオススメ。

M1開発の勘所. アプリケーションコード全検索で戦う

Magento開発はひたすらMagentoのソースコードを探索することで進む。変更したい箇所を見つけるためにも検索力が必要であるし、まとまったドキュメントがない為に実装を読んで把握するしかないためである。これはM1のハードルを高くしてしまっている残念なポイントでもある。

もちろん、IDEの支援でだいぶ助かるのだけれども、ディレクトリ指定・拡張子指定・ファイル名での検索・正規表現・Github検索窓、なんでも使おう。

コチラからは以上です!

明日はSeto MasakazuさんMagento1.x開発環境をOS Xに構築するです!

6
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
7