593 views(since 2013/10/08)

Office 用アプリ(Apps for Office)でデモアプリを作る -Webサービス編(コンテンツアプリ)-

はじめに

弊社で企画中の Office用 アプリ(Apps for Office)のサンプル版を作成するために、検証サンプルプログラムを作成しています。

今回は以下のコンテンツパネルからWebService(HTTP)経由でデータベースのデータを取得・設定できるようになります。

app_for_office_webservice_02

手順

前提

  1. Excel 2013だけではなく、Excel Web App の両方で動作させるため、作業ウインドウアプリではなく、コンテンツ アプリで作成する必要があります。
  2. Server は、Windows Azure (Web Server、DB Server)を使用します。(Azureでなくても可能)
  3. クロスドメイン(Cross-Dmain)対応しなくてはいけません。(後で詳しくかきます)

データのやりとりがしたいので、Web サービス(Web Service)を使っていきます。
まだ慣れていないので、順序立ててやっていきます。

1) Office 用アプリ(Apps for Office)に、Web サービスを組み込む

1. Office 2013 用アプリのプロジェクトを作成します

2. Web サービス(Web Service)を追加する
プロジェクト上で右クリックして、「追加」 → 「新しい項目」 → 「Visual C#」 → 「Web」 → 「Web サービス」を選択

3. Web フォーム(Web Form)を追加する
プロジェクト上で右クリックして、「追加」 → 「新しい項目」 → 「Visual C#」 → 「Web」 → 「Web フォーム」を選択

ひととおり追加したら、こんなかんじになる
app_for_office_webservice_04

・OfficeAppWebService.html (Web フォームを使うため、使用しない)
・Test.aspx (追加した Web フォーム)
・WebService1.asmx (追加した Web サービス)

Web フォームに「ScriptManager」を追加して、プロパティから「Service」を選択します。
メンバーを追加して、「Path」項目を、「Web サービス」のファイルを設定します。
app_for_office_webservice_01

【マニフェストファイル : OfficeAppWebService.xml】

<?xml version="1.0" encoding="UTF-8"?>
<!--Created:cb85b80c-f585-40ff-8bfc-12ff4d0e34a9-->
<OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:type="ContentApp">
  <Id>a44000b8-0478-468e-9046-4fe25a4c383c</Id>
  <Version>1.0</Version>
  <ProviderName>kueno</ProviderName>
  <DefaultLocale>en-US</DefaultLocale>
  <DisplayName DefaultValue="OfficeAppWebService" />
  <Description DefaultValue="OfficeAppWebService Description"/>
  <Capabilities>
    <Capability Name="Workbook" />
  </Capabilities>
  <DefaultSettings>
    <!--<SourceLocation DefaultValue="~remoteAppUrl/Pages/OfficeAppWebService.html" />-->
    <SourceLocation DefaultValue="~remoteAppUrl/Test.aspx" />
    <RequestedWidth>400</RequestedWidth>
    <RequestedHeight>400</RequestedHeight>
  </DefaultSettings>
  <Permissions>ReadWriteDocument</Permissions>
</OfficeApp>

※Pages にある html ファイルを呼ばずに、追加した Web フォームの aspx を呼びます。(コメントアウトの部分)

【Web サービス : WebService1.aspx.cs】

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

namespace OfficeAppWebServiceWeb
{
    /// <summary>
    /// WebService1 の概要の説明です
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]

    // この Web サービスを、スクリプトから ASP.NET AJAX を使用して呼び出せるようにするには、次の行のコメントを解除します。
    [System.Web.Script.Services.ScriptService]
    public class WebService1 : System.Web.Services.WebService
    {
        [WebMethod]
        public string HelloWorld()
        {
            return "Hello World";
        }
    }
}

※Defaultでは、[System.Web.Script.Services.ScriptService]はコメントアウトされているので、コメントを外します

【Web フォーム : Test.aspx】

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="OfficeAppWebServiceWeb.Call" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript" language="javascript">
        function onButtonClick() {
            OfficeAppWebServiceWeb.WebService1.HelloWorld(AddSuccess, null, null);
        }

        function AddSuccess(result) {
            target = document.getElementById("output");
            target.innerHTML = result;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <input type="button" value="Test" onclick="onButtonClick();" />
    </div>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Services>
            <asp:ServiceReference Path="WebService1.asmx" />
        </Services>
    </asp:ScriptManager>
    </form>
    <div id="output"></div>

</body>
</html>

組み込めたので、F5実行してみた。
Excel 上でコンテンツパーツとして配置、表示されました。
app_for_office_webservice_02

「Test」ボタンを押すと、テキスト「Hello World」が表示されます。
app_for_office_webservice_03

組み込んだ Web サービスも問題なく動作したので、
次回は、DB Server から実際にデータを取得して表示してみます。

Filed Under: Office Add-ins

Tags:

About the Author

Leave a Reply




If you want a picture to show with your comment, go get a Gravatar.