Office 用アプリ(Apps for Office)でデモアプリを作る -バインド編-

イメージ図

以下のように赤枠のボタンを押すと、
Webからデータを取得して、請求書に表示させるOffice用アプリを作成しました。

apps_for_office_binding_a003

はじめに

今回は、バインド機能を使って”Excel Sheet” と”Office用アプリ”を連結させます。
バインド機能には、「Text」、「Matrix」、「Table」の3種類の方法があります。

今回は「Matrix」を使います。

以下がサンプルになります。

【JavaScript】

// この関数は、アプリがホスト アプリケーションとの対話を開始する準備が完了したときに実行されます
// これにより、ボタンにクリック ハンドラーを追加する前に DOM の準備が完了します
Office.initialize = function (reason) {

};

// テキスト ボックスのデータをドキュメントの現在の選択範囲に書き込みます
function setData(elementId) {
    Office.context.document.setSelectedDataAsync($(elementId).val());
}

// ドキュメントの現在の選択範囲からデータを読み取り、テキスト ボックスに表示します
function getData(elementId) {
    Office.context.document.getSelectedDataAsync(Office.CoercionType.Text,
    function (result) {
        if (result.status === 'succeeded') {
            $(elementId).val(result.value);
        }
    });
}

// Bind to the named range
// 名前付き範囲にバインド
function bindNamedItem() {
    Office.context.document.bindings.addFromNamedItemAsync("myRange", "matrix", { id: 'myMatrix' }, function (asyncResult) {
        //var message = ('Added new binding with type: ' + asyncResult.value.type + ' and id: ' + asyncResult.value.id);
        //write(message);
        //addEventHandler();
    }
    );
}

// Bind to the named range
// バインドにデータをセット
function bindNamedItemValue() {
    // 暫定版:あとでSQLのデータをセットするように改良します
    Office.select("bindings#myMatrix").setDataAsync(
        [['1', 'ファイル権限デザイナー', '2', '90,000', '81,000'],
         ['1', 'ファイル権限デザイナー インシデント', '5', '20,000', '18,000'],
         ['1', 'ファイル権限デザイナー 年間保守', '1', '45,000', '40,500']], 
        { coercionType: "matrix" }, function (asyncResult) {
        if (asyncResult.status == "failed") {
            write('Error: ' + asyncResult.error.message);
        } else {
            write('Bound data: ' + asyncResult.value);
        }
    });
}

// Write to the UI 
// UIへの書き込み
function write(message) {
    document.getElementById('message').innerHTML += message + '
' };

プログラムを実行してみよう!

1. Visual Studio2012からデバック実行(F5)します。Excel がVisusal Studio2012から起動されます。
※Excelは弊社の”請求書テンプレート”を使っています。

 右側に Office 用アプリ(Webブラウザー)が表示されています。

※以下は”請求書印刷画面”です。(”Dataシート”からセル参照してデータを表示しています。)
 apps_for_office_binding_a000

2. ボタン(バインドJavaScript)を押すと Excel 側とOffice用アプリ側をバインドで連結します。

※以下は”Dataシート”画面です。
 apps_for_office_binding_a001

3.ボタン(データ貼り付けJavaScript) を押すと、”Data シート”にバインドされている BindingID「myMatrix」へデータがセットされました。

※以下は”Dataシート”画面です。
 apps_for_office_binding_a002

4. 無事、請求書側も表示されました。

※以下は”請求書印刷画面”です。(”Dataシート”からセル参照してデータを表示しています。)
 apps_for_office_binding_a003

“Dataシート”のバインドエリア「myBinding」にデータがセットされました。
次回は、Web Azure+SQL Azure等 全体をまとめ上げて仕上げていきます。

参考URL
Office 用アプリのコード サンプル
http://msdn.microsoft.com/ja-jp/library/jj220075.aspx
Binding オブジェクト (Office 用アプリ)
http://msdn.microsoft.com/ja-jp/library/fp161045.aspx
Bindings オブジェクト (Office アプリ)
http://msdn.microsoft.com/ja-jp/library/fp160966.aspx

Office 用アプリ(Apps for Office)でデモアプリを作る -テンプレート編-

はじめに

以下はOffice用アプリのテンプレートイメージ

apps_for_office_demo_a002

Exceedone が提供する Office 用アプリは、多くのユーザーが使い慣れている Excel に、最新の Office 技術であるオフィス用アプリ(Apps for Office)を組み込んだ Microsoft も推奨している今後の Office 系アプリケーションの『カタチ』です。

Exceedone の Office 用アプリ概要

Excelの「ユーザ入力用」シートとDBをOffice用アプリ経由データを取得/更新するだけです。(超、シンプル!)
データのやりとりのみOffice用アプリ経由に任せて、操作はExcelが全てとなるため
日頃からExcelに慣れ親しんでいる人には待ち望んでいたアプリになると思います!

メリット
・テンプレートはユーザーが任意に変更できる
・Excel を入力フォームとするため、クライアントサーバシステム/Webアプリより操作性がよい
 ※上記2点は重要!!
・ローカル端末のみで作業が行えます
 ※DB接続はデータの「取得/更新」時のみ
・出張先でローカルOffice2013がなくても、インターネット環境があれば Office Web Apps 経由で閲覧/更新等が可能です。
・タブレット/スマートフォンにOffice Web Apps経由で対応(Android、iOS、Windows)

デメリット
・特になし

Visual Studio2012の開発時の初期起動するExcelテンプレートについて

今回、少し悩んでいました。
Visual Studio2012でデバック起動時に任意のExcelテンプレートを起動したい。
しかし、やり方がよく分かりませんでした。

しかし、以下のUStream(Microsoft) に解決方法はありました!!

VS魂100連発 第16回目「Apps for Office」

Visual Studio 2012 のソリューションエクスプローラで、ソリューションにカーソルを合わせて、「追加」 → 「既存項目」 を選択して、対象となるテンプレートファイルを追加します。

apps_for_office_demo_a003 

これで、デバック実行時(F5)のExcel起動が「Microsoft Excel(空)」ではなく、「テンプレートファイル(FADライセンス.xlsx)」が表示されます。

しかし、Office用アプリは表示されていません。
自分でOffice用アプリを追加しろってことですね。
まず、Office用アプリを追加したいワークシートに合わせます。

Excel リボンから「挿入」 → 「Office 用アプリ」を選択すると、「開発者向けアプリ」に今回のアプリが表示されます。
アプリを選択します。
apps_for_office_demo_a004

赤枠部分に「コンテンツアプリ」として配置されました。
位置、サイズは調整しました。
作業ウィンドウアプリでも同様の処理で追加できます。
見た目が、「作業ウィンドウ」か、「コンテンツ」かの違いだけです。

apps_for_office_demo_a001

Office 用アプリ(Apps for Office)でデモアプリを作る -データ抽出編(コンテンツアプリ)-

はじめに

一元管理されたデータベースにアクセスして、取得したデータをExcel上で自由に使うことができるので
Excel に慣れているユーザーには扱いやすいアプリである。
システム側からはデータを提供して、ユーザー側は任意にレポーティングが行える。
ユーザーがあちこちからデータを収集してExcelへセットしなくて済むため、業務効率が格段に向上する。

apps_for_office_db_01

<想定する環境>
Server
 ・Windows Sever(2008, 2012, Azure 等)
Database
 ・SQL Server
 ・SQL Azure
 ・SharePoint List

3) データベース(Database)から会計データを抽出する

  抽出したデータは、Excelシートにセットする。
  レポート側は、データシートより値を参照するだけなので、どんなレイアウトにも対応が可能!(と思われる)
apps_for_office_db_05

コンテンツにある「Data Get」ボタンを押して、データを取得する。
取得したデータは、データシート「Data_Detail」内にセットされる。
apps_for_office_db_04

ここから先は普通の Excel なので、ユーザーの思いどおりに、Excel を扱うことができる。

いかに必要な情報を取得して、自由度の高いレポーティングが出来るかが肝だ。
IT等に精通していないユーザーほど自由度を高めないといけない。

次回、Windows Server 2012 & SQL Server 2012 のサンプルを紹介します。

Cloud Days Tokyo 2013 Spring 2日目(新しい Office 365 Microsoft Solution DAY – Office 製品群の新しいクラウドアプリの世界)

はじめに

注意:画像はわたしが作成したものです。(撮影禁止のため)

日経BP社主催のCloud Days 2013 Spring にいってきました。

展示場に向かって個人的に興味のあるMicrosoft , SAPのブースを見学して、
目的の「新しい Office 365 Microsoft Solution DAY –  Office 製品群の新しいクラウドアプリの世界(MS 松崎様)」の講演を見てきました。

http://expo.nikkeibp.co.jp/cloud/2013spring/seminar/detail.html#MH26
clouddays2013spring0010

Office用アプリ(Apps for Office)、SharePoint用アプリ(Apps for SharePoint)は、日本では、始まったばかりなのですが、講演会場はいっぱいで関心の高さを感じました。

最新の情報がわかり、講演にいってきてよかったです。

講演中に、たくさんヒントおよびキーワードを頂いたので、メモしておきます。

内容

Office用アプリ,SharePoint用アプリの概要や詳細についてたくさんの内容があったのですが、開発に関して私が気になったところのみメモしたました。

  1. Office用アプリとSharePoint用アプリのプログラムの難易度について
    1. Office用アプリは標準のHTML+JavaScriptのみで容易に記述でき るので、開発は簡単にできます。
      さらに、VisualStudio 2012があれば、Office用アプリの雛形を自動生成をします。 インテリセンスとデバックも行えるので開発がより容易になります。
      clouddays2013spring0020
    2. SharePoint用アプリはRemotoAppモデルなどにおいては、SharePointのデータにアクセスする際にOAuth(SharePointホスト型を除くRmoteApp等)を使用するので関連する知識が必要です。
      また、SharePoint独自のフィチャーフレームワークの知識も必要です。
  2. SharePoint開発環境について
    従来のようにWindowsServer+SharePointServerを開発者毎に準備する必要がなくなりました。
    VisualStudio2012+Office365があれば、SharePoint開発が可能になります。
  3. Office用アプリ(Apps for Office)について
    1. デバック時にOfficeアプリを指定できます。
      clouddays2013spring0030
    2. アプリからフォーマット(セル幅)の調整はできませんので、Excel Book(テンプレートとして) と アプリをいっしょに配布することも可能です。(Excelテンプレートの配布方法について、どのようにすればよいのか悩んでいたので、すっきりしました。)
      ※画像はMSのテンプレートを参考にさせていただいています
      clouddays2013spring0040
    3. Officeストアは現在USのみオープンしていますが、多言語対応アプリにしておけば、USで登録すればよいです。(日本語環境だと日本語になります)
      http://office.microsoft.com/en-us/store/apps-for-excel-FX102804981.aspx
      clouddays2013spring0050
    4. Office Web Apps で作業用ウインドウアプリが作れます。(改良されているようです。
      現在MSDNでは Excel Web Appでは作業ウィンドウアプリは作れないとなっていますが、機能追加がされてるみたいで、使えるようです。(あとで最新のOffice365で試してみます
      http://msdn.microsoft.com/ja-jp/library/jj220082.aspx
      clouddays2013spring0060

 

現時点でもアプリケーションのフレームワークが改良されているようです。

このようなセミナー講演等で得られる最新情報が重要と思います。

参考

Office用アプリの概要は以下が参考になります。
http://msdn.microsoft.com/ja-jp/library/jj220082.aspx