--- title: "エクスペリエンスエディターのリボンをカスタマイズする" slug: "customize-the-experience-editor-ribbon" abstract: "エクスペリエンスエディターのリボンをカスタマイズしましょう。" --- # エクスペリエンスエディターのリボンをカスタマイズする エクスペリエンスエディターのリボンをカスタマイズするには、*PageCodeScriptFileName*プロパティを使用できます。このプロパティでは、リボンのタブが読み込まれたときに実行されるJavaScriptファイルのパスを指定できます。 > !注エクスペリエンスエディターリボンのページロード時間を短縮するために、[スプライトを使って](https://doc.sitecore.com/xp/ja/developers/103/sitecore-experience-manager/use-sprites-to-improve-the-performance-of-the-experience-editor.html "Use sprites to improve the performance of the Experience Editor") 画像リクエスト数を減らすことができます。 このトピックでは、以下の方法を概説します: - [新しいボタンアイテムを作成する](https://doc.sitecore.com/xp/ja/developers/103/sitecore-experience-manager/customize-the-experience-editor-ribbon.html#UUID-58b2038a-6f2b-7c69-1c4a-8c2dec99bfb6_id__Create_a_button "Create a new button item") - [ボタンにコマンドを割り当てる](https://doc.sitecore.com/xp/ja/developers/103/sitecore-experience-manager/customize-the-experience-editor-ribbon.html#UUID-58b2038a-6f2b-7c69-1c4a-8c2dec99bfb6_id__Assign_a_command "Assign a command to the button") - [コマンドからSPEAK JSパイプラインを開始する](https://doc.sitecore.com/xp/ja/developers/103/sitecore-experience-manager/customize-the-experience-editor-ribbon.html#UUID-58b2038a-6f2b-7c69-1c4a-8c2dec99bfb6_id__Hide_an_existing "Initiate a SPEAK JS pipeline from a command") - [既存のリボンコントロールを非表示にする](https://doc.sitecore.com/xp/ja/developers/103/sitecore-experience-manager/customize-the-experience-editor-ribbon.html#UUID-58b2038a-6f2b-7c69-1c4a-8c2dec99bfb6_N1526037885200 "Hide an existing tab on the ribbon") ## 新しいボタンアイテムを作成する 以下のリボンコントロールを作成できます: - クイックバーボタン - LargeDropDownButton - ラージボタン - スモールボタン - スモールチェックボタン ![1DFAD7BB06FF4941BA2A7C4A35128E84.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/103/sitecore-experience-manager/images/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](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/103/sitecore-experience-manager/images/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](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/103/sitecore-experience-manager/images/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](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/103/sitecore-experience-manager/images/18E99C96E2DE4FA69337C0F22B69FA90.png) 4. レンダリング **プロパティの編集** ダイアログボックスの**PageCodeScriptFileName**フィールドで、JavaScriptファイルへのパスを入力します。 ![2A3D0F6BBF27480B98EFDD0B69ECB510.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/103/sitecore-experience-manager/images/2A3D0F6BBF27480B98EFDD0B69ECB510.png)