Office & Office 365 Development Sample (Cloud 開発サンプル)


こんにちは。

さて、今日は、Office Open XML、および、以前セミナーでもご紹介した Office 365 で動くクラウド アプリケーションの開発サンプル (サンプル アプリケーション) をご紹介します。

ソースコードは、最後に添付しておきました。まずは使ってみて、どのような開発が可能か、イメージをつかんでください。

 

Office 文書作成 (Office サンプル アプリケーション)

[デモ サイト] http://cloudstoragesample.azurewebsites.net/

Office OpenXML SDK を使って、Word ファイルを動的に作成 (自動作成) するサンプル アプリケーションです。Web で入力された内容に従って、インメモリー上で Word ファイルを自動作成します。

使い方は、以下の通りです。

ブラウザーで上記のサイトを表示すると、下図の請求書入力フォーム (Web フォーム) が表示されます。

上図で、氏名、郵便番号、住所、電話番号、メールアドレスを入力して、[次へ進む] ボタンを押します。
表示される画面で内容を確認して、[請求書を表示] ボタンを押し、ダウンロードされるファイルを開きます。

Microsoft Word (Word 2007 以上) が起動し、上記で入力した内容に応じて Word 文書が自動生成されているのが確認できます。

このアプリケーションは、Windows Phone を使っても、同様に、Word ファイルを開いて確認できます。(Windows Phone の Office Hub に入っている Office Mobile が使用されます。)
作成されたファイルに簡単な修正などをおこなって、OneDrive (SkyDrive) や SharePoint Online に保存できます。(そして、あとから、家や会社のパソコンで、細かな編集作業が継続できます。)


(Windows Phone : 左が Web の入力、右が生成された Word ファイル)

例えば、Windows Phone の開発言語 (Silverlight) には OpenXML SDK (もしくは、System.IO.Packaging 名前空間) は提供されていませんが、このようにクラウド (Windows Azure) 上のサービスを経由して、Office ファイル (Excel、Word など) を扱ったスマートフォン アプリケーションを構築することも可能です。

Office OpenXML (OOXML) を使用した開発手法については、「Office 開発入門 "10行でズバリ !"」を参照してください。

 

SharePoint Online へのファイル保存 (SharePoint Online サンプル アプリケーション)

2014/05 追記 : 最新の開発環境では、後述する Office 365 API が使用できます。(本サンプルでは、WS-Trust を使用しています。)

[デモ サイト] http://cloudstoragesample.azurewebsites.net/

SharePoint Online と連携して動作するサンプル アプリケーションです。(今回は、ファイルの保存をおこないます。)

上記と同じアプリケーション (Word のサンプル) で、今度は、[クラウド ストレージへ保存] ボタン (上図参照) を押すと、作成したドキュメント (Word 文書) を SharePoint Online に保存するための画面 (下図) が表示されます。
この画面に、お使いの SharePoint Online のサイトの URL と、ユーザー ID (アカウント)、パスワードを入力すると、サイトのドキュメント ライブラリーの一覧が選択可能になるので、保存先のドキュメント ライブラリーを選択して [Save] ボタンを押します。

上記のドキュメント (Word 文書) は、SharePoint Online に保存されます。Office Online を使って、内容を確認できます。

SharePoint Online 連携は、現在、Office 365 API (OAuth / REST の API) が使用できます。ここで使用している WS-Trust を使った連携については、「AD FS フェデレーションを処理する Client Programming (Office 365 編)」を参照してください。また、OneDrive のプログラミングによる認証 (OAuth との連携) については、「OneDrive (SkyDrive) REST API を使った Web アプリケーション開発」を参照してください。

 

Excel、Word 上で動くクラウド アプリケーション (Office アドイン)

[ダウンロード] App.xml

Office Online を使用する場合は OneDrive、デスクトップ版の Office を使う場合は Excel 2013, または Word 2013 以上が必要です。
まずは、Office アドイン (Office Add-ins) を使用するための設定をおこないます。(通常は、Office ストアから検索してインストールできます。)

まず、上記の App.xml をローカルにダウンロードしてください。

Office Online (Excel Online) を使う場合は、OneDrive にログインして Excel ブックを新規作成し (または、既存の Excel ブックを編集モードで開き)、Excel Online のリボンの [Insert] (挿入) - [Office Add-ins] (Office アドイン) を選択します。
表示される画面で [Manage My Add-ins] (マイ アドインの管理) - [Upload My Add-in] (マイ アドインのアップロード) を選択するとファイル選択の画面が開くので、ここで上記でダウンロードした App.xml を選択します。

デスクトップ版 (Windows, Mac) の Excel を使う場合は、あらかじめ Windows の共有フォルダーを作成し、上記の App.xml をこの共有フォルダーに配置 (コピーなど) します。
つぎに、Excel を起動し、[ファイル] - [オプション] メニューを選択します。表示されるオプション画面で、[セキュリティ センター] タブを選択して、[セキュリティ センターの設定] ボタンをクリックしてください。

表示される画面で、[信頼できるアプリ カタログ] タブを選択して、ここに上記の共有フォルダーを追加します。([メニューに表示する] のチェック ボックスも選択しておいてください。)

Excel を再起動し、リボンの [挿入] タブの [個人用アプリ] (または、[My アドイン]) を選択します。表示される画面で、[共有フォルダー] を選択すると、下図の「Test App」があるため、これを挿入します。

このアプリでは、リクルート株式会社 ATND API (http://api.atnd.org/) を使用して日本のイベント (セミナー) の検索をおこない、Office 文書に挿入できます。
作業ウィンドウ (右) にイベント検索画面が表示されますので、ここで イベントを検索して、[Add] リンクをクリックします。Excel シートの選択されている箇所に、選択したイベントの内容が表形式で挿入されます。

このアプリは、Word でも使用できます。同様に、Word 上にこのアプリを挿入して、アプリの [Add] ボタンを押すと、Word 文書に、イベントの情報が表として挿入されます。

Office アドイン (Office Add-ins) の開発手法については、「@IT : Office ストアで世界に飛び出そう! 最新 Office 2013 アプリ開発入門 (全 3 回 連載)」が参考になります。

 

SharePoint Online、SharePoint Server 上で動くクラウド アプリケーション (SharePoint アドイン)

[ダウンロード] SP2013AppsDemo.app

SharePoint 2013 以上の SharePoint Server、または、SharePoint Online が必要です。

まず、SharePoint 2013 のアプリ カタログ (App Catalog) に、上記の .app ファイルを登録 (追加) します。
Office 365 (SharePoint Online) の場合は、SharePoint 管理センター (SharePoint admin center) の画面を開き、[アプリ] (apps) を選択し、[アプリ カタログ] (App Catalog) をクリックするとアプリ カタログを表示できます。
SharePoint Server (On-Premises) の場合は、[サーバーの全体管理] (Central Administration) 画面の [アプリ] (apps) - [アプリ カタログの管理] (Manage App Catalog) から アプリ カタログを表示できます。(ただし、SharePoint Server では、事前に App Catalog のセットアップ が必要です。)

 

つぎに、このアプリをサイトに追加します。
サイトを開き、[サイト コンテンツ] をクリックして、表示される画面で [アプリの追加] をクリックします。すると、下図の画面が表示され、サイトに上記のアプリ (SP2013AppsDemo) が追加できます。(このアプリをクリックして追加してください。)

追加したアプリを選択すると、下図の「開催場所リスト (首都圏版)」が表示されます。

このリストでは、アイテムの新規作成時に、タイトルに「ビックサイト」、「パシフィコ横浜」、「幕張メッセ」などの実在の会場名を入力すると、Bing Maps に問い合わせをおこなって、その住所を自動設定します。(ただし、「都道府県」欄と「その他住所」欄が空になっている必要があります。)

登録した会場の所在地が、東京都、神奈川県、千葉県、埼玉県のいずれかの場合、首都圏の地図上に会場がマップされます。

リストからアイテム (会場) を 1 つだけ選択すると、リボンの [場所の表示] ボタンがクリックできますので、このボタンをクリックします。

会場の地図が、Bing Map で表示されます。
ここで、住所 (テキスト) を変更すると地図が変更され、また、地図をマウスで右クリックすると、住所 (テキスト) が選択した位置の情報に変更されます。さらに、[Update address !] ボタンを押すと、変更した住所が SharePoint のリストに反映されます。

SharePoint アドイン (SharePoint Add-ins) の開発手法については、SharePoint アドイン開発の連載 を参照してください。

 

Outlook カレンダーへのスケジュール登録 (Office サンプル アプリケーション)

[デモ サイト] http://outlooksample.azurewebsites.net/

ASP.NET MVC を使って、Outlook の予定表を動的に作成し、Outlook に登録するサンプル アプリケーションです。リクルート株式会社 ATND API (http://api.atnd.org/) を使用して国内 (日本) イベントの一覧を取得し、取得した内容に従って、インメモリー上で Outlook 用の .ics ファイルを自動作成します。

使い方は、以下の通りです。

ブラウザーで上記のサイトを表示すると、下図の国内イベントの一覧が表示されます。(キーワードによる絞り込みができます。)

上図で、表示したいイベントの View リンクをクリックすると、そのイベントの詳細画面 (下図) が表示されます。

上図画面の下部の [Add to Outlook] を押すと、ブラウザーによりファイルのダウンロードが促されるため、下図の通り、[ファイルを開く] をクリックします。

Outlook のスケジュール登録画面が表示されるため (下図)、[保存して閉じる] を選択することで Outlook のカレンダーに予定 (スケジュール) が登録されます。(クライアントに、Microsoft Outlook が必要です。)

ASP.NET Web API を使用した Custom Formatter については、「Web Api で Custom MIME タイプを処理する」を参照してください。

 

メールの送受信 (Exchange Online サンプル アプリケーション)

2014/05 追記 : 最新の開発環境では、後述する Office 365 API が使用できます。(本サンプルでは、SOAP の Exchange Web Services を使用しています。)

[デモ サイト] http://mailsample.azurewebsites.net/

Office 365 の Exchange Online を使用したメールの送受信をおこなうアプリケーションです。(EWS Managed API を使用しています。)

ブラウザーで上記のサイトを表示し、表示される画面の [Log On] リンクをクリックして Exchange Online のメール アドレスとパスワードを入力すると、下図の通り、Inbox のメール一覧が表示されます。(この際、接続先のサーバー名は Autodiscover により検知されますので、入力の必要はありません。)
この画面では、メール受信時の通知もおこなわれます。(アイコンをクリックすると、Inbox の内容が更新されます。)

また、上図の [メール送信] ボタンを押すと、モーダル ポップアップが表示され、送信メールを作成できます。

このサンプル コードでは、ASP.NET MVC と jQuery (および、さまざまな jQuery プラグイン) を使用しています。アイテムの絞り込み検索など、さまざまな機能が実装されています。

Exchange Online (Outlook) 連携は、現在、Office 365 API (OAuth / REST の API) が使用できます。ここで使用している Exchange Web Service (EWS) と EWS Managed API を使用した開発手法については、「Exchange Online 開発 : EWS (Web サービス) による開発入門」を参照してください。

 

スケジュール / カレンダー連携 (Exchange Online サンプル アプリケーション)

2014/05 追記 : 最新の開発環境では、後述する Office 365 API が使用できます。(本サンプルでは、SOAP の Exchange Web Services を使用しています。)

[デモ サイト] http://calendarsample.azurewebsites.net/

このアプリケーションは、Office 365 の Exchange Online の予定表 (Calendar) と連携するアプリケーションです。(EWS Managed API を使用しています。)
Real-time Web と Exchange の Notification を使ったリアルタイムの通知をおこないます。

ブラウザーで上記のサイトを表示し、下部の [同期の設定] グループにある [Exchange Online (Office 365)] (下図) を選択すると、メール アドレスとパスワードを入力するダイアログが表示されます。このダイアログ ボックスに、実際の Exchange Online (Office 365) のアカウント情報を入力します。

すると、Exchange Online の実際の予定情報を取得し、この予定表 アプリケーション (ブラウザー上) に予定情報がマージされます。
ここで、接続先のサーバー名を入力していないことに気づくでしょう。ここでは、Managed API の AutoDiscover の API を使って、接続先のサーバーを自動検出しています。

さらに、Exchange Online 上で新規に予定を追加 (新規作成) すると、この予定表 アプリケーションに、リアルタイムにデータが反映されます。(ただし、変更や削除の際の同期機能は実装していません。)
なお、このデモでは、「同期」(Synchronization) ではなく、実際には 「通知」(Notification) の技術を使っていますが、Managed API を使えば「同期」のアプリケーション (途中まで連携し、翌日から連携の続きをおこなうようなアプリケーション) も簡単に構築できます。

Exchange Online (Outlook) 連携は、現在、Office 365 API (OAuth / REST の API) が使用できます。ここで使用している Exchange Web Service (EWS) と EWS Managed API を使用した開発手法については、「Exchange Online 開発 : EWS (Web サービス) による開発入門」を参照してください。
また、WebSocket などを使った Real-time Web の開発手法については、「WebSocket サーバー開発」を参照してください。

 

ヘルプ デスク (Skype for Business Online サンプル アプリケーション)

2015/02 追記 : 最新の開発環境では、Skype Web SDK (REST / JavaScript ベースの API) が使用できます。(本サンプルでは、.NET / Silverlight の Skype for Business SDK を使用しています。)

[デモ サイト] http://lyncsdksample.azurewebsites.net/ApplicationMain.htm

Skype for Business の拡張ウィンドウ (CWE) や、Contextual Conversation などを活用した、クラウド上の Help Desk アプリケーションです。このアプリケーションは、Skype for Business クライアントが動いている Windows PC 上で Internet Explorer を使って動作させてください。

まず、ブラウザーで上記のサイトを表示すると、下図のように、モジュールのダウンロードが促されますので、このリンクをクリックしてインストールをおこなってください。(インストールされた内容は、[プログラムと機能] から簡単にアンインストールできます。)

補足 : この際、Internet Explorer 9 では、「DemoCWESetup.msi はダウンロードしたユーザーの人数が少ないため、コンピューターに問題を起こす可能性があります」と表示されますが、無視して、[操作] ボタンからインストールを実行してください。

ブラウザーをすべて閉じ、再度、上記のサイトを表示すると、今度は、上図でグレー アウトされていた [問い合わせ] ボタンが押せるようになります。
上図の [デスク] 欄に、Skype for Business Online で登録されているユーザーのアドレスを入力し (実際に存在するアドレスを入力してください)、左からアイテムを選択し、[質問内容] 欄に適当な文字列を設定して [問い合わせ] ボタンを押すと、Skype for Business のクライアントが起動して、入力した相手との会話が開始されます。
起動した Skype for Business には、下図のように、独自の拡張ウィンドウ (下図の右側) が表示され、選択したアイテムや、質問内容が引き継がれます。

一方、受信側では、下図のように、この拡張ウィンドウをインストールするためのリンク (上記と同じインストール先のリンク) と、インストール後に拡張ウィンドウを開くためのリンクの双方が表示されます。これらを順番にクリックするだけで、上図と同じ拡張ウィンドウを受信側でも共有できます。(選択されたアイテムや、質問内容なども、まったく同じものが表示されます。)

そして、上図の拡張ウィンドウの矢印ボタンを押すとアイテムの写真が切り替わりますが、この切り替えも、送信側と受信側でリアルタイムに共有されます。
さらに、会話を終了すると (Conversation Window を閉じると)、Web ページ上に、満足度を尋ねるアンケート フォームが表示されます。

実は、このアプリケーションでは、内部では、「アプリケーション本体のインストール」はいっさいおこなっておらず、拡張ウィンドウも含め、すべて Microsoft Azure 上にホストされています。上記のインストール作業では、このアプリケーションの設定をレジストリに書き込んでいるだけであり、機能はすべて 「雲の上」 (クラウド) に存在しています。
また、ここでは、HTML / Silverlight で提供される拡張ウィンドウ (CWE) としてリアルタイム連携を実装しましたが、同様に Skype for Business のクライアント プラットフォームを使って、デスクトップ アプリケーション (.exe) にこうしたリアルタイム連携の機能を付加することもできます。

Skype for Business 連携は、現在、Skype Web SDK (UCWA) が使用できます。(プラットフォームやブラウザーに依存せず開発可能です。) ここで使用している Skype for Business SDK (旧 Lync SDK) を使用した開発手法については、「Lync 2010 クライアント開発入門」を参照してください。

 

[Office 365 API] メールの一覧 (Exchange Online, etc)

[デモ サイト] https://o365apisample.azurewebsites.net/

最新の Office 365 API を使用したデモを掲載します。(2014/05 追加)
今回は Exchange Online のサンプルですが、SharePoint Online (OneDrive for Business 含む) などでも使用可能です。

上記の URL にアクセスすると、Office 365 の SignIn 画面 (ログイン画面) が表示されます。
ログインをおこなうと、下記の Consent UI (メールの読み込みを許可する画面) が表示されます。ここの画面で承諾をおこなうと、次回以降は表示されません。

上記画面で承諾すると、Exchange Online の Inbox のメール一覧が表示されます。(下図)

なお、いったん許可したこのアプリの権限 (許可設定) は、以下で削除できます。

http://myapps.microsoft.com/

Office 365 API を使用した開発手法については「Office 365 API 入門」を参照してください。

 

ソースコードは、以下に置いておきます。

 StorageSample (GitHub)

 OutlookSample (GitHub)

 App.html (OneDrive)

 20130206_SP2013AppsDemo (GitHub)

 MailSample (GitHub)

 ExchangeSyncSample (GitHub)

 LyncOnlineSample (GitHub)

 Office365APISample (GitHub)

補足 : あくまでも、開発サンプルの目的です . . . 例によって、例外処理など、細かな処理は省略していますし、上記の Exchange のデモも、暗号化せずにパスワードをそのまま渡しています。(SSL を使用するなど、セキュリティ面も考慮して実装してください。)

Office 365 マーケット プレース には、既にいくつかの便利なアプリケーションが公開されています。
ISV 企業の皆さんは、この Game Change を、是非、楽しんでください。(私のサンプル アプリケーションは日本語版だけですが、多言語対応すれば、全世界で、すぐにアプリケーションが利用可能になります !)

Comments (0)

Skip to main content