Magentoできるもん管理人

Magentoできるもん!:>Magentoできるもん管理人

About Magentoできるもん管理人

この作成者は詳細を入力していません
So far Magentoできるもん管理人 has created 25 blog entries.

Magento2.3に日本語エクステンションをインストールする

By |2019-05-20T11:01:32+09:002019年5月18日|Categories: Magento日本語化|Tags: , |

1. Magento2.3系以降の新しい日本語エクステンションについて

Magento2を日本語化するの記事では、Composerを使って、二つの日本語エクステンション(日本語ロケール/日本語ローカライズ)をインストールする方法を解説いたしました。
しかし、2019年の最新のMagento2.3.x系からは、Magento2.2.x以前と違う、新しい日本語エクステンションが必要となります。

新しい日本語エクステンションは、Magento Community Engineering からの提供となりますが、ベースとなっているモジュールは、以前と同じようにVeriteworksさんの開発されたものになります。

ご参考
https://principle-works.jp/blog/finally-official-magento-japanese-localize-extension-published-in-marketplace/

新しい日本語エクステンションは、Magento2のEC機能をあらゆる角度から日本語環境に適合させるための、14個のモジュールが同梱された総合パッケージで、カート画面での住所氏名の語順、郵便番号からの自動住所入力、PDF文書での日本語フォント表記、日本円の端数処理など、Magento2のコアに関連する要素も組み込まれています。

特に、カート画面での日本語の住所氏名など、以前は英語順の不自然な配列での表示でしたが、今回の新しいエクステンションでは、コアレベルでのローカライズが進み、日本語での正しい語順に修正されています。

Magento2.3カート画面(日本語)

今回は、この新しい日本語エクステンションのインストール方法について、簡単な説明をいたします。

インストール方法は、

  • Magento Marketplaceにて入手
  • Composerを使う

の二つの方法があり、どちらのケースも無料で提供されています。

2. Magento Marketplaceでの入手とインストール

Magento2.3からの日本語エクステンションは、先日5月8日に、Magento Marketplaceにてリリースされました。

Japanese Localization by Magento Community Engineering
https://marketplace.magento.com/community-engineering-japan-common.html

Magento2.3日本語エクステンション

このMarketplaceで日本語エクステンションを入手するには、Marketplaceにアカウントを作成し、カート画面から購入(無料)の手続きをします。
そして、Magento2の管理画面の System > Tools > Web Setup Wizard > Extension Manager から、購入したエクステンションのインストールを行います。

基本的には、Marketplaceでエクステンションの購入をし、Magentoの管理画面でMarketplaceのアカウントと同期して、そして購入エクステンションを管理画面からインストールという流れになります。

同期をする際に、Public KeyPrivate Key の入力が必要となります。
今回の記事では、この二つのKeyの取得について、簡単に説明したいと思います。

先ず、Magento Marketplaceサイトの、右上の「Sign In」からサインインをしてください。(Magento Marketplaceがはじめての方は、サインイン画面右の「Register」から、画面の案内通りに入力を進め、Marketplaceのアカウントを作成してください。)
そして、サインイン後、以下の画像のように右上のプルダウンを開いて、My Profile をクリックします。

Magento Marketplace

続いて、My Products > Access Keys  をクリックします。

Magento Marketplace

そして、オレンジ色の「Create A New Access Key」ボタンをクリックします。

Magento Marketplace

以下のように、Keyの名前を入力するウィンドウが開きますので、任意の名前(自分の備忘のため)を半角で入力し、「OK」をクリックしてください。

Magento Marketplace

すると、画面が元に戻り、Public Key と Private Key がペアになって作成されています。

Magento Marketplace

このKeyを、Magento管理画面のExtension Manager の所定の欄に入力することになるのですが、Extension Managerでの具体的なインストール方法や使い方は、以下の公式ドキュメントをご参照ください。

Marketplaceで購入したエクステンションのインストール方法(公式ドキュメント 英語)
https://docs.magento.com/m2/ce/user_guide/system/web-setup-extension-manager.html

ご注意:
Web Setup Wizardは、Magento2をNginxサーバーでホストしている場合、現在、使用できない(アクセスできない)状況になっています。
また、Magentoサーバーでご紹介しているApache共用サーバーの場合も、特にMagento2.3系以降、メモリ不足等でエラーになってしまうケースが増えているようです。
Setup Wizardは、以前から不安定な動作をすることが多く報告されていて、私自身も(過去のトラウマがあり笑)普段はほとんど使用しておりません。コマンドでの作業に慣れている方は、次のComposerでのインストールを推奨いたします。
Setup Wizard(Extension Manager)の動作について情報がありましたら、コメント欄やフォーラムにて、お使いの環境や設定等をご報告いただけますと幸いです。

3. Composerでインストールをする(推奨)

新しい日本語エクステンションは、Composerでインストールすることもできます。
Composerを使う場合、以下の一行のコマンドでインストールができます。

共用サーバーの場合

Copy to Clipboard

クラウドやVPSの場合

Copy to Clipboard

コマンドでの作業については、以前のMagento2+日本語をComposerでインストールの動画をご覧いただけますと、イメージをつかんで頂きやすいと思います。
実際、日本語エクステンションのコマンドが変更になっているだけで、他はすべて同じ作業になります。

Magento2本体と日本語エクステンションを同時にComposerでインストールする際は、以下のようなコマンドラインでの作業になります。
*以下のコマンド例は、root権限のあるクラウド/VPS環境で一般ユーザーを作成した場合になります。共用サーバーの場合は、適宜sudo→php、composer→composer.pharに置き換えてください。

Composerのインストール
curl -sS https://getcomposer.org/installer | php

Magento2のダウンロード
sudo composer create-project --repository-url=https://repo.magento.com/ magento/project-community-edition

Magento2ファイル群の配置確認と移動(FTP等で)

日本語エクステンションのダウンロード
sudo composer require community-engineering/japan-common

Magento2用のデータベース作成

Magento2のインストール(ブラウザから、もしくは以下コマンド例)
sudo bin/magento setup:install --base-url=https://yourdomain.com/ --db-host=localhost --db-name=test_data --db-user=testuser --db-password=testpassword --admin-firstname=Taro --admin-lastname=Yamada --admin-email=test@yourdomain.com --admin-user=demo123 --admin-password=demo123 --backend-frontname=adminURL123 --language=ja_JP --currency=JPY --timezone=Asia/Tokyo --use-rewrites=1
*青字箇所は環境により置き換えてください。

はじめてMagentoのレポジトリからファイルをダウンロードする際には、Authentication(認証)が求められます。
前項でご説明をした、Magento Marketplaceにて所得したKeyを、この認証でも利用することができます。

Magentoレポジトリの認証

Composerでダウンロードを進めようとすると、

Authentication required (repo.magento.com):

という文言が表示され、Usernamae の入力を求められます。
この Username には、Marketplaceで取得した Public Key をコピペで入力し、[Enter]を押してください。

次に、Password の入力を求められます。
この Password には、Marketplaceで取得した Private Key をコピペで入力してください。
注意するのは、この Password の入力行では、自分でコピペした文字列もカーソルも画面上に表示されず、ブランクのままになっていることです。画面がフリーズしてしまったような感覚になりますが、しかし、確実にKeyをペーストをしたら、そのまま[Enter]を押してください。

すると、

Do you want to store credentials … ? [Yn]

と聞かれますので、「Y」(Yes)を入力し、[Enter]を押してください。
これで、Composerでのダウンロードが進みます。

インストールされた日本語エクステンションのファイルは、以下の画像のように、Magento2ルート/vendor/community-engineering 以下に配置されています。

14個のモジュール名は、

CommunityEngineering_ConfigurablePdfFont
CommunityEngineering_CurrencyPrecision
CommunityEngineering_FontIpa
CommunityEngineering_FontSourceHanSansJapanese
CommunityEngineering_JapaneseAddress
CommunityEngineering_JapaneseDefaultCmsPages
CommunityEngineering_JapaneseDefaultConfig
CommunityEngineering_JapaneseName
CommunityEngineering_JapanesePostalCode
CommunityEngineering_JapaneseRegion
CommunityEngineering_JapaneseStoreAddress
CommunityEngineering_JapaneseUrlRewrite
CommunityEngineering_JapaneseYenFormatting
CommunityEngineering_Kuromoji

となります。

Magento2日本語エクステンションの配置

メインとなる日本語翻訳のCSVファイルは、vendor/community-engineering/language-ja_jp/ja_JP.csv に配置されていますが、各モジュール内に i18n フォルダがある場合は、その中にも ja_JP.csv ファイルがあります。

また、新しい日本語エクステンションは、現在の1.0.0バージョンでは、日本語のシングルストア専用になっていて、多言語でのマルチストアの運用はできない仕様になっています。(今後、マルチストア対応のバージョンが開発され、一般リリースされる予定です。)

そのため、Magento2管理画面での言語指定がロックされ、別言語へ変更できないようになっています。

すでにインストール済みのMagento2.3.xに、後から日本語エクステンションを単体でインストールする際には、Magento2管理画面の STORES > Configration > General > Local Options > Locale にて、事前に、言語を「Japanese」に変更しておくようにしてください。

Localeが「English」のままで日本語エクステンションをインストールした場合には、管理画面からは言語の変更ができなくなっているので、以下のコマンドにて言語変更を実行してください。

共用サーバーの場合

Copy to Clipboard

クラウド/VPSの場合

Copy to Clipboard

4. Magento2.2.xからMagento2.3.xへのアップデートについて

すでにMagento2.2.x系以下で日本語ストアを構築、運営されている方は、この新しい日本語エクステンションをインストールするには、Magento2.3.xへのアップデートを行う必要があります。
逆に言うと、Magento2.3.xへアップデートするには、日本語エクステンションを一新することが必須となります。

2.2.x→2.3.xへのアップデートにおいては、Magentoアップデートのページにも書いているのですが、通常のマイナーアップデートと同じ作業ではエラーになり、アップデートに失敗してしまいます。

2.3系から、PHP7.2のサポートが追加され、PHP7.0のサポートが外れました。この関係で、Magento2にインストールしているサードパーティーのエクステンションの多くが、アップデート時に依存性絡みのPHPバージョンエラーになることが報告されています。

ご参考
https://firebearstudio.com/blog/how-to-upgrade-to-magento-2-3-update-error-fixes.html

そのため、2.3へアップデートする直前に、すべてのサードパーティのエクステンション/モジュールを、無効化、削除することが推奨されます。
通常、完璧なアンインストールを行わない限り、既存データはデータベースにそのまま残りますので、2.3へのアップデート後、エクステンション/モジュールを再インストール、再有効化すれば、それまで該当エクステンションで構築していた内容を復元することができます。

日本語エクステンションに関して言えば、2.2までの従来の日本語ロケール/日本語ローカライズは必要なくなりますので、2.3へのアップデート前に、以下の手順で無効化、削除を行います。
(*日本語翻訳を個別で編集している場合は、 ja_JP.csv ファイルをバックアップしてください。)

共用サーバーの場合

Copy to Clipboard
Copy to Clipboard
Copy to Clipboard

クラウド/VPSの場合

Copy to Clipboard
Copy to Clipboard
Copy to Clipboard

上記のように、Composerでインストールをしたエクステンション/モジュールは、Composerコマンドにより削除(remove)します。

一方、FTPでアップロードし、マニュアルインストールをしたエクステンションやテーマは、無効化(disable)のコマンドの後、やはりFTPソフトにて手作業で該当ファイルを削除するか、rmコマンドにて削除をします。

例えば、Magentoテーマでご紹介しているUltimoテーマを削除するには、以下のコマンドを実行します。
(*テーマをカスタマイズしている場合は、必ず個別に編集ファイルをバックアップしてください。)

共用サーバーの場合

Copy to Clipboard
Copy to Clipboard

クラウド/VPSの場合

Copy to Clipboard
Copy to Clipboard

サードパーティーのエクステンションやテーマを削除した後、Magento2.2から2.3へのアップデートは、以下のようなコマンドラインでの作業になります。
*以下のコマンド例は、root権限のあるクラウド/VPS環境でユーザーを作成した場合になります。共用サーバーの場合は、適宜sudo→php、composer→composer.pharに置き換えてください。

Magento2のバージョン特定
sudo composer require magento/product-community-edition=2.3.1 --no-update

追加パッケージの特定
sudo composer require --dev phpunit/phpunit:~6.2.0 friendsofphp/php-cs-fixer:~2.10.1 lusitanian/oauth:~0.8.10 pdepend/pdepend:2.5.2 sebastian/phpcpd:~3.0.0 squizlabs/php_codesniffer:3.2.2 --no-update

composer.jsonファイルの変更
sudo nano composer.json
(autoloadの段を見つけて、最終箇所に以下のように追記変更をします。)

"autoload": {
"psr-4": {
"Magento\\Framework\\": "lib/internal/Magento/Framework/",
"Magento\\Setup\\": "setup/src/Magento/Setup/",
"Magento\\": "app/code/Magento/",
"Zend\\Mvc\\Controller\\": "setup/src/Zend/Mvc/Controller/"
},
...
}

アップデート実行
sudo composer update

新しいバージョンファイルのダウンロードができたら、削除したエクステンションやテーマを、Composerでダウンロード、もしくはFTPにてアップロードし、再有効化をします。
そして、

sudo bin/magento setup:upgrade
sudo bin/magento setup:di:compile

にて、Magento2のセットアップを行い、すべてのキャッシュをクリアしてください。

この一連のアップデート作業は、Magento2.2系も2.3系もどちらもサポートをしている、PHP7.1にて行うようにしてください。2.3へのアップデート完了後、PHP7.2への切り換えが可能となります。
また、サードパーティー製品の削除と再インストールについては、事前に開発者に問い合わせをし、開発者からの指示やアドバイスを優先するようにしてください。

Magento2のアップデート(特に2.3へのアップデート)は煩瑣で、なかなか一度ではうまく成功しないかもしれません。
エラーメッセージから原因を特定し、サードパーティ開発元からの情報もよく吟味しながら、テスト環境でじっくり時間をかけてトライする必要があると思います。

5. 新しい日本語エクステンションの注意点

先述したように、Magento2.3以降の新しい日本語エクステンションは、2019年5月現在、まだ日本語のシングルストアのみに対応となっています。
そのため、Magento2.2.xを、日本語・日本円を含めた多言語・多通貨のマルチストア環境で構築・運営をしている場合は、Magento2.3へアップデートをするのは時期尚早かと思われます。

新しい日本語エクステンションは、GitHubにて現在進行形で開発されています。
GitHub: Magento2 Japan  https://github.com/magento/magento2-jp

Roadmapを見ると、大きく3段階でのリリースが予定されていて、先日の5月8日に、その第1段階のリリースがされました。
第2段階にて、多言語のマルチストア環境での対応が可能となる予定なので、具体的な時期がいつになるかは予想が難しいのですが、マルチストア環境の場合は、第2段階のリリースまで待つのが無難と思われます。

また、日本語の翻訳システムもCrowdinというプラットフォームが導入されていて、翻訳の追加や改善に、誰でも参加できるようになっています。(ご興味のある方は、Veriteworksさんのサイトをご参考ください。)

新しい日本語エクステンションは、私もまだ本番環境での作り込みを行なっておりません。
今後、もしまたなにか注意点が分かりましたら、当記事にて追加更新をしたいと思います。

「Adobe Commerce Cloud」という製品名の意味するところ

By |2019-05-07T09:49:27+09:002019年4月24日|Categories: Magentoバージョン|Tags: , , |

1. Magento CEO Mark Lavelle氏の退任

先日、4月18日に、MagentoのCEO Mark Lavelle氏の退任が、Magentoの公式ブログと氏のTwitterで公表されました。

A Farewell Message from Mark Lavelle
https://magento.com/blog/magento-news/farewell-message-mark-lavelle

Magento CEO 退任

Mark Lavelle氏がどのような人物か知らなかったのですが、どうやら、元々はeBayの人で、Magentoの開発者ではなく、純粋にビジネスマンとして、と同時にMagentoコミュニティへの良き理解者として、MagentoがeBayから独立する前後で、MagentoのCEOに就任したようです。なので、Magento2.0のリリースから、昨年のAdobe買収に至る、激動期のMagentoを率いたことになります。
多くの人が突然の公表に驚いたようですが、中には想定していた人もいるようで、買収後の常道という受け止め方もされているようです。

私はこのニュースをTwitterで知ったのですが、驚きというよりも、上記ツイート ”I know the best is yet to come for Magento!”「Magentoのベストはまだ来ていない(これから来る)」という最後の一文の余韻に、何か胸騒ぎのようなものを感じました。アイロニーがあると裏読みしたのではなく、むしろ、悲哀のようなものが漂っていると感じたのです。

2. Adobe Commerce Cloudのリリース

Mark氏の退任に先立ち、Adobeは、すべてをCloudでマネージドした Experience Cloud 内の製品パッケージの一つとして、Commerce Cloud をリリースいたしました。
https://techcrunch.com/2019/03/26/adobe-launches-its-commerce-cloud-based-on-its-magento-acquisition/

Adobe USA – Adobe Commerce Cloud, part of Adobe Experience Cloud
https://www.adobe.com/commerce/magento.html

Adobe 日本 – Adobe Experience Cloudに統合されたMagento Commerce Cloud
https://www.adobe.com/jp/commerce/magento.html

このCommerce Cloudは、Magento2をベースにしていますが、Adobe Experience Cloud内の他の製品(Analytics、Marketing、Advertisingなど)と連携した、Adobe独自の製品としてCloud上で統合されています。
注目すべきは、AdobeのUSAサイトでは、すでに製品名から「Magento」の名が消えて、「Adobe Commerce Cloud」と名づけられ、ロゴもAdobeシリーズ寄りに一新されていることです。

Adobe Commerce Cloudリリース

ただ、この「Adobe Commerce Cloud」の名とロゴが使用されているのは、まだアメリカとカナダのサイトのみで、日本も含めて他の国のAdobeサイトでは、「Magento Commerce Cloud」の名とMagento2の従来のロゴが使われています。アメリカ/カナダのAdobeサイトでも、ImagineというMagentoのイベントのバナーが貼られているので、AdobeサイトからMagento要素が消えてしまった、というわけではありません。今後、全世界的に「Adobe Commerce Cloud」の製品名で統一されていくことになるのかも、現状では、傍目になんとも言えない状況です。

ただ、この一新された名とロゴの指し示していることは、AdobeのCloudサービスに統合された「Magento2」は、コード的な中身はMagentoベースだけれども、製品としては、もうすでにAdobe独自のものになっている、という歴然とした事実です。

昨年の記事 Adobe+Magentoはオープンソースであり得るのか にも書きましたが、AdobeによるMagentoの買収で懸念されていることは、Magento2のオープンソース(無料版)が閉じられてしまうことです。
これに対しては、Adobeの開発もオープンソース化している面もあり、Adobe自身がMagentoのコミュニティに価値を見出した上での「買収」であるから、その中心にあるオープンソースの唐突なシャットダウンは考えられない、というのが一般的な見解です。

楽観的な見通しは、AdobeのCloud製品とMagento2のオープンソース版が永続的に共存し、オープンソースがCloud製品への集客としても効果的にワークするような状態です。(PhotoshopとPhotoshop Elementsのような関係を想像してもいいかもしれません。)

Magentoには素晴らしいコミュニティがあります。それは、Ecosystemとも言われていますが、Magento社、開発者、ベンダー、サードパーティー、エンドユーザー、それぞれがこのコミュニティの中で役割を果たし、それぞれが利益を享受できる、理想的な相互関係です。私も、一ユーザーとして、MagentoのEcosystemが存続してほしいと願っています。

しかし、Adobeには、Adobe独自のEcosystemが存在しています。
買収という事実を踏まえ、ニュートラルに考えれば、Magentoの既存のEcosystem(パートナー会社)は、AdobeのEcosystem内に、必要に応じて段階的に(もしくは選択的に)統一されていくのではないだろうか、という予想が自然と成り立ちます。

果たして、そうなった時、Magento2のオープンソースがどうなるのか、今のところ、全く予断ができません。

確実に言えるのは、Adobeは株主のいるバリバリの営利企業であり、$1.68ビリオンで買収したMagentoに、しっかり利益を出してもらわなければならない、そうでないと困る、ということです。

ある意味、「Adobe Commerce Cloud」は、Magento3とも呼ぶべき存在です。
これは、「Magento」という名の消えたMagento3の原型であり、すでに閉じられた環境へとシフトしつつあると見ることもできます。

3. Magentoの2020年問題

Magento2のオープンソースの行き末を考える時、参考になるのは、今まさに現在進行形であるMagento1の終わり方です。

Magento1系のサポート期限は、2020年6月までとアナウンスされています。もともと、2018年11月までの期限とされていましたが、2020年に延長されました(ご参考:Magento1.9のサポート期限が延長されました)。そして、どうやら、今回は本当に2020年の6月で、Magento1系の公式サポートは打ち切られると予想されます。

Magento1ユーザーは、Magento2への移行か、他のECプラットフォームへの移転を計画する時期なのですが、一方で、Magento1を使いつづけるという選択肢もあります。それは、Magentoのコミュニティで継続されるサポートサービスを利用する方法で、私の知っている限りでは、すでに以下の二つのポータルがあります。

Mage1 Long Term Support Magento 1.9.x after 2020
https://mage-one.com/

OpenMage Magento Long Term Support
https://openmage.github.io/magento-lts/

公式サポートも延長され、その後もコミュニティからのサポートポータルが立ち上がる。Magento1は、とても恵まれたプラットフォームで、これは、ひとえに、Magento1のユーザーが多いからこその結果と言えます。
Magentoのシェアはここ数年で減少していますが、現在もMagentoユーザーの全体のうち、80%〜90%が、依然としてMagento1系を使っていると推計されています。

ECプラットフォーム シェア

上の図は、BuitWithという調査サイトでの、ECプラットフォーム別の世界シェアを示したグラフです。アクセス数のTop1ミリオンサイトから、ECサイトのみを抽出し、(おそらくコードから)プラットフォームを自動判別した推計データです。
2019年4月現在、1位がWooCommerce(WordPress)22%、2位がShopify 18%、3位がMagento 12%となっています。

AheadworksというMagentoベンダーが、やはりTop1ミリオンサイトを基準に2015年10月に調査したデータでは、Magentoオープンソース+MagentoEE(有償版)は、合計で30%を超え、当時、世界シェアNo.1でした。
https://www.aheadworks.com/blog/ecommerce-platforms-popularity-october-2015-top-five-solutions-take-three-quarters-of-the-market/

調査条件や手法がすっかり同じではないと思うので、純粋に比較するのは難しいのですが、Magentoは、Magento2をリリース以降、その世界シェアを30%台から12%に大きく後退させたことになります。
しかも、現在のMagento利用者のうち、8-9割がMagento1系の残存組なので、2020年6月でサポートの切れる1系を除いて、仮にMagento2系ユーザーだけでMagentoの世界シェアを推計すると、向後1年の伸びを考慮したとしても、わずか1%〜2%ほどしかないという数字が導き出せます。

これは、Magentoの2020年問題ともいうべき大問題です。

ユーザーのいない(少ない)Magento2が、数年後どうなるのか。Magento1のような長期のサポート環境が確保されるのか。
2020年以降、Magento1系から2系への移行特需がなくなった後も、AdobeにとってMagentoコミュニティ全体が「価値あるもの」と映るのか。
Magento/Adobe社は、将来の影響を最小限にとどめるため、意図的にオープンソースのユーザーを減らそうとしているのではないか。

Magento2を導入する場合には、このような視点からもその是非を検討する必要があります。
あるいは、そもそもの初めから、Adobe Cloudの有償製品のみを、今後の「Magento」の第一選択肢として考えるべきなのかもしれません。

もちろん、これは私の個人的な見方で、必ずこのような方法へ向かうと確信しているわけでもありません。Magentoの将来には、様々なバリエーションが想定されると思います。

ただ、Mark Lavelle氏の退任と、「Adobe Commerce Cloud」という製品名を同時に思う時、オープンソースとしてのMagento2の未来は、100%視界良好と言うわけにはいかないと、そういう感慨を抱いています。

追記(2019年5月4日):
Adobe社でMagento2のAdobe製品への統合をしている開発者のPeter Sheldon氏は、Jamersanホストのインタビューで、Magentoのオープンソースは継続(27-31分あたり)、また、オープンソースは小規模のストア運営者向けに(1時間10-13分あたり)、という趣旨の発言をしています。(*あくまでも現段階でのAdobeの広報的なニュアンスもあるかと思いますが。)
Adobe Commerce Cloudは、方向性としては完全に大規模エンタープライズ向けで、Salesforce Commerceや、Oracle ATG、IBM WebSphereとの競合を意識しているようです。

Magento2を高速化する方法 – 管理画面での確認項目とサーバーについて

By |2019-04-06T06:19:21+09:002019年3月25日|Categories: Magentoの設定|Tags: , |

1. サイト表示のスピードはTTFBに注目する

Magento2はよく「重い」「遅い」と言われます。
コードが膨大なので仕方ないだろうと思うのですが、まだ開店前で、サイトを構築している段階でも、編集したページを確認するのすら時間がかかり、作業している自分もじれったくなってしまうような環境は、やはり問題があります。

サイトの表示速度を測るのに、一番注目するといいのは、TTFB(Time To First Byte)とされています。
これは、直訳で「はじめの1バイトが届くまでの時間」の意で、いわゆるサーバーのレスポンスタイム、サーバーからのはじめの1バイトをブラウザが受け取るまでの時間=サイトが開くまでに閲覧者が待っている時間のことになります。
厳密には、サイトの表示速度のことではなく、サーバー⇔ブラウザの反応時間のことになるのですが、この時間をできる限り短縮することが、サイト高速化の第一の目標になります。もちろん、これがすべてではないのですが、一つの指標として参考にしてみてください。

このTTFBを測るサイトは、 keyCDNやPingdomのテストツールが使いやすいです。

keyCDN Web Performance Test
https://tools.keycdn.com/performance

Pingdom Website Speed Test (TTFBは「Wait」として黄色のバーで表示されます。)
https://tools.pingdom.com/

TTFB サーバーレスポンス速度テスト

上の図はkeyCDNのテストページの結果で、URLを入れて測定すると、世界14都市でのTTFBの数値が表示されます。
サンプルとして測定したのは、Magento2・Lumaのデモサイト(東京サーバー)で、TTFBは東京とシンガポールからの数値が緑色になっていて、フランクフルトなどヨーロッパの都市では1秒前後も長くかかっています。サーバーロケーションに近いほど、TTFBが短くなるということが分かります。

Googleによると、200ms(0.2秒)以内がTTFBの理想値なので、この200msを一つの目安としていいのではないかと思います。600ms以内なら標準、それ以上長いと、やはりなんらかの方法で改善を考えたほうがいいかもしれません。

このパフォーマンスを上げるには、どうしてもサーバー設定や環境構築のところから確認していく必要があるのですが、かなり複雑な内容になってしまうので、先ずは、どのような環境でも共通するような、Magento2の管理画面内での設定項目の確認からしてみます。

2. Cache(キャッシュ)を有効化する

Magento2には、ページ表示を速くするために、Cache(キャッシュ)=ファイルを一時的に保存する機能が備わっています。
ページを開くのが昔のダイヤル回線のように不自然なほど遅い場合には、先ず、このキャッシュがきちんと有効になっているかどうかを確認してください。

Magento2の管理画面 SYSTEM > Cache Management をクリックすると、Magento2のキャッシュシステムの操作ページが開きます。

Magento2 Cacheキャッシュ有効状態

上記のように、緑色の[ENABLED]という表示が並んでいる状態では、すべてのCacheキャッシュが有効化されています。

しかし、以下のように、赤色の[DISABLED]という表示が並んでいる状態では、Cacheキャッシュの一部(またはすべて)が無効化されているので、有効化に切り換える必要があります。

Magento2 Cacheキャッシュ無効状態

Cacheキャッシュを有効化するには、有効化するキャッシュにチェック✔️を入れて、左上プルダウンから[Enable]を選択して、[Submit](送信)をクリックします。

Magento2 Cacheキャッシュを有効に切り換える
Magento2 Cacheキャッシュを有効に切り換える

すると、以下のように緑色の[ENABLED]に切り換わり、フルページキャッシュが有効化されます。

Magento2 Cacheキャッシュを有効に切り換える

ただし、Magento2がProductionモードになっている時には、上記のプルダウンで[Enable]の選択肢がリストになく、管理画面からキャッシュを有効化することができません。(Magento2のモードについては、Magento2のモード変換と静的ファイルの展開についてをご参照ください。)
この場合は、Magento2のルートにSSHアクセスして、以下のコマンドラインで、キャッシュを有効化させます。

php bin/magento cache:enable

Cacheキャッシュの有効化は基本的なことなので、Magento2を使い慣れている人には当たり前のことなのですが、稀に、なんらかの事情で(特に、エクステンションをインストールしたりモードを変更したりした際のセットアップ後に)、Cacheキャッシュが勝手に無効化されてしまう場合があります。原因がよく分からないのですが、急激にサイトのスピードがダウンした時などは、フルページキャッシュが効いていない可能性が高いので、Cacheキャッシュの状態を確認してみてください。

3. CSSとJSファイルの最適化

次に、CSSとJSファイルを最適化します。CSSファイルとJavascriptのファイルを最小化することで、読み込みファイルの総量を軽量化することができます。

先ず、管理画面 STORES > Configuration > Advanced > Developer > JavaScript Settings / CSS Settings へ進みます。

CSSとJavascriptの最適化

それぞれの項目を、以下のように設定します。

JavaScript Settings
Merge JavaScript Files: Yes にします。JSファイルをマージ(結合)することで、軽量化します。
Enable JavaScript Bundling: No にします。バンドルをYesにすると効果的なケースもありますが、一般的にバンドルされたJSファイルが大きくなりすぎて逆効果になることが多く、推奨されていません。(ご参考: https://inchoo.net/magento-2/javascript-bundling-magento-2/
Minify JavaScript Files: Yes にします。JSファイルを最小化します。

CSS Settings
Merge CSS Files: Yes にします。CSSファイルをマージ(結合)することで、軽量化します。
Minify CSS Files: Yes にします。CSSファイルを最小化します。

設定をしたら、右上のオレンジ色の [Save Config] ボタンをクリックして保存します。
その後、SYSTEM > Cache Management に進み、[Flush Magento Cache]ボタンをクリックして、Magento2のキャッシュをクリアしてください。

4. HTMLファイルの最適化

次に、HTMLファイルを最適化します。HTMLファイルを最小化することで、読み込みファイルの総量を軽量化することができます。

上記2と同じページ内の、管理画面 STORES > Configuration > Advanced > Developer >Template Settings へ進みます。

HTMLファイルの最適化

以下のように設定します。

Template Settings
Minify HTML: Yes にします。HTMLファイルを最小化します。

設定をしたら、右上のオレンジ色の [Save Config] ボタンをクリックして保存します。
その後、SYSTEM > Cache Management に進み、[Flush Magento Cache]ボタンをクリックして、Magento2のキャッシュをクリアしてください。

CSS、JS、HTMLの最適化でのご注意

  • Magento2がproductionモードの場合、Advanced > Developer のパネルは管理画面からアクセスできません。いったんdeveloperモードに変更し、上記を設定したら、もう一度productionモードへ戻してください。その際に、6. Magento2をprudctionモードにする で紹介するコマンドの順で実行してください。
  • CSS、JS、HTMLの各ファイルの最適化では、CDNや他のキャッシュ系サービスとの共用でコードが衝突し、サイトのページが崩れたり、カート画面がブランクになってしまうケースが報告されています。設定後は、必ずサイトの表示を確認し、テスト注文も入れるようにしてください。もしトラブルが発生している場合は、先ずHTMLの最小化を無効にして、再確認をしてみてください。
  • productionモードに変更後、最適化が効いていないと思われる場合は、Apacheサーバーでは .htaccessファイルでの MAGE_MODEの値をproductionに、Nginxサーバーでは、nginx設定ファイル中のMAGE_MODEの値をproductionに変更してください。(ご参考: https://magento.stackexchange.com/questions/251861/magento-2-not-minifying-js-css-or-html-in-production-mode

5. Flat Catalogを有効化する

Magento2の商品データベースは、デフォルト状態では、Entity-Attribute-Value (EAV) というシステムを利用しています。
この状態だと、一つの商品に複数のattributes(属性)が結びついている場合、その商品ページを表示するために、Magento2は複数のデータベースのテーブルを参照しなければなりません。
しかし、Flat Catalogを有効にすることで、この複数のテーブルを一つにまとめることができます。そのぶん、商品ページの表示スピードが速くなります。

このFlat Catalogを有効化するためには、STORES > Configuration > CATALOG > Catalog > Storefront に進みます。
そして、画面をややスクロールして、Use Flat Catalog Category と、Use Flat Catalog Product の項目を見つけます。

Flat Catalogの有効化

右のUse system valueのボックスに入っているチェックマークを外して、それぞれの項目を、以下のように設定します。

Use Flat Catalog Category: Yes にします。
Use Flat Catalog Product: Yes にします。

設定をしたら、右上のオレンジ色の [Save Config] ボタンをクリックして保存します。
その後、SYSTEM > Cache Management に進み、[Flush Magento Cache]ボタンをクリックして、Magento2のキャッシュをクリアしてください。

すると、Magento2管理画面の上部に、以下のようなメッセージが表示されます。

indexが無効です

これは、Magento2のIndexに無効になっているものがあります、という意味で、Flat Catalogをインデックスする必要があるということです。

Magento2にCronが設定されていると、指定の時間帯でIndexerが動くので、このメッセージはしばらくして自動的に消えます。
Cronが設定されていない場合は、お使いの環境でCronを設定してください。Cronについては、Magento2 Cron(クロン)の設定方法の記事をご参照ください。

6. Magento2をproductionモードにする

Magento2には、「モード」があります。
インストール直後は、通常 defaultモードになっていて、これは、サイト構築の段階で最も推奨されるモードです。
しかし、サイト構築が完成し、いざ開店、本番環境への移行となりましたら、Magento2のモードを productionモードに変更してください。このproductiomモードの状態だと、/pub/フォルダ以下に静的ファイルが配置され、Magento2の表示速度が一番速くなります。
Magento2のモードについては、Magento2のモード変換と静的ファイルの展開についての記事をご参照ください。

Magento2をproductionモードに変更するには、管理画面からの操作ではなく、SSHアクセスのコマンド作業が必要になります。
productiomモードへの変更は、以下のコマンドを実行します。

php bin/magento deploy:mode:set production --skip-compilation
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy
php bin/magento setup:static-content:deploy ja_JP #日本語ストアがある場合

7. 使用していないエクステンションを無効化する

Magento2には、デフォルト状態で、サードパティーのエクステンションが同梱されています。名前をあげると、Dotmailer、Amazon、Klarna、Vertex などです。
これからのサービスは、本来、Magento2のコアコードとは関係なく、利用する人だけが任意でインストールすべきエクステンション(モジュール)になります。使用していない場合は、モジュールを無効化することで、Magento2への負担を多少でも減らすことができます。

ご参考:
https://www.yireo.com/blog/2018-05-23-disabling-annoying-3rd-party-magento-modules
https://www.integer-net.com/make-magento-2-small-again/

エクステンション(モジュール)の状態を確認したり、無効化するには、以下のコマンドを実行してください。

# Magento2コア以外のエクステンションリストを見る
php bin/magento module:status | grep -v Magento_

# エクステンション無効化の例
php bin/magento module:disable Klarna_Core Klarna_Ordermanagement Klarna_Kp
php bin/magento module:disable Amazon_Core Amazon_Login Amazon_Payment
php bin/magento module:disable Dotdigitalgroup_Email
php bin/magento module:disable Temando_Shipping
php bin/magento module:disable Vertex_Tax

# セットアップ
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy
php bin/magento cache:clean
php bin/magento cache:flush

8.サーバースペックを確認する

Magento2では、なるべく高スペックのサーバーで運営することが必要と言われています。
では、どのくらいのスペックならいいのか、ということですが、Magentoの公式ドキュメントに、推奨環境が説明されています。

Upgrading the Magento applications and extensions you obtain from Magento Marketplaces and other sources can require up to 2GB of RAM. If you are using a system with less than 2GB of RAM, we recommend you create a swap file; otherwise, your upgrade might fail.
https://devdocs.magento.com/guides/v2.3/install-gde/system-requirements-tech.html

上記の引用は、メモリの説明で、2GBを推奨値としています。

しかし、2GB以下はダメかというと決してそういうわけでもなく、メモリ2GB以下の環境では、Marketplaceからのアップデートやエクステンションのダウンロードをうまく進めるために、swap(スワップファイル)を作成してください、と注記しています。逆に言うと、スワップファイル/領域を作成すれば、2GB以下のメモリでも、なんとか凌ぐことができると解釈できます。
さらに言うと、Setup WizardやComposerを使用しない通常稼働の状態では、2GBメモリ以下(1GBなど)でも問題ない、ということにもなります。

swap(スワップ)は、共用サーバーでは作成できない環境が多いので、最小メモリでMagento2にトライするには、VPSの環境が一番ふさわしいかもしれません。

ただ、これはテスト環境やサイト構築時、開店当初の段階での推奨値なので、ストアの商品数やアクセス数の増加により、必要とされるスペックも変わってくることにご注意ください。

また、Magento2バージョンとPHP、MySQLの各バージョンの整合、PHPのエクステンション(OPcacheなど)が正しくインストールされて機能しているかも、上記リンクを参照しながら確認してください。

9. Webサーバーの構成を見直す

Magento2を動かすWebサーバーとしては、Apache(アパッチ)サーバーか、Nginx(エンジンエックス)サーバーか、大きく二つの選択肢があります。

例えば、日本のMagento第一人者、Veriteworksの西氏がさくらのナレッジで公開されているチュートリアルでは、Apacheサーバーをベースにすべてが説明されています。
https://knowledge.sakura.ad.jp/serialization/use-magento/

大変優れたチュートリアルで、学ぶことが多いのですが、Apacheサーバーでは、特に本番環境において、Varnishというキャッシュを導入することが強く推奨されます。実際、上記「Magentoを本格的に運用する」の記事の中でも「Varnishは不可欠」と明言されています。
Apacheサーバーを選ぶ場合、本番環境では、Varnishを入れることが必須と考えたほうがいいでしょう。

ただし、オープンソースのVarnishは、SSL(HTTPS)接続をサポートしていません。
そのため、SSL terminationとして、別途プロキシを設定する必要があります。海外のMagento2ユーザーでは、そのプロキシに、Nginxを採用するのが一般的となっています。

Apache+Varnish+Nginx(SSL)はアーキテクチャが複雑になり、設定が難しく、しかもメモリ消費が激しくなると言われています。Varnish単独で別サーバーを用意するか、同居の場合は、高スペックのサーバーを利用することになります。

Magento2サーバーApacheかNginxか

一方、はじめからNginxサーバーを選択する方法もあります。
この場合、Nginx+PHP-FMP(FastCGI)の組み合わせになり、設定も比較的容易で、パフォーマンスも良好です。Apache+Varnishと比べると、その半分のメモリで運用しても問題ないという報告があります。

スタートアップの小〜中規模のストア構築で、コマンドラインの作業に抵抗がない方は、VPSにNginxサーバーでMagento2を構築するのが、最もコストパフォーマンスのいい選択になるのではないか、と私は考えています。

また、必要になれば、NginxにもVarnishを入れることができます。Nginxをサーバーとしてもプロキシとしても設定できるので、Apache+Varnishの構成と比べるとアーキテクチャの複雑さが緩和され、メンテナンスの負担も軽くなると言われています。
商品点数が数万以上で、1,000人以上が同時にアクセスするような大規模サイトでは、Varnishを入れて足腰を強くすることが、サイトパフォーマンスの維持に有力な対処方法となります。

ただし、Nginxにも欠点があります。
現在、Magento2をNginxサーバーでホストすると、管理画面のSetup Wizardが利用できない(表示されない)というバグが報告されており、今後いつ修復されるか、はっきりと分からない状況です。SetupWizardを利用する方は、Nginxでの運用はいましばらく様子見をしたほうがいいかもしれません。
ご参考: https://magento.stackexchange.com/questions/222345/magento-2-2-2-web-setup-wizard-not-visible-in-backend

  • Apache+Varnish
  • Nginx+PHP-FMP(FastCGI)

Magento2をこのどちらのサーバー構成で運用するのがいいかは、古くから(笑)いろいろと議論されており、結局は、運用者が使いやすほうを選べばいいのではないか、と言われています。
ご参考:https://magento.stackexchange.com/questions/175438/nginx-or-apache-for-magento-2-x

ちなみに、Magentoサーバーでご紹介しているSiteGroundは、Apacheベースの共用サーバーになります。
SiteGroundでVarnishを設定することはできないのですが、SiteGround特製のNginxプロキシによるキャッシュシステムや、CloudflareのCDNとの連携、また、バックエンドにMemcacheなどを簡単に導入することができます。さらに、Cloudプラン(cPanelつき)では、HHVMを設定することも可能です。
本格運用にどこまで耐えられるかと言われると疑問は残りますが、海外サーバーの場合、コマンド作業の苦手な人でもcPanelからの直感的操作のみでMagento2サイトの外部環境を構成することができます。初心者の方は1〜2年くらい共用サーバーで修行をしてMagento2に慣れ、それからVPSへという流れがステップ的に無理のない選択になるのではないかと思います。

10. Redis、GZIP、HTTP/2、その他

その他、必ず導入したほうがいいものとして、Redisがあります。
Redisとは何か、ときちんと説明するのは難しいのですが、ここでは簡単に、Magento2のセッションデータをディスクに格納し、Magento2のパフォーマンスをバックエンドで改善してくれるツール、データベースのキャッシュシステム、と理解してください。
Redisはオープンソースで、VPS環境で比較的容易に導入することができます。同様のシステムにMemcacheがありますが、RedisとMemcaheの併用は不可で、どちらか一つと言われれば、Redisを選ぶのが一般的です。

また、GZIPという、ファイル圧縮もサーバー側のファイルで設定でき、HTTP/2の設定も、ファイルの読み込みを速くする効果があります。RedisもGZIPもHTTP/2も、Apache、Nginxの両サーバー環境での設定が可能です。

その他、有料サービスになることが多いのですが、CDN(Content Delivery Network)やロードバランサーの導入も、Magento2のスピードアップに貢献します。

今回の記事は、特に後半が駆け足になってしまい、サーバー構成の一つひとつの詳細な設定方法を説明することはできないのですが、冒頭のスピードテストを繰り返しながら、それぞれの環境でベストなパフォーマンスになるよう、様々なツールやサービスを上手に組み合わせて、理想的なMagento2環境を構築してください。

Magentoサポートはじめました

By |2019-04-02T13:50:49+09:002019年2月12日|Categories: あいさつ, 中国越境EC|Tags: |

サービス開始延期のお知らせとお詫び

1月の末に立ちあげた有料サポートのMagedekiまげでき!サイトなのですが、月額制サービス内容の抜本的な見直し、Magento2.2系から2.3系へのアップデート、また、それに伴う日本語ストア環境の変更等の複合的な要素を勘案し、しばらくの間、サービスサイトをメンテナンスさせていただくことにいたしました。
ご迷惑おかけして申しわけありませんが、新規サイトの公開まで、もうしばらくお待ちいただけますようお願い申しあげます。ご質問などありましたら、コメント欄にコメントをいただくか、お問い合わせよりご連絡いただけますと幸いです。

Magentoできるもん!管理人 小林

この度、Magentoできるもん!サポートセンターとして、Magento2サポートの有料サービスをはじめました。Magentoできるもん!の省略で、「Magedekiまげでき!」というサイト名になります。

サービスは大きく分けて、月額制サポート、単発代行サポート、Syke通話サポートの3種類になります。

  • 月額制サポートは、Magento2初心者のかた向けのオールインワンサポートパッケージです。Magento2の構築をしながら同時にMagento2の使い方も学べる学習型の総合サービスになります。
  • 単発代行サポートは、必要なサポートを必要な時に必要な分だけご購入できるオンデマンドサービスです。順次、サービスをリリースしています。
  • Skype通話サポートは、実際に画面で作業をしながらSkype通話にてMagento2の使い方を習得することができるサービスです。また、Magento2のトラブルシューティングなどにもご利用いただけます。

すべてのサポートを、当サイト管理人の小林にて担当いたします。
詳しい内容は、Magentoがはじめてのお客様へのページの「Magento2を使いこなすための基本方針」をご参照ください。

月額制サポートについては、現在、最新のMagento2.3系での構築環境を吟味しており、準備中になります。サポート態勢が整いましたら、今春以降にサービス開始の予定です。

Magedekiまげでき!サービス

追記(2月27日、3月15日):
2019年1月末にリリースしたMagedekiまげでき!Magento2サポートサービスですが、複数のお客様より助言やアドバイス、リクエストをいただき、勘案の結果、サービス内容の抜本的な見直しを行うことにいたしました。
当初は、Magento2での中国向け越境ECにサービスの力点をおく予定でしたが、中国ローカライズの機能で未検証の部分があり、正式なサービスとしてご提供するには時期尚早と判断いたしました。そのため、月額制サポートの内容は、大きく変更して再リリースをする予定です。

Magento2.3管理画面の無料デモを公開!

By |2019-04-13T15:33:34+09:002019年1月26日|Categories: Magentoの設定, Magentoバージョン, Magentoテーマ|Tags: , , , |

1. Magento2系最新バージョンの管理画面デモ

以前よりリクエストのあったMagento2管理画面のデモを一般公開しました。
こちらのリンクより、Magento2 管理画面(Backend)のログイン画面にアクセスできます。管理画面の中に入るには、以下の画像のログイン情報をご利用ください。

Magento2 管理画面 無料デモ(こちらからログイン)>>

Magento2管理画面ログアウト

管理画面からログアウトをするには、画面右上のアカウントアイコンの▼マークをクリックすると、プルダウンが開きますので、そこから「Sign Out」をクリックしてください。

また、こちらの管理画面内で編集作業をすると、FrontendのMagento2デモLumaテーマの表のサイトに直接反映されますので、どうぞご留意ください。もちろん変更や編集をしていただいて構いませんが、次にアクセスされる方のために、できるだけ元に戻しておいていただけますと大変ありがたいです。
尚、一部機能には制限をさせていただいておりますので、どうぞご了承ください。
サイトのどこかに不具合があったり、レイアウトがガタガタに崩れていたりしましたら、お問い合わせよりご一報をいただくか、Magentoフォーラムにてご投稿いただけますと助かります。

Magento2管理画面

Backend(管理画面)

Magento2デモ Lumaテーマ

Frontend(表のサイト)

2019年1月現在、このデモサイトは、Magento2系の最新バージョン、2.3.0をインストールしています。画面のインターフェイスは、2.2系から大きく変化はしておらず、2.3系の目玉であるPWA Studio(PWAストア開発ツール)は本体に同梱はされていません。Page Builderについては、2.3.1バージョンから有料のCommerce版に先行搭載されています。
今後も公式のアップデートがありましたら、このデモサイトも随時アップデートをしていく予定です。(*)

Magento2がどんなものか興味がある、とりあえず管理画面を見てみたい、すこしだけ触ってみたい、そんなニーズにお応えするために、管理画面デモを公開しました。ぜひ実際にログインして、中を見て、Magento2がどんなものかをご確認ください。

2. Ultimoテーマのデモサイトアップデート

また、Magentoデモのページでもご案内しているUltimoテーマも、デモサイトを2.3系にアップデートしました。
マルチストアも、English、简体中文、繁体中文の、3ストアビューの構成に変更し、それぞれ異なるUltimoテンプレートをインポートしています。右上の言語スイッチャーからストアの切り換えができ、3つのサブドメインで表示されます。どのストアも、中身はほぼLumaテーマのサンプルサイトのままで、骨組のみを設定し、細かい部分は編集していません。
中国語ストアも、コンテンツは英語のままですので、言語ロケールをインストールすると、どの部分が翻訳に反映されのるか一目瞭然になっております。

Magento2 Ultimoテーマデモ English
Magento2 Ultimoテーマデモ English(公開終了)
Magento2 Ultimoテーマデモ 中国語(簡体字)
Magento2 Ultimoテーマデモ 中国語・簡体字(公開終了)
Magento2 Ultimoテーマデモ 中国語(繁体字)
Magento2 Ultimoテーマデモ 中国語・繁体字(公開終了)

今回のデモサイトのアップデートで、Magento1.9系のMadison Islandサンプルテーマは公開を終了させていただきました。
また、Magentoテーマにてご紹介している、FastestテーマやClaueテーマも、デモサイトは公開終了としました。Portoテーマにつきましては、機会を見て、最新バージョンのデモサイトを設定し直す予定です。

Magento定番Ultimoテーマを購入する(英語)

追記(2019年2月25日):
Portoテーマの新しいデモサイト(Magento2.3)も公開しました。Magentoデモにてご確認ください。

* 追記(2019年3月29日):
LumaテーマとUltimoテーマのデモサイトを、2.3.0→2.3.1にアップデートいたしました。

追記(2019年4月13日):
UltimoテーマとPortoテーマのデモサイトは、公開を終了とさせていただきました。

Magento2 Lumaテーマの編集方法 / カスタムテーマの作成

By |2019-01-25T15:33:32+09:002018年12月28日|Categories: Magentoテーマ|Tags: , , , |

1. Magento2 Lumaテーマについて

Magento2には、公式サンプルテーマとして、Lumaテーマをデフォルトでインストールすることができます。このLumaテーマは、Magentoデモ・導入事例のページでもご紹介しています。

Lumaテーマをインストールには、cPanelのある環境ではMagento2本体を1クリックインストールする際に、Sample Dataの項目にチェックを入れるだけです。
ComposerによりMagento2をインストールする場合は、php bin/magento sampledata:deploy、もしくは、sudo bin/magento sampledata:deploy のコマンドを、Magento2をブラウザでインストールする前に実行してください。
また、FTPでMagento2ファイルのマニュアルアップロードをする場合は、Magentoの公式ダンロードページにて、Full Release with Sample dataをダウンロードしてください。

Magento2 Lumaテーマ

Magento2 Lumaテーマ デモサイト(英語ストアのみ)

Lumaテーマをインストールしたフレッシュな状態のMagento2を目の当たりにすると、色を変えたり配置を少し工夫したり、テキストを置き換えたりして、そのまま自分のストアのテーマとして使えるのではないだろうか、と、そんな風に考える人も多いかと思います。私もはじめはそう考えました。
色を変えるくらいならきっと簡単だろう、この画像を置き換えれば同じようなレイアウトで自分のカテゴリページのトップも作れるだろう、フッターのこのリンクはいらないから削除しよう、別のリンクに置きかえよう等々、そんな風に考えるのが、サイト運営者としては普通のことだと思います。

ところが、このLumaテーマ、そうは問屋が卸してくれません。
通常のECアプリケーションであれば、色を変えるなんてお茶の子さいさいのはずなのですが、このLumaでは、管理画面からは色一つ変えることができません。フッターのリンクをいじるにはどこを編集すればいいのか、管理画面を延々さまよっても、全く見つけることができません。それどろか、特にMagento2をはじめて触る人にとっては、ホームページのトップ画像がどこにどうやってアップロードされているかさえ皆目見当がつかないのです。

正直言って、Magento2のとっつきにくさは、このLumaテーマの不親切さにも原因があると言えます。

2. Lumaテーマを編集するには、Lumaを上書きするカスタムテーマを作らないといけない

実は、Magento2 Lumaテーマを編集することは、できないのです。
Lumaテーマを編集するためには、Lumaをそのまま編集しようとするのではなくて、Lumaを上書きするためのカスタムテーマを自分で作成しなければなりません。つまり、Magento2のフロントエンドの開発者と同じ発想で作業をしなければならないということになります。
この道を極めるのは茨の道ですので、今回はカスタムテーマを作るための基本的な方法論といくつかの編集例だけをご紹介させていただきます。

先ずは、次の動画を見てください。

動画を見てよく分からなくても心配ありません。ただ、この動画で作業していることが、Magento2のLumaテーマの「編集」なので、とりあえずこれを見てイメージをつかんでください。
ちなみに、このPronkoさんが使っているのは、PHPStormというエディターだと思います(プロ向けですね)。こういう優れたエディターがなくても、普通にコードを書けるエディターがあって、ファイルをアップロードするFTPがあれば、カスタムテーマを作成することはできます。

Pronkoさんの動画以外では、他に以下のサイトもご参照ください。
https://www.emiprotechnologies.com/blog/magento-blog-56/post/how-to-create-magento2-custom-theme-625
http://www.codextblog.com/magento-2/create-a-custom-child-theme-from-luma-theme/

Magentoの公式ドキュメントでの説明はこちらです。
https://devdocs.magento.com/guides/v2.2/frontend-dev-guide/themes/theme-create.html

3. カスタムテーマを作るための3つのファイル

カスタムテーマ作成の出発点として、テーマの名前を決めます。
テーマの名前の表記は、「作成者/テーマ名」(Vendor/theme) で、これをローマ字で書くと、Sakuseisya/temamei のように表記するルールになっています。作成者の名前は大文字で始まる単語、テーマ名は小文字で始まる単語で、両者の間にスラッシュ(/)を挟みます。
例えば、「Dekirumonn」という作成者が、「Luma Custom」という名前のテーマを作成しようとする場合、このテーマ名は、Dekirumonn/luma_custom となります。それぞれの大文字と小文字の使い方にご注意ください。

そして、このテーマをMagento2に認識させるために、3つのファイルによりテーマの定義を行います。
3つのファイル名は、registration.phptheme.xmlcomposer.json です。それぞれのファイルに、以下の内容を記述します。

registration.php

コピーする

Magento2のシステムにテーマを登録するためのファイルです。

theme.xml

コピーする

テーマの定義となるファイルです。親テーマとして、Magento/luma を指定しています。

composer.json

コピーする

Composerに対してテーマを一つのパッケージとして認識させます。Dekirumonnと大文字で始めていますが、このcomposerファイルに関しては、小文字dekirumonnで始めても、どちらでも構いません。
また、magento/theme-frontend/luma は、親テーマとなるLumaのファイルパスで、このカスタムテーマがLumaテーマとの依存関係にあることを示します。

つづいて、これらのファイルのアップロード先となるフォルダを、Magento2本体の内部に作成をします。
FileZillaなどのSFTPソフトで、Magento2のルートにアクセスして、以下の階層構造になるように、Dekirumonnluma_customの二つのフォルダを作成します。

[magento2 root]/app/design/frontend/Dekirumonn/luma_custom

/app/design/frontend/ まで順に辿り、そこに、Dekirumonn という名前のフォルダを新規で作成してください。そして、Dekirumonn の下層に、luma_custom という名前のフォルダを新規で作成してください。そして、この luma_custom のフォルダ内に、先ほど作成した三つのファイル registration.phptheme.xmlcomposer.json をアップロードします。
画像で見ると、以下のような構成になります。

Lumaカスタムテーマファイルの階層

4. カスタムテーマの適用

つづいて、Magento2の管理画面にログインします。
もし、ここでエラー画面が出てしまったら、ファイル名のスペルなどを再チェックしてください。また、コマンドラインで、Magento2のキャッシュをクリアしてみてください。

管理画面にログインしたら、Content > Design Configration に進みます。

Magento2テーマの設定

この画面で、カスタムテーマを適用させたいストアの「Edit」テキスト(表の右にある青い字)をクリックします。
上の画像では、一番下の「简体中文」ストアをクリックしています。

Magento2テーマの設定

Default Theme の Applied Theme のプルダウンをクリックすると、既存の「Magento Blank」「Magento Luma」に加えて、先ほどファイルをアップロードしたばかりの「Luma Custom」が選択肢として追加されています。これにより、このカスタムテーマが、Magento2本体に正しく認識されたのが確認できます。
そのまま「Luma Custom」を選択し、オレンジ色の [Save Configration] をクリックして保存します。そして、Magento2のキャッシュをクリアします。

ここまでの作業で、新しいカスタムテーマを「简体中文」ストアに適用することができた、ということになります。
ただし、まだカスタムテーマの中は空っぽで、はじめの3つのファイルしかありませんので、Lumaをベースとして、そのLumaを上書きする要素は何も追加されていない状態です。

この状態でストアにアクセスすると、以下の画像のようなデザインレイアウトになっています。

Magento2 Lumaカスタムテーマ

Lumaテーマのデザインのままですが、ヨガの女性バナーなどのトップページのメインコンテンツが消えています。

実は、元々Lumaのこの箇所のコンテンツは、管理画面 Content > Widgets から、特定の Block を結びつけることで表示させています。そして、Widgetsはテーマと結びつけて設定されているので、ストアの適用テーマを変更することで、Widgetsの指定により該当のポジションに表示されていたBlockコンテンツは、全てカスタムテーマでは表示されないことになります。

もちろん、カスタムテーマのためにWidgetsをコピー的に作成し、それぞれ同じBlockを結びつければ、元と同じコンテンツを同じポジションに表示することも可能です。また、Blockの内容を編集して(翻訳など)新規のBlockとして結びつければ、その編集内容がカスタムストアに反映されます。

ちなみに、ヨガ女性のバナー等は、Content > BloksHome Page Block (home-page-block) にて編集できます。このブロックは、Content > Widgets  の 14 Home Page により配置されています。
(Widgets と Blocks の使い勝手については、Magento2.3バージョンにて、Page Builderという機能が追加されたことにより、大きく改善されています。詳細はまた別の機会に記事にしたいと思います。)

5. 基本色の変更(編集事例)

それでは、このカスタムストアの配色の編集をしてみます。

Magento2 Lumaテーマは、LESSを使用した、Magento2特有のUIライブラリというシステムで基本色を設定しています。
https://devdocs.magento.com/guides/v2.2/frontend-dev-guide/css-topics/theme-ui-lib.html

LESSは、CSSのスマートな親分のようなもので、LESSに書かれたルールが、CSS上にコンパイルされ(展開され)、サイト全体を規定する働きをします(と私は理解しています)。

Magento2の基本色を規定しているファイルは、以下にあります。
[magento2 root]/lib/web/css/source/lib/variables/_colors.less

_colors.less

ここで規定されている色コードを上書きすれば、LESSファイル上で適用されている箇所すべての色を一括で変更することができます。

例えば、サイト上部のヘッダーパネル(黒っぽいグレイ)の色を変えるとします。
ブラウザからコードを見ると、どのCSSでのどの色が指定されているかを確認することができます。以下の画像で(ちょっと小さいのですが)、background-color: #6e716e; がその色だと分かります。

Magento2 Lumaテーマ ヘッダーの色

そして、#6e716e の色が、上記の _colors.less ファイルをチェックすると、54行目にある、@color-gray-middle4:#6e716e と一致することに気づきます。
これにより、このヘッダーパネルの背景色は、LESSで規定された配色なのだろうと考えられます。

そこで、LESSの編集をすることになるのですが、方法としては、ヘッダーパネルの規定色(@color-gray-middle4)を別の規定に変更する方法と、基本配色の定義そのもの(@color-gray-middle4:#6e716e)を変更する方法の、二つの方法があります。今回の記事では、後者の方法をご紹介いたします。

基本配色の定義を変えるには、 _colors.less ファイルを上書き変更することになります。
そこで、[magento2 root]/lib/web/css/source/lib/variables/_colors.less をいったんローカルにダウンロードし、エディターで該当箇所の編集をします。

_colors.less(編集箇所のみ)

コピーする

上記は変更箇所のみのコードです。1行目(元コード)は削除して、変更したい色コードのラインを残してください。
また、この1行のみをファイルに残すのではなく、他の規定行もそのまますべて残し、純粋に変更箇所のみを編集するようにしてください。

そして、この編集済みの _colors.less ファイルをアップロードする先は、Luma Customテーマ作成のため、はじめに3つのファイルをアップロードした先の内部の、以下の階層になります。

[magento2 root]/app/design/frontend/Dekirumonn/luma_custom/web/css/source/lib/variables/_colors.less

luma_custom のフォルダ内に web というフォルダを作成し、その中にまた css というフォルダを作成し、その中にまた source、その中にまた lib、さらにその中に variables というフォルダを作成し、そこに _colors.less ファイルをアップロードします。

この階層は、元ファイルのパス
[magento2 root]/lib/web/css/source/lib/variables/_colors.less
この/lib/以下の部分をそっくりそのまま反復しています。

画像で見ると、編集ファイルは以下のように配置されます。

Magento2カスタムテーマの基本配色変更ファイル

この後、PuTTYやターミナルなどのSSHで、Magento2のルートへアクセスして、以下のコマンドを実行してください。

Magento2のルートへ移動
cd [Magentoルートへのパス]

Magentoのキャッシュクリアと既存の生成ファイル削除
php bin/magento cache:clean
php bin/magento cache:flush
rm -rf pub/static/*
rm -rf var/di/* var/generation/* var/cache/* var/log/* var/page_cache/* var/view_preprocessed/pub/*
rm -rf generated/code/* generated/metadata/*

Magentoコンパイル
php bin/magento setup:di:compile
php bin/magento indexer:reindex
php bin/magento cache:clean
php bin/magento cache:flush

そして、カスタムストアのホームページにアクセスすると、以下の画像のように、色が変更されているのが確認できます。

Magento2 Lumaテーマの色変更

ヘッダーパネルだけではなく、最下部のコピーライトの背景画像も茶色系に変更されています。
これは、コピーライトの背景画像も、同じ規定色(@color-gray-middle4)が当てられているということです。

このように、LESSファイルの基本色の定義を変更すると、該当の箇所だけでなく、同規定されている別の箇所の配色も連動して変更されます。
これは、デザインのバランス上はいいことなのですが、変更により思わぬ配色(テキストが読めない等)になってしまう可能性もあり、注意が必要です。また、PCとスマートフォンでスタイルシートの適用が異なっているので、それぞれの端末で変更結果を確認する必要があります。

6. フッターリンクの削除・編集

配色以外にLumaテーマでまっさきに編集したい箇所としては、フッターリンクがあります。
デフォルトのフッターのリンクには、Search Termsや、Orders and Returnsなど、通常のECストアには必ずしも必要でないリンクがあります。しかし、これらのリンクを編集しようとしても、管理画面内からは該当するBlockを見つけることができません。

実は、このフッターリンクも、カスタムテーマ内にレイアウトのファイルをアップロードしなければ、変更することができないのです。

このフッターリンクを削除・編集する方法としては、以下のページが参考になります。
https://magento.stackexchange.com/questions/93628/magento-2-remove-and-change-footer-links

それぞれのリンクには、コード名がつけられています。
Privacy and Cookie Policy: privacy-policy-link
Search Terms: search-term-popular-link
Contact Us: contact-us-link
Advanced Search: catalog-search-advanced-link
Orders and Returns: sales-guest-form-link

そして、削除したいリンクを、コード名で指定するように、以下のxmlファイルを作成します。

default.xml

コピーする

この例では、Search Terms、Advanced Search、Orders and Returns の三つのリンクを削除します。

そして、この default.xml ファイルを、以下の階層にアップロードします。

[magento2 root]/app/design/frontend/Dekirumonn/luma_custom/Magento_Theme/layout/default.xml

luma_custom の中に、Magento_Theme というフォルダを新規作成し、その中にまた、layout というフォルダを作成し、そこに default.xmlをアップロードします。

これにより、三つのリンクを削除することができます。

Magento2 Lumaテーマ フッターリンクの削除

フッターにあった5つのリンクのうち3つが削除され、2つのみ残っているのが確認できます。

ちなみに、この default.xml の元ファイルは、
[magento2 root]/vendor/magento/theme-frontend-luma/Magento_Theme/layout/default.xml
に配置されています。

今回は、元ファイルすべてをコピーするのではなく、純粋に変更箇所のコードのみを、元ファイルに対して追加で差しはさむようなイメージになります。

このように、Lumaテーマを編集する際に管理画面内で作業できないことは、上記の配色変更やフッターリンクの削除と同じように、カスタムテーマ内のフォルダに、上書き(追加)する編集ファイルを配置するという方法をとります。

Magento2は、はじめに適用テーマ内のファイルを読むと、そこに欠落している必要な実装コードを親テーマ(Luma/Blank)のファイル群に遡って読み込む機能を持っています。これを、Magentoのフォールバックシステム(Fallback system)と言い、これにより最小限の変更でカスタムテーマの作成を行うことができると言われています。

7. Magento2 有料テーマのおすすめ

しかし、色一つ、リンク一つを変えるためにこれだけを作業をしなければならないのは、サイト運営者にとっては現実的ではありません。Lumaテーマはシンプルで素晴らしいテーマだと思いますが、正直、開発者による開発者のためのテーマという感じがします。

そこで、やはりおすすめするのは、有料テーマの使用になります。
有料テーマは、要するに、上記で作成したカスタムテーマの完成版のような存在です。しかも、基本的な編集は全て管理画面から作業できるように設計されています。有料テーマのいくつかはMagentoテーマでご紹介しておりますので、ご参照ください。

特に当サイト一押しのUltimoテーマは、Magento2のコアコードとのシンクロ率が高く、またカスタマイズの柔軟性もあり、安定感も抜群ですので、Magento2の初心者にも経験者にもおすすめのできる、秀逸なテーマです。

Magento2定番テーマ Ultimoテーマの紹介

Lumaテーマの編集のブログのはずが、最後は有料テーマの紹介になってしまいました。。
2018年も残りわずかです。皆さま、良いお年をお過ごしください。

Magento2.3リリース!PWAを実装した新しいMagento

By |2019-03-09T08:40:03+09:002018年11月25日|Categories: Magentoの設定, Magentoバージョン|Tags: , , , , |

1. Magento2.3.0リリース

先日、Magentoの公式ブログにて、Magento2.3.oバージョンが、2018年11月28日にリリースされると公表されました。来年1月〜3月くらいにずれこむことも噂されましたが、当初の予想通り、2018年秋-冬にリリースとなりました。

今回の2.3系は極めて重要なアップデートで、これによってMagento2は、新しいECサイトのスタンダードを実現した、と言っていいくらいのインパクトを持つのではないかと思います。

Magento2.3リリース

同日には、Magento2.2系以下のアップデートもリリースされます。
すでにMagento2.2系で運営されている方は、当面は2.2の最新バージョンへのアップデートをして、2.3.0はデモでさわることが推奨されます。来春以降には2.3.1、2.3.2、と修正がされてくるでしょうから、そのあたりでライブ環境へのテストをしてみるのがスケジュール的にはいいかもしれません。

今回の2.3で新しく実装されるものとしては、PWA(Progressive Web Application)と、Page Builder の大きく二つの機能があります。特にPWAに関しては、多くのEC事業者が待ち望んでいた革新的なものになると思います。

2、Magento PWA – ECストアのモバイルアプリ化

PWAは、一言で言えば、ECサイトのモバイルアプリ化機能です。

本当は「アプリ」ではないのですが、PWAの実装により、ユーザーがモバイル環境で、MagentoのECサイトを「まるでアプリのように」利用することができるようになります。サイト(PWA)のアイコンがスマートフォンのホーム画面に設置でき、ストア内のローディングもブラウザより速く、プッシュ通知機能や一部オフラインでの稼働も可能となります。
PWAで集客してストアへ誘導するというわけではなく、PWAがストアになっているので、PWA内でユーザーからのご注文が完結します。

元々PWA(Progressive Web Application)は、Googleが2015年頃から開発していたオープンソースの技術で、Magento社はそれを導入し、Magento PWA Studioという、MagentoのコアとなるモジュールとしてGitHub上で開発してきました。そして、このPWAは、GraphQLという言語をサポートする2.3系から、Magento2本体機能に実装される事になりました。

スマートフォンが普及し、ユーザーからのアクセスがスマホからが主流となるここ数年の流れの中で、ECサイトの運営者は、コンバージョンの低下に悩んできました。PCサイトからのコンバージョンが平均3%とすると、スマホからのコンバージョンは(レスポンシブにしていても)1%程度と言われています。
一方、ユーザーのモバイルアプリの利用時間が飛躍的に伸び、大手ECプラットフォームのモバイルアプリからのコンバージョンは、5-6%と高い数字が報告されています。

しかし、自社サイトをモバイルアプリ化するのはコストが高く、また実際にアプリをリリースするにはApp StoreやGoogle Playストアの審査を経なければならないので、小規模の事業者にとってはハードルが高く感じられてきました。

PWAは、そのようなEC事業者の悩みを解決する革新的な技術です。
つまり、Magento2でECストアを構築すれば、ブラウザで閲覧されるサイトに加えて、それがそのままアプリのような外見で、まるでアプリのような感覚で、ユーザーの手元のスマートフォンでも動いてくれるのです。PWAがコンバージョンの上昇にプラスに働くのは必至と考えられます。

ただ、アプリストアからのダウンロードという形での集客はできないので、あくまでサイト来訪者にPWAアイコンをアプリ風に設置してもらうことが導線となります。そこがネックといえばネックですが、通常のエンドユーザーにとっては、一度端末にPWAがインストールされれば、それがネイティブアプリなのかPWA(Webアプリ)なのかで大きな違いはなく、それよりもスマートフォンで実際に快適に利用できるかどうかがポイントになります。

このスマホ全盛時代においては、ECストアのモバイル経験をより良くし、多様化、洗練化させていく方向に対応していくしかありません。ですので、すでにストアをアプリ化した事業者にとっても、PWAは有力なツールといえるので、今後、ECストアの形態として一般的なものになっていくと思われます。

Googleの技術ということもあり、将来的には、サイトがPWA化しているかどうかが、SEOのアルゴリズムにも加味されるようになる可能性もあります。

3、Page Builder – 直感的デザインツール

Page Builderは、Magento管理画面内での直感的なデザインツールです。

同種のものは、サードパーティのベンダーからもいつくか出ていましたが、今回、Magento本体にもオフィシャルに導入されることになりました。
これにより、コードが分からないサイト運営者も、クリックとマウスドラッグとテキスト入力だけで、ある程度自由にページデザインをすることができるようになりそうです。

正直、 Magento2のレイアウト設計は複雑です。
classがテーマのxmlファイルで組み込まれていたり、デフォルトのLumaのものだったり、管理画面のwidgetから任意で組み込むこともできたり、また、それらがCMSで編集できるとしても、どのCMS Blockに紐づけられているかを、ビジュアルで確認することができません。なので、「ここをこう変更したい」と思っても、どこを編集すれば反映されるのか、あるいはコードをいじらなければ変更ができないのかが、サイトのインターフェイスを見ているだけでは分からないのです。

このPage Builderの導入により、管理画面から直感的にページデザインを組むことができるようになるので、レイアウトの複雑さが改善され、Magento2を初めてさわる人にはとても便利なものになると期待されます。
(もちろん、従来のCMS編集がベースになっているので、Page Builderは無効にしておくこともできると思います。)

4、Magento2.3系からが、本当のMagento2(になりそう)

上記のPWAとPage Builder以外に、Magento2.3の新しい特徴としては、PHP7.2のサポート、非同期APIリクエスト対応、Elasticsearch対応、複数在庫元管理の対応、WYSIWYGのアップグレードなど、大きな変更があります。
また、Google ReCAPTCHAや管理画面ログインでの二段階認証の標準装備など、セキュリティ機能面での向上もあります。

昨年の12月には、Magento2は本当に使えるのか?などという(ちょっと挑発的な題で)記事を書きましたが、1年が経ち、ついにMagento2は、本物のMagento2になりつつあるという感を抱いています。

特に、PWAの実装は、今後のECサイトのあり方を決定づける、エポックメイキング的なものとなるかもしれません。
具体的な仕様は、実際にMagento2.3をさわってから、また後日このブログにてご報告させていただければと思います。

追記(2019年3月9日):
PWAもPage Builderも、3月中にリリースされる2.3.1バージョンからの実装となりそうです。
PWAは、Magento2の既存テーマのシステムとは違い、ReactというJavaScriptによって、デザインを一から作成しなければなりません。つまり、管理画面でPWA設定を有効にすればすぐにMagento2のストアがPWA化されるというわけでもなく、PWAストアのための新しい開発や作り込みが必要となります。なので、開発のためのツールがMagento2に導入される、という風に理解したほうがいいかもしれません。PWAの作り込みがどこまで簡単になるか(非開発者でも作業できるようになるか)は、いまのところ何とも言えません。
VeniaというPWAのサンプルストアが、Magentoの開発チームにより公開されています。スマートフォーンでアクセスをするか、Chromeでスマホ画面表示でご確認ください。


Magento2 PWAサンプルストア Venia
https://veniapwa.com/

Magento2とMailgun(SMTP/外部メールサーバー)の連携

By |2018-12-21T07:58:44+09:002018年10月19日|Categories: Magentoの設定|Tags: , , |

1. Magento2のメール送信について

Magento2によるサイト構築においては、はじめの設定で、そのメール送信についても気を配らなければなりません。
ECサイトは、ユーザーからの受注があると、一般的に注文完了メールを自動で送信します。つづいて、手動の確認メール、発送メール、フォローメール等々と、そのプラットフォームから、ユーザーにメール送信をする機能が備わっています。

Magento2にも、もちろんメール送信機能は備わっています。しかし、はじめてMagentoでサイト構築をする人にとって、このECサイトにとって当たり前とも言えるメール送信の設定は、決して簡単な作業ではありません。Magentoは多機能なのですが、皮肉なことに、ECの基本機能ほど、その設定がややこしく、面倒くさいのです。

Magentoサーバーで紹介しているSiteGroundであれば、cPanelからMXレコードを設定し、ストアの独自ドメインでメールアドレスを作成することができます。あとは、そのアドレスをMagento2の管理画面にて送信元として入力・登録すれば、とりあえずのメール送信はできることになります。
ところが、この場合、cPanel内でドメイン認証などの対策を行っても、送信したメールが迷惑メールのフォルダに入ってしまったり、途中でスパムとしてはじかれてしまったりすることがあるので、到達率の面でやや問題があるといえます。

そこで、この記事では、サーバー内のPHPのmail関数に依存するのではなく、外部のメールサーバー(SMTP)を利用して、Magento2のためのメールアドレスを設定する方法をご紹介いたします。これは、テスト環境やサイト構築中の段階では特に必要な作業ではありません。しかし、ライブ環境への移行前、ストア開店前までには、外部サーバーによりメール送信のできる環境を整えるのが、より信頼性のある、無難な選択肢となります。

メール配信サービスとしては、G Suite、Amazon SES、SendGrindなどが有名ですが、今回は、Mailgunという無料~で使えるサービスをご紹介したいと思います。個人的には、今のところ、このMailgunが(ネーミングはちょっと物騒なのですが)、Magento2との相性が一番いいように感じています。

Mailgunは、英語からの申し込みページしかないのですが、設定が比較的簡単で、同じクレジットカードで複数の無料アカウントを作成することができるので、サイトを複数運営している場合でも汎用性があり、とても便利です。

以下は、通常の受信/送信にはcPanelで設定したメールサーバを使うことを前提に、MailgunはMagento2からの送信専用サーバーとして設定する方法の説明になります。(cPanelからのメールアドレスの作成については、SiteGround Email Tutorialsをご参照ください。)

尚、cPanelのないクラウドやVPS環境でMagentoを構築する場合、サーバー内でメールホスティングまで管理するのは大変な作業になるので、Zohoメールなどをご検討いただいてもいいかもしれません。
G Suiteと類似したサービス内容ですが、Zohoには独自ドメインを利用できる無料プランがあり、モバイルアプリも安定していて高機能です。また、検索すると日本語での解説も多いので、気軽にはじめることができます。
ZohoとMailgunで完全無料のメールホスティングを構築することができるので、特に新規でサイトを立てる際にはおすすめの組み合わせになります。

Mailgunに登録する前に、Mailgunで使用するメールアドレスを、cPanelやZohoのサービスから予め作成し、送受信ができるようにしておいてください。Mailgunの登録は、Mailgunのプラットフォームから新規でメールアドレスを作成するというわけではなく、あくまで既存のメールアドレスに対して、Mailgunという外部の送信サーバーを利用できる環境を追加する、というイメージになります。

2. Mailgunの申し込みと認証について

MailgunのConceptというプランが、Pay As You Go(使った分だけの支払い)で、毎月10,000通までのメール送信が、無料となります。また、毎月100件まで、送信先のメールアドレスがアクティブなホンモノのアドレスかどうかを無料でチェックすることもできます。これは、ValidationというAPIを利用するサービスで、SMTPの送信設定だけではこの機能は作動しないので、無料枠をこえる心配はありません。

Mailgun価格

https://www.mailgun.com/pricing-simple
Conceptプランの[Sing up]のボタンをクリックして、申し込みページに進みます。

Mailgun申し込み

上記のように入力し、右下のプランが「Concept – Pay As You Go」になっているのを再確認し、[Create Account]のボタンをクリックします。
(画面の中央あたりの「Add payment info now」のチェックマークをはずすと、クレジットカードの情報を入力しなくてもアカウントを作成することはできますが、その場合は受信専用のアカウントになり、メールの送信機能が使えなくなってしまうので、ご注意ください。)

Mailgunメール認証

アカウント作成直後に、メールアドレスの認証メールが送信されます。
Mailgunのダッシュボードにも、サイト上の黄色の背景バーに「認証メールを送信しました」というメッセージが表示されています。メールボックスをチェックして、「Hi 名前, Please verify your Mailgun account」という件名のメールを開いてください。
そのメールの中にあるリンクをクリックすると、メールアドレスの認証は完了で、つづいて、ショートメール(SMS)による本人認証画面が自動で立ちあがります。

Mailgunの認証SMS

国は日本が自動で選択されていますので、お持ちの携帯電話番号を入力し、[Send Verification Code]をクリックしてください。
Mailgunは、同じクレジットカードで複数のアカウントを作成できますが、このSMSの認証では、短期間に複数の認証を同じ携帯番号で行おうとすると、エラーになるケースもあるようです。その場合は、別の携帯番号、ご家族やご友人、同僚の方の番号をご入力ください。(SMSによる認証はこの初回のみです。)

[Send Verification Code]をクリックすると、コード入力画面に切り替わりますので、届いたSMSの文面の中にある6ケタの数字を入力してください。
そうすると、アカウントの認証は完了で、ダッシュボードの画面上のバーも緑色に色が変わります。これで、Mailgunのアカウントがアクティブになりました。

Mailgunのアカウント認証

つづいて、ドメインの設定作業に移ります。
上記ダッシュボードの画面をスクロールすると、以下のような Add Your Domain という大きなボードがあります。

Mailgunにドメイン追加

[Add Your Domain Now]のボタンをクリックすると、以下のようなドメイン追加のフォームページが開きます。

Mailgunにサブドメイン追加

画像の字がやや小さいのですが、「サブドメインでの設定を推奨します」ということが書かれています。
これはどういうことかと言うと、使用するメールアドレスが you@mydomain.com の場合は、ここで mydomain.com を入力するのではなく、mydomain.com のサブドメイン、例えば mg.mydomain.com の入力を推奨しています。おそらく、メインドメインのゾーンでMXレコードを重複しないためということだと思います。
サブドメインでMialgunを設定しても、メインドメインのメールアドレスで送信することができますので、ご安心ください。

Mailgunのメールサーバを利用できるようにするために、お使いのDNSプロバイダーの管理画面にて、任意のサブドメインを設定してください。事例では、mg.mydomain.comですが、これは、mail.mydomain.comでも、mailgun.mydomain.comでも、自分に分かりやすいものであれば、自由な任意のスペリングで構いません。
サブドメインの設定の仕方は、それぞれご利用中のサーバー、もしくはDNSプロバイダーのドキュメントをご参照してください。

サブドメインが作成できたら、そのサブドメインをフォームに入力し、[Add Domain]ボタンをクリックします。
すると、次のようにDNS情報を追加してくださいという指示の画面が開きます。

MailgunのDNSの設定

画像の字が小さいのですが、まとめると以下の表の内容となります。
DNSでの作業方法については、お使いのサーバー、DNSプロバイダーの説明をご参照ください。

SiteGround(cPanel)でのDNSとMXの編集とについては、以下のページをご参照ください。
https://www.siteground.com/tutorials/cpanel/dns-zone-editors/
https://www.siteground.com/tutorials/email/mx-record/
また、Mailgunのヘルプページの解説もご参考ください。
https://help.mailgun.com/hc/en-us/articles/202052074-How-do-I-verify-my-domain-

Type Host Name Value
TXT mg.mydomain.com v=spf1 include:mailgun.org ~all
TXT mailo._domainkey.mg.mydomain.com k=rsa; abcdefghijklmno(暗号化)pqrstuvwxyz1234567890…..
CNAME email.mg.mydomain.com mailgun.org
Type Priority Value
MX 10 mxa.mailgun.org
MX 10 mxb.mailgun.org

mg.mydomain.comの部分は、自分のサブドメインに置き換えて考えてください。暗号化されているような文字列については、Mailgunダッシュボードからコピペしてください。
DNSの入力画面の画像は(プロバイダーによりまちまちなので)省略させていただきますが、入力後しばらくすると、Mailgunのドメイン情報のページが、以下のように黄色や赤色のアイコンが表示され、反映待ちの状態となります。

MailgunのDNS反映待ち

しばらく待ったら、手動で[Check DNS Records Now]のボタンをクリックしてみます。
DNSが設定され、ネットワークに浸透が進んでいれば、黄色や赤色のアイコンが、以下のように緑色に変わります。
24時間~48時間という待ち時間の記載もありますが、実際には早ければ数分で反映されます。

MailgunのDNS反映

DNSチェックのアイコンが緑色に変わった後、ドメインの認証までに更にもうしばらく(10分~くらい)時間がかかります。
ドメイン(サブドメイン)が認証されると、Domain InformationのStatusが、 未承認の黄色マークから、Activeの緑色のマークに変わります。

Mailgunドメイン認証済

これで、Mailgun側での設定が完了したことになります。

3. Magento 2 SMTPエクステンションのインストールと設定

つづいて、Magento2 にてMailgunのSMTPを設定します。これは、SMTP連携のエクステンションを利用します。
Magento2のSMTPエクステンションで無料のものは、以下の二つが有名です。

Mageplaza https://github.com/mageplaza/magento-2-smtp
Magepal https://github.com/magepal/magento2-gmail-smtp-app

どちらでもいいのですが、今回は上のリンク先のMageplazaのエクステンションをComposerでインストールします。
同じエクステンションについて、Mageplazaのサイトでも設定方法が説明されているので、ご参考ください。
https://www.mageplaza.com/blog/how-to-configure-mailgun-smtp-in-magento-2.html

Composerによる作業については、Magento2日本語、またMagento2アップデートのページにて、Composerを使った作業動画を解説していますので、ご参照ください。SSHアクセスをして、基本的なコマンドを入力する作業自体は大きく変わりません。
以下が、今回のMageplazaのSMTPエクステンションをインストールする際のコマンドになります。

Magento2のルートへ移動
cd [Magentoルートへのパス]

メンテナンスモードへ
php bin/magento maintenance:enable

Composerインストール(※必要な場合のみ)
curl -sS https://getcomposer.org/installer | php
php composer.phar

Magentoのキャッシュクリアと既存の生成ファイル削除
php bin/magento cache:clean
php bin/magento cache:flush
rm -rf pub/static/*
rm -rf var/di/* var/generation/* var/cache/* var/log/* var/page_cache/* var/view_preprocessed/pub/*
rm -rf generated/code/* generated/metadata/*

SMTPエクステンションのインストール(ダウンロード)
php composer.phar require mageplaza/module-smtp

Magentoアップデート
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento indexer:reindex
php bin/magento cache:clean
php bin/magento cache:flush

メンテナンスモード解除
php bin/magento maintenance:disable

コマンドについては、Magento2コマンド集もご参照ください。
※Composerのインストールコマンドについては、すでにその環境にComposerがインストールされている場合は不要です。

エクステンションのインストール後、Magento2の管理画面にアクセスすると、以下のようにMageplazaのエクステンションの設定画面が入っています。
STORES > Configuration > Mageplaza Extensions > SMTP で設定画面を開いてください。

Magento2 SMTPエクステンション

先ずは、General Congifuration > Enable Mageplaza SMTP を、プルダウンで Yes に変えてください。(インストール直後は、No になっています。)
つづいて、SMTP Configuration Options > Host の入力欄のすぐ横にある[Load Settings]のボタンをクリックしてください。これにより、既成のプロバイダーのデフォルト値を自動で入力することができます。以下のように、画面全体にスライドするようにSMTPプロバイダーのリストが表示されます。

Magento2 SMTPエクステンション

リストの中から Mailgun をクリックしてください。
すると、下記のように Mailgunのデフォルトの設定値が表示されますので、[Load Settings]のボタンをクリックしてください。

Magento2 SMTPエクステンション

すると、スライドのリスト画面が閉じ、以下のようにMailgunの設定値が入力されます。
Host: smtp.mailgun.org、Port: 587、 Protocol: TLS になっていることを確認してください。(Load Settingを使わずに手動でこう入力しても構いません。)

Magento2 SMTPエクステンション

つづいて、それ以外の空欄になっている Username や Password の入力ですが、これは、先ほど Mialgunのサイトで登録したドメイン認証情報のページから該当のワードをコピペします。

MailgunドメインのSMTP情報

上の画像の Default SMTP Login が管理画面に入力するUsernameDefault Password が管理画面に入力するPasswordになります。
(尚、MailgunのAPIを利用したほうがメール送信は速くなるのですが、Magento2とMailgunのAPI連携エクステンションが開発されていないため、既存のエクステンションで可能なSMTPでの連携を行っています。)

Mageplaza Mailgun SMTPの入力

上の画像のように、先ず Authentication をプルダウンで、LOGIN に変更してください。それから、Mailgunのページからのコピペで、UsernamePasswordを入力してください。

ここで入力内容を保存してもいいのですが、このまま同じ画面内から、メール送信が正しくできるかどうかをテストすることができます。
下の Send Test Emailのタブを開くと、下のようなメール送信テストの入力画面が開きます。
Send to の欄に、任意の(受信可能な)メールアドレスを入力し、[Test Now]のボタンをくりっくしてください。

Mailgun SMTPテストメール送信

以下のように、Success というダイアログが表示されれば、テストメールの送信は成功で、MailgunのSMTPがMagento2と連携できたことになります。
実際に、メールボックスにMageplazaのテストメールが届いていることを確認してください。

Mailgun SMTPテストメール送信成功

テストメールの送受信が確認できたら、管理画面右上のオレンジ色の[Save Config]ボタンでいままでの入力内容を保存しください。
そして、System > Cache Management から、Magento2のキャッシュをクリアしてください。

尚、もし今回Magento2にてはじめてメールアドレスを設定する場合には、このMageplazaのエクステンション設定の他に、管理画面内の基本的なメール設定も必要になります。
以下の設定ページでの入力を完了後に、テストメールの送信を試してみてください。

  • Stores > Configration > General > Store Email AddressSender Emailに、Magento2ストアのメールアドレス(例:you@mydomain.com)を入力してください。五個所ありますが、少人数でのストア運営の場合は、原則としてすべて同じメールアドレスを入力します。
  • Stores > Configuration > Sales > Sales EmailsSend Order Email Copy To に、Magento2ストアのメールアドレスを入力してください。ここも同様の入力欄がいつくかありますが、少人数運営の場合、原則としてすべて同じメールアドレスを入力します。受注処理メールのBccが届くようになります。
  • Stores > Configration > General > Contacts > Email OptionsSend Emails Toに、Magento2ストアのメールアドレスを入力してください。サイトからのお問い合わせの内容が届くようになります。

メールテンプレートの編集等については、また別の機会に記事にしたいと思います。

以上、Magento2と外部メールサーバーMailgun(SMTP)の連携方法について説明いたしました。

(追記)エクステンションのアンインストール方法

今回のブログ記事でインストールをした、MageplazaのMagento2 SMTPエクステンションを、アンインストールする方法をご紹介いたします。万一不具合が起きた時や、他のSMTPエクステンションを試したい時にご参照ください。

Composerを使ってインストールをしたエクステンションは、Composerを使ってアンインストールする必要があります。
管理画面で、Enable Mageplaza SMTPDisable(無効)にしてから、SSHで以下のコマンドを実行してください。

ポイントは、エクステンションの名称が2種類あって、Magento2に対して指示する名称は、Vendor_Moduleのように頭文字大文字にアンダースコアが使われ、Composerに対して指示する名称は、vendor/moduleのように、小文字スラッシュが使われる点です。
Composerに対する名称はインストール時と同じものですが、Magento2に対する名称が分からない場合は、php bin/magento module:status というコマンドで、モジュール名のリストを見ることで判明します。

Magento2のルートへ移動
cd [Magentoルートへのパス]

メンテナンスモードへ
php bin/magento maintenance:enable

Magentoのキャッシュクリアと既存の生成ファイル削除
php bin/magento cache:clean
php bin/magento cache:flush
rm -rf pub/static/*
rm -rf var/di/* var/generation/* var/cache/* var/log/* var/page_cache/* var/view_preprocessed/pub/*
rm -rf generated/code/* generated/metadata/*

SMTPエクステンションの無効化
php bin/magento module:disable Mageplaza_Core Mageplaza_Smtp --clear-static-content

SMTPエクステンションのアンインストール(*データベース削除)
php bin/magento module:uninstall -r Mageplaza_Core Mageplaza_Smtp

SMTPエクステンションのComposerからの削除
php composer.phar remove mageplaza/module-smtp
php composer.phar remove mageplaza/module-core

Magentoアップデート
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento indexer:reindex
php bin/magento cache:clean
php bin/magento cache:flush

メンテナンスモード解除
php bin/magento maintenance:disable

(* )データベースの削除も行うと、それまでのデータが完全に消去されますのでご注意ください。
いったんアンインストールして、後日また再インストールする場合は、データベースの削除をするコマンドは実行せず、とばしてください。再インストール後に、以前のデータが読み込まれます。

Magento1.9のサポート期限が延長されました

By |2018-09-30T21:16:17+09:002018年9月10日|Categories: Magentoバージョン|Tags: , |

表題の通りなのですが、Magento1系(Magento1.5,1.6,1.7,1.8,1.9系)のサポート期限の延長が、Magento社から正式にコメントされました。
従来、2018年11月までといわれていた期限が、2020年6月までに延長されています。

Supporting Magento 1 through June 2020
https://magento.com/blog/magento-news/supporting-magento-1-through-june-2020

MAGENTO OPEN SOURCE SOFTWARE MAINTENANCE POLICY(PDF)
https://magento.com/sites/default/files/magento-open-source-software-maintenance-policy.pdf

Magento1系サポート期限

昨年あたりから、いろいろ巷の(ネットの)噂で、Magento1系のサポート期限が延長されたと語られていましたが、それは有料のEnterprise版の契約のみで、無料のCommunity版(オープンソース版)に関しては、問答無用で今年秋に打ち切られる可能性もまことしやかに囁かれていました。
(ご参考:Magento1.9と2.xの各バージョンのサポート期限について

しかし、というか、やはりというべきなのか、ここに来て、Magento社は、オープンソースのMagento1系に関しても、2020年6月までセキュリティパッチの提供をつづけると正式にアナウンスいたしました。
もちろん、これはMagento1系のユーザーにとっては朗報なのですが、一方、ここ一二年で苦労してMagento2への移行を実施した運営者の中には、「あんなに急かされたのは一体なんだったのか、、、」という、なんともいえない脱力感を感じている人もいるかもしれません(私もどちらかというとその一人です)。

これは、ある意味、Magento社の敗北宣言ともいえるもので、Magento2系の開発がスムースに進まず、ユーザーへの浸透も思ったようには進まなかったことを、暗に認めたことになるのではないかと思います。
1系のサポートを18ヶ月延長したことで、ユーザーのMagento離反を食い止めることができるのか、それとも、Shopifyなど他のプラットフォームへの流出がつづくのか、いまのところはなんとも言えません。

今後はAdobeの指針が大きなウエイトを占めていくはずので、いままでのような混乱がつづくとは思えないのですが、では、果たして、2020年の6月に本当に1系のサポートは終了となるのだろうか、という、そういう新たな疑念の中にMagento1の運営者は放り込まれたことになります。
実際、Magento社は、Magento1系のPHP7.2への適応パッチを開発しているようなので、理屈上、PHP7.2のサポート期限の2020年11月まではそのまま使えることになります。これは、いまの最新のMagento2.2.xよりも、一年以上も寿命が長いことになります。

もちろん、これから新しくMagentoでサイトを立てる人にとっては、Magento2系が第一選択肢になると思うので、兎にも角にもMagento2系の安定化を願うばかりです。

(追記 9月30日)
Magento1.9.2.xと1.9.3.xのためのPHP7.2適用パッチが早くもリリースされました。

PHP 7.2 Support Patches for Magento 1 are now available
https://community.magento.com/t5/News-Announcements/PHP-7-2-Support-Patches-for-Magento-1-are-now-available/m-p/106999

ダウンロードはこちらからになります。
https://magento.com/tech-resources/download#download2240

今回のPHP7.2パッチは、やはりPHP7.1パッチの提供時にもサポートしたInchooという有名ベンダーが大部分のコードを書いているようです。パッチの適用方法について、Inchooのブログで説明されています。

PHP7.2へのバージョンアップは、1.9系のテーマやエクステンションの対応状況もあるので、適用の是非はテスト環境で試してから判断するようにしてください。

Magento2 コマンド集

By |2018-09-04T16:19:35+09:002018年8月31日|Categories: Magento2コマンド|Tags: , |

Magento2でよく使うコマンドまとめ

Magento2では、SSHアクセスによりCLI(コマンドラインインターフェイス)での作業が推奨されています。
このページでは、Magento2でよく使うコマンドについてまとめました。

自分でよく使うコマンドは、備忘録としてメモ帳などに保存しておいてもいいでしょう。
特に、一度実際に自分で作業したコマンドは、忘れずにメモしておくと便利です。

できる限り意味を理解しておいたほうが覚えやすいのですが、コマンドそのものを暗記する必要はありません。
はじめはコピペでいいので、徐々に慣れるようにしてください。

*コマンドは折々増やしていきます。

Setupアップグレード
コピーする

Magento2のデータベースをアップデートするコマンドです。テーマやエクステンションのインストール後、Magento2のアップグレード後などに使います。

Compilerの実行
コピーする

Magento2のCompilerを実行するコマンドで、アプリケーションのコードやエリア設定などのコードを生成します。上記Setupアップグレードのコマンドの後に使うことが多いです。

静的ファイルの展開
コピーする

静的ファイル(Static files)を展開するコマンドで、Magento2がProductionモード時には必須となります。上記compileのコマンドの後に使うことが多いです。このコマンドでは、デフォルトのen_USストアのファイルが対象になります。(en_USの言語コードは省略されます。)

静的ファイルの展開(日本語ストア)
コピーする

日本語ストアの静的ファイル(Static files)を展開するコマンドで、コマンドの最後にja_JPと日本語の言語コードを追加します。日本語ストアを設定してる場合のみ必要なコマンドです。

Indexの実行
コピーする

Magento2ではカテゴリや商品を新規登録した後、indexerを動かす必要があります。Cronで動く設定にもできますが、上記コマンドで手動でindexさせることができます。

Cacheのクリア
コピーする
コピーする

Magento2の管理画面からもできますが、コマンドでも上記二つによりCacheのクリア、開放をすることができます。管理画面に入れない不具合にあった時などは、必須のコマンドです。

Magento2のモード確認
コピーする

作業中のMagento2のモードを確認することができます。default、developer、production mode のうち、いずれかの回答があります。

developerモードへの変更
コピーする

上記コマンドで、作業中のMagento2を、developerモードに変更することができます。

productionモードへの変更
コピーする
コピーする

上記コマンドで、作業中のMagento2を、productionモードに変更することができます。二つ目のオプション付きのコマンドでは、Command returned non-zero exit code などのエラー時に、メモリー消費を回避してモード変更を実施することができます。この場合、モード変更後にコマンドで静的ファイルを生成します。

メンテナンスモード
コピーする
コピーする

上記コマンドで、Magento2をメンテナンスモードにしたり、メンテナンスモードを解除することができます。