Intelligent Media Management:ツールバーの要素をカスタマイズする

概要

次の例では、カスタム ボタン とカスタムドロップダウンコンポーネントが 「開始」タブ に追加されます。

• デモ

  • カスタマイズ前

  • カスタマイズ後

• CommandBarId の値

  CommandBarId	場所
  StartTab	ツールバー > 開始タブ
  InsertTab	ツールバー > 挿入タブ
  ReviewTab	ツールバー > レビュータブ
  PageTab	ツールバー > ページタブ

  詳細については、「カスタマイズ可能なコンポーネント」をご参照ください。

• 構文

  expression.CommandBars(CommandBarId).Controls

  expression: アプリケーション オブジェクト。

• 例

  async function example() {
    await instance.ready();
  
    const app = instance.Application;
    
    // ツールバーのコンポーネントのコレクションを取得するには、CommandBars.Controls を使用します。ツールバーに新しいコンポーネントを追加したり、既存のコンポーネントをカスタマイズしたりできます。
    // 要素のカスタマイズのために「開始」タブを取得します。
    const controls = await app.CommandBars('StartTab').Controls;
    
    // カスタム ボタン 要素を追加します。
    const controlButton = await controls.Add(1);
    controlButton.Caption = 'ボタン';
  
    // カスタムドロップダウン要素を追加します。
    const controlPopup = await controls.Add(10);
    controlPopup.Caption = 'ドロップダウンリスト';
  }

カスタム要素を追加する

Controls.Add() プロパティを使用して、カスタム ボタン とカスタムドロップダウンコンポーネントを対応するタブに追加します。

• デモ

  • カスタマイズ前

  • カスタマイズ後

• 構文

  expression.CommandBars(CommandBarId).Controls.Add(Type)

  expression: アプリケーション オブジェクト。

• パラメータ

  パラメータ	データ型	必須	説明
  Type	Enum	はい	新しいカスタム要素の タイプ 。 Enum.MsoControlType の有効な値: 1 または msoControlButton: コマンド ボタン 。 10 または msoControlPopup: ドロップダウンリスト。

• 例

  async funcion example() {
    await instance.ready();
  
    const app = instance.Application;
  
    // 要素のカスタマイズのために「開始」タブを取得します。
    const controls = await app.CommandBars('StartTab').Controls;
    
    // カスタム ボタン 要素を追加します。
    const controlButton = await controls.Add(1);
    controlButton.Caption = 'ボタン';
  
    // カスタムドロップダウンリストを追加します。
    const controlPopup = await controls.Add(10);
    controlPopup.Caption = 'ドロップダウンリスト';
  }

単一のカスタム要素

要素のタイトルとクリック 操作 のカスタマイズを含む、単一のカスタム要素を取得してカスタマイズします。

概要

次の例では、「開始」タブ に ボタン が追加され、削除されます。

• デモ

  • ボタンの追加

  • ボタンの削除

• 構文

  expression.CommandBars(CommandBarId).Controls.Item(Index)

  expression: アプリケーション オブジェクト。

• パラメータ

  パラメータ	データ型	必須	説明
  Index	数値	はい	カスタム要素の インデックス 。

• 例

  async function example() {
    await instance.ready();
  
    const app = instance.Application;
  
    // 要素のカスタマイズのために「開始」タブを取得します。
    const controls = await app.CommandBars('StartTab').Controls;
    
    // カスタム ボタン を追加します。
    const controlButton = await controls.Add(1);
    controlButton.Caption = 'ボタン';
  
    // 6,000 ミリ秒後にカスタム要素を削除します。
    setTimeout(() => {
      controlButton.Delete();
    }, 6000);
  }

タイトルを設定する

Caption プロパティを使用して、カスタム要素のタイトルを設定します。

• デモ

• 構文

  expression.CommandBars(CommandBarId).Controls.Add(Type).Caption

  expression: アプリケーション オブジェクト。

• 例

  async function example() {
    await instance.ready();
  
    const app = instance.Application;
  
    // 要素のカスタマイズのために「開始」タブを取得します。
    const controls = await app.CommandBars('StartTab').Controls;
    
    //  ボタン を追加し、タイトルを「 ボタン 」に設定します。
    const controlButton = await controls.Add(1);
    controlButton.Caption = 'ボタン';
    
    // ドロップダウンリストを追加し、タイトルを「ドロップダウンリスト」に設定します。
    const controlPopup = await controls.Add(10);
    controlPopup.Caption = 'ドロップダウンリスト';
  }

カスタム要素を削除する

Delete() プロパティを使用して、カスタム要素を削除します。

• デモ

  • 削除前

  • 削除後

• 構文

  expression.CommandBars(CommandBarId).Controls.Add(Type).Delete()

  expression: アプリケーション オブジェクト。

• 例

  async function example() {
    await instance.ready();
  
    const app = instance.Application;
  
    // 要素のカスタマイズのために「開始」タブを取得します。
    const controls = await app.CommandBars('StartTab').Controls;
    
    //  ボタン を追加し、タイトルを「 ボタン 」に設定します。
    const controlButton = await controls.Add(1);
    controlButton.Caption = 'ボタン';
    
    // ドロップダウンリストを追加し、タイトルを「ドロップダウンリスト」に設定します。
    const controlPopup = await controls.Add(10);
    controlPopup.Caption = 'ドロップダウンリスト';
  
    // 6,000 ミリ秒後に2つのカスタム要素を削除します。
    setTimeout(() => {
      controlButton.Delete();
      controlPopup.Delete();
    }, 6000);
  }

カスタム要素を無効にする

Enabled プロパティを使用して、要素を無効にします。

• デモ。 ボタン はグレー表示されています。

• 構文

  expression.CommandBars(CommandBarId).Controls.Add(Type).Enabled

  expression: アプリケーション オブジェクト。

• 例

  async function example() {
    await instance.ready();
  
    const app = instance.Application;
  
    // 要素のカスタマイズのために「開始」タブを取得します。
    const controls = await app.CommandBars('StartTab').Controls;
    
    //  ボタン を追加して無効にします。
    const controlButton = await controls.Add(1);
    controlButton.Caption = 'ボタン';
    controlButton.Enabled = false;
    
    // ドロップダウンリストを追加して無効にします。
    const controlPopup = await controls.Add(10);
    controlPopup.Caption = 'ドロップダウンリスト';
    controlPopup.Enabled = false;
  }

カスタム要素をクリックする

Execute() プロパティを使用して、カスタム要素をクリックします。カスタム要素のクリック イベント をリッスンして、クリックされたかどうかを確認できます。詳細については、「カスタム要素のクリック イベント をリッスンする」をご参照ください。

• 構文

  expression.CommandBars(CommandBarId).Controls.Add(Type).Execute()

  expression: アプリケーション オブジェクト。

• 例

  async function example() {
    await instance.ready();
  
    const app = instance.Application;
  
    // 要素のカスタマイズのために「開始」タブを取得します。
    const controls = await app.CommandBars('StartTab').Controls;
    
    //  ボタン を追加して、クリック イベント をリッスンします。
    const controlButton = await controls.Add(1);
    controlButton.Caption = 'ボタン';
    controlButton.OnAction = () => console.log ('ボタンがクリックされました');
    
    // ドロップダウンリストを追加して、クリック イベント をリッスンします。
    const controlPopup = await controls.Add(10);
    controlPopup.Caption = 'ドロップダウンリスト';
    controlPopup.OnAction = () => console.log ('ドロップダウンリストがクリックされました');
  
    // 6,000 ミリ秒後に要素をクリックします。
    setTimeout( async () => {
      await controlButton.Execute();
      await controlPopup.Execute();
    }, 6000);
  }

カスタム要素のクリック イベント をリッスンする

要素のクリック イベント のリッスンを開始すると、コンポーネントがクリックされた場合、コンソールで対応する情報を表示できます。この情報はビジネスに使用できます。

• 構文

  expression.CommandBars(CommandBarId).Controls.Add(Type).OnAction() = 関数

  expression: アプリケーション オブジェクト。

• 例

  async function example() {
    await instance.ready();
  
    const app = instance.Application;
  
    // 要素のカスタマイズのために「開始」タブを取得します。
    const controls = await app.CommandBars('StartTab').Controls;
    
    //  ボタン を追加して、クリック イベント をリッスンします。
    const controlButton = await controls.Add(1);
    controlButton.Caption = 'ボタン';
    controlButton.OnAction = () => console.log ('ボタンがクリックされました');
    
    // ドロップダウンリストを追加して、クリック イベント をリッスンします。
    const controlPopup = await controls.Add(10);
    controlPopup.Caption = 'ドロップダウンリスト';
    controlPopup.OnAction = () => console.log ('ドロップダウンリストがクリックされました');
  }

要素のアイコンをカスタマイズする

Picture プロパティを使用して、要素のアイコンをカスタマイズします。次の例では、Base64 エンコード形式を使用して要素のアイコンを設定します。

• デモ

• 構文

  expression.CommandBars(CommandBarId).Controls.Add(Type).Picture

  expression: アプリケーション オブジェクト。

• 例

  async function example() {
    await instance.ready();
  
    const app = instance.Application;
  
    // 要素のカスタマイズのために「開始」タブを取得します。
    const controls = await app.CommandBars('StartTab').Controls;
    
    //  ボタン を追加して、アイコンを設定します。
    const controlButton = await controls.Add(1);
    controlButton.Caption = 'ボタン';
    controlButton.Picture = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjM0Q0NzU3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik04LjIxMyAxM0g2LjhsNi42MzYtNi42MzYtNC4yNDMtNC4yNDMtNy4wNyA3LjA3MUw1LjkyOCAxM0g0LjUxNUwxLjA2IDkuNTQ2YS41LjUgMCAwIDEgMC0uNzA3TDguODM5IDEuMDZhLjUuNSAwIDAgMSAuNzA3IDBsNC45NSA0Ljk1YS41LjUgMCAwIDEgMCAuNzA3TDguMjEzIDEzeiIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTQuNTM2IDYuMzY0bDQuOTUgNC45NS0uNzA3LjcwNy00Ljk1LTQuOTV6TTQuNTIxIDEzaDEwLjAzdjFINS40OTZ6Ii8+PC9nPjwvc3ZnPg==';
    
    // ドロップダウンリストを追加して、アイコンを設定します。
    const controlPopup = await controls.Add(10);
    controlPopup.Caption = 'ドロップダウンリスト';
    controlPopup.Picture = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik03LjUgMnYyLjVINGEuNS41IDAgMCAwLS41LjV2MmEuNS41IDAgMCAwIC41LjVoOWEuNS41IDAgMCAwIC41LS41VjVhLjUuNSAwIDAgMC0uNS0uNUg5LjVWMmEuNS41IDAgMCAwLS41LS41SDhhLjUuNSAwIDAgMC0uNS41eiIgc3Ryb2tlPSIjM0Q0NzU3Ii8+PHBhdGggZmlsbD0iIzNENDc1NyIgZD0iTTEzIDdoMXY0aC0xeiIvPjxwYXRoIGQ9Ik0xMSAxM2EyIDIgMCAwIDAgMi0yVjguNzY0QTMgMyAwIDEgMSA4Ljc2NCAxM0gxMXoiIGZpbGw9IiMzRDQ3NTciLz48cGF0aCBmaWxsPSIjM0Q0NzU3IiBkPSJNMSAxM2gxMHYxSDF6Ii8+PHBhdGggZD0iTTEgMTNhMiAyIDAgMCAwIDItMlY4Ljc2NEEzIDMgMCAwIDEgMSAxNHYtMXoiIGZpbGw9IiMzRDQ3NTciLz48cGF0aCBmaWxsPSIjM0Q0NzU3IiBkPSJNMyA3aDF2NEgzeiIvPjwvZz48L3N2Zz4=';
  }

カスタム要素に フォーカス を設定する

SetFocus プロパティを使用して、カーソルをカスタム要素の場所に移動します。

• デモ

• 構文

  expression.CommandBars(CommandBarId).Controls.Add(Type).SetFocus()

  expression: アプリケーション オブジェクト。

• 例

  async function example() {
    await instance.ready();
  
    const app = instance.Application;
  
    // 要素のカスタマイズのために「開始」タブを取得します。
    const controls = await app.CommandBars('StartTab').Controls;
    
    //  ボタン を追加して、 フォーカス を設定します。
    const controlButton = await controls.Add(1);
    controlButton.Caption = 'ボタン';
    await controlButton.SetFocus();
    
    // ドロップダウンリストを追加して、 フォーカス を設定します。
    const controlPopup = await controls.Add(10);
    controlPopup.Caption = 'ドロップダウンリスト';
    await controlPopup.SetFocus();
  }

カスタム要素を非表示にする

Visible プロパティを使用して、要素を非表示にしたり、表示したりします。

• デモ

  • 表示

  • 非表示

• 構文

  expression.CommandBars(CommandBarId).Controls.Add(Type).Visible

  expression: アプリケーション オブジェクト。

• 例

  async function example() {
    await instance.ready();
  
    const app = instance.Application;
  
    // 要素のカスタマイズのために「開始」タブを取得します。
    const controls = await app.CommandBars('StartTab').Controls;
    
    // カスタム ボタン を追加します。
    const controlButton = await controls.Add(1);
    controlButton.Caption = 'ボタン';
  
    // カスタムドロップダウンリストを追加します。
    const controlPopup = await controls.Add(10);
    controlPopup.Caption = 'ドロップダウンリスト';
  
    // 6,000 ミリ秒後にカスタム要素を非表示にします。
    setTimeout(() => {
      controlButton.Visible = false;
      controlPopup.Visible = false;
    }, 6000);
  }

要素のツールチップテキストをカスタマイズする

TooltipText プロパティを使用して、カスタム要素のツールチップテキストを設定します。

• デモ

  • ボタン

  • ドロップダウンリスト

• 構文

  expression.CommandBars(CommandBarId).Controls.Add(Type).TooltipText

  expression: アプリケーション オブジェクト。

• 例

  async function example() {
    await instance.ready();
  
    const app = instance.Application;
  
    // 要素のカスタマイズのために「開始」タブを取得します。
    const controls = await app.CommandBars('StartTab').Controls;
    
    //  ボタン を追加して、ツールチップテキストを設定します。
    const controlButton = await controls.Add(1);
    controlButton.Caption = 'ボタン';
    controlButton.TooltipText = 'ツールチップ - ボタン';
  
    // ドロップダウンリストを追加して、ツールチップテキストを設定します。
    const controlPopup = await controls.Add(10);
    controlPopup.Caption = 'ドロップダウンリスト';
    controlPopup.TooltipText = 'ツールチップ - ドロップダウンリスト';
  }

モバイルツールバーの要素をカスタマイズする

Controls プロパティを使用して、キャプションテキスト、アイコン、クリックなどの要素の 属性 を制御します。

このセクションでは、下部ツールバーに ボタン を追加する方法を示します。

• カスタム要素を追加する

  

• 構文

  expression.CommandBars(CommandBarId).Controls.Add(Index)

  expression: アプリケーション オブジェクト。

• パラメータ

• 例

  async function example() {
    await instance.ready();
  
    const app = instance.Application;
  
    const controls = window.instance.Application.CommandBars.Item('WriterHoverToolbars').Controls;
      // カスタム ボタン を追加します。
    const controlButton = await controls.Add(20);
    controlButton.Caption = 'ボタン'; // キャプションを指定します。
  
    controlButton.Picture = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjM0Q0NzU3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik04LjIxMyAxM0g2LjhsNi42MzYtNi42MzYtNC4yNDMtNC4yNDMtNy4wNyA3LjA3MUw1LjkyOCAxM0g0LjUxNUwxLjA2IDkuNTQ2YS41LjUgMCAwIDEgMC0uNzA3TDguODM5IDEuMDZhLjUuNSAwIDAgMSAuNzA3IDBsNC45NSA0Ljk1YS41LjUgMCAwIDEgMCAuNzA3TDguMjEzIDEzeiIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTQuNTM2IDYuMzY0bDQuOTUgNC45NS0uNzA3LjcwNy00Ljk1LTQuOTV6TTQuNTIxIDEzaDEwLjAzdjFINS40OTZ6Ii8+PC9nPjwvc3ZnPg==';
    
  }

モバイル下部ツールバー全体の表示スタイルを指定する

モバイル下部ツールバー全体の表示スタイルを指定できます。テキストのみ表示、アイコンのみ表示、またはアイコンとテキストの表示です。

• テキストのみを表示する

  

• アイコンのみを表示する

  

• 構文

  expression.CommandBars.Item(CommandBarId).CommandBarMode(WdCommandBar)

  式: アプリケーション オブジェクト。サポートされているフィールドの詳細については、「Enum.WdCommandBar」をご参照ください。

• 例

  async function example() {
    // インスタンスの準備ができるまで待機します。
    await instance.ready();
  
    const app = instance.Application;
  
    const controls = window.instance.Application.CommandBars.Item('WriterHoverToolbars').Controls;
  
    // コマンドバーモードを 1 に設定します。
    await commandBar.CommandBarMode(1);
    
  }

リビジョン設定にカスタムの第 1 レベルまたは第 2 レベルの項目を追加する

• 変更設定にカスタムの第 1 レベル項目を追加する

  

• 変更設定にカスタムの第 2 レベル項目を追加する

  

• 構文

  expression.CommandBars(CommandBarId).Controls.Add(10)

  expression: アプリケーション オブジェクト。

• 例

  • 第 1 レベル項目を追加する

    async function example() {
        await instance.ready();
    
        const app = instance.Application;
    
        const controls = await app.CommandBars('RevisionSetting').Controls;
    
        const button = await controls.Add(10);
        // 字幕テキストを指定します。
        button.Caption = 'First-level Item';
        // クリック イベントを追加します。
        button.OnAction = () => console.log('A click on first-level item);
        // Enable 属性を設定します。
        button.Enable = false;
    }

  • 第 2 レベル項目を追加する

    async function example() {
        await instance.ready();
    
        const app = instance.Application;
    
        const controls = app.CommandBars('RevisionSetting').Controls;
        const button = await controls.Add(10);
        button.Caption = 'First-level Item';
        const popupControls = await button.Controls;
        // 第 2 レベル項目を追加します。
        const button1 = await popupControls.Add(1);
        // 第 2 レベル項目の字幕テキストを指定します。
        button1.Caption ='Second-level Item';
        // クリック イベントを追加します。
        button1.OnAction = () => console.log('A click on the second-level item');
    }

ドロップダウンリストの要素をカスタマイズする

Enum を CommandBars(CommandBarId).Controls.Add() で 10 に設定すると、ドロップダウンリストを追加できます。ツールバーで使用する前に、ドロップダウンリストを設定する必要があります。たとえば、次の図では、ドロップダウンリストに [オプション 1] が追加されています。オプション設定の指定方法については、「単一の カスタム要素」をご参照ください。

ドロップダウンリストにカスタム要素を追加する

Add() プロパティを使用して、ドロップダウンリストに新しいカスタム要素を追加します。

• 構文

  expression.CommandBars(CommandBarId).Controls.Add(10).Controls.Add()

  expression: アプリケーション オブジェクト。

• 例

  async function example() {
    await instance.ready();
  
    const app = instance.Application;
    
    // 要素のカスタマイズのために [開始] タブを取得します。
    const controls = await app.CommandBars('StartTab').Controls;
  
    // ドロップダウンリストを追加します。
    const control = await controls.Add(10);
    control.Caption = 'ドロップダウンリスト';
    
    // ドロップダウンボックスを取得します。
    const popupControls = await control.Controls;
  
    // ドロップダウンリストにカスタム要素を追加します。
    const button = await popupControls.Add(1);
    button.Caption = 'ドロップダウンボタン 1';
  }

ドロップダウンリストの単一の カスタム要素を設定する

• 構文

  expression.CommandBars(CommandBarId).Controls.Add(10).Controls.Item(Index)

  expression: アプリケーション オブジェクト。

• パラメータ

  パラメータ	データ型	必須	説明
  Index	数値	はい	ドロップダウンリストの カスタム要素のインデックス。

• 例

  //@file=base.docx
  async function example() {
    await instance.ready();
  
    const app = instance.Application;
    
    // 要素のカスタマイズのために [開始] タブを取得します。
    const controls = await app.CommandBars('StartTab').Controls;
  
    // ドロップダウンリストを追加します。
    const control = await controls.Add(10);
    control.Caption = 'ドロップダウンリスト';
    
    // ドロップダウンリストを取得します。
    const popupControls = control.Controls;
  
    // ドロップダウンリストに要素を追加します。
    const button = popupControls.Add(1);
    button.Caption = 'ドロップダウンボタン 1';
  
    // ドロップダウンリストの最初のカスタム要素を取得します。
    const item1 = await popupControls.Item(1);
    item1.Caption = 'ドロップダウンボタンを変更する';
  }