SharePoint の Web パーツをアップロードするUpload web parts in SharePoint

ユーザー用に事前に構成されている標準の SharePoint Web パーツを展開します。Deploy pre-configured, standard SharePoint web parts for your users.

適用対象: SharePoint 2013 | SharePoint アドイン | SharePoint OnlineApplies to: SharePoint 2013 | SharePoint Add-ins | SharePoint Online

事前に構成された標準的な SharePoint Web パーツをアップロードして、ユーザーが自分の SharePoint サイトに追加できるようにすることができます。You can upload pre-configured, standard SharePoint web parts for users to add to their SharePoint sites. たとえば、事前に構成された以下のパーツをアップロードできます。For example, you can upload a pre-configured:

  • リモート Web 上で JavaScript ファイルを使用する Script Editor Web パーツ。Script Editor Web Part that uses JavaScript files on the remote web.

  • コンテンツ検索 Web パーツ。Content Search Web Part.

この記事では、リモート Web 上の JavaScript ファイルを使用するように Script Editor Web パーツを事前に構成して、UI のカスタマイズを実行する方法を説明します。このソリューションを使用して、以下を行うことができます。This article discusses pre-configuring the Script Editor Web Part to use JavaScript files on the remote web to perform UI customization. Use this solution to:

  • ホスト Web 上の [サイトのリソース ファイル] リストにあるスクリプトを参照する代わりに、Web パーツのリモート Web にあるスクリプト ファイルを使用します。Use script files from the remote web in your web parts rather than referencing scripts from the Site Assets list on the host web.

  • カスタム サイト プロビジョニング プロセスで、事前に構成された Web パーツを展開します。Deploy pre-configured web parts in your custom site provisioning process. たとえば、カスタム サイト プロビジョニング プロセスの一環として、新しいサイトが作成される際にユーザーにサイト使用状況のポリシーの情報を表示できます。For example, as part of your custom site provisioning process, you might want to display site usage policy information to the user when a new site is created.

  • ユーザーに対して、フィルター処理されたコンテンツが Web パーツに自動的に読み込まれます。Automatically load filtered content in your web parts for your users. たとえば、スクリプト ファイルには、外部システムから読み取られるローカル ニュース情報を表示できます。For example, your script file can display local news information read from an external system.

  • ユーザーが [Web パーツ ギャラリー] にある Web パーツを使用してサイトに他の機能を追加できるようにします。Allow users to add additional functionality to their site by using web parts from the Web Part Gallery.

はじめにBefore you begin

まず、Core.AppScriptPart サンプル アドインを、GitHub の Office 365 Developer Patterns and Practices プロジェクトからダウンロードします。To get started, download the Core.AppScriptPart sample add-in from the Office365 Developer patterns and practices project on GitHub.

Core.AppScriptPart アドインを使用するUsing the Core.AppScriptPart add-in

コード サンプルを実行して、[シナリオの実行] を選択するとき:When you run the code sample and choose Run Scenario:

  1. [サイトに戻る] を選択します。Choose Back to Site.

  2. [ページ] > [編集] > [挿入] > [Web パーツ] を選択します。Choose PAGE > Edit > INSERT > Web Part.

  3. [カテゴリ] で、[アドイン スクリプト パート] を選択してから [ユーザー プロファイル情報] を選択します。In Categories, choose Add-in Script Part, and then choose User profile information.

  4. [追加] を選択します。Choose Add.

  5. [ユーザー プロファイル情報] Web パーツの右上隅にあるドロップダウンで、[Web パーツの編集] を選択します。In the drop-down in the upper-right corner of the User profile information Web Part, choose Edit Web Part.

  6. [スニペットを編集] を選択します。Choose EDIT SNIPPET.

  7. <SCRIPT> 要素を検討します。Review the <SCRIPT> element.

    src 属性は、リモート Web の JavaScript ファイルにリンクすることに注意してください。次の例のように、<SCRIPT> 要素は Core.AppScriptPartWeb\userprofileinformation.webpart の Content プロパティで設定されています。src 属性にリンクする JavaScript ファイルは、Core.AppScriptPartWeb\Scripts\userprofileinformation.js です。Userprofileinformation.js は、ユーザー プロファイル サービスから現在のユーザーのプロファイル情報を読み取り、Web パーツにこの情報を表示します。Notice that the src attribute links to a JavaScript file on the remote web. The <SCRIPT> element is set by the Content property in the Core.AppScriptPartWeb\userprofileinformation.webpart, as shown in the following example. The JavaScript file linked to by the src attribute is Core.AppScriptPartWeb\Scripts\userprofileinformation.js. Userprofileinformation.js reads the current user's profile information from the user profile service, and then displays this information in the Web Part.


    この記事で提供されるコードは、明示または黙示のいかなる種類の保証なしに現状のまま提供されるものであり、特定目的への適合性、商品性、権利侵害の不存在についての暗黙的な保証は一切ありません。The code in this article is provided as-is, without warranty of any kind, either express or implied, including any implied warranties of fitness for a particular purpose, merchantability, or non-infringement.

    <property name="Content" type="string">&amp;lt;script type="text/javascript" src="https://localhost:44361/scripts/userprofileinformation.js"&amp;gt;&amp;lt;/script&amp;gt;
    &amp;lt;div id="UserProfileAboutMe"&amp;gt;&amp;lt;div&amp;gt;
  8. [キャンセル] を選択します。Choose Cancel.

  9. [保存] を選択します。Choose Save.


ユーザー プロファイル画像が表示されない場合は、OneDrive for Business サイトを開いて、ホスト Web に戻ります。If your user profile image does not display, open your OneDrive for Business site, and then return to the host web.

Core.AppScriptPartWeb\Pages\Default.aspx で、[シナリオの実行]btnScenario_Click を実行し、その結果として以下が行われます。In Core.AppScriptPartWeb\Pages\Default.aspx, Run Scenario runs btnScenario_Click, which does the following:

  1. [Web パーツ ギャラリー] フォルダーへの参照を取得します。Gets a reference to the Web Part Gallery folder.

  2. FileCreationInformation を使用して、プロバイダー ホスト型アドインから [Web パーツ ギャラリー] にアップロードする userprofileinformation.webpart ファイルを作成します。folder.Files.Add メソッドは、そのファイルを [Web パーツ ギャラリー] に追加します。Uses FileCreationInformation to create the userprofileinformation.webpart file to upload from the provider-hosted add-in to the Web Part Gallery. The folder.Files.Add method adds the file to the Web Part Gallery.

  3. [Web パーツ ギャラリー] 内のすべてのリスト項目を取得して、userprofileinformation.webpart を検索します。Retrieves all list items in the Web Part Gallery, and then searches for userprofileinformation.webpart.

  4. userprofileinformation.webpart が見つかると、Web パーツを [アドイン スクリプト パーツ] という名前のカスタム グループに割り当てます。When userprofileinformation.webpart is found, assigns the Web Part to a custom group named Add-in Script Part.

protected void btnScenario_Click(object sender, EventArgs e)
            var spContext = SharePointContextProvider.Current.GetSharePointContext(Context);
            using (var clientContext = spContext.CreateUserClientContextForSPHost())
                var folder = clientContext.Web.Lists.GetByTitle("Web Part Gallery").RootFolder;

                // Upload the "userprofileinformation.webpart" file.
                using (var stream = System.IO.File.OpenRead(
                    FileCreationInformation fileInfo = new FileCreationInformation();
                    fileInfo.ContentStream = stream;
                    fileInfo.Overwrite = true;
                    fileInfo.Url = "userprofileinformation.webpart";
                    File file = folder.Files.Add(fileInfo);

                // Update the group that the Web Part belongs to. Start by getting all list items in the Web Part Gallery, and then find the Web Part that was just uploaded.
                var list = clientContext.Web.Lists.GetByTitle("Web Part Gallery");
                CamlQuery camlQuery = CamlQuery.CreateAllItemsQuery(100);
                Microsoft.SharePoint.Client.ListItemCollection items = list.GetItems(camlQuery);
                foreach (var item in items)
                    // Create new group.
                    if (item["FileLeafRef"].ToString().ToLowerInvariant() == "userprofileinformation.webpart")
                        item["Group"] = "add-in Script Part";

                lblStatus.Text = string.Format("add-in script part has been added to Web Part Gallery. You can find 'User Profile Information' script part under 'App Script Part' group in the <a href='{0}'>host web</a>.", spContext.SPHostUrl.ToString());

関連項目See also