SharePoint アドインをローカライズするLocalize SharePoint Add-ins

注意

このトピックは、SharePoint アドインの基本的な作成方法、SharePoint の機能、アドイン Web とホスト Web の区別、アドイン内に存在する可能性がある SharePoint コンポーネントの種類、.resx ファイルのローカライズに関する基本知識があることを前提としています。Note This topic assumes that you are familiar with basic creation of SharePoint Add-ins; and with SharePoint Features, the distinction between add-in webs and host webs, what kind of SharePoint components can be in an add-in, and the basics of localization with .resx files.

SharePoint アドインのローカライズ準備Get ready to localize a SharePoint Add-in

まず始めに以下の点を確認します。Before you begin, identify the following:

  • アドインがサポートする必要があるロケールThe locales that your add-in needs to support. 言語パックがインストールされている SharePoint Online と SharePoint オンプレミスにより、ユーザーは特定の言語と文化に合わせた Web サイトを作成できます。SharePoint Online and SharePoint on-premises with Language Packs installed enable users to create websites in a specific language and culture. 顧客が使用するのがどのローカライズされた Web サイトかを決定し、サポートが必要なアドインのコンポーネントのローカライズ版を判断します。The locales that your add-in needs to support. SharePoint Online and SharePoint on premises with Language Packs installed enable users to create websites in a specific language and culture. Decide what localized websites your customers will be using and determine which of these you want to support with a localized version of your add-in's components.

  • ローカライズが必要なアドインのコンポーネントThe components that you need to localize in your add-in.

また、以下の点を確認してください。Also, be aware of the following:

アドイン Web コンポーネントのローカライズLocalize the add-in web components

アドイン Web には、特定の種類の SP コンポーネントを含めることができます。An add-in web can contain specific kinds of SP components. SharePoint アドインに含めることができる SharePoint コンポーネントの種類は、「SharePoint アドインに含めることができる SharePoint コンポーネントの種類」を参照してください。For more information about the kinds of SharePoint components that can be in a SharePoint Add-in, see Types of SharePoint components that can be in a SharePoint Add-in. アドイン Web に展開されたコンポーネントをローカライズするには、アドイン Web コンポーネントを含む同じフィーチャーのモジュールに .resx ファイルを追加します。To localize components that are deployed to an add-in web, you add .resx files in modules in the same feature that contains the add-in web component. そのコンポーネントのマークアップ内のリソースを参照します。You reference the resources in the markup of the component. その方法は、この記事で後述します。How you do this is explained later in this article. ただし、SharePoint アドインのカスタムサイトページでは、このセクションで後述するように、.resx ファイルの代わりに JavaScript 文字列変数ファイルを使用します。However, custom site pages in a SharePoint Add-in use JavaScript string variable files instead of .resx files, as described later in this section.

注意

複数のアドイン Web フィーチャーでリソース ファイルを共有することはできません。Resource files cannot be shared by multiple add-in web features. .wspファイル内の各フィーチャーは、個別にリソース ファイルのセットを作成する必要があります。Resource files cannot be shared by multiple add-in web Features. For each Feature in the .wsp file, you have to create separate sets of resource files.

アドイン Web のリソース ファイル作成方法To create the add-in web resource files

  1. Visual Studio で SharePoint アドイン プロジェクトを開きます。(このトピックのスクリーンショットが取られたサンプルは、ASP.NET Web Form をプロジェクトのリモート Web アプリケーション部分とするプロバイダー ホスト型のアドインです。)Open the SharePoint Add-in project in Visual Studio. (The sample from which the screenshots in this topic were taken is a provider-hosted add-in with ASP.NET Web Forms as the remote web application part of the project.)

  2. ソリューション エクスプローラで、フィーチャー名のショートカット メニューを開き、[フィーチャー リソースの追加] を選択します。In Solution Explorer, open the shortcut menu for the Feature name, and choose Add Feature Resource.

  3. [リソースの追加] ダイアログボックスで 「ロケールに依存しない言語 (ロケールに依存しない国) を選択し、[OK] を選択します。In the Add Resource dialog box, select Invariant Language (Invariant Country), and then select OK. ソリューション エクスプローラのフィーチャーフォルダーに Resources.resx ファイルが追加され、ファイルが Visual Studio リソース エディタで開かれます。In the Add Resource dialog box, choose Invariant Language (Invariant Country), and then choose the OK button. A Resources.resx file is added to the Feature's folder in Solution Explorer, and the file is opened in the Visual Studio Resource Editor.

    編集を行う「ロケールに依存しない言語」ファイルには、ローカライズ版が用意されていない 言語のすべてのサイトの フィーチャーギャラリーで使用される文字列が含まれます。When edited, this "invariant language" file contains the strings that are used in the Feature gallery on all sites in languages for which you are not going to be providing a localized version of strings. したがって、このファイル内の文字列で使用する言語は、SharePoint ユーザーの第二言語の可能性が最も高い言語にする必要があります。So the language used for the strings in this file should be the language that is most likely to be a second language of people using SharePoint. 慣習的には英語が用いられますが、特定のケースでは別の言語が適する場合もあります。Traditionally, English is used for this purpose, but in some scenarios another language might be a better choice. たとえば、一部の地域では、フランス語が英語よりも第二言語として適しています。For example, in some regions, French may be a more common second language of the users than English. このトピックの例では、ロケールに依存しない言語として英語を使用します。The continuing example in this topic uses English as the invariant language.

    注意

    SharePoint アドインは、アドインマニフェストの 「サポートされるロケール」 セクションに言語がリストされていない Web サイトにはインストールできません。A SharePoint Add-in cannot be installed on a website whose language is not listed in the Supported Locales section of the add-in manifest. この記事で扱う言語について、ローカライズしたアドインを提供 しない場合にも、その言語をアドインマニフェストに追加する必要があることに留意してください。Keep in mind that when this article discusses languages for which you are not going to be providing a localized add-in, you still have to add such languages to the add-in manifest. アドインマニフェストでサポートされるロケールの詳細は、この記事後半の「ホスト Web のリソース ファイル作成方法」の手順を参照してください。For more details about supported locales in the add-in manifest, see the procedure To create resource files for the host web later in this article.

  4. リソース エディタの 1 行目の [名前] 列に、文字列 (または他のリソース) のわかりやすい名前を入力します。(例: OrdersListInstance_TitleOrdersListInstance_DescriptionIn the Name column of the top row in the Resource Editor, enter a descriptive name for the string (or other resource)—for example, OrdersListInstance_Title and OrdersListInstance_Description. These names of localizable resources are not themselves localized. Each resource must have its own name. ローカライズ可能なリソースの名前自体はローカライズされません。These names of localizable resources are not themselves localized. 各リソースには、固有の名前が必要です。Each resource must have its own name.

  5. [値] 列に、適切な文字列 (または URL またはその他のリソース) を、ロケールに依存しない言語で入力します (例: Orders 、a list to store the orders)。In the Value column, enter an appropriate string (or URL or other resource) in the invariant language—for example,Orders, and A list to store the orders.

  6. フィーチャーのコンポーネントで使用するためにローカライズが必要なすべての文字列とリソースについて、名前と値のペアを追加します。Add additional name and value pairs for all strings and resources that should be localized for use in any components of your Feature.

  7. ファイルを保存します。Save the file.

  8. これまでと同様に、フィーチャーに別のリソース ファイルを追加しますが、ロケールに依存しない言語 (ロケールに依存しない国) の代わりに特定の言語を選択します。Add another resource file to the feature as you did before, but select a particular language instead of Invariant Language (Invariant Country). たとえば、 **[スペイン語 (スペイン)] **を選択します。For example, you can choose Spanish (Spain). Resources.LL-CC.resx ファイル (LLCCInternet Engineering Task Force (IETF) 準拠の言語とカルチャーコード) がソリューション エクスプローラのフィーチャーフォルダーに追加され、そのファイルが Visual Studio リソース エディタで開かれます。Add another resource file to the Feature as you did before, but select a particular language instead of Invariant Language (Invariant Country). For example, you can choose Spanish (Spain). A Resources.LL-CC.resx file (where LL and CC are Internet Engineering Task Force (IETF)-compliant language and culture codes) is added to the Feature's folder in Solution Explorer, and the file is opened in the Visual Studio Resource Editor.

  9. リソース エディタで、Resources.resx のすべての行をコピーし、新しい Resources.LL-CC.resx ファイルに貼り付けます。Using the Resource Editor, copy all the rows from Resources.resx, and paste them into the new Resources.LL-CC.resx file. (If Copy is not enabled on the context menu of the resource editor, use (リソース エディタのコンテキストメニューで *[コピー]* が有効になっていない場合は、Ctrl+C で行をクリップボードにコピーします。)Using the Resource Editor, copy all the rows from Resources.resx, and paste them into the new Resources.LL-CC.resx file. (If Copy is not enabled on the context menu of the resource editor, use Ctrl-C to copy the rows into the clipboard.)

  10. Resources.LL-CC.resx ファイルの [値] セルを翻訳した文字列値で置換します。In the Resources.LL-CC.resx file, replace the Value cells with translated versions of the string values. For URLs and other non-string resources, replace the value with a new value that is appropriate for the language and culture. URL や他の文字列以外のリソースの値を、言語とカルチャーに適した新しい値で置換します。In the Resources.LL-CC.resx file, replace the Value cells with translated versions of the string values. For URLs and other non-string resources, replace the value with a new value that is appropriate for the language and culture.

  11. 新しいファイルを保存します。Save the new file.

  12. 各言語について、これまでの 4 つの手順を繰り返します。Repeat the last four steps for each foreign language.

    注意

    ロケールに依存しない言語と同じ言語の言語固有ファイルの追加を検討してください。Consider adding a language-specific file for the same language as your invariant language. これを行うと、文字列の値を変更することなく行をコピーできます。If you do, you can copy the rows without changing the values of the strings. 多くの場合、特にファイル内の唯一のリソースが文字列である場合には、ロケールに依存しない言語のリソース ファイルで使用されている言語と同じ言語の言語固有ファイルは必要ありません。In many situations, it is not necessary to have a language-specific file for the same language that is used in the resource file for the invariant language, especially when the only resources in the files are strings. しかし、リソース ファイルには、イメージ、アイコン、ファイル、その他の種類のリソースも含めることができます。But resource files can contain images, icons, files, and other kinds of resources too. そのため、いずれかの言語固有ファイルの対応するリソースと異なるイメージや他のリソースを使用するために、ロケールに依存しない言語のリソース ファイルが必要になることがあります。Sometimes, you need the invariant language resource file to use an image or other resource that is different from the corresponding resource in any of the language-specific files.

  13. 各ファイルで、[ビルド アクション] プロパティが [コンテンツ] に設定されていることを確認します。For each file, verify that the Build Action property is set to Content.

カスタム リスト内のローカライズされたリソースを呼び出す方法To call the localized resources in custom lists

  1. カスタム リストのタイトルおよび説明プロパティをローカライズするには、リストのインスタンスの Elements.xml ファイルを開きます。To localize the title and description properties of a custom list, open the Elements.xml file of the instance of the list. たとえば、このトピックのサンプルでは、ソリューション エクスプローラで、[BookstoreApp] > [Order Status] > [OrderStatusInstance] > [Elements.xml] と進みます。For example, in the sample that accompanies this topic, in Solution Explorer go to BookstoreApp > Order Status > OrderStatusInstance > Elements.xml.

  2. [Title] 属性に「$ Resources_StringName_」と入力します。StringName_は前の手順でカスタム リストに名前して付与した文字列であり、値ではありません。(例: $ Resources:OrdersListInstance_Title)。In the Title attribute, enter $Resources:_StringName, where StringName is the name, not the value, you gave in the previous procedure to the string that names the custom list—for example, $Resources: OrdersListInstance_Title. Note that, unlike in some contexts where .resx files are used, the resource file name is not part of what you enter. .resx ファイルが使用されるいくつかのコンテキストとは異なり、リソースファイル名には入力された内容は使用され ませんNote that, unlike in some contexts where .resx files are used, the resource file name is not part of what you enter.

  3. 説明属性を使い、 同じ方法でリストの説明の文字列リソースを呼び出します (例: $Resources:OrdersListInstance_Description)。Use the Description attribute to call the string resource of the list description in the same way—for example,$Resources:OrdersListInstance_Description. The following is the markup that uses the localized strings in the Elements.xml file of the instance of a list. 次の画像は、リストのインスタンスの Elements.xml ファイルでローカライズされた文字列を使用するマークアップです。Use the Description attribute to call the string resource of the list description in the same way—for example, $Resources:OrdersListInstance_Description. The following is the markup that uses the localized strings in the Elements.xml file of the instance of a list.

    <?xml version="1.0" encoding="utf-8"?>
    <Elements xmlns="http://schemas.microsoft.com/sharepoint/">
        <ListInstance 
            Title="$Resources:OrdersListInstance_Title" 
            OnQuickLaunch="TRUE" 
            TemplateType="10000" 
            Url="Lists/Orders" 
            Description="$Resources:OrdersListInstance_Description">
        </ListInstance>
    </Elements>
    

次の画像は、英語でローカライズされたカスタム リストです。The following image shows the localized custom list in English.

ローカライズされたカスタム リストLocalized custom list

ローカライズされたユーザー設定リスト

カスタム リストの列名をローカライズする方法To localize the column names of a custom list

  1. カスタムリストの列名を、タイトルや説明と同じ方法でローカライズすることはできません。You can't localize the column names of the custom list in the same way that you localize the title and description. 列名をローカライズするには、Elements.xml ファイルでリストのフィールドを宣言し、DisplayName 属性値にアドイン Web リソース ファイルのリファレンスを設定する必要があります。You can't localize the column names of the custom list in the same way as you localize the title and description. To localize the column names, you have to declare the list fields in an Elements.xml file and then set the DisplayName attribute value with references in the add-in web resource files. To begin, open the Schema.xml file of your custom list. Locate the Fields node and copy all its Field nodes. 始めに、カスタム リストの Schema.xml ファイルを開きます。To begin, open the Schema.xml file of your custom list. Fields ノードを検索し、すべての Field ノードをコピーします。Open the Schema.xml file of your custom list. Locate the Fields node and copy all its Field nodes.

  2. あなたのカスタムリストの Elements.xml ファイルを開きます。Open the Elements.xml file of your custom list. リストのインスタンスではなく、リスト定義の Elements.xml ファイルを開いてください。Open the Elements.xml file of your custom list. Make sure you open the Elements.xml file of the list definition, and not of the instance of the list. Paste the nodes from the previous step as children of the Elements node. 前の手順でコピーしたノードを、Elements ノードの子として貼り付けます。Paste the nodes from the previous step as children of the Elements node.

  3. すべての Field ノードについて、$Resources:StringName の値を DisplayName 属性に入力します。StringName はアドイン Web リソース ファイルのエントリの名前です。For every Field node, enter a value of $Resources: StringName in the DisplayName attribute where StringName is the name of an entry in the add-in web resource file.

  4. カスタム リストの Schema.xml ファイルで、前にコピーしたすべての Field ノードの DisplayName 属性を削除します。次に示すのは、リスト定義の Elements.xml ファイルのローカライズされた文字列を使用するマークアップの例です。In the Schema.xml file of your custom list, remove the DisplayName attribute of every Field node that you previously copied. The following is an example markup that uses the localized strings in the Elements.xml file of the list definition.

    <?xml version="1.0" encoding="utf-8"?>
        <Elements xmlns="http://schemas.microsoft.com/sharepoint/">
            <ListTemplate
                Name="Orders"
                Type="10000"
                BaseType="0"
                OnQuickLaunch="TRUE"
                SecurityBits="11"
                Sequence="410"
                DisplayName="Orders"
                Description="My List Definition"
                Image="/_layouts/15/images/itgen.png"/>
            <Field
                Name="Bookname"
                ID="{2ef60a05-29b6-41db-9611-c0cf7d8e73c5}"
                DisplayName="$Resources:OrdersListColumn_Bookname"
                Type="Text"
                Required="TRUE" />
            <Field
                Name="Price"
                ID="{7af42815-d69e-426a-a1c8-9da5610e362c}"
                DisplayName="$Resources:OrdersListColumn_Price"
                Type="Currency"
                Required="FALSE" />
            <Field
                Name="Orderstatus"
                ID="{687ee751-2e0a-4099-966e-d2c225d48234}"
                DisplayName="$Resources:OrdersListColumn_Orderstatus"
                Type="Lookup"
                Required="FALSE"
                List="Lists/Order status"
                ShowField="Title" />
        </Elements>
    


カスタム ページ用の JavaScript リソース ファイルを作成するにはTo create JavaScript resource files for custom pages

  1. SharePoint アドインのカスタム サイト ページでは、JavaScript 文字列変数ファイルが .resx ファイルの代わりに使用されます。Custom site pages in a SharePoint Add-in use JavaScript string variable files instead of .resx files.

    始めに、ソリューション エクスプローラで、SharePoint アドインプロジェクト (Webアプリケーションプロジェクトにではなく) に Scripts フォルダが存在しない場合には追加します。To begin, in Solution Explorer, add a folder named Scripts to the SharePoint add-in project (not the web application project) if there isn't one there already. *Scripts* フォルダを右クリックし、*[追加]* > *[新しい項目]* > *[Web]* > *[JavaScript ファイル]* を選択します。Right-click the Scripts folder and select Add > New Item > Web > JavaScript File. ファイルに Resources.LL-CC.jsという名前を付けます ( LL は言語コード、CC は国/地域またはカルチャーコードです。例: Resources.en-US.js)。Name the file Resources.LL-CC.js (where LL is a language code and CC is a country/region or culture code); for example, Resources.en-US.js.

  2. 各言語について、上記の手順を繰り返します。Repeat the preceding step for each foreign language. これで、すべての言語用の空の JavaScript ファイルが作成されます。You should now have blank JavaScript files for every language. "Resources.js" という名前のロケールに依存しない言語ファイルは作成しないでください。Do not create an invariant language file named "Resources.js". この理由は後の手順で説明します。The reason is explained in a later procedure.

  3. 新しく作成した最初の JavaScript ファイルを開きます。Open the first of the new JavaScript files.

  4. 各カスタム ページの各ローカライズ可能な文字列に対して、文字列を識別する目的の名前となる変数をファイル内に宣言し、言語に適した値を割り当てます。For each localizable string in each of your custom pages, declare a variable in the file with a name that identifies the purpose of the string and assign it a value that is appropriate for the language. The following is the contents of the Resources.en-US.js file. 次の画像は Resources.en-US.js ファイルの内容です。The following is the contents of the Resources.en-US.js file.

        var instructionstitle = "Instructions:";
        var step01 = "Go to any document library in the host web.";
        var step02 = "Go to the Library tab.";
        var step03 = "Click \"Request a book\" in the Settings group.";
        var step04 = "Click the contextual menu in any document.";
        var step05 = "Click \"Buy this book\" in the contextual menu.";
        var step06 = "Go to any SharePoint page in the host web and add the" + " Bookstore orders add-in part.";
        var step07 = "Review the localized <a href=\"../Lists/Orders\">Orders</a>" + " and <a href=\"../Lists/Order status\">Order status</a> custom lists.";
    
  5. このファイルの内容を、残りの JavaScript ファイルにコピーし、すべてのファイルを保存します。Copy the contents of the file into each of the remaining JavaScript files, and then save all files.

  6. 各ファイルで、各変数の値を、各ファイルの言語に適した新しい値で置換します。In each file, replace the value of each variable with a new value that is appropriate to the language of the file. Do not change the variable names. 変数名は変更しないでください。Do not change the variable names.

カスタム ASPX ページ内のローカル可能変数を呼び出す方法To call the localized variables in custom ASPX pages

  1. ソリューション エクスプローラで、カスタム ASPX ページ ファイルを開きます。In Solution Explorer, open a custom ASPX page file.

  2. ページの読み込み時に、読み込まれたファイルがローカライズされたJavaScriptファイルの1つだけであり、SharePoint アドイン Web の言語に適したものであることを確認してください。Make sure that only one of the localized JavaScript files is loaded when your page loads, and it should be the one that is appropriate for the language of the SharePoint add-in web. To do this, add the following markup to the asp:content element of the page that has a with the value . There are no placeholders in the following markup. Enter the markup exactly as it appears here. これを行うには、ContentPlaceholderId の値が PlaceholderAdditionalPageHead のページの asp:content に次のマークアップが必要です。To do this, add the following markup to the asp:content element of the page that has a ContentPlaceholderId with the value PlaceholderAdditionalPageHead. 次のマークアップにプレースホルダはありません。マークアップを表示されているとおりに入力してください。There are no placeholders in the following markup. Enter the markup exactly as it appears here.

        <script type="text/javascript" src="../scripts/Resources.<SharePoint:EncodedLiteral runat='server' text='<%$Resources:wss,language_value%>' EncodeMethod='HtmlEncode' />.js"></script>
    

    このマークアップは、JavaScript ファイルの 1 つを読み込むものです。This markup loads one of your JavaScript files. language_value の名前の SharePoint リソースで読み込む言語ファイルを決定します 。It determines which language file to load by reading the SharePoint resource named language_value. このリソースは前の手順で解説した LL-CC のパターンにより言語-カルチャー名を決定します。This resource resolves to a language-culture name in the pattern LL-CC that was described in an earlier procedure. 具体的には、アドイン Web の言語を決定します。Specifically, it resolves to the language of the add-in web.

    注意

    SharePoint リソース language_value はnullではないため、このスクリプトが "Resources.js" という名前のファイルを呼び出すことはありません。The SharePoint resource language_value is never null, so a file named "Resources.js" would never be called by this script. これが、前の手順でこの名前のファイルを作成しなかった理由です。That is why you did not make one in the preceding procedure. language_value の値が .js ファイルがない言語の場合、このスクリプトは何も読み込みません。When the value of language_value is a language for which there is no .js file, this script loads nothing. 次の手順では、この状況で文字列がロケールに依存しない言語の値を取得する方法を説明します。The next step explains how strings get an invariant language value in that situation.

  3. ページ上のローカライズ可能な要素と属性値のそれぞれに対して、ロケールに依存しない言語で既定値を指定しますが、JavaScript を使用してResources.LL-CC.js ファイルから適切な変数を割り当てます。For each localizable element and attribute value on the page, give it a default value in the invariant language, but then use JavaScript to assign it the appropriate variable from the Resources.LL-CC.js file. たとえば、ページの h2 要素にタイトルがある場合、要素に [id] 属性を付与してから、ローカライズされた要素の下に [script] 要素を挿入し、ローカライズされた要素の [innerText] プロパティにローカライズされた文字列を割り当てます。For example, if the page has a title in an h2 element, give the element an id attribute, and then insert a script element below the localized elements to assign localized strings to the innerText property of the localized elements. このローカライズ コードは、Resources.LL-CC.js ファイルが読み込まれ、変数が宣言される場合に限り実行します。This localization code should only run if a Resources.LL-CC.js file loaded and declared the variables. そのために、変数が定義されているかを条件ブロック内で最初にテストするようにします。So put it in a conditional block that first tests whether one of the variables is defined. 定義されていない場合、リソーススクリプトは読み込まれないため、既定 (ロケールに依存しない) の値は変更されません。If it is not, no resource script loaded, and the default (invariant) values should remain unchanged. 次に例を示します。The following is an example.

    ヒント

    ロケールに依存しない文字列の先頭に「INVARIANT」という語が追加されています。The word "INVARIANT" has been added to the first of the invariant strings. 実際に運用されるアドインで使う方法ではありませんが、テスト中にロケールに依存しない言語文字列が使用されているか、またはロケールに依存しない言語になる言語の Resources.LL-CC.js ファイルが読み込まれているかが一目で確認できる便利な方法です。The word "INVARIANT" has been added to the first of the invariant strings. You would not do this in a production add-in, but while you are testing, it is a useful way of seeing at a glance whether invariant language strings are being used or whether the Resources.LL-CC.js file for the language that happens to be your invariant language was loaded.

    <h2 id="instructionsheading">INVARIANT Instructions</h2>
        <ol>
            <li id="step01">Go to any document library in the host web.</li>
            <li id="step02">Go to the Library tab.</li>
            <li id="step03">Click "Request a book" in the Settings group.</li>
            <li id="step04">Click the contextual menu in any document.</li>
            <li id="step05">Click "Buy this book" in the contextual menu.</li>
            <li id="step06">Go to any SharePoint page in the host web and add the Bookstore orders add-in part.</li>
            <li id="step07">Review the localized <a href="../Lists/Orders">Orders</a> and <a href="../Lists/Order status">Order status</a> custom lists.</li>
        </ol>

    <!-- Use the localized strings in the resource JavaScript file -->
        <script type="text/javascript">
            window.onload = function () {
                <!-- Test whether a Resources.LL-CC.js loaded.
                    If none was, the invariant values remain unchanged. -->
                if (typeof instructionstitle != 'undefined')  
                {
                    document.getElementById("instructionsheading").innerText = instructionstitle;
                    document.getElementById("step01").innerText = step01;
                    document.getElementById("step02").innerText = step02;
                    document.getElementById("step03").innerText = step03;
                    document.getElementById("step04").innerText = step04;
                    document.getElementById("step05").innerText = step05;
                    document.getElementById("step06").innerText = step06;
                    document.getElementById("step07").innerHTML = step07;
                }
            }
        </script>


次の画像は、アドインが完成したときの、英語バージョンのページのプレビューを示すものです。The following image gives a preview of how the English version of the page will look when the add-in is completed.

JavaScript リソース ファイルのローカライズされた文字列を使用する Web ページWebpage using localized strings from a JavaScript resource file

ローカライズされた文字列を使用した SharePoint ページ

ホスト Web コンポーネントのローカライズLocalize the host web components

AppManifest.xml ファイルで指定されているアドインのタイトルをローカライズできます。You can localize the add-in title, which is specified in the AppManifest.xml file. これは [Your Add-ins] ページに表示されるものです。This is what users see on the Your Add-ins page. SharePoint アドインのホスト Web には、カスタム アクション、アドイン パーツ、またはその両方を含めることもできます。The host web for a SharePoint Add-in can also include a custom action, an add-in part, or both. これらは、ホスト Web フィーチャーに展開されます。These are deployed in a host web feature. これらのコンポーネントはどちらもローカライズ可能な文字列を持つことができます。Both of these components can have localizable strings.

ホスト Web コンポーネントをローカライズする方法は、アドイン Web コンポーネントをローカライズする方法と本質的には同じです。ローカライズされたリソースは .resx ファイル内にアイテム化され、マークアップ ファイルから呼び出されます。ただし、Visual Studio では、ホスト Web フィーチャーに適用される場合ほど、プロセスに対するツール サポートは提供されていません。後で説明するように、手動プロセスがあります。The essential method for localizing host web components is the same as for localizing add-in web components: localized resources are itemized in a .resx file and are called from the markup files. However, Visual Studio does not have as much tooling support for the process as it applies to host web features. There is a manual process involved that is explained later in this section.

ホスト Web のリソース ファイルを作成するにはTo create resource files for the host web

  1. ソリューション エクスプローラーで、AppManifest.xml ファイルを選択してアドイン マニフェスト デザイナー ツールを開きます。In Solution Explorer, choose the AppManifest.xml file to open the add-in manifest designer tool.

  2. [ サポートされるロケール] タブを開きます。Open the Supported Locales tab.

  3. [ロケール] 列先頭の空のセルで、ドロップダウン リストを開き、サポートする最初のロケールを選択します。In the top blank cell of the Locales column, open the drop-down list and choose the first locale that you want to support. ロケールに依存しない言語のリソース ファイルとなる Resources.resx と、ローカライズされたリソースを含む Resources.LL-CC.resx の 2 つのファイルが作成され、SharePoint アドインプロジェクトに追加されます。In the top blank cell of the Locales column, open the drop-down list and choose the first locale that you want to support. Two files are created and added to the SharePoint Add-in project: Resources.resx, which is the invariant language resource file, and Resources. LL_CC_.resx, which will contain the localized resources. Don't change the names of these files. これらのファイルの名前は変更しないでください。Don't change the names of these files.

  4. アドインのローカライズ版でサポートする各ロケールについて、前の手順を繰り返します。Repeat the previous step for each locale you want to support with a localized version of the add-in. An additional Resources. LLCC.resx file is created for each locale. ロケールごとに、Resources.LL-CC.resx ファイルが作成され追加されます。An additional Resources.LL-CC.resx file is created for each locale.

    注意

    各ファイルの [ビルド アクション] プロパティは、[リソース] ではなく [コンテンツ] に設定されます。The Build Action property of each of these files is set to Content, not Resource. Don’t change this setting. この設定を変更しないでください。Don't change this setting.

  5. また、アドインをインストール可能にする、しかしロケールに依存しない言語を使用する必要のある (つまりアドインのローカライズ版を提供しない ) すべてのロケール用に、ロケール エントリを追加します。Also add locale entries for every locale where you want your add-in to be installable, but where it should use the invariant language; that is, locales for which you will not be providing a localized version of the add-in. Delete the .resx files that are created for these locales. これらのロケール用に作成された .resx ファイルを削除します。Delete the .resx files that are created for these locales.

  6. Resources.resx ファイルを開き、アドイン Web リソースファイルの場合と同様に、リソース名と値をファイルに追加します。Open the Resources.resx file and add resource names and values to the file just as you did for the add-in web resource files. 少なくとも、アドイン タイトルのリソースが必要です。At a minimum, you should have a resource for the add-in title. ホスト Web フィーチャーは SharePoint UI のどこにも表示されないため、ホスト Web フィーチャーのタイトルまたは説明にローカライズされた文字列は必要ありません。The host web feature does not appear in the SharePoint UI anywhere, so you do not need localized strings for the host web feature title or description. フィーチャーにカスタムアクションがある場合は、CustomAction 要素のTitle 属性用のリソースが必要となり、カスタム アクション マークアップ内に他の文字列も必要になる可能性があります。If the feature has a custom action, you need a resource for the Title attribute of the CustomAction element, and possibly other strings in the custom action markup. アドイン パーツがある場合、ClientWebPart 要素の TitleDescription のリソースが必要です。If there is an add-in part, you need resources for the Title and Description attributes of the ClientWebPart element. アドイン パーツにカスタム プロパティがある場合は、それぞれのプロパティにはローカライズが必要な属性があります。If the add-in part has custom properties, each Property has attributes that should be localized as well. リソース ファイル内に、それぞれ該当する行が必要です。For each of these, you need a row in the resources file.

  7. Resources.resx ファイルの内容を、各 Resources.LL-CC.resx ファイルにコピーします。Copy the contents of the Resources.resx file into each of the Resources.LL-CC.resx files.

  8. 各 Resources.LL-CC.resx ファイルの各リソースを、アドイン Web リソース ファイルと同様にローカライズします。Localize each resource in each Resources.LL-CC.resx file just as you did for the add-in web resource files.

アドイン マニフェスト ファイルおよびその他の XML ファイル内のローカライズされたリソースを呼び出す方法To call the localized resources in the add-in manifest, and other XML files

  1. AppManifest.xml ファイルを開き、[Title] 要素の値を、適切なリソース文字列の呼び出しで置換します。Open the AppManifest.xml file and replace the Title element value with a call to the appropriate resource string. For example, if you named the stringAddin_Title, the Title element should look like the following: たとえば、文字列の名前を Addin_Title とした場合、[Title] 要素は次のようになります。Open the AppManifest.xml file and replace the Title element value with a call to the appropriate resource string. For example, if you named the string Addin_Title, the Title element should look like the following:

        <Title>$Resources:Addin_Title;</Title>
    

    警告

    [Title] の値に 含めることができるのはリソースへの呼び出しのみです。The value of Title can contain only the call to the resource. There can be no other text, symbols, or white space. その他のテキスト、記号、空白を含めることはできません。The value of Title can contain only the call to the resource. There can be no other text, symbols, or white space.

  2. アドイン パーツやカスタム アクションの Elements.xml など、他の XML ファイルのローカライズされたリソースを呼び出すには、アドイン マニフェスト ファイルで使用したものと同じ形式を使用します。To call localized resources in other XML files, such as Elements.xml for add-in parts and custom actions, you use the same format that you used in the add-in manifest file.

SharePoint アドイン内のリモート コンポーネントをローカライズするLocalize remote components in a SharePoint Add-in

リモートコンポーネントが PHP やその他の Microsoft 以外の形式の場合は、該当するプラットフォームのローカライズ方法を参照してください。If the remote components are PHP or other non-Microsoft formats, see the localization guidance for the appropriate platform. リモートコンポーネントが ASP.NET の場合は、他の ASP.NET アプリケーションと同様にローカライズします。When the remote componets are ASP.NET, you localize them just as you would any other ASP.NET application. 詳細は、「ASP.NETのグローバリゼーションとローカリゼーション」を参照してください。For more information, see ASP.NET Globalization and Localization.

ホスト Web の言語に合うようにページの言語とスレッドの言語をオーバーライドしてください。これは ASP.NET ページの分離コードにある継承された InitializeCulture メソッドをオーバーライドすることによって行います。ホスト Web の言語を識別するには、SharePoint がリモート ページに渡す SPLanguage クエリ パラメーターを使用します。次のコードは、ASP.NET でこれを行う方法を示しています。PHP Web アプリケーションや他のプラットフォームでも、類似の方法で行うことができます。Override the page language and the thread language to match the language of the host web. You do this by overriding the inherited InitializeCulture method in the code-behind of your ASP.NET pages. To identify the host web's language, use the SPLanguage query parameter that SharePoint passes to the remote page. The following code shows how to do this in ASP.NET. You should do something parallel in a PHP web application or other platform.

    protected override void InitializeCulture()
    {
        if (Request.QueryString["SPLanguage"] != null)
        {
            string selectedLanguage = Request.QueryString["SPLanguage"];

            // Override the page language.
            UICulture = selectedLanguage;
            Culture = selectedLanguage;

            // Reset the thread language.
            Thread.CurrentThread.CurrentCulture =
                CultureInfo.CreateSpecificCulture(selectedLanguage);
            Thread.CurrentThread.CurrentUICulture = new
                CultureInfo(selectedLanguage);
        }
        base.InitializeCulture();
    }


リモート JavaScript と SharePoint クロム コントロールのローカライズLocalize remote JavaScript and the SharePoint chrome control

Web アプリケーションの JavaScript にローカライズ可能な文字列値がある場合は、JavaScript リソース ファイルを使用して文字列値をローカライズできます。If there are localizable string values in your web application's JavaScript, you can localize them using JavaScript resource files. ローカライズ可能な JavaScript の特に重要な例は SharePoint のクロム コントロールであり、これを使用するとリモートページを SharePoint のページのように見せることができます。If there are localizable string values in your web application's JavaScript, you can localize them using JavaScript resource files. An especially important example of localizable JavaScript is the SharePoint chrome control, which can be used to give remote pages the appearance of SharePoint pages. We'll use the localization of the chrome control as an example in this section. このセクションでは、クロム コントロールのローカライズを例として使用します。We'll use the localization of the chrome control as an example in this section.

注意

このセクションでは、文字列のローカライズについてのみ説明します。This section only discusses string localization. 日付や通貨形式などより必要性の高いローカライズについては、「jQuery 用のグローバライズ アドオン」などのローカライズまたはグローバライズ ライブラリの使用を検討してください。Note This section only discusses string localization. For more powerful localization needs, such as localization of date or currency formatting, consider using a localization or globalization library, such as the Globalize add-on for jQuery.

クロム コントロールをローカライズする方法To localize the chrome control

  1. クロム コントロールが機能したら、クロム オプションを設定した renderChrome メソッドに戻ります。After you have the chrome control working, return to the renderChrome method where you set the chrome options.

        function renderChrome() {
            var options = {
                "appIconUrl": "siteicon.png",
                "appTitle": "My SharePoint add-in", // Localizable string
                "appHelpPageUrl": "Help.html?"
                    + document.URL.split("?")[1],
                "onCssLoaded": "chromeLoaded()",
                "settingsLinks": [
                    {
                        "linkUrl": "Account.html?"
                            + document.URL.split("?")[1],
                        "displayName": "Account settings" // Localizable string
                    },
                    {
                        "linkUrl": "Contact.html?"
                            + document.URL.split("?")[1],
                        "displayName": "Contact us" // Localizable string
                    }
                ]
            };
    


  2. コメントに記されているように、少なくとも 3 つのローカライズ可能な文字列があります。それぞれを、後の手順で宣言する変数名に置き換えます。As noted in the comments, there are at least three localizable strings. Replace each of these with a variable name that you declare in a later step.

        function renderChrome() {
            var options = {
                "appIconUrl": "siteicon.png",
                "appTitle": chromeAppTitle, // Localized value
                "appHelpPageUrl": "Help.html?"
                    + document.URL.split("?")[1],
                "onCssLoaded": "chromeLoaded()",
                "settingsLinks": [
                    {
                        "linkUrl": "Account.html?"
                            + document.URL.split("?")[1],
                        "displayName": chromeAccountLinkName // Localized value
                    },
                    {
                        "linkUrl": "Contact.html?"
                            + document.URL.split("?")[1],
                        "displayName": chromeContactUsLinkName // Localized value
                    }
                ]
            };
    


  3. ChromeStrings という名前の JavaScript ファイルを Web アプリケーション プロジェクトに追加します。そこでは直前の手順で使用された変数を宣言して、ロケールに依存しない言語でそれぞれに値を割り当てる必要があります。Add a JavaScript file named ChromeStrings.js to the web application project. It should declare the variables you used in the preceding step and assign them each a value in the invariant language.

    var chromeAppTitle = "My SharePoint add-in";
    var chromeAccountLinkName = "Account settings";
    var chromeContactUsLinkName = "Contact us";
    
  4. アドインをローカライズする言語ごとに、ChromeStrings.LL-CC.js という名前の異なる JavaScript ファイルを追加します。LL-CC は言語 ID です。For each language for which you are localizing the add-in, add another JavaScript file with the name ChromeStrings.LL-CC.js, where LL-CC is the language ID. ファイル名のベース (この場合は "ChromeStrings") は、ロケールに依存しない言語のファイルで使用したものと完全に同じでなければなりません。The base of the file name, in this case "ChromeStrings," must be exactly the same as you used for the invariant language file. ロケールに依存しない言語のファイルの内容をローカライズする各ファイルにコピーし、その値を翻訳した版で置換します。Copy the contents of the invariant language file into each of the localized files, and replace the values with translated versions.

    var chromeAppTitle = "Mi aplicación SharePoint";
    var chromeAccountLinkName = "Preferencias";
    var chromeContactUsLinkName = "Contacto";
    
  5. スクリプト SP.UI.controls.js が呼び出されるすべてのページ ファイルで、その上の ChromeStrings.js に対する呼び出しを追加します。たとえば、SP.UI.controls.js への呼び出しが ChromeLoader.js という名前の中間ファイルに読み込まれる場合、この時点でのページのマークアップは次のようになるはずです。In any page file where the script SP.UI.controls.js is called, add a call to the ChromeStrings.js above it. For example, if the call to SP.UI.controls.js is loaded in an intermediate file called ChromeLoader.js, the markup in the page at this point should look similar to the following.

    <Scripts>
        <asp:ScriptReference Path="Scripts/ChromeStrings.js" />
        <asp:ScriptReference Path="Scripts/ChromeLoader.js" />
    </Scripts>
    
  6. 文字列を呼び出す ScriptReference 要素に ResourceUICultures 属性を追加します。これはサポートする言語のコンマ区切りリストです。Add a ResourceUICultures attribute to the ScriptReference element that calls your strings. Its value is a comma-delimited list of the languages that you are supporting.

    <Scripts>
        <asp:ScriptReference Path="Scripts/ChromeStrings.js" ResourceUICultures="en-US,es-ES" />
        <asp:ScriptReference Path="Scripts/ChromeLoader.js" />
    </Scripts>
    

    ResourceUICultures 属性の効果は、ASP.NET が ChromeStrings.LL-CC.js という名前のファイルを探し読み込むことです。ここで LL-CC はページの言語です。The effect of the ResourceUICultures attribute is that ASP.NET will look for a file with the name ChromeStrings. LL-CC.js, where LL-CC is the language of the page and load it. If it doesn't find such a file, it will load the ChromeStrings.js file. 該当するファイルが見つからない場合は、ChromeStrings.js ファイルを読み込みます。If it doesn't find such a file, it loads the ChromeStrings.js file.

ローカライズされた SharePoint アドインのテストTest your localized SharePoint Add-in

アドインでサポートされるいずれかの言語で準備された SharePoint Web サイトに展開することによって、アドインをテストします。SharePoint Online Web サイトまたは社内 Web サイトでアドインをテストできます。Test your add-in by deploying it to a SharePoint website that is provisioned in one of the languages your add-in supports. You can test your add-in on a SharePoint Online website or an on-premises website.

SharePoint Online Web サイトでアドインをテストするにはTo test your add-in on a SharePoint Online website

  1. Office 365 管理センターに移動します。Go to your Office 365 admin center.

  2. ナビゲーションメニューで [サービス設定][サイト] の順に選択します。Choose service settings on the navigation menu, and then choose sites.

  3. サイトコレクションで、[サイトコレクションの作成] を選択します。Under site collections, choose Create site collection.

  4. [ 言語の選択 ] で、アドインをテストする言語を選択します。Under select a language, select the language in which you want to test your add-in.

  5. [テンプレートの選択] で、[開発者向けサイト] を選択します。Under select a template, choose Developer Site.

  6. SharePoint アドイン プロジェクトで SiteUrl プロパティを、新しいサイト コレクションの URL で更新します。In your SharePoint Add-in project, update the SiteUrl property with the URL of the new site collection.

  7. F5キーを押して、アドインを実行します。Press F5 to run the add-in.

サイト コレクション ページの作成

内部設置型の Web サイトでアドインをテストする方法To test your add-in an on-premises website

  1. アドインをテストする言語パックをインストールします。Install the language pack in which you want to test your add-in. 詳細は、「SharePoint 用の言語パックをインストールまたはアンインストールする」および「SharePoint Server 2013 用言語パックのダウンロード」を参照してください。For more information, see Install or uninstall language packs for SharePoint and Download language packs for SharePoint Server 2013.

  2. ファームの全体管理を開きます。Open Central Administration for the farm.

  3. [ アプリケーション構成の管理 ] で、[ サイト コレクションの作成 ] を選択します。Under Application Management, choose Create site collections.

  4. [ 言語の選択 ] で、アドインをテストする言語を選択します。Under select a language, select the language in which you want to test your add-in.

  5. [テンプレートの選択] で、[開発者向けサイト] を選択します。Under select a template, choose Developer Site.

  6. SharePoint アドイン プロジェクトで SiteUrl プロパティを、新しく作成したサイト コレクションの URL に更新します。In your SharePoint Add-in project, update the SiteUrl to the URL of the recently created site collection.

  7. F5キーを押して、アドインを実行します。Press F5 to run the add-in.

関連項目See also