1. その他の開発課題

エクスペリエンスエディターのリボンをカスタマイズする

Version:
日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

エクスペリエンスエディターのリボンをカスタマイズするには、PageCodeScriptFileNameプロパティを使用できます。このプロパティでは、リボンのタブが読み込まれたときに実行されるJavaScriptファイルのパスを指定できます。

!注エクスペリエンスエディターリボンのページロード時間を短縮するために、スプライトを使って 画像リクエスト数を減らすことができます。

このトピックでは、以下の方法を概説します:

新しいボタンアイテムを作成する

以下のリボンコントロールを作成できます:

  • クイックバーボタン
  • LargeDropDownButton
  • ラージボタン
  • スモールボタン
  • スモールチェックボタン
1DFAD7BB06FF4941BA2A7C4A35128E84.png

!注これらのコントロールがSPEAKコマンドをサポートするために、コントロールはCommandRibbonComponentテンプレート(ID: "{CE11D144-D6A8-4B33-8E98-07DED610E952})を継承しなければなりません。このテンプレートは /sitecore/client/Applications/ExperienceEditor/Common/Templates/Controlsにあります。

コンテンツエディターで新しいボタン項目を作成するには:

  1. コアデータベースでコンテンツエディターを開き、/sitecore/content/Applications/WebEdit/Ribbons/WebEdit/Experience Editor/Editに移動します。

  2. 関連するリボンコントロールテンプレート(例えばSmall Buttonテンプレート)に基づいて新しいアイテムを作成する /sitecore/templates/System/Ribbon/。

  3. 新しいアイテムには以下の情報を追加してください:

    • ヘッダーフィールドにボタンの表示名を入力します。
    • IDフィールドにアイテムの一意識別子を入力します。例えば、IDにリボングループ名を含めることができます。
    • アイコン欄で、該当するアイコンへのパスを入力します。作成したボタンに応じて、アイコンのサイズを調整してください。

  4. Sitecore Rocksを開き、作成したボタンアイテムのレイアウトに、例えばSmallButtonなどのコントロールレンダリングを追加します。

    B25465EC315C4D9DB4285AE589FB7623.png

  5. レンダリング用のユニークなIDを入力してください。

    !重要レンダリングのプレースホルダーは指定しないでください。

他のSPEAKコントロールと同様に、データソースフィールド 内の別の項目を指し示し、その別の項目で設定を指定することもできます。

ボタンにコマンドを割り当てる

新しいボタンのコマンドを作成・割り当てするには:

  1. Sitecoreインストールのフォルダ構造で、\Website\sitecore\shell\client\Sitecore\ExperienceEditor\Commandsに移動してJavaScriptファイルを作成します。例えばhelloworld.js。

  2. ファイルを開いて、関連するコードを挿入します。例えば:

    define("sitecore", function (Sitecore) { Sitecore.Commands.HelloWorld = { canExecute: function (context) { // Determines whether command is disabled or enabled. return true; }, execute: function (context) { alert("Hello world!"); } }; });

  3. Sitecore Rocksで、新しいボタン項目を右クリックし、タスクをクリックし、その後 デザインレイアウトを選択します。

  4. 例えば、レンダリングをダブルクリックして、SmallButton、をダブルクリックし、「 レンダリングプロパティの編集 」ダイアログボックスで以下の値を変更してください:

    • Click プロパティでは、値を trigger:button:click(トリガー:ボタン:クリック)に設定します。
    • コマンドプロパティについては、Sitecoreで定義されたコマンドオブジェクト名を入力します。例えばコマンドの名前空間HelloWorld。
    • PageCodeScriptFileNameフィールドに、ボタンを実行したいJavaScriptファイルのパスを入力します。
    E559F45CCF3F44758FBE76732682F454.png

  5. 閉じ るボタン をクリックしてエクスペリエンスエディターを開き、リボンにボタンが表示されているか確認してください。

コマンドからSPEAK JSパイプラインを開始する

例えば、Experience EditorでSPEAK JSパイプラインを開始するコマンドを割り当てることができます。

define("sitecore", "/-/speak/v1/ExperienceEditor/ExperienceEditor.js", function (Sitecore, ExperienceEditor) { Sitecore.Commands.Rename = { canExecute: function (context) { … }, execute: function (context) { context.app.disableButtonClickEvents(); ExperienceEditor.PipelinesUtil.executePipeline(context.app.RenamePipeline, function () { ExperienceEditor.PipelinesUtil.executeProcessors(Sitecore.Pipelines.RenameItem, context); }); context.app.enableButtonClickEvents(); } }; });

エクスペリエンスエディターのパイプラインは、Coreデータベースの項目として以下の項目として保存されています: /sitecore/client/Applications/ExperienceEditor。

!注パイプラインを拡張したい場合は、該当するパイプラインの下にプロセッサ項目を追加し、SPEAKガイドラインに従ってソートオーダープロパティを設定する必要があります。

Experience Editor 8.0以降のバージョンにおけるリボンボタンのSPEAKパイプラインは、Sitecore.configファイルで定義されている通常のSitecoreパイプライン()とは独立しています。したがって、コマンドのカスタマイズがコンテンツエディターとエクスペリエンスエディターの両方に適用されていることを確認してください。

リボン上の既存のタブを隠す

エクスペリエンスエディターのリボンで、既存のタブを非表示にするには、まずそのタブを非表示するJavaScriptファイルを作成し、そのJavaScriptファイルを非表示したいタブに割り当てる必要があります。

!注既存のボタンを隠すには、セキュリティ設定を使えます。

既存のタブを非表示にするには:

  1. Sitecoreインストールのフォルダ構造で、\Website\sitecore\shell\client\Sitecore\ExperienceEditor\Commandsに移動して、ファイル実行時にタブを隠すJavaScriptファイルを作成します。

  2. Sitecore Rocksで、非表示にしたいタブに移動し、「 タスク」をクリックし、「 デザインレイアウト」をクリックしてください。

  3. 非表示にしたいタブのデザインレイアウトの「 レンダリングとプレースホルダー 」セクションで、ストリップ レンダリングをダブルクリックしてください。

    18E99C96E2DE4FA69337C0F22B69FA90.png

  4. レンダリング プロパティの編集 ダイアログボックスのPageCodeScriptFileNameフィールドで、JavaScriptファイルへのパスを入力します。

    2A3D0F6BBF27480B98EFDD0B69ECB510.png
この記事を改善するための提案がある場合は、 お知らせください!