Office アプリを作ってみるその 1

事の発端

かずあきさんが教えるOfficeアプリとかで
— 幻想ツバメ (@f_swallow) 2014, 5月 3

教えるも何も作ったことないんですが...

とりあえずプロジェクトを作ってみる

VS2013 のテンプレートにありました。
f:id:kazuakix:20140504162608p:plain,w500

アプリの種類の選択。作業ウィンドウの方がそれっぽいかな...と。
f:id:kazuakix:20140504162628p:plain,w500

対象となる Office の選択。とりあえず Excel だけにしてみました。
f:id:kazuakix:20140504162634p:plain,w500

そして出来上がったプロジェクトたち。
f:id:kazuakix:20140504162640p:plain

OfficeApp1.xml

<?xml version="1.0" encoding="UTF-8"?>
<!--Created:cb85b80c-f585-40ff-8bfc-12ff4d0e34a9-->
<OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:type="TaskPaneApp">
  <Id>f0a74591-ad75-4676-a4ae-decee9c237d9</Id>
  <Version>1.0.0.0</Version>
  <ProviderName>[プロバイダー名]</ProviderName>
  <DefaultLocale>en-US</DefaultLocale>
  <DisplayName DefaultValue="OfficeApp1" />
  <Description DefaultValue="OfficeApp1"/>
  <Capabilities>
    <Capability Name="Workbook" />
  </Capabilities>
  <DefaultSettings>
    <SourceLocation DefaultValue="~remoteAppUrl/App/Home/Home.html" />
  </DefaultSettings>
  <Permissions>ReadWriteDocument</Permissions>
</OfficeApp>

アプリの定義っぽい

Home.html

<!DOCTYPE html>
<html>
<head>
    <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.1/hosted/office.js" type="text/javascript"></script>

    <!-- Office.js へのローカル参照を使用してオフラインのデバッグを有効にするには、次のスクリプトを使用します。:                        -->
    <!-- <script src="../../Scripts/Office/MicrosoftAjax.js" type="text/javascript"></script>  -->
    <!-- <script src="../../Scripts/Office/1.1/office.js" type="text/javascript"></script>  -->

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

    <link href="Home.css" rel="stylesheet" type="text/css" />
    <script src="Home.js" type="text/javascript"></script>
</head>
<body>
    <div id="content-header">
        <div class="padding">
            <h1>ようこそ</h1>
        </div>
    </div>
    <div id="content-main">
        <div class="padding">
            <p><strong>ここにホーム画面のコンテンツを追加します。</strong></p>
            <p>例:</p>
            <button id="get-data-from-selection">選択範囲からデータを取得します</button>

            <p style="margin-top: 50px;">
                <a target="_blank" href="https://go.microsoft.com/fwlink/?LinkId=276812">オンラインでその他のサンプルを探す...</a>
            </p>
        </div>
    </div>
</body>
</html>

アプリの画面と...

Home.js

(function () {
    "use strict";

    // 新しいページが読み込まれるたびに初期化関数を実行する必要があります
    Office.initialize = function (reason) {
        $(document).ready(function () {
            app.initialize();

            $('#get-data-from-selection').click(getDataFromSelection);
        });
    };

    // 現在のドキュメントの選択範囲からデータを読み取り、通知を表示します
    function getDataFromSelection() {
        Office.context.document.getSelectedDataAsync(Office.CoercionType.Text,
            function (result) {
                if (result.status === Office.AsyncResultStatus.Succeeded) {
                    app.showNotification('選択されたテキスト:', '"' + result.value + '"');
                } else {
                    app.showNotification('エラー:', result.error.message);
                }
            }
        );
    }
})();