SharePoint ホスト型の SharePoint アドインの作成を始めるGet started creating SharePoint-hosted SharePoint Add-ins

SharePoint ホスト型アドインは、SharePoint アドインの主な 2 つの種類のうちの 1 つです。SharePoint アドインの概要と、その 2 つの種類については、「SharePoint アドイン」を参照してください。次に、SharePoint ホスト型アドインの概要を示します。SharePoint-hosted add-ins are one of the two major types of SharePoint Add-ins. For an overview of SharePoint Add-ins and the two different types, see SharePoint Add-ins. Here's a summary of SharePoint-hosted add-ins:

  • SharePoint リスト、Web パーツ、ワークフロー、カスタム ページなどのコンポーネントが含まれます。これらはすべて、アドインがインストールされている SharePoint Web サイトの、アドイン Web と呼ばれるサブ Web にインストールされます。They contain SharePoint lists, web parts, workflows, custom pages, and other components, all of which are installed on a subweb, called the add-in web, of the SharePoint website where the add-in is installed.
  • 含まれているコードは、カスタム SharePoint ページ上の JavaScript のみです。The only code they have is JavaScript on custom SharePoint pages.

この記事では、次の手順を実行します。In this article, you'll complete the following steps:

  • 開発環境のセットアップSet up your dev environment
  • アドイン プロジェクトの作成Create the add-in project
  • アドインのコーディングCode your add-in
  • アドインの実行とリストのテストRun the add-in and test the list

開発環境のセットアップSet up your dev environment

SharePoint アドイン用に開発環境をセットアップする方法は多数あります。このセクションでは最も簡単な方法について説明します。There are many ways to set up a development environment for SharePoint Add-ins. This section explains the simplest way.

ツールを取得するGet the tools

Visual Studio 2017 では、Microsoft Office Developer Tools のインストールは Visual Studio 2017 インストーラーを使用して行う必要があります。このインストーラーには、[新しいプロジェクト] ウィンドウからアクセスできます。For Visual Studio 2017, installing the Microsoft Office Developer Tools should be done through the Visual Studio 2017 Installer, which can be accessed from the New Project window.

前のバージョンの Visual Studio または他の Visual Studio ドキュメントを参照してください。Reference earlier versions of Visual Studio or other Visual Studio documentation.

Office 365 Developer サブスクリプションへのサインアップSign up for an Office 365 developer subscription

注意

既に Office 365 Developer サブスクリプションにアクセスできる可能性があります。You might already have access to an Office 365 developer subscription:

Office 365 プランを取得するには、次の手順を実行してください。To get an Office 365 plan:

開発者向けサイトを開くOpen your developer site

ブラウザーで、Office 365 開発サブスクリプションを設定したときに作成した SharePoint サイト コレクションに移動します。In a browser, navigate to the SharePoint site collection you created when you setup your Office 365 developer subscription. (サイトがない場合は、ここの指示に従ってください)。(If you don't have a site, follow the instructions here). 次の図に示すようなサイトが表示されます。You should see a site that looks like the one in the following figure. このページの [テスト中アプリ] および [テスト中アドイン] リストでは、SharePoint 開発者向けサイトのテンプレートで作成された Web サイトを確認できます。The Add-ins in Testing list on the page confirms that the website was made with the SharePoint Developer Site template. 通常のチーム サイトが表示される場合は、数分待ってからサイトを再起動してください。If you see a regular team site instead, wait a few minutes and then restart your site.

注意

サイトの URL を書き留めておきます。これは、Visual Studio で SharePoint アドイン プロジェクトを作成するときに使用します。Make a note of the site's URL; it's used when you create SharePoint Add-in projects in Visual Studio.

開発者向けサイトのホーム ページと [テスト中アプリ] および [テスト中アドイン] のリストYour developer site home page with the Add-ins in Testing list

開発者向けサイトのホームページを示すスクリーンショット。

アドイン プロジェクトの作成Create the add-in project

  1. [管理者として実行] オプションを使用して Visual Studio を開始します。Start Visual Studio by using the Run as administrator option.

  2. Visual Studio で、[ファイル] > [新規作成] > [新しいプロジェクト] を選択します。In Visual Studio, select File > New > New Project.

  3. [新しいプロジェクト] ダイアログ ボックスで、[Visual C#] ノードを展開し、[Office/SharePoint] ノードを展開して、[アドイン] > [SharePoint 用アドイン] を選択します。In the New Project dialog box, expand the Visual C# node, expand the Office/SharePoint node, and then select Add-ins > Add-in for SharePoint.

  4. プロジェクトに「EmployeeOrientation」という名前を付けて [OK] をクリックします。Name the project EmployeeOrientation, and then select OK.

  5. [SharePoint 用アドインの設定を指定する] ダイアログ ボックスに、アドインのデバッグに使用する SharePoint サイトの完全 URL を入力します。In the Specify the Add-in for SharePoint Settings dialog box, provide the full URL of the SharePoint site that you want to use to debug your add-in. これは、開発者向けサイトの URL になります。This is the URL of the developer site. (この URL には、HTTP ではなく HTTPS を使用してください)。[SharePoint アドインをホストする方法] で、[SharePoint ホスト型] を選択してから [完了] をクリックします。(Use HTTPS, not HTTP in the URL.) Under How do you want to host your SharePoint Add-in, select SharePoint-hosted, and then select Finish.

  6. 開発者向けサイトにサインインするように求めるダイアログが表示されることがあります。You may be prompted to sign in to your developer site. その場合は、サブスクリプション管理者の資格情報を使用します。If so, use your subscription administrator's credentials.

  7. プロジェクトを作成したら、プロジェクトのルートからファイル /Pages/Default.aspx を開きます。After the project is created, open the file /Pages/Default.aspx from the root of the project. この生成されたファイルでは、主に SharePoint でホストされている 2 つのスクリプトの sp.runtime.js と sp.js のどちらか、または両方を読み込みます。Among other things, this generated file loads one or both of two scripts that are hosted on SharePoint: sp.runtime.js and sp.js. これらのファイルを読み込むマークアップは、ファイルの先頭付近にある、PlaceHolderAdditionalPageHead という ID の Content コントロール内にあります。The markup for loading these files is in the Content control near the top of the file that has the ID PlaceHolderAdditionalPageHead. このマークアップは、どのバージョンの Microsoft Office Developer Tools for Visual Studio を使用しているかによって異なります。The markup varies depending on the version of Microsoft Office Developer Tools for Visual Studio that you are using. この一連のチュートリアルでは、それら両方のファイルを <SharePoint:ScriptLink> タグではなく、通常の HTML <script> タグで読み込む必要があります。This series of tutorials requires that both files be loaded and that they be loaded with ordinary HTML <script> tags, not <SharePoint:ScriptLink> tags.

    PlaceHolderAdditionalPageHead コントロール内の行 <meta name="WebPartPageExpansion" content="full" />直前に、次の行があることを確認してください。Ensure that the following lines are in the PlaceHolderAdditionalPageHead control, just above the line <meta name="WebPartPageExpansion" content="full" />:

    <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script> 
    <script type="text/javascript" src="/_layouts/15/sp.js"></script> 
    
  8. これらどちらかのファイを読み込むマークアップが他にもないかファイルを検索して、重複するマークアップを削除します。Search the file for any other markup that also loads one or the other of these files and remove the redundant markup. ファイルを保存して閉じます。Save and close the file.

アドインのコーディングCode your add-in

初めての SharePoint ホスト型 SharePoint アドインの場合は、従来の SharePoint 拡張 (ユーザー設定リストとリスト インスタンス) を含めます。For your first SharePoint-hosted SharePoint Add-in, we'll include the classic SharePoint extension: a custom list and list instance.

  1. ソリューション エクスプローラーで、AppManifest.xml ファイルを開きます。In Solution Explorer, open the AppManifest.xml file.

  2. マニフェスト デザイナーが開いたら、タイトル フィールドの単語間にスペースを入れて「Employee Orientation (社員オリエンテーション)」としますWhen the manifest designer opens, add a space between the words in the Title field so that it reads Employee Orientation. (**Name** フィールドは変更*しないでください*)。(Do not change the Name field.)

  3. ファイルを保存して閉じます。Save and close the file.

  4. ソリューション エクスプローラーで、プロジェクトを右クリックして、[追加] > [新しいフォルダー] の順に選択します。Right-click the project in Solution Explorer and select Add > New Folder. フォルダーに「リスト」という名前を付けます。Name the folder Lists.

  5. 新しいフォルダーを右クリックして、[追加] > [新しいアイテム] の順に選択します。Right-click the new folder and select Add > New Item. [新しいアイテムの追加] ダイアログ ボックスが Office/SharePoint ノードに開きます。The Add New Item dialog opens to the Office/SharePoint node.

  6. [リスト] を選択します。Select List. NewEmployeeOrientation」という名前を付けて、[追加] を選択します。Give it the name NewEmployeeOrientation, and then select Add.

  7. SharePoint カスタマイズ ウィザードの [リストの設定を選択] ページで、リストの表示名は既定の NewEmployeeOrientation のままにして、[カスタマイズ可能なリスト テンプレートおよびそのリスト インスタンスを作成] オプション ボタンを選択し、ドロップダウン リストで [既定 (カスタム リスト)] を選択してから [完了] を選択します。On the Choose List Settings page of the SharePoint Customization Wizard, leave the list display name at the default NewEmployeeOrientation, select the Create a customizable list template and a list instance of it option button, select Default (Custom List) on the drop-down list, and then select Finish.

  8. ウィザードによって NewEmployeeOrientation リスト テンプレートが作成され、 NewEmployeeOrientationInstance という名前の子リスト インスタンスが入ります。リスト デザイナーが開く場合があります。後ほど使用します。The wizard creates a NewEmployeeOrientation list template with a child list instance named NewEmployeeOrientationInstance. A list designer may open. It is used in a later step.

  9. ソリューション エクスプローラーNewEmployeeOrientationInstance ノードがまだ展開されていない場合にはこの時点で展開し、リスト インスタンス の子である elements.xml ファイルと、リスト テンプレート の子である elements.xml ファイルをはっきりと区別できるようにします。Expand the NewEmployeeOrientationInstance node in Solution Explorer, if it isn't already, so that you can clearly distinguish the elements.xml file that is a child of the list instance from the elements.xml file that is a child of the list template.

    子 NewEmployeeOrientation テンプレート使用してフォルダーを一覧表示します。このテンプレート自体、NewEmployeeOrientationInstance、elements.xml ファイル、および schema.xml ファイルの 3 つの子が含まれます。インスタンスには elements.xml という名前の子があります。

  10. NewEmployeeOrientation リスト テンプレートの子である elements.xml を開きます。Open the elements.xml child of the NewEmployeeOrientation list template.

  11. DisplayName 属性 (Name 属性ではありません) にスペースを追加して、わかりやすくなるように「New Employee Orientation (新入社員のオリエンテーション)」とします。Add spaces to the DisplayName attribute (not the Name attribute) to make it friendlier: "New Employee Orientation."

  12. Description 属性を「Orientation information about new employees (新入社員に関するオリエンテーション情報)」に設定します。Set the Description attribute to "Orientation information about new employees."

  13. その他すべての属性は既定のままにして、ファイルを保存して閉じます。Leave all other attributes at their default, save the file, and close it.

  14. リスト デザイナーが開かない場合は、ソリューション エクスプローラー[NewEmployeeOrientation] ノードを選択します。If the list designer is not open, select the NewEmployeeOrientation node in Solution Explorer.

  15. デザイナーで [リスト] タブを開きます。このタブを使用して、リスト インスタンス (リスト テンプレート ではありません) の特定の値を設定します。ただし、一部の既定値はテンプレートから継承されます。Open the List tab of the designer. This tab is used to set certain values for the list instance, not the list template, but it has some default values that it inherited from the template.

  16. [リスト] タブの値を次のように変更します。Change the values on the List tab to the following:

    • タイトル: シアトルの新入社員Title: New Employees in Seattle
    • リストの URL: Lists/NewEmployeesInSeattleList URL: Lists/NewEmployeesInSeattle
    • 説明: シアトルの新入社員。Description: The new employees in Seattle
  17. チェック ボックスは既定の状態のままにして、ファイルを保存してからデザイナーを閉じます。Leave the check boxes at their default status, save the file, and then close the designer.

  18. リスト インスタンスは、ソリューション エクスプローラーに古い名前で表示されることがあります。The list instance may have its old name in Solution Explorer. その場合は、[NewEmployeeOrientationInstance] のショートカット メニューを開いて、[名前の変更] を選択して、その名前を「NewEmployeesInSeattle」に変更します。If so, open the shortcut menu for NewEmployeeOrientationInstance, select Rename, and change the name to NewEmployeesInSeattle.

  19. schema.xml ファイルを開きます。Open the schema.xml file.

  20. BaseViewID 値が "0" の View 要素で、既存の ViewFields 要素を次のマークアップに置き換えます (Title という名前の FieldRef には、この GUID を正確にそのまま使用してください)。In the View element whose BaseViewID value is "0", replace the existing ViewFields element with the following markup (use exactly this GUID for the FieldRef named Title). この自動生成された schema.xml ファイルには、不自然な場所に改行が入っていることがあります。Line breaks may come at odd places in this autogenerated schema.xml file. ViewFields 要素の開始タグと終了タグが対応していることを確認してください。Be sure you have found the matching begin and end tags for the ViewFields element. 読みやすくするために改行を追加します。Add line breaks to improve readability.

    <ViewFields>
      <FieldRef Name="Title" ID="{fa564e0f-0c70-4ab9-b863-0177e6ddd247}" DisplayName="Employee" />
    </ViewFields>
    
  21. 引き続き schema.xml ファイルで、BaseViewID 値が "1" の View 要素で、既存の ViewFields 要素を次のマークアップで置き換えます (LinkTitle という名前の FieldRef には、この GUID を正確にそのまま使用してください)。Still in the schema.xml file, in the View element whose BaseViewID value is "1", replace the existing ViewFields element with the following markup (use exactly this GUID for the FieldRef named LinkTitle).

    <ViewFields>
      <FieldRef Name="LinkTitle" ID="{82642ec8-ef9b-478f-acf9-31f7d45fbc31}" DisplayName="Employee" />
    </ViewFields>
    
  22. schema.xml ファイルを保存して閉じます。Save and close the schema.xml file.

  23. リスト インスタンス NewEmployeesInSeattle の子である elements.xml ファイル (リスト テンプレート NewEmployeeOrientation の子である elements.xml ではありません) を開きます。Open the elements.xml file that is a child of the list instance NewEmployeesInSeattle (not the elements.xml that is a child of the list template NewEmployeeOrientation).

  24. このファイルでは、いくらかの初期データをリストに取り込みます。これを行うには、以下の Data 要素マークアップを ListInstance 要素の子要素として追加します。In this file, populate the list with some initial data. You do this by adding the following Data element markup as a child element of the ListInstance element.

    <Data>
      <Rows>
        <Row>
          <Field Name="Title">Tom Higginbotham</Field>
        </Row>
        <Row>
          <Field Name="Title">Satomi Hayakawa</Field>
        </Row>
        <Row>
          <Field Name="Title">Cassi Hicks</Field>
        </Row>
        <Row>
          <Field Name="Title">Lertchai Treetawatchaiwong</Field>
        </Row>
      </Rows>
    </Data>
    
  25. ファイルを保存して閉じます。Save and close the file.

  26. ソリューション エクスプローラーで、[Feature1] をダブルクリックしてフィーチャー デザイナーを開きます。In Solution Explorer, double-click Feature1 to open the Feature designer. デザイナーで [タイトル] を「新入社員オリエンテーション コンポーネント (New Employee Orientation Components) 」に設定して、[説明] を「社員にオリエンテーションを受けさせるためのリストとその他のコンポーネント (Lists and other components for getting employees oriented to the company)」に設定します。In the designer, set the Title to New Employee Orientation Components and set the Description to Lists and other components for getting employees oriented to the company. ファイルを保存して、デザイナーを閉じます。Save the file, and then close the designer.

  27. ソリューション エクスプローラー[Feature1] の名前が自動的に変更されていない場合は、そのショートカット メニューを開いて、[名前の変更] を選択して「NewEmployeeOrientationComponents」という名前に変更します。If the Feature1 in Solution Explorer has not been automatically renamed, open its shortcut menu, select Rename, and rename it to NewEmployeeOrientationComponents.

  28. Default.aspx ファイルを開きます。Open the Default.aspx file.

  29. ID が PlaceHolderPageTitleInTitleArea の ASP.NET Content 要素を見つけます。Find the ASP.NET Content element with the ID PlaceHolderPageTitleInTitleArea. 既定の文字列「Page Title」を「地域ごとの新入社員 (New Employees by Location)」に置き換えます。Replace the default string Page Title with New Employees by Location.

  30. ID が PlaceHolderMain の ASP.NET Content 要素を見つけます。Find the ASP.NET Content element with the ID PlaceHolderMain. そのコンテンツを次のマークアップに置き換えます。Replace its contents with the following markup. _spPageContextInfo は、SharePoint が自動的にページに含める JavaScript オブジェクトです。The _spPageContextInfo is a JavaScript object that SharePoint automatically includes on the page. この webAbsoluteUrl プロパティは、アドイン Web の URL を返します。It's webAbsoluteUrl property returns the URL of the add-in web.

    <p><asp:HyperLink runat="server" 
    NavigateUrl="JavaScript:window.location = _spPageContextInfo.webAbsoluteUrl + '/Lists/NewEmployeesInSeattle/AllItems.aspx';" 
    Text="New Employees in Seattle" /></p>
    

アドインの実行とリストのテストRun the add-in and test the list

  1. F5 キーを使用して、アドインを展開して実行します。Use the F5 key to deploy and run your add-in. Visual Studio が、テスト用 SharePoint サイトにアドインを一時的にインストールして、すぐにアドインを実行します Visual Studio makes a temporary installation of the add-in on your test SharePoint site and immediately runs the add-in. (インストール済みの SharePoint アドインをエンド ユーザーが実行する方法については、「次の手順」を参照してください)。(To find out how end users run an installed SharePoint Add-in, see Next Steps.)

  2. アドインの既定のページが開いたら、[シアトルの新入社員] リンクを選択してカスタムのリスト インスタンスを開きます。When the add-in's default page opens, select the New Employees in Seattle link to open the custom list instance.

    「地域ごとの新入社員」というタイトルのアドインの既定のページが表示されています。「シアトルの新入社員」というラベルのリンクがあります。このリンクからの矢印は、一覧のリスト ビュー ページを指します。「シアトルの新入社員」というタイトルで、下に一覧が表示されます。

  3. リストでアイテムの追加および削除を行います。Add and delete items from the list.

  4. デバッグ セッションを終了するには、ブラウザー ウィンドウを閉じるか、Visual Studio でデバッグを停止します。F5 を押すたびに、Visual Studio は以前のバージョンのアドインを取り消し、最新のアドインをインストールします。To end the debugging session, close the browser window or stop debugging in Visual Studio. Each time that you press F5, Visual Studio will retract the previous version of the add-in and install the latest one.

  5. このアドインおよび別の記事の Visual Studio ソリューションを操作して、ひととおりの操作を終了したら、最後にもう一度アドインを取り消すとよいでしょう。You will work with this add-in and Visual Studio solution in other articles, and it's a good practice to retract the add-in one last time when you are finished working with it for a while. ソリューション エクスプローラーでプロジェクトを右クリックして、[取り消し] を選択します。Right-click the project in Solution Explorer, and select Retract.

次の手順Next steps

アドインを作成するには、次の手順を順序どおりに行ってください。To create your add-ins, walk through the following steps in this order:

  1. SharePoint ホスト型の SharePoint アドインを展開してインストールするDeploy and install a SharePoint-hosted SharePoint Add-in
  2. SharePoint ホスト型の SharePoint アドインにカスタム列を追加するAdd custom columns to a SharePoint-hosted SharePoint Add-in
  3. SharePoint ホスト型の SharePoint アドインにカスタム コンテンツ タイプを追加するAdd a custom content type to a SharePoint-hosted SharePoint Add-in
  4. SharePoint ホスト型の SharePoint アドインで Web パーツをページに追加するAdd a web part to a page in a SharePoint-hosted SharePoint Add-in
  5. SharePoint ホスト型 SharePoint アドインにワークフローを追加するAdd a workflow to a SharePoint-hosted SharePoint Add-in
  6. SharePoint ホスト型 SharePoint アドインにカスタム ページとスタイルを追加するAdd a custom page and style to a SharePoint-hosted SharePoint Add-in
  7. SharePoint ホスト型の SharePoint アドインにカスタムのクライアント側レンダリングを追加するAdd custom client-side rendering to a SharePoint-hosted SharePoint Add-in
  8. SharePoint アドインのホスト Web にカスタムのリボン ボタンを作成するCreate a custom ribbon button in the host web of a SharePoint Add-in
  9. SharePoint JavaScript API を使用して SharePoint のデータを操作するUse the SharePoint JavaScript APIs to work with SharePoint data
  10. アドイン Web で JavaScript からのホスト Web データを操作するWork with host web data from JavaScript in the add-in web