1. その他の開発タスク

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

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

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

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

メモ

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

このトピックでは、次の方法について説明します。

新しいボタン項目を作成する

次のリボン コントロールを作成できます。

  • クイックバーボタン

  • ラージ ドロップダウン ボタン

  • ラージボタン

  • スモールボタン

  • スモールチェックボタン

手記

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

コンテンツ エディターで新しいボタン アイテムを作成するには、次の手順に従います。

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

  2. 関連するリボン コントロール テンプレート ( Small Buttonテンプレートなど) に基づいて新しい項目を /sitecore/templates/System/Ribbon/で作成します。

  3. 新しいアイテムには、次の情報を追加します。

    • Headerフィールドに、ボタンの表示名を入力します。

    • IDフィールドに、アイテムの一意の識別子を入力します。たとえば、リボン グループ名をIDに含めることができます。

    • Iconフィールドに、関連するアイコンへのパスを入力します。作成するボタンに応じて、アイコンのサイズを調整します。

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

  5. レンダリングの一意のIDを入力します。

    大事な

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

他のSPEAKコントロールと同様に、Data Source field内の別の項目をポイントし、この他の項目で構成を指定することもできます。

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

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

  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で、新しいボタン アイテムを右クリックし、TaskをクリックしてからDesign Layoutをクリックします。

  4. レンダリング ( SmallButtonなど) をダブルクリックし、Edit Rendering Propertiesダイアログ ボックスで次の値を変更します。

    • Clickプロパティでは、値をtrigger:button:clickに設定します。

    • Commandプロパティには、Sitecore.Commands名前空間で定義されたコマンド オブジェクト名 (例: HelloWorld) を入力します。

    • PageCodeScriptFileNameフィールドに、ボタンで実行するJavaScriptファイルへのパスを入力します。

  5. Closeをクリックしてエクスペリエンス エディターを開き、ボタンがリボンに表示されていることを確認します。

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

エクスペリエンス エディターでは、次のような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();
    }
  };
});

エクスペリエンス エディター パイプラインは、コア データベースの /sitecore/client/Applications/ExperienceEditorにアイテムとして格納されます。

手記

パイプラインを拡張する場合は、関連するパイプラインの下にプロセッサ項目を追加し、SPEAKガイドラインに従って並べ替え順序プロパティを設定する必要があります。

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

リボン上の既存のタブを非表示にする

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

手記

既存のボタンを非表示にするには、セキュリティ設定を使用できます。

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

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

  2. Sitecore Rocksで、非表示にするタブに移動し、Taskをクリックして、Design Layoutをクリックします。

  3. 非表示にするタブのデザイン レイアウトのRenderings and Place Holdersセクションで、Stripレンダリングをダブルクリックします。

  4. Edit Rendering Propertiesダイアログボックスの「PageCodeScriptFileName」フィールドに、JavaScriptファイルへのパスを入力します。

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