ドキュメント管理者システムガイド

[PaaSのみ]{class="badge informative" title="Adobe Commerce on Cloud プロジェクト（Adobeで管理されるPaaS インフラストラクチャ）とオンプレミス プロジェクトにのみ適用されます。"}

開発者用ツール

最終更新日： 2026年6月16日

作成対象：

  • {"id":"b5a62a22-46f7-4f0d-b151-3fc640bef588"},{"id":"e8ccd51f-da0d-4e3b-939b-e30d5ebb1ea5"}
  • {"id":"c66ffd68-0f65-42bb-aa23-b4020f12e0bd"},{"id":"ff6a42d2-313e-452e-93a6-792e4fad9ff8"}

高度な開発者ツールを使用して、フロントエンド開発中にコンピレーションモードを決定し、IP アドレスの許可リストを作成し、テンプレートパスのヒントを表示します。 また、ストアフロントと管理者のインターフェイスで、テキストを簡単にスポット変更できるツールも用意されています。

操作モード

Adobe CommerceまたはMagento Open Source インスタンスをデプロイして、実稼動​または​ 開発者モード ​で実行できます。 開発者向けに特別に設計されたツールと構成設定は、ストアが​ 開発者モード ​で実行されている間にのみアクセスできます。

操作モードは、適切な権限を持つユーザーがサーバーのコマンドラインからのみ変更できます。 詳しくは、設定ガイド​の「操作モードを設定」を参照してください。

マーチャントのドキュメントのほとんどのトピックは、実稼動モードで動作しているCommerce インスタンスに適用されます。 ただし、次の設定とツールは、インストールが開発者モードで実行されている場合にのみ使用できます。

フロントエンド開発ワークフロー

フロントエンド開発ワークフロータイプは、開発中にクライアントサイドまたはサーバーサイドで少ないコンパイルが実行されるかどうかを決定します。Lessは、CSSの拡張機能であり、追加の機能と規則を持ち、合理化されたコードを生成します。クライアントサイド テーマ開発では、コンパイルを減らすことをお勧めします。サーバーサイドのコンパイルはデフォルトモードです。実稼動モードのストアでは、開発ワークフローオプションを使用できません。
Commerce開発者向けドキュメントの​ クライアントサイド LESS コンパイルとサーバーサイド ​の比較を参照してください。

NOTE
フロントエンド開発ワークフロー設定は、開発者モード ​でのみ使用できます。

詳細設定 – フロントエンド開発ワークフロー {width="600" modal="regular"}

  1. 管理者 サイドバーで、Stores > Settings>Configuration​に移動します。

  2. 左側のパネルで、Advanced​を展開し、Developer​を選択します。

  3. Front-end Development Workflow セクションの 拡張セレクター を展開します。

  4. Workflow Type​を次のいずれかに設定します：

    • Client side less compilation - コンパイルは、ネイティブ less.js ライブラリを使用してブラウザーで実行されます。
    • Server side less compilation - コンパイルは、Less PHP ライブラリを使用してサーバー上で行われます。 これは実稼動のデフォルトモードです。

  5. 完了したら、Save Config​をクリックします。

静的ファイル署名

静的ファイルのURLにデジタル署名を追加すると、ブラウザーが新しいバージョンのファイルが使用可能な場合に検出できるようになります。 デジタル署名を使用して追跡できる静的ファイルには、JavaScript、CSS、画像、フォントなどがあります。 署名は、ベース URLの直後のパスに追加されます。 ファイルの署名がブラウザーのキャッシュに保存されているものと異なる場合は、新しいバージョンのファイルが使用されます。

Commerce開発者向けドキュメントの静的コンテンツ署名を参照してください。

NOTE
静的ファイル設定の設定は、開発者モード ​で作業する場合にのみ使用できます。

詳細設定 – 静的ファイル設定 {width="600" modal="regular"}

構成設定の詳細なリストについては、構成参照​の​ 静的ファイル設定 ​を参照してください。

署名済み静的ファイルを有効にするには:

  1. 管理者 サイドバーで、Stores > Settings>Configuration​に移動します。

  2. 左側のパネルで、Advanced​を展開し、Developer​を選択します。

  3. Static Files Settings セクションの 拡張セレクター を展開します。

  4. Sign Static Files​をYesに設定します。

  5. 完了したら、Save Config​をクリックします。

リソースファイルの最適化

リソースファイルの読み込みにかかる時間は、ファイルの結合とバンドル、およびコードの最小化によって短縮できます。

  • 結合すると、同じタイプの個別のファイルが1つのファイルに結合されます。
  • バンドルとは、ページの読み込みに必要なHTTP リクエストの数を減らすために、個別のファイルをグループ化する手法です。
  • 縮小すると、スペース、改行、コメントは削除されますが、コードの機能には影響しません。 最小化されたファイルは編集できないので、プロセスは本番環境に移行する準備ができたときにのみ適用する必要があります。

デフォルトでは、Adobe CommerceとMagento Open Sourceはファイルを結合、バンドル、または最小化しません。プロジェクト開発者は、使用するファイル最適化方法を決定する必要があります。

詳しくは、​ パフォーマンスのベストプラクティス ​を参照してください。

NOTE
CSS ファイルとJavaScript ファイルは、開発者モード ​でのみ最適化できます。
ファイルタイプ
サポートされる操作
CSS ファイル
MergeMinify
JavaScript ファイル
MergeBundleMinify
テンプレートファイル
Minify

リソースファイルを最適化するには:

  1. 管理者 サイドバーで、Stores > Settings>Configuration​に移動します。

  2. 左側のパネルで、Advanced​を展開し、Developer​を選択します。

  3. CSS ファイルを最適化するには、CSS Settings セクションの 拡張セレクター を展開し、次の操作を行います。

    • Merge CSS Files​をYesに設定します。
    • Minify CSS Files​をYesに設定します。

    詳細設定 – CSS設定 {width="600" modal="regular"}

    CSS設定

  4. JavaScript ファイルを最適化するには、JavaScript Settings セクションの 拡張セレクター を展開し、次の操作を行います。

    • Merge JavaScript Files​をYesに設定します。
    • Minify JavaScript Files​をYesに設定します。

    詳細設定 – JavaScript settings {width="600" modal="regular"}

  5. PHTML テンプレートファイルを縮小するには、Template Settings セクションの 拡張セレクター を展開し、Minify Html​をYesに設定します。

    詳細設定 – テンプレート設定 {width="600" modal="regular"}

  6. 完了したら、Save Config​をクリックします。

クライアントの制限

​ テンプレートパスヒント ​などのツールを使用する前に、必ずDeveloper Client Restrictions ストアにIP アドレスを追加して、ストア内のお客様のショッピング体験が中断されないようにしてください。 IP アドレスがわからない場合は、オンラインで検索できます。

NOTE
開発者クライアントの制限は、開発者モード ​でのみ設定できます。

技術情報については、Commerce on Cloud Infrastructure ガイド​の「​ リクエストを許可するためのカスタム VCL」を参照してください。

IP アドレスをの許可リストに追加するには:

  1. 管理者 サイドバーで、Stores > Settings>Configuration​に移動します。

  2. 左側のパネルで、Advanced​を展開し、Developer​を選択します。

  3. Developer Client Restrictions セクションの 拡張セレクター を展開します。

    詳細設定 – デベロッパークライアントの制限 {width="600" modal="regular"}

  4. Allow IPs​にIP アドレスを入力します。

    複数のIP アドレスからのアクセスが必要な場合は、それぞれコンマで区切ります。

  5. 完了したら、Save Config​をクリックします。

  6. プロンプトが表示されたら、無効なキャッシュを更新します。

テンプレートのパスヒント

テンプレートパスヒントは、ページで使用される各テンプレートにパスを含む表記法を追加する診断ツールです。 テンプレートパスヒントは、ストアフロントまたは管理者に対して有効にすることができます。

NOTE
テンプレートパスヒントは、開発者モード ​でのみ編集できます。

Commerce開発者向けドキュメントの​ テンプレート、レイアウト、スタイルの検索を参照してください。

​ ストアフロントの例 – テンプレートパスのヒント ​ {width="700" modal="regular"}

ステップ 1：あなたのIP アドレスを追加します許可リスト

テンプレートのパスヒントを使用する前に、IP アドレスを個のパス許可リストに追加して、店舗で買い物をする顧客に影響を与えないようにします。 完了したら、Commerce キャッシュをクリアして、ストアからすべてのヒントを削除します。

詳細設定 – デベロッパークライアントの制限 {width="600" modal="regular"}

手順2：テンプレートパスヒントを有効にする

  1. 管理者 サイドバーで、Stores > Settings>Configuration​に移動します。

  2. 左側のパネルで、Advanced​を展開し、Developer​を選択します。

  3. Debug セクションの 拡張セレクター を展開し、次の操作を行います。

    詳細設定 – デバッグ ​ {width="600" modal="regular"}

    • ストアのテンプレートパスヒントをアクティブにするには、Enabled Template Path Hints for Storefront​をYesに設定します。

    • URLにtemplatehints パラメーターが含まれている場合にのみストアのテンプレートパスヒントを有効にするには、URL パラメーター​を使用してストアフロントのヒントを有効にするYesに設定します。 次に、必要に応じてパラメーターの値を設定します。 デフォルト値はmagentoですが、カスタム値を使用できます。 例えば、値をloremに変更すると、mymagento.com?templatehints=loremを使用してテンプレートヒントを表示します。

    • 管理者のテンプレートパスヒントをアクティブにするには、Enabled Template Path Hints for Admin​をYesに設定します。

    • ブロックの名前を含めるには、Add Block Class Type to Hints​をYesに設定します。

  4. 完了したら、Save Config​をクリックします。

手順3：キャッシュをクリアする

  1. 管理者 サイドバーで、System > Tools>Cache Management​に移動します。

  2. 右上隅の「Flush Magento Cache」をクリックします。

インライン翻訳

開発者モード ​のインライン翻訳ツールを使用して、インターフェイス内のテキストを修正し、声やブランドを反映させることができます。 「インラインを翻訳」モードがアクティブになっている場合、編集できるページ上のテキストはすべて赤で囲まれます。 ストアフロントと管理画面の全体に表示されるフィールドラベル、メッセージ、その他のテキストを簡単に編集できます。 例えば、多くのテーマでは、マイアカウント、マイウィッシュリスト、マイダッシュボード​などの用語を使用して、お客様が使い方を見つけやすくしています。 ただし、Account、Wishlist、Dashboard​という単語を使用することをお勧めします。

NOTE
インライン翻訳ツールは、開発者モード ​で作業する場合にのみ使用できます。

Commerce開発者向けドキュメントの翻訳の概要を参照してください。

​ ストアフロントの例 – 翻訳可能なテキスト ​ {width="700" modal="regular"}

ストアが複数の言語で利用可能な場合は、ロケールの翻訳テキストを微調整できます。 サーバー上では、インターフェイス テキストは出力ブロックごとに個別のCSV ファイルに保持され、ロケール別に整理されます。 別のアプローチとして、インライン翻訳 ツールを使用するのではなく、サーバー上でCSV ファイルを直接編集することもできます。 翻訳ファイルはapp/code/Magento/<module_name>/i18n/<language_locale>.csvに保存されます。

NOTE
インライン翻訳ツールを使用するには、ブラウザーでポップアップを許可する必要があります。

手順1：出力キャッシュを無効にする

  1. 管理者 サイドバーで、System > Tools>Cache Management​に移動します。

  2. 次のチェックボックスをオンにします。

    • Blocks HTML output
    • Page Cache
    • Translations

  3. Actions コントロールをDisableに設定し、Submit​をクリックします。

手順2：インライン翻訳ツールの有効化

  1. 管理者 サイドバーで、Stores > Settings>Configuration​に移動します。

  2. 特定のストアビューで作業するには、更新する​ Store View ​を設定します。

  3. 左側のパネルで、Advanced​を展開し、Developer​を選択します。

  4. Translate Inline セクションの 拡張セレクター を展開します。

    これらの設定を変更するには、必要に応じて​Use Website チェックボックスをオフにします。

    特定のストアビューを編集する場合、Enabled for Admin​オプションは使用できません。

    詳細設定 – インラインの翻訳 {width="600" modal="regular"}

  5. Enabled for Storefront​をYesに設定します。

  6. 完了したら、Save Config​をクリックします。

  7. プロンプトが表示されたら、無効なキャッシュを更新しますが、無効なキャッシュは今のところそのままにしておきます。

手順3：テキストの更新

  1. ブラウザーでストアフロントを開き、編集するページに移動します。

    必要に応じて、言語選択ツールを使用してストアビューを変更します。 翻訳可能なテキストの各文字列は赤色で概説されています。 テキストボックスの上にマウスポインターを置くと、ブックアイコン（ ​ ブックアイコン ​ ）が表示されます。

  2. ブックアイコンをクリックして​翻訳 ウィンドウを開き、次の操作を行います。

    • 変更が特定のストアビューの場合は、Store View Specific チェックボックスを選択します。

    • 新しい​Custom テキストを入力します。

  3. 完了したら、Submit​をクリックします。

    ​ カスタムテキストを入力 {width="700" modal="regular"}

  4. ストアで変更を確認するには、ブラウザーを更新します。

  5. ストア内の任意の要素を変更するには、このプロセスを繰り返します。

手順4：元の設定を復元する

  1. ストアの管理者に戻ります。

  2. 管理者 サイドバーで、Stores > Settings>Configuration​に移動します。

  3. 編集された特定のビューに​ Store View ​を設定します。

  4. 左側のパネルで、Advanced​を展開し、Developer​を選択します。

  5. Translate Inline セクションの 拡張セレクター を展開します。

  6. Enabled for Frontend​をNoに設定します。

  7. 完了したら、Save Config​をクリックします。

  8. 管理者 サイドバーで、System > Tools>Cache Management​に移動します。

  9. 以前に無効化された次の出力キャッシュのチェックボックスを選択します。

    • Blocks HTML output
    • Page Cache
    • Translations

  10. Actions コントロールをEnableに設定し、Submit​をクリックします。

  11. プロンプトが表示されたら、無効なキャッシュを更新します。

手順5：ストアの変更を確認する

ストアフロントに移動し、更新された各ページを確認して、変更が正しいことを確認します。 この例では、Customer LoginがCustomer Sign Inに変更されました。 特定のビューに変更が加えられた場合は、言語選択ツールを使用して正しいビューに切り替えます。

​ ストアフロントの例 – 翻訳済み顧客のログイン ​ {width="700" modal="regular"}

recommendation-more-help
commerce-admin-help-systems