Copyright© 2017  Aiprovide Corporation all Right Reserved.

  • Aiprovide Coroporation
  • Aiprovide Corporation

Provider Hosted App + Azure No.2[オンライン]

2017/05/07

この記事は、SharePointアドインのProvider Hosted Appを、Microsoft Azureを利用して構築する具体的な方法を記載しています。

​​「Microsoft Azure」で「App Service」がサポートされたことから、SharePoint「Provide Hosted App」のアドインをホストするWebアプリケーションを、「Microsoft Azure」に構築することが簡単に行える様になりました。
ここでは、「Provider Hosted App」について、アドインをホ
ストするWebアプリケーションを「Microsoft Azure」上に構築する場合の方法を順を追って記載します。

以下の契約がされて、環境が整っていることを前提とします。

  • SharePoint Online、または、Office365 (アドイン開発が可能な契約としてください。)

  • SharePoint アドイン開発用サイト(SharePoint Onlineの「SharePoint 管理センター」にて作成してください。)

  • Microsoft Azureサブスクリプション


注)
​Visual Studio、Office Developer Tools for Visual Studio 2015、Azure Tool Kitは最新としてください。
この記事では、

  • Visual Studio Community 2015 Update 3

  • Office Developer Tools for Visual Studio 2015 (14.0.23928)

  • Azure App Service Tools v2.9.5

で、動作を確認しています。​
他のバージョンでは、動作しませんでした。

 

 

1.Visual Studio で新しい​プロジェクトを作成します。

​​​​Visual Studio 2015で「新しいプロジェクト」から、「Provider Hosted App」​用の​新しいプロジェクトを作成します。

 

①新しいプロジェクトを作​成​します。

テンプレート「Office/SharePoint」から、[Web アドイン]ー[SharePoint アドイン]を​選択します。
選択後、[OK]ボタンを押します。

 


​​

②[SharePoint アドインの設定の指定]ダイアログが表示されます。

「アドインのデバッグに使用する SharePoint サイト」で、SharePoint アドイン開発用サイトのURLを設定します。
「SharePoint アドインをホストする方法」で、「プロバイダー向けのホスト型」を選択します。
設定後、[次へ]ボタンを押します。

 

 

「Office 365」にログインしていない場合は、ログインダイアログが表示されるので、Office 365のアカウントを使用してログインします。

 

 

 

③[ターゲットの SharePoint バージョンを指定します]ダイアログが表示されます。

「SharePoint Online」を選択します。
選択後、[次へ]ボタンをクリックします。

 

 

④[Web プロジェクトのタイプを指定してください]ダイアログが表示されます。

「Provide Hosted App」のアドインをホストするWebアプリケーションのタイプを指定します。
ここは、自分が開発し易いWebアプリケーションを選択してください。
選択後、[次へ]ボタンをクリックします

 


 

⑤[認証設定を構成します]ダイアログが表示されます。

「Windows Azure アクセス制御サービスを使用する」を選択します。
選択後、[完了]ボタンをクリックします。

 

 

⑥プロジェクトが作成されます。

 

 


 


 

2.Azure上に発行します。

​「Provider Hosted App」のアドインをホストするWebアプリケーションをAzure上に発行します。

①Webアプリケーションを公開します。

ソリューションエクスプローラーにて、Webアプリケーションを選択し、右クリックのショートカットメニューから[公開」をクリックします。

 

​ ​​

②Azure App Serviceの設定を行い​ます。

[発行先を選択します]で、「Microsoft Azure App Service」を選択します。

 


 

ここからは、「Microsoft Azure」側の設定になります。

 


​​​

(1)「Microsoft」アカウントでは、Azureを契約しサブスクリプションを保持しているMicrosoftアカウントを選択します。

 

 

 

 

 

 

 

(2)[新規作成]ボタンを押して、新しくリソースグループを作成します。

 


 

  •  

 

 

 

 

 

(3)「App Service の作成」ダイアログが表示されます。

 

 

(4)「種類」は、「Web App」とします。

 

 

 

 

  •  

  •  

 

 

 

(5)「Web App」の名前で、Azureポータル上で「App Service」として表示される名前を設定します。

 

 

 

 

 

 

(6) Azureの契約している「サブスクリプション」を選択します。

 

 



 

 

 

(7)「リソースグループ」を選択します。既存のAzure上のリソースグループから選択することも、[新規作成]ボタンを押して新規に作成することもできます。

 

 


 

 

 

 

(8)「App Service プラン」を指定します。こちらは、[新規作成]ボタンを押して新規に作成されることをお薦めします。

 

 

 

 

 

 

 

「サイズ」で「無料」を選択すると使用料による課金がされません。開発やテスト時ではこちらをお薦めします。

 

実運用にて、性能向上が必要になった場合に、設定変更することが可能です。

 

 

「App Service プランの構成」を設定したら、[OK]ボタンを押し前の画面に戻ると、作成したプランが表示されます。

 



 

 

 

(9) 全ての入力が完了したら、[作成]ボタンを押します。 

 

 


③​「Webを発行」のダイアログボックスが表示されます。​
特に、変更する部分はありません。


[接続の検証]ボタンをクリックし、正しく接続されることを確認します。

 


 

 

[次へ]ボタンをクリックします。


 

 

④「設定」画面が表示されます。
「構成」で、「Debug」を指定すると、リモートデバッグが可能となります。
[次へ]ボタンをクリッ
クします。

 


 

⑤「プレビュー」画面が表示されます。

  

[プレビューの開始]ボタンを押すと、Azure上に発行するファイルの一覧が表示されます。​

 

⑥[発行]ボタンを押して、Azure上に発行します。 ​

 

ブラウザが自動的に立ち上がり、Webアプリケーションの画面が表示されたら、発行は成功しています。

 

 

Visual Studio 2015の「Azure App Service のアクティビティ」ウィンドウ、「出力」ウィンドウにも、成功したことが表示されます。

 

 

 

​​

 

3.「クライアント ID」「クライアント シークレット」を設定します。

Azure上に発行した「Provider Hosted App」のアドインをホストするWebアプリケーションに、「Provider Hosted App」アドインの「クライアント ID」と「クライアント シークレット」を設定します。

①SharePointアドインを公開します。

ソリューションエクスプローラーにて、SharePointアドインを選択し、右クリックのショートカットメニューから[公開」をクリックします。​​​

 


②[アドインを発行する]画面が表示されます。

 

​​​​

③[編集]ボタンを押します。

 

 

④[アドイン ID の設定]画面が表示されます。

 

まだ、「クライアント ID」と「クライアント シークレット」を取得していないため、この時点では入力できません。
この画面は、そのまま表示しておきます。


 

⑤「SharePoint アドイン開発用サイト」を表示します。

ブラウザを開き、
https://<SharePoint アドイン開発用サイトのサイトコレクションULR>/_layouts/15/AppRegNew.aspx​
にアクセスします。
アドインを登録するために、「クライアント ID」と「クライアント シークレット」を新規に発行するための画面が表示されます。

 

 

(1)「クライアント ID」と「クライアント シークレット」のそれぞれについて、右の[生成]ボタンを押して、新規に作成します。

 

 

  •  

  •  

  •  

 

 

 

 

 

(2)「タイトル」を設定します。

 

 


 

 

 

(3)「アプリドメイン」を設定します。

 


 

 

 

 

 

これは、Azure上に発行したドメインを設定します。
先頭の「http://」および行末の「/」はつけません。

 

 

 

 

(4)「リダイレクト先の URL」を設定します。 

 


 

 

 

 

これは、
https://<上で設定したアプリドメイン>/Pages/Default.aspx
とします。
必ず、「https」とします。

 

 

 

(5)[作成]ボタンを押します。

​「アプリID が正常に作成されました」画面が表示されます。

ここで表示される、「クライアント ID」と「クライアント シークレット」は重要なので、メモ帳等にコピーしておきます。


 

 

⑥「④」のVisual Studio の画面に戻ります。

 

 

⑦「クライアント ID」と「クライアント シークレット」を設定します。

「⑤」でメモ帳にコピーした、「クライアント ID」と「クライアント シークレット」をそれぞれ設定します。
設定後、[完了]ボタンを押します。

 


 

⑧「アドインを発行する」画面に戻ります。

[編集]ボタンの横の、警告マークが消えていることを確認します。

 

 

⑨[Web プロジェクトを配置する]ボタンを押します。

 


 

 

 

 

 

 

 

 

 

 

⑩「Web を発行」画面が表示されます。

[プレビューの開始]ボタンを押して、配置するモジュールを確認します。

 


⑪[発行]ボタンを押して、Azure上に発行します。​

  
Visual Studio 2015の「
Azure App Service のアクティビティ」ウィンドウ、「出力」ウィンドウに成功したことが表示されるのを確認します。

 

 



 

4.SharePointアドイン発行用のアドインパッケージを作成します。

作成した「Provider​​ Hosted App」アドインを、SharePoint Online上のアプリとして発行するために、アドインパッケージを作成します。


①[アドインをパッケージ化する]ボタンを押します。

 

      
         

 

 

 

 

 

 

②「アドインのパッケージ化」画面が表示されます。

「Web サイトがホストされている場所」として、
https://<上で設定したアプリドメイン>
とします。
必ず、「https」とします。​
「アプリのクライアント ID」が、「⑥」で設定した「クライアント ID」と一致していることを確認します。
設定後、[完了]ボタンを押します。

 
 

 ③「アドインパッケージ」が作成されます。

 


 

5.SharePointアドインを発行します。

作成したアドインパッケージを使用して、「Provider Hosted App」アドインを、SharePoint Online上のアプリとして発行します。


①「SharePoint アドイン開発用サイト」を表示します。

ブラウザを開き、SharePoint アドイン開発用サイトにアクセスします。

 

②「テスト中のアプリ」を表示します。

 


 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
③「テスト中アプリ」画面にて、[展開する新しいアプリ]リンクをクリックします。
 

 
④「アプリの展開」ダイアログが表示されますので、アドインを展開します。

[アップロード]リンクをクリックします。

  
「4-③」で作成した、アドインパッケージをアップロードします。

 


[OK]ボタンを押します。​​​

 

[展開]ボタンを押して、SharePoint アドインを登録します。

 

[信頼する]ボタンを押します。

 
 

⑤「テスト中アプリ」画面に戻ります。

登録したアプリが展開されています。

 

 



6.発行したSharePointアドインを実行します。

以上で、「Provider Hosted App」アドインの作成と、SharePoint Online上にアプリとして発行する処理は完了しています。
実際に、動作を確認します。

 

 
①「テスト中アプリ」画面にて、「発行したアプリ」をクリックします。

 

 

②Azure上に発行した「Provider Hosted App」のアドインをホストするWebアプリケーションが表示されます。

URLが、Azure上に発行したWebアプリケーションのエントリーページであること、「SharePoint アドイン開発用サイト」のサイトタイトルが表示されることを確認します。
この様になっている場合は、「Provider Hosted App」の作成は正常に完了しています。

 

 


 

 

7.リモートデバッグの実行します。

「2-②」で、「Debug」を選択している場合は、リモートデバッグが行えます。​
 

 
①Visual Studio 2015の「サーバー エクスプローラー」で、Webアプリケーションを選択します。

Azureの[App Service]ー[<新規に作成したリソース>]の下に、作成したWebアプリケーションのリソースが表示されます。

 


 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
②右クリックしてショートカットメニューから、「デバッガーのアタッチ」をクリックします。

 

 


 

③Visual Studio 2015がデバッグモードになります。

ブレークポイントを置きます。

 

③発行したSharePoint アドインを実行します。

「6-①」と同様に、「テスト中のアプリ」画面から、アプリを実行します。
設定したブレークポイントがヒットすれば、ブレークします。
変数等の値を確認することができます。

 

 




以上のようにして、Webアプリケーションの外枠を作成することができます。

このWebアプリケーション内に、プログラムを追加して、再度、Azureへ発行することで機能を拡張していくことができます。



 

Share on Facebook
Share on Twitter
Please reload

RECENT POST
Please reload