次の方法で共有

Office アドインのローカライズ

Office アドイン に適切なローカライズ方法を任意に選んで実装できます。 JavaScript API と Office アドイン プラットフォームのマニフェスト スキーマには、いくつかの選択肢が用意されています。 Office JavaScript API を使用すると、Office アプリケーションのロケールに基づいてロケールを決定し、文字列を表示したり、データのロケールに基づいてデータを解釈または表示したりできます。 マニフェストを使用すると、ロケールに固有なアドイン ファイルの場所と説明的な情報を指定できます。 または、Visual Studio と Microsoft Ajax スクリプトを使用して、グローバリゼーションとローカライズをサポートすることもできます。

ロケール固有文字列を判別するための JavaScript API の使用

Office JavaScript API には、Office アプリケーションとデータのロケールと一致する値の表示または解釈をサポートする 2 つのプロパティが用意されています。

  • Context.displayLanguage は、Office アプリケーションのユーザー インターフェイスのロケール (または言語) を指定します。 次の例では、Office アプリケーションが en-US または fr-FR ロケールを使用しているかどうかを確認し、ロケール固有のあいさつ文を表示します。

    function sayHelloWithDisplayLanguage() {
    const myLanguage = Office.context.displayLanguage;
    switch (myLanguage) {
        case 'en-US':
            write('Hello!');
            break;
        case 'fr-FR':
            write('Bonjour!');
            break;
    }
}

// Function that writes to a div with id='message' on the page.
function write(message) {
    document.getElementById('message').innerText += message;
}

  • Context.contentLanguage は、データのロケール (または言語) を指定します。 displayLanguage プロパティを確認する代わりに、最後のコード サンプルを拡張し、contentLanguage プロパティの値myLanguage割り当て、同じコードの残りの部分を使用して、データのロケールに基づいてあいさつ文を表示します。

    const myLanguage = Office.context.contentLanguage;

マニフェストでのローカライズの制御

マニフェストを使用してローカライズする手法は、アドインのみのマニフェストと Microsoft 365 の統合アプリ マニフェストのどちらを使用しているかによって異なります。

Microsoft 365 の統合アプリ マニフェストを使用する場合は、「アプリ マニフェストの文字列をローカライズする」で説明されているように、マニフェスト 内の公開文字列をローカライズします。 Outlook アドインの例を次に示します。 1 つ目は、マニフェスト内の "localizationInfo" オブジェクトです。 以下に、翻訳された文字列を含むfr-fr.json ファイルを示します。 アドインには、作業ウィンドウ (フランス語バージョンのホーム ページあり)、ローカライズされたフランス語のアイコン、およびダイアログ ボックスでビデオ プレーヤーを開くカスタム リボン ボタンがあります。

"localizationInfo": {
  "defaultLanguageTag": "en",
  "additionalLanguages": [
    {
      "languageTag": "fr-fr",
      "file": "fr-fr.json"
    }
  ]
}

{
  "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.16/MicrosoftTeams.Localization.schema.json",
  "name.short": "Lecteur vidéo",
  "name.full": "Lecteur vidéo pour Outlook",
  "description.short": "Voir les vidéos YouTube dans Outlook via les mails.",
  "description.full": "Visualisez les vidéos YouTube référencées dans vos courriers électronique directement depuis Outlook.",
  "icons.color": "https://localhost:3000/assets/fr-fr/icon-128.png",
  "extensions[0].audienceClaimUrl": "https://localhost:3000/fr-fr/taskpane.html",
  "extensions[0].ribbons[0].tabs[0].groups[0].label": "Outils de médias",
  "extensions[0].ribbons[0].tabs[0].groups[0].controls[0].icons[0].url": "https://localhost:3000/assets/fr-fr/player-icon.png",
  "extensions[0].ribbons[0].tabs[0].groups[0].controls[0].label": "Ouvrir le lecteur vidéo",
  "extensions[0].ribbons[0].tabs[0].groups[0].controls[0].supertip.description": "Cliquez pour ouvrir le lecteur vidéo.",
  "extensions[0].ribbons[0].tabs[0].groups[0].controls[0].supertip.title": "Ouvrir le lecteur vidéo",
}

日付/時刻の形式のクライアント ロケールへの関連付け

displayLanguage プロパティを使用して、Office クライアント アプリケーションのユーザー インターフェイスのロケールを取得できます。 その後、Office アプリケーションの現在のロケールと一致する形式で日付と時刻の値を表示できます。 その方法の 1 つが、Office アドインがサポートする各ロケールで使用する日付と時刻の表示形式を指定したリソース ファイルを準備するという方法です。 実行時に、アドインはリソース ファイルを使用し、適切な日付/時刻形式を displayLanguage プロパティから取得したロケールと一致させることができます。

contentLanguage プロパティを使用して、Office クライアント アプリケーションのデータのロケールを取得できます。 この値に基づいて、日付と時刻の文字列を適切に変換または表示できます。 たとえば、jp-JP ロケールでは日付と時刻の値は yyyy/MM/dd と表記され、fr-FR ロケールでは dd/MM/yyyy と表記されます。

Visual Studio を使用してローカライズおよびグローバル化されたアドインを作成する

Visual Studio で Office アドインを作成する場合, .NET Framework と Ajax を使用してクライアント スクリプト ファイルをグローバライズおよびローカライズできます。

現在のブラウザーのロケール設定に基づいて値を表示するには、Office アドイン向けの JavaScript コード内で Date および Number JavaScript 型の拡張と JavaScript Date オブジェクトをグローバライズして使用できます。 詳細については、「 Walkthrough: Globalizing a Date by Using Client Script」を参照してください。

ローカライズされたリソース文字列をスタンドアロンの JavaScript ファイルに直接含めて、ブラウザーで設定されている、またはユーザーによって提供されるさまざまなロケールのクライアント スクリプト ファイルを提供できます。 サポートされているロケールごとに個別のスクリプト ファイルを作成します。 各スクリプト ファイルに、そのロケールのリソース文字列を含む JSON 形式のオブジェクトを含めます。 ローカライズされた値は、スクリプトがブラウザーで実行されるときに適用されます。

例: ローカライズされた Office アドインの作成

このセクションでは、Office アドイン の説明、表示名、および UI をローカライズする方法の例を示します。

注:

Visual Studio をダウンロードするには、 Visual Studio IDE ページを参照してください。 インストール時には、Office/SharePoint 開発ワークロードを選択する必要があります。

表示または編集用の追加言語を使用できるように Office を構成する

指定したサンプル コードを実行するには、メニューとコマンドの表示、編集と校正、またはその両方に使用する言語を切り替えてアドインをテストできるように、追加の言語を使用するようにコンピューター上の Office を構成します。

Office Language Pack を使用して、追加言語をインストールできます。 言語パックの詳細と入手先については、「Office 2013 の言語オプション」を参照してください。

Language Accessory Pack をインストールしたら、UI の表示、ドキュメント コンテンツの編集、またはその両方にインストールされた言語を使用するように Office を構成できます。 この記事の例では、言語パック (スペイン語) が適用されている Office のインストールを使用します。

Office アドイン プロジェクトの作成

Visual Studio Office アドイン プロジェクトを作成する必要があります。

注:

Visual Studio をインストールしていない場合は、ダウンロード手順については、 Visual Studio IDE ページ を参照してください。 インストール時には、Office/SharePoint 開発ワークロードを選択する必要があります。 以前に Visual Studio 2019 以降をインストールしている場合は、Visual Studio Installerを使用して、Office/SharePoint 開発ワークロードがインストールされていることを確認します。

  1. [新規プロジェクトの作成] を選択します。

  2. 検索ボックスを使用して、アドインと入力します。 [Word Web アドイン] を選択し、[次へ] を選択します。

  3. プロジェクトに WorldReadyAddIn という名前を付け、[ 作成] を選択します。

  4. ソリューションが Visual Studio によって作成され、2 つのプロジェクトがソリューション エクスプローラーに表示されます。 Home.html ファイルが Visual Studio で開きます。

アドインに使用されるテキストのローカライズ

別の言語用にローカライズするテキストが 2 つの領域に表示されます。

  • アドインの表示名と説明 。 これは、アドインのマニフェスト ファイルのエントリによって制御されています。

  • アドイン UI。 アドインの UI に表示される文字列は、JavaScript コードを使用してローカライズできます。たとえば、ローカライズされた文字列を含む別個のリソース ファイルを使用します。

アドインの表示名と説明をローカライズする

  1. ソリューション エクスプローラーで、WorldReadyAddIn、WorldReadyAddInManifest の順に展開し、WorldReadyAddIn.xml を選択します。

  2. WorldReadyAddInManifest.xmlで、DisplayName 要素と Description 要素を次のコード ブロックに置き換えます。

    注:

    この例の DisplayName 要素および Description 要素で使用されているスペイン語にローカライズされた文字列を、別の言語にローカライズされた文字列で置き換えることができます。

    <DisplayName DefaultValue="World Ready add-in">
  <Override Locale="es-es" Value="Aplicación de uso internacional"/>
</DisplayName>
<Description DefaultValue="An add-in for testing localization">
  <Override Locale="es-es" Value="Una aplicación para la prueba de la localización"/>
</Description>

  3. たとえば、Microsoft 365 の表示言語を英語からスペイン語に変更し、アドインを実行すると、アドインの表示名と説明がローカライズされたテキストで表示されます。

アドイン UI をレイアウトする

  1. Visual Studio の ソリューション エクスプローラーで、Home.html を選択します。

  2. Home.html の<body>要素の内容を次の HTML に置き換え、ファイルを保存します。

    <body>
    <!-- Page content -->
    <div id="content-header" class="ms-bgColor-themePrimary ms-font-xl">
        <div class="padding">
            <h1 id="greeting" class="ms-fontColor-white"></h1>
        </div>
    </div>
    <div id="content-main">
        <div class="padding">
            <div class="ms-font-m">
                <p id="about"></p>
            </div>
        </div>
    </div>
</body>

次の図は、残りの手順を完了してアドインを実行したときにローカライズされたテキストが表示される見出し (h1) 要素と段落 (p) 要素を示しています。

セクションが強調表示されたアプリのユーザー インターフェイス。

ローカライズされた文字列を含むリソース ファイルの追加

JavaScript リソース ファイルには、アドイン UI に使用された文字列が含まれます。 サンプル アドイン UI の HTML には、あいさつ文を表示する <h1> 要素、およびユーザーにアドインを紹介する <p> 要素が含まれます。

見出しと段落のローカライズされた文字列を有効にするには、文字列を別個のリソース ファイルに置きます。 このリソース ファイルにより、ローカライズされた文字列の各セット用に個別の JavaScript Object Notation (JSON) オブジェクトを格納する JavaScript オブジェクトが作成されます。 また、指定したロケールに対する適切な JSON オブジェクトを取得するためのメソッドも提供されます。

リソース ファイルをアドイン プロジェクトに追加する

  1. Visual Studio ソリューション エクスプローラーで、WorldReadyAddInWeb プロジェクトを右クリック (または長押し) し、[追加>新しい項目] を選択します。

  2. [新しい項目の追加] ダイアログ ボックスで [JavaScript ファイル] を選択します。

  3. ファイル名として「UIStrings.js」と入力して、[追加] を選択します。

  4. UIStrings.js ファイルに次のコードを追加し、ファイルを保存します。

    /* Store the locale-specific strings */

const UIStrings = (() => {
    "use strict";

    const UIStrings = {};

    // JSON object for English strings
    UIStrings.EN = {
        "Greeting": "Welcome",
        "Introduction": "This is my localized add-in."
    };

    // JSON object for Spanish strings
    UIStrings.ES = {
        "Greeting": "Bienvenido",
        "Introduction": "Esta es mi aplicación localizada."
    };

    UIStrings.getLocaleStrings = (locale) => {
        let text;

        // Get the resource strings that match the language.
        switch (locale) {
            case 'en-US':
                text = UIStrings.EN;
                break;
            case 'es-ES':
                text = UIStrings.ES;
                break;
            default:
                text = UIStrings.EN;
                break;
        }

        return text;
    };

    return UIStrings;
})();

UIStrings.js リソース ファイルは、アドイン UI のローカライズされた文字列を含む UIStrings オブジェクトを作成します。

アドインの UI に使用するテキストのローカライズ

アドインでリソース ファイルを使用するには、そのリソース ファイルのスクリプト タグを Home.htmlに追加する必要があります。 Home.html が読み込まれると、 UIStrings.js が実行され、文字列を取得するために使用する UIStrings オブジェクトをコードで使用できます。 Home.html のヘッド タグに次の HTML を追加して、UIString をコードで使用できるようにします。

<!-- Resource file for localized strings: -->
<script src="../UIStrings.js" type="text/javascript"></script>

これで、UIStrings オブジェクトを使用してアドインの UI の文字列を設定できるようになりました。

Office クライアント アプリケーションのメニューやコマンドに表示するために使用する言語に基づいてアドインのローカライズを変更する場合は、 Office.context.displayLanguage プロパティを使用してその言語のロケールを取得します。 たとえば、アプリケーション言語でメニューやコマンドの表示にスペイン語を使用する場合、 Office.context.displayLanguage プロパティは言語コード es-ES を返します。

ドキュメント コンテンツの編集に使用されている言語に基づいてアドインのローカライズを変更する場合は、 Office.context.contentLanguage プロパティを使用してその言語のロケールを取得します。 たとえば、アプリケーション言語でドキュメント コンテンツの編集にスペイン語を使用する場合、 Office.context.contentLanguage プロパティは言語コード es-ES を返します。

アプリケーションが使用している言語がわかったら、 UIStrings を使用して、アプリケーション言語に一致するローカライズされた文字列のセットを取得できます。

Home.js ファイル内のコードを次のコードに置き換えます。 コードは、アプリケーションの表示言語またはアプリケーションの編集言語に基づいて 、Home.html の UI 要素で使用される文字列を変更する方法を示しています。

注:

編集に使用する言語に基づいてアドインのローカライズを変更することを切り替えるには、コード行のコメントを解除して const myLanguage = Office.context.contentLanguage; し、コード行をコメントアウトします。 const myLanguage = Office.context.displayLanguage;

/// <reference path="../App.js" />
/// <reference path="../UIStrings.js" />


(() => {
    "use strict";

    // The initialize function must be run each time a new page is loaded.
    Office.onReady(() => {
        $(document).ready(() => {
            // Get the language setting for editing document content.
            // To test this, uncomment the following line and then comment out the
            // line that uses Office.context.displayLanguage.
            // const myLanguage = Office.context.contentLanguage;
    
            // Get the language setting for UI display in the Office application.
            const myLanguage = Office.context.displayLanguage;
            let UIText;
    
            // Get the resource strings that match the language.
            // Use the UIStrings object from the UIStrings.js file
            // to get the JSON object with the correct localized strings.
            UIText = UIStrings.getLocaleStrings(myLanguage);
    
            // Set localized text for UI elements.
            $("#greeting").text(UIText.Greeting);
            $("#about").text(UIText.Introduction);
        });
    });
})();

ローカライズされたアドインのテスト

ローカライズされたアドインをテストするには、Office アプリケーションでの表示または編集に使用する言語を変更してから、アドインを実行します。

  1. Word で [ファイル]、[オプション]、[言語] の順に選択します。 次の図に、[言語] タブが開かれている [Word のオプション] ダイアログ ボックスを示します。

    [Word オプション] ダイアログ。

  2. [表示言語の選択] で表示する言語 (スペイン語など) を選択して、上向き矢印を選択してスペイン語をリストの最初の位置に移動します。 または、編集に使用する言語を変更するには、[ 編集言語の選択] で、編集に使用する言語 (スペイン語など) を選択し、[ 既定値に設定] を選択します。

  3. [OK] をクリックして選択内容を確認し、Word を閉じます。

  4. Visual Studio で F5 キーを押してサンプル アドインを実行するか、メニュー バーから [デバッグ>デバッグの開始 ] を選択します。

  5. Word で [ホーム]、[作業ウィンドウを表示] の順に選択します。

実行すると、次の図に示すように、アドイン UI の文字列がアプリケーションで使用される言語と一致するように変更されます。

ローカライズされた UI テキストを含むアプリ。

関連項目