カテゴリー別アーカイブ: Apps for Office

Office用アプリ開発概要:セミナー登壇資料

先日開催されました、「技術ひろば.net 勉強会 11月30日」にて、「Office用アプリ開発概要」と題しまして、登壇させていただきました。

このセッションの中で、Excelの日時シリアル値をJavaScriptのDate型に変換するコードを紹介しましたところ、参加されているみなさんよりコード化を希望されましたので、以下に貼り付けておきます。ライブラリ化するほどのことでもないので、利用者ご自身の責任にてお使いください。

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);

イントロダクション – Apps for Officeの開発環境を構築する

Microsoft Officeは、Office 2013から、そのドキュメント上にWebアプリを配置し、ドキュメントの参照や編集が行えるようになりました。一般的なWebアプリ開発者ならば、自身のWebアプリをExcelやWord上で稼働させることができるようになったのです。

これまでExcelを業務に使用することによって情報共有が妨げられるといった課題は各所に散見されてきました。そのため、各種業務アプリケーションが開発され、主にWebとしてホストされてきました。しかし、今度はExcelのような操作感が得られず、業務がやりにくいといった声が聞かれました。そしてとうとう、Office 2013でこれら両方の課題を解決する新しいアプリケーションのモデルが提示されたのです。それが、Apps for Officeです。

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

このブログシリーズでは、Excel向けアプリの開発を例に、Apps for Officeの開発の流れを追っていきます。ブログ中ではVisual StudioとWindows Azureを使用していますが、Webサーバおよびデータベースの選択は自由ですので、必須というわけではありません。ご自身の開発環境・言語に合わせ、読み替えてください。

アプリの開発だけならば、特別なツールは必要ありません。テキストエディタと、動作検証用にOffice 2013が必要なだけです。Webアプリとして開発し、アプリケーションのマニフェスト(XML)をOfficeに読み込ませるだけです。必要な作業スコープに応じて、以下の環境をそろえてください。

  1. Webアプリの開発環境
    Webアプリとして開発するための環境です。Eclipse・Apache・PHP・MySQLでも構いませんし、Visual Studio・IIS Express・SQL Server Expressでも構いません。
  2. Webアプリの配備環境
    アプリケーションを稼働させるためのサーバ側の環境です。LAMPの構成をオンプレミスで構成しても構いませんし、AWSで用意しても構いません。Windows Azure WebSitesといったお手軽なPaaSでもかまいません。
  3. Office 2013を稼働させる環境
    Office 2013の稼働には、Windowsが必要です。Windows XPはすでに対象外です。
    Office 2013の稼働要件 – TechNet
    http://technet.microsoft.com/ja-jp/library/ee624351.aspx
  4. ストア申請に必要な有効なOffice 365アカウント
    アプリをストアに申請し、販売する場合、Office 365の有効なアカウントが必要です。これは、販売者側のポータルサイト「Seller Dashboard」のアクティベーションの要件に、有効なOffice 365(E系もしくはMidsize Business)が必要だからです。この、E系もしくはM系のOffice 365テナントでは、Apps for Officeのオンライン開発統合環境であるNapaがインストール可能です。また、ストアへの申請は、このツールを経由して実施します。社内ネットワークのみに利用を限定するなど発行する範囲を限定できるならば、Office 365は必須ではありません。
    Create apps for Office and SharePoint by using ‘Napa’ Office 365 Development Tools – MSDN
    http://msdn.microsoft.com/en-us/library/jj220038.aspx

それでは今後、以下のように記事を追加していきます。おたのしみに。

  1. Hello World
  2. Excel向けTask Paneアプリの簡単な例
  3. Excel:表の設計とJavaScriptコード
  4. Excel:Excelの日時シリアル値とJavaScriptのDate型の相互変換
  5. Excel:クライアント用アプリとWeb Appの初期化の違い
  6. Excel:nullはバインドできない
  7. Excel:参照不可能となっている「名前」は動作不良のもと

Apps for Office セミナーで登壇してきました


Excelのダッシュボードツール化 from Hirotada Watanabe

Apps for Officeは、Officeクライアント(Word, Excel, PowerPoint, Outlook等)の中で動くWebアプリケーションのことで、Office用APIを介して、ドキュメントのデータにアクセスできます。つまり、Webシステム側とExcelドキュメント側のデータの相互運用が可能となる仕組みです。これまでも、Excelは外部データの取り込みが可能でした。しかし、Webアプリケーションがそのまま動く仕組みは今回のApps for Officeがはじめてです。

また、エンドユーザに近いところにあるツールはとても重要で、このツールでできることが中小企業はもとよりExcel「データベース」の依存率の高い零細企業にとって重要になります。それは、データの蓄積とドキュメント化を分離できるようになり、データの共有が進み、集計による経営情報の視覚化が可能になることを示します。

今回デモでは、マーケティング情報の参照をイメージした、Excelのピボットテーブルのデモを行いました。ピボットテーブルで集計する対象のデータをApps for Office経由で取得しようとするものです。また、データの取得にはパラメータが必要です。そのパラメータは表として定義します。つまり、Apps for Officeの役割は主に以下の3つです。

  1. Excelのシート上のデータを読み取る(パラメータ用)
  2. Webサービスへ問い合わせる(データ取得)
  3. 取得したデータをExcelシート上へ出力する(ピボット集計の元データ)

これらを開発するために、以下の構成としています。

  1. Webサービス側はWindows Azure Web Sitesにてホスト。ASP.NET Web APIを使用してAPIを実装。DBはSQL Databaseを使用。
  2. Apps for Office アプリケーションは上記Web Sitesにホスト。
  3. アプリケーションのマニフェストファイルは、オンプレミスのファイルサーバ上に配備し、UCNにてアクセス可能とした。
  4. Excelのセキュリティ設定で、UCNパスを信頼するパスに追加。

今回のデモでは、マーケットプレイスに置いたわけでもなく、SharePointに置いたわけでもありません。企業用のApps for Office配備モデルの1つである、ファイルサーバへ置きました。

さて、下のキャプチャは、Excelのデモアプリを稼働させる前に、元データの説明に使ったアプリケーションです。これは私が今開発しているサービスの画面の一部です。青いピンから周囲 500m の範囲にあるロケーション情報を参照しています。Excel上には、このように検索されるロケーション情報をダウンロードし、場所によって異なる「人気度」を集計するデモを行いました。
青いピンから半径500mのロケーション情報