Office 用アプリの開発概要

株式会社マジックチューブ渡辺 博理

構成の変化これまでの構成　＝　　自前 DC

　　　　　　　　　＋　ネットワーク　　　　　　　　　＋　サーバマシン　　　　　　　　　＋　サーバサイドのインストール　　　　　　　　　　　　（ OS

　　　　　　　　　　　　＋ DB

　　　　　　　　　　　　＋アプリケーション）　　　　　　　　　＋　クライアント機器のインストール 　　　　　　　　　　　　（ OS

　　　　　　　　　　　　＋ Office

　　　　　　　　　　　　＋アプリケーション）

Windows ServerSQL SeverExchangeIISアプリケーション

WindowsOfficeIE

構成の変化今朝デプロイした構成　＝　調達　　　　　　　　　　（ Windows Azure

　　　　　　　　　＋　 Office 365 ）　　　　　　　　　＋　 ASP.NET MVC/WebAPI アプリ　　　　　　　　　＋　クライアントデバイスの調達

Azure WebSitesSQL DatabaseExchange Onlineアプリケーション

構成の変化• 認証サーバ

オンプレ・独自認証基盤 → Windows Azure Active Directory, Google, Facebook, Twitter

• アプリケーションスクラッチ Web アプリ → 簡略化された Web アプリ , （そして LightSwitch ）

• メールオンプレ・メールサーバ → Exchange Online

• データ共有オンプレ・ファイルサーバ → SharePoint Online

構成の…

　　古くからある Office 、　　慣れ親しんだ Office 、

　　 Web サイトから CSV ダウンロード → Excel で読み込み → 成形 → 印刷

　　構成の変化に対応すると…

構成の変化！

　　古くからある Office 、これからも活躍する Office!

　　慣れ親しんだ Office 、これからも同じ操作が活かせる Office!

　　 Excel の中に Web サイトをホスト → データをシートへ読み込み！

目的• Office 用アプリが稼働する構成を知る• Office 用アプリの開発の概要・流れを知る

目次• Office 用アプリの実態は「 Web アプリケーション」• 配布パターンと構成の概要

• インターネットで配布する• 企業内ネットワークで配布する（本日のデモ構成）• SharePoint 内で配布する

• アプリケーションの種類• Excel 向け作業ウィンドウアプリの開発（デモ）• コード記述の流れ

Office 用アプリの実態は「 Web アプリケーション」• HTML + CSS + JavaScript = Office 用アプリ

Web サーバ データベースWeb ブラウザ

Office クライアント（ Excel 等）

内ブラウザ

• Office クライアントと対話するためのランタイムを搭載したブラウザInternet Explorer 9 以上をコンポーネントとして使用する

• 対話は JavaScript API for Office を介してのみ可能

Office Web App内 <iframe>

• Office 365 の Office Web App 上でも稼働• Apps for Office 稼働のための <iframe> サンドボックスが作成される

配布パターンと構成の概要• Web アプリケーション ＋ マニフェストファイル ＝ Office 用アプリ• 配布パターン（マニフェストへのアクセス方法の種類）

1. インターネット（ Office ストア） 2. 企業内ネットワーク 3. SharePoint 内で配布する

Office ストア

マニフェスト

Office クライアント

Web アプリケーション

• URL の解決• アプリの種別情報の取得• パーミッション情報の取得

参照

ファイルサーバ

マニフェスト

「アプリカタログ」サイト

マニフェスト

対コンシューマ 対社内（オンプレ） 対社内（オンプレ・ Office 365 ）

アプリケーションの種類1. 作業ウィンドウアプリ　　　 2. コンテンツアプリ　　　　 3. メールアプリ

　　 Web アプリとドキュメントの　　　　　　　ワークシート内に図形やグラフと　　　　メールの内容で自動選択され　　相互運用　　　　　　　　　　　　　　　　 同様に配置し相互運用　　　　　　　　　表示される

• Word および Project は作業ウィンドウアプリのみ実行可能。• Excel はコンテンツアプリ・作業ウィンドウアプリ共に実行可能。• メールアプリは Outlook 内で実行される。実行には Exchange サーバへのインストールが必要となる。

※ 作業ウィンドウアプリおよびコンテンツアプリと、メールアプリでは、マニフェストも API も一部別体系。

Excel 向け作業ウィンドウアプリの開発（デモ）今回は「企業内ネットワークへの配備」パターンをデモします。　　　　→ ファイルサーバへのマニフェストファイルの配備

流れ1. マニフェストの配備

1. マニフェストファイルの作成2. フォルダを「共有」しマニフェストファイルを配備する3. Excel の設定：「信頼できるアプリカタログ」へ UCN パスを設定する4. ワークブックへアプリを読み込む

2. Web アプリの開発と配備1. MVC や WebForms など、どのようなフレームワークでも OK

2. JavaScript API を HTML 中で参照するhttps://appsforoffice.microsoft.com/lib/1.0/hosted/office.js

マニフェスト概要• 主要タグ

• <Id> ユニークな ID 。定義上は UUID 。• <Version> アプリケーションのバージョン。• <ProviderName> アプリケーションの提供者の名称。社名・部署名など。• <DefaultLocale> ロケール文字列の指定。日本語・日本は「 JA-JP 」• <DisplayName>, <Description> DefaultValue 属性にて、アプリケーション名と詳細説

明を指定する。アプリケーションのランチャにて表示される。• <Capabilities>/<Capability> Excel の場合は Name 属性に「 Workbook 」を指定する。

その他、 Document, Presentation, Project を含め、複数指定可能。• <DefaultSettings>/<SourceLocation> DefaultValue 属性にて、アプリケーションの

URL を指定する。• <Permissions> API のパーミッションを定義する。作業ウィンドウアプリ・コンテンツアプ

リ・メールアプリによって、指定できる値が異なる。

フォルダを共有• マニフェストファイルを保存した

フォルダを共有する。

Excel の設定• 「信頼できるアプリカタログ」に、共有フォルダへの UCN を追加する。

※ Excel の再起動を行う。

ワークブックにアプリを読み込む• 「 Office 用アプリ」を押下。

• 「共有フォルダー」を選択し、目的のアプリを「挿入」

デモアプリの概要• 「従業員リスト」のエディタとして Excel を使用する。• 項目は「従業員番号」「所属部署」「氏名」• アプリの役割

• 一覧の表示• 1件分を Excel 上のセルへコピーする。• Excel 上の 1件分を取得し、アプリ画面上へ表示する。

→ 本来の従業員リスト変更機能であれば DB を更新する。• Excel の役割

• フォームとなる”隣接するセル群”に名前を付ける。→ フォームを Excel の役割とすると、専用の Excel ブックが必要となる。

コード記述の流れ1. jQuery などのサードパーティ製ライブラリ・ JavaScript API for Office をロー

ドする。2. Office オブジェクトの初期化コードを実行する。3. Excel 中の「表」や「マトリクス」を JavaScript API に認識させる（バインドす

る）。4. Web アプリから Excel へデータをコピーする。5. Excel から Web アプリへデータをコピーする。

→ Web アプリケーションは SPA に近いモデルとなる。　 Web サーバとの通信は API ベースとなり、サーバ側に、 API の実装が求められる。

1. JavaScript ファイルのロード<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>

<script type="text/javascript" src="http://appsforoffice.microsoft.com/lib/1.0/hosted/office.js"></script>

※ ASP.NET の CDN からは提供されていない。

2. 初期化コードOffice.initialize = function (reason) {

$(function () {

// 初期化コード });

};

• グローバルにて Office.initialize に無名関数をアサインする。• jQuery の初期化ブロックの記述は無名関数中で行う。

• jQuery の初期化ブロック中で Office.initialize にアサインをしても実行されないことがある。（タイミングの問題）

• reason パラメータでアプリケーションの起動・再開ステータスが確認できる。• Office 上で表示される可能性のあるすべてのページに、初期化コードが必要。

3. 表やマトリクスの認識（バインディング）Office.context.document.bindings.addFromNamedItemAsync(

"employee", "matrix", { id: "employee" },

function (ar) {

if (ar.status == “succeeded”) // 成功 else // 失敗 }

);

実行結果はコールバック関数にて受け取る。 表・マトリクスの名称

種別表： table名前を付けた 2 次元のエリア：matrixテキスト： text

JavaScript API for Office を介してアクセスする際の ID値（異なる名称を付けてもよい）

4. Web アプリから Excel へデータをコピーするvar data = [

[employee.number],　　　// data[0][0] 1列1行目 [employee.department],　// data[1][0] 1列2行目 [employee.name]　　　　　// data[2][0] 1列3行目];

Office.select("bindings#employee").setDataAsync(

data, { coercionType: "matrix" },

function (ar) {

if (ar.status == “succeeded”) // 成功 else // 失敗 }

);

• データは、 2 次元配列として指定する。 Excel シートのセルのイメージと同様の構造。• null は指定できない。空文字

列””を指定する。• 式を文字列として指定できる。“=C1+C2” など

• バインドしたエリアへのアクセスは、” bindings#<ID 名 >” で行う。

5. Excel から Web アプリへデータをコピーするOffice.select("bindings#employee").getDataAsync(

{ coercionType: "matrix" },

function (ar) {

if (ar.status != "succeeded") return;

var data = ar.value;

var number = data[0][0]; // 1列1行 var department = data[1][0]; // 1列2行 var name = data[2][0]; // 1列3行 }

);

• バインドしたエリアへのアクセスは、” bindings#<ID 名 >” で行う。

• 値はコールバック関数で受け取る。

• データは 2 次元配列として取得される。 Excel のセルのイメージと同様の構造。

Excel をターゲットに その他できること（一例）• ユーザが選択したセルのデータを読み取る。• ユーザが選択した範囲内にデータを書き込む。• ユーザの範囲選択変更イベントをハンドリングする。• ドキュメントファイルをバイナリで取得する。

TIPS

• Excel側• データバインドの対象領域の数は少なめに。 Office Web App 上では速度に難あり。• 「名前」リスト中に無効な範囲が含まれるなどしてエラーとなる「名前」が存在した場

合、該当の「名前」をバインドの対象にしなくても、英語版 Excel ではバインド処理時にエラーとなる。

• Web サイト側• Excel 中に表示される可能性のある HTMLページすべてで、 Office.initialize に初期化

コードを与える必要がある。怠ると、 Office Web App 上で動作しない。• JavaScript コード

• null はバインドできない。空文字列 ”” を指定する。• ”=C1+D1” のように、式を文字列として指定できる。

TIPS ：日時データの変換日時を扱うアプリケーションの場合、 Excel の日時シリアル値と、 JavaScript のDate オブジェクトの間で相互に変換する必要がある。• JavaScript → Excel

日付文字列として指定する。” yyyy/MM/dd HH:mm:ss”

• Excel → JavaScript

JavaScript側が取得できるのは、 Excel の内部表現である「日時シリアル値」である。※ JavaScript で日時を扱うならば、変換しなければならない！

TIPS ：日時データの変換データの構造を理解する

1. Excel のシリアル値：浮動小数• 整数部が基準日からの日数（正しくは、「 1900/1/1 」 =1 ）• 小数部が、 24時間に対する割合である。（昼の 12時＝ 0.5 ）

2. Date オブジェクト：整数• 基準日時（ 1970/1/1 00:00:00 ちょうど）からの経過ミリ秒である。

方針：• Excel のシリアル値を整数部と小数部に分ける。• 整数部（日数）を Date オブジェクトの基準日からのミリ秒に変換する。• 小数部を、 1 日分のミリ秒と掛ける。• 上記 2つを合算し、 Date.setTime() で Date オブジェクトに日時を指定する。

TIPS ：日時データの変換var oneDayInMilliseconds = 86400000; // 1 日分のミリ秒

// 1900/1/1 が 1 ということは、 1899/12/31 が 0 である。

var excelOriginDateInMilliseconds = new Date(1899, 11, 31).getTime();

var val1 = Math.floor(excelDateTimeSerialValue); // Excel シリアル値の整数部分

var val2 = excelDateTimeSerialValue - val1; // Excel シリアル値の小数部分

// 日付部分から 1 日引く。// 2013/10/26 10:00 は、数量的には「 2013/10/25 までの日数 と 10 時間」という意味である。

var day = oneDayInMilliseconds * (val1 - 1);

var time = oneDayInMilliseconds * val2;

var dateTime = day + time + excelOriginDateInMilliseconds;

// Date オブジェクトの生成

var result = new Date();

result.setTime(dateTime);

参照• Office 用アプリの作成

http://msdn.microsoft.com/ja-jp/library/office/apps/jj220060.aspx

• Office 用アプリの概要http://msdn.microsoft.com/library/office/apps/jj220082(v=office.15)

• Office 用アプリの XML マニフェストの概要http://msdn.microsoft.com/JA-JP/library/office/fp161044.aspx

• JavaScript API for Office

• JavaScript API for Office についてhttp://msdn.microsoft.com/JA-JP/library/office/apps/fp160953.aspx

• API マップhttp://zoom.it/z8mb#full

ありがとうございました。ご質問等ありましたらお声かけください。

株式会社 マジックチューブ渡辺 博理（わたなべ ひろただ）

ブログ「 origin809 」http://origin809.wordpress.com/