はじめに
弊社で企画中の Office用 アプリ(Apps for Office)のサンプル版を作成するために、検証サンプルプログラムを作成しています。
今回は以下のコンテンツパネルからWebService(HTTP)経由でデータベースのデータを取得・設定できるようになります。
手順
前提
- Excel 2013だけではなく、Excel Web App の両方で動作させるため、作業ウインドウアプリではなく、コンテンツ アプリで作成する必要があります。
- Server は、Windows Azure (Web Server、DB Server)を使用します。(Azureでなくても可能)
- クロスドメイン(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 フォーム」を選択
・OfficeAppWebService.html (Web フォームを使うため、使用しない)
・Test.aspx (追加した Web フォーム)
・WebService1.asmx (追加した Web サービス)
Web フォームに「ScriptManager」を追加して、プロパティから「Service」を選択します。
メンバーを追加して、「Path」項目を、「Web サービス」のファイルを設定します。
【マニフェストファイル : 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 上でコンテンツパーツとして配置、表示されました。
「Test」ボタンを押すと、テキスト「Hello World」が表示されます。
組み込んだ Web サービスも問題なく動作したので、
次回は、DB Server から実際にデータを取得して表示してみます。
コメントを残す