松崎 剛 Blog

This Blog's theme : エンタープライズ開発 (Server side)、Office サーバ開発

SharePoint 2013 Apps : App part の開発

SharePoint 2013 Apps : App part の開発

  • Comments 0

環境 :
Office 365 (Preview)
Visual Studio 2012
Microsoft Office Developer Tools for Visual Studio 2012 (Preview)

SharePoint 2013 Apps 開発

こんにちは。

今週は、予告通り、App Part の動作と開発手法について解説します。

すみません、既に Microsoft Office Developer Tools Preview2 がリリースされたのですが、今週は出張中でして、次回から使用したいと思います。(今週は知識注入中。。。インストールとか検証は、また来週以降に実施します。)

 

App Part (Client Web Part) の超概要

App Part は、Apps 版の Web Part です。
SharePoint Apps の概要 で解説したように、新しい Apps では、リモート実行のモデルを採用しています。Web Part も例外ではなく、Remote の実行モデルを踏襲し、Parts として挿入される UI 要素は iframe を使って挿入するようになっていて、この iframe の中のページを、Azure など、リモートで実行される Web ページとして開発します。
(このため、いくつか留意点がありますが、後ほど記載します。)

 

App Part (Client Web Part) の構築手順

では早速、構築方法と動作を見ていきましょう。後述しますが、今回は、前回の「.NET CSOM を使ったプログラミングと認証」で作成したコードをそのまま活用します。

まず、前回の「.NET CSOM を使ったプログラミングと認証」と同じ手順で、Provider-hosted の Remote App のプロジェクトを新規作成します。
また、「.NET CSOM を使ったプログラミングと認証」と同様、SharePoint サイト (Host web) にアクセスして、ページ (Default.aspx) 上にサイトのタイトルを表示する簡単なページを作成します。(プロジェクトが作成する既定のコードのままでも構いません。)
前回作成したコードを復習すると、下記の通りです。(書き写すの大変なので、認証部分は省略して記載します。)

. . .

protected void Page_Load(object sender, EventArgs e)
{
  // ready JsonWebSecurityTokenHandler
  . . .

  // Create JsonWebSecurityToken from JWT string
  . . .

  // Get principalName from JWT
  . . .

  // Get OAuth refresh token from JWT
  . . .

  // Get app realm from JWT
  . . .

  // Get host web authority
  . . .

  // Get sts endpoint for OAuth S22
  . . .

  // Get access token from refresh token
  . . .

  // Get web title
  ClientContext clCtx = new ClientContext(hostWeb);
  clCtx.AuthenticationMode = ClientAuthenticationMode.Anonymous;
  clCtx.FormDigestHandlingEnabled = false;
  clCtx.ExecutingWebRequest +=
    delegate(object oSender, WebRequestEventArgs webRequestEventArgs)
    {
      webRequestEventArgs.WebRequestExecutor.RequestHeaders["Authorization"]
        = "Bearer " + accessToken;
    };
  clCtx.Load(clCtx.Web, web => web.Title);
  clCtx.ExecuteQuery();

  Response.Write("Web title is " + clCtx.Web.Title);
}
. . .

つぎに、プロジェクトに App Part を追加します。
App プロジェクト (・・・Web という名前の Web プロジェクトではありません) をマウスで右クリックして、[Add] - [New item] を選択します。表示されるダイアログで、[Office/SharePoint] グループの [Client Web Part (Host Web)] を選択して、[OK] ボタンを押します。(下図)

作成された App Part (Client Web Part) の Elements.xml を開くと、以下の通り記述されています。

<Elements xmlns=". . .">
  <ClientWebPart
    Name="ClientWebPart1" ...>
    <Content Type="html"
      Src="" />
    . . .

  </ClientWebPart>
</Elements>

前述の通り、App Part は iframe で表示されます。上記の Src 属性に、iframe で表示する Web ページの Url を設定します。
今回は、下記太字の通り、ここに Remote App の Default.aspx (先ほどコードを記載したページ) を設定します。

<Elements xmlns=". . .">
  <ClientWebPart
    Name="ClientWebPart1" ...>
    <Content Type="html"
      Src="~remoteAppUrl/Pages/Default.aspx?{StandardTokens}" />
    . . .

  </ClientWebPart>
</Elements>

上記の記述方法に注意してください。
.NET CSOM を使ったプログラミングと認証」で紹介した AppManifest.xml と同じように、~remoteAppUrl や {StandardTokens} などのトークンが使用できます。(ここに、「.NET CSOM を使ったプログラミングと認証」で解説した内容と同じ情報が設定されます。) また、「.NET CSOM を使ったプログラミングと認証」と同じように、JWT を含んだ token もページに POST されます。
即ち、前回使用した Default.aspx のコード (上述のコード) は、いっさい変更することなく、そのまま使用できます。(Host web にアクセスをおこなって、サイトのタイトルを取得できます。)

なお、今回は ~remoteAppUrl トークンを使用していますが、~appWebUrl トークンを使って App web (sharepoint-hosted) の Page (Page Module) を使用することもできます。(この場合は、すべて JavaScript で記述してください。)

 

配置と動作確認

再度、上述の Elements.xml を開き、App Part の名前、説明などを下記 (太字) の通り編集します。

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <ClientWebPart
    Name="ClientWebPart1"
    Title="Test AppPart1"
    Description="This is test !"
    DefaultWidth="300"
    DefaultHeight="200">
    . . .

さいごに、いつものように Permission の設定をおこなって、デバッグ実行してみましょう。

配置先の SharePoint サイト (Host web) で Page を新規作成し、リボンの [Insert] タブの [App part] ボタンを押すと、下図の通り、カスタムの App Part が表示されます。[Add] ボタンを押して、この App Part をページに挿入します。

挿入すると、「.NET CSOM を使ったプログラミングと認証」と同様に、SharePoint サイトのタイトルが表示されます。
今回はデバッグ実行をおこなっているので、この App は localhost で実行されています。つまり、この Parts は、前述の通り localhost の iframe として表示されています。
.NET CSOM を使ったプログラミングと認証」で解説したように、localhost から JWT を使用して OAuth の認証をおこない、Office 365 (SharePoint Online) のサイトに接続して、タイトルを取得しています。(ただ単にタイトルを出しているだけですが、結構な処理を裏側でおこなっているわけです。)

補足 : IE の F12 開発者ツールで確認するとわかりますが、実際は、下記の ifarme が挿入され、Remote App (今回は、localhost) にリダイレクトされます。(この際、必要なトークンの情報などが POST されています。)
https://<host web>/_layouts/15/appredirect.aspx?redirect_uri=<Remote App with Query String>

注意 : デバッグ実行をおこなった際、App part の挿入時に Internet Explorer の警告 (Internet Explorer blocked this website from displaying content with security certificate errors) が表示されると思います。(下図)
これは、https://localhost にリダイレクトする際、IIS Express が使用している SSL (https) の証明書 (開発用の証明書) がクライアントにインストールされていないためです。このためデバッグ時は、「.NET CSOM を使ったプログラミングと認証」と同様、この証明書を、あらかじめ、ルート (Trusted Root Certification Authorities) にインストールしておいてください。


 

カスタム プロパティの使用

以前、「SharePoint における実用的なカスタム Web パーツ (WebPart) の開発」で解説したように、SharePoint 2010 の WebPart ではカスタム プロパティを使用できました。App Part でも、同じようにカスタム プロパティが使用できます。

例えば、上記の App Part に Append Text というカスタム プロパティを追加し、このプロパティが設定されている場合、Parts に「Web title is <Site Title>(<Value of Append Text>)」と表示してみましょう。

まず、さきほどの Elements.xml に、下記太字の通り追記します。

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns=". . .">
  <ClientWebPart
    Name="ClientWebPart1" ...>

    <Content Type="html"
         Src="~remoteAppUrl/Pages/Default.aspx?{StandardTokens}&amp;AppendTest=_appendtest_" />

    <Properties>
      <Property Name="appendtest"
        Type="string"
        WebBrowsable="true"
        WebDisplayName="Append Text"
        WebDescription="This is test property !"
        WebCategory="Custom Properties"
        DefaultValue=""
        RequiresDesignerPermission="true" />
    </Properties>

  </ClientWebPart>
</Elements>

上記のプロパティ (AppendText) を使用して、コードを変更します。今回は、以下 (太字) の通りです。(プログラマーの方なら、特に説明は不要ですね。)

protected void Page_Load(object sender, EventArgs e)
{
  . . .

  // Get web title
  . . .

  string prop1 = Page.Request["AppendTest"];
  Response.Write("Web title is " + clCtx.Web.Title +
    (string.IsNullOrEmpty(prop1) ? "" : "(" + prop1 + ")"));
}

動作を確認してみましょう。
上記と同様、ページに App Part を挿入し、今度は、下図の通り [Edit Web Part] メニューを選択します。

表示されるプロパティ画面には、下図の通り、Append Text という名前のカスタム プロパティが表示されます。

上記に「test」と入力して [OK] ボタンを押すと、下図の通り App Part が再表示されるのが確認できます。

今回は String 型のプロパティを 1 つ追加しただけですが、さまざまな型のプロパティが追加できます。(型にあわせて、専用のコントロールが表示されます。)

 

Windows Azure のトライアル (無償試用) について

 

Leave a Comment
  • Please add 5 and 3 and type the answer here:
  • Post