Windows Dev. Site

Apps for Office

VisualStudio 2013のプロジェクトテンプレートに、Office 2013用アプリというテンプレートがC#の下にあります。
これを以下のサイトを参考に、Apps for Officeをつくってみました。(Excel)

How to: Create your first task pane or content app by using Visual Studio

http://msdn.microsoft.com/library/office/fp142161%28v=office.15%29

その前に、これに取り組もうと思ったのは、なんとJavaScriptでExcelのCellを読み書きできてしまうからです。どのように使うものなのかということより、まずこれを試したかったからです。
(しかしいつもネーミングが汎用的でわかりづらいですね。(ストアアプリとかも)　日本語だとOfficeアプリ? Office Web Appsと似ている・・など、もう少し機能が明確化できる名前だといいのですが。)

Office用アプリの作成で、「Excelのコンテンツアプリ」を選びました。参考サイトとは違うのですが、作業ウィンドウという特別なところにおかれるのではなく、画像やグラフのように任意の場所に置きたかったからです。
oa1

環境 VisualStudio 2013, Office 2013 / Windows 8.1
Home.js

(function () {
    "use strict";
    Office.initialize = function (reason) {
        $(document).ready(function () {
            app.initialize();

            $('#btnWrite').click(writeText);
            $('#btnRead').click(readText);
        });
    };
    function writeText() {
        Office.context.document.setSelectedDataAsync($('#wtest').text(),
            function (asyncResult) {
                if (asyncResult.status === "failed") {
                    $('#result').text(asyncResult.error.message);
                }
            }
        )
    }
    function readText() {
        Office.context.document.getSelectedDataAsync("matrix",
            function (asyncResult) {
                if (asyncResult.status === "failed") {
                    $('#result').text(asyncResult.error.message);
                }
                else {
                    $('#rtest').text(asyncResult.value);
                }
            }
        );
    }
})();

Home.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title></title>
    <script src="../../Scripts/jquery-1.9.1.js" type="text/javascript"></script>

    <link href="../../Content/Office.css" rel="stylesheet" type="text/css" />
    <script src="https://appsforoffice.microsoft.com/lib/1.0/hosted/office.js" type="text/javascript"></script>

    <link href="../App.css" rel="stylesheet" type="text/css" />
    <script src="../App.js" type="text/javascript"></script>
    <script src="../Visualization.js" type="text/javascript"></script>

    <link href="Home.css" rel="stylesheet" type="text/css" />
    <script src="Home.js" type="text/javascript"></script>
</head>
<body>
    <center><h3>Apps for Office Test</h3></center>
    <button id="btnWrite">Write Text</button>
    <button id="btnRead">Read Text</button>
    <div id="wtest">123456789</div>
    <div id="rtest">---</div>
    <hr />
    <div id="result">message : </div>
</body>
</html>

デフォルトでjQueryサポートです。最近つかいまくってますね。またC#のプロジェクトなのにC#はどこにもでてきません。

初期画面
oa2

‘Write Text’をクリック(表示領域をあらかじめ選択してからも可。コードを変更して配列を書き込むことも可)
そして選択箇所そのままで’Read Text’をクリック
oa3

値を入力後、範囲を指定して’Read Text’をクリック
oa4

範囲を指定して’Write Text’をクリック
oa5
配列を書き込むようにしていないのでエラー

オフラインローカルのExcelファイルとしては使えないみたいですが(まだ調査不足ですが)、それがちょっと残念です。(ExcelシートにWebViewが埋め込まれ、相互データ連携ができると、Webの柔軟性からかなり用途が広がるのですが)
でもなかなか面白い機能です。

(追記:2014/09/27)SharePointに登録して、Officeアプリとして挿入が可能。

«

»