2,116 views(since 2013/10/08)

はじめての App for Office 2013(Officeアプリ)で開発してみる。

はじめに

[App for Office 2013](Officeアプリ)を試してみる。

Webサービスと完全に一体化した、いろんな業務アプリが作れるんじゃない。またOfficeストアに配置できるので、ビジネス展開も簡単にすることができそう。

完成すると以下のようなアプリが作れる。

従来のように、左側が、Excelのスプレッド領域、右側が、[App for Office 2013]で重要なWeb Client領域だ(呼び方が正しいか不明) このWeb Client領域に [HTML+JavaScript]でプログラムを作り、WebサービスやExcelオブジェクトを操作してプログラムが作れる。この右側の[HTML+JavaScript]のコンテンツはWebサーバに置かれるのが肝だ!!!

office_app_04

それではサンプルを作ってみよう。

開発環境は以下を参考にしてください。

SharePoint 2013/Office365([Visaul Studio Projcet] [App for SharePoint])/Office2013(App for Office) のVisaul Studio 2012 開発環境

Visual Studio2012にて新規プロジュクトを作成する。

1) 「Office/SharePoint/アプリ/Office 2013用アプリOffice 2013用アプリ」 を選択。
office_app_01

2) Office アプリのタイプを選べるようです。
最初なので、「作業ウィンドウのアプリ」 を選択してみます。
office_app_02

3) 初期画面です。
JavaScriptファイル と Htmlファイル ができていることが分かる。
何か、このまま動くんじゃね?
office_app_03

【OfficeApp2.js】※Default

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

        // setSelectedDataAsync メソッドがホスト アプリケーションでサポートされている場合、
        // setDatabtn はメソッドを呼び出すためにフックされ、それ以外の場合は削除されます
        if (Office.context.document.setSelectedDataAsync) {
            $('#setDataBtn').click(function () { setData('#selectedDataTxt'); });
        }
        else {
            $('#setDataBtn').remove();
        }
    });
};

// テキスト ボックスのデータをドキュメントの現在の選択範囲に書き込みます
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);
        }
    });
}

【OfficeApp2.html】※Default

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>OfficeApp2</title>

    <link rel="stylesheet" type="text/css" href="../Content/Office.css" />

    <!-- 次のファイルに CSS スタイルを追加します -->
    <link rel="stylesheet" type="text/css" href="../Content/App.css" />

    <script src="../Scripts/jquery-1.7.1.js"></script>

    <!-- アプリを配置する際に Office.js への CDN 参照を使用します -->
    <!--<script src="https://appsforoffice.microsoft.com/lib/1.0/hosted/office.js"></script>-->

    <!-- Office.js のローカル スクリプト参照を使用してオフラインのデバッグを有効にします -->
    <script src="../Scripts/Office/1.0/MicrosoftAjax.js"></script>
    <script src="../Scripts/Office/1.0/office.js"></script>

    <!-- 次のファイルに JavaScript を追加します -->
    <script src="../Scripts/OfficeApp2.js"></script>
</head>
<body>
    <!-- 以下をコンテンツに置き換えてください -->
    <div id="Content">
        <input type="button" value="Set data" id="setDataBtn" style="margin-right: 10px; padding: 0px; width: 100px;" />
        <input type="button" value="Get data" id="getDataBtn" style="padding: 0px; width: 100px;" />
        <input type="text" value="Sample Data" id="selectedDataTxt" style="margin-top: 10px; width: 210px" />
    </div>
</body>
</html>

4) 動作確認してみたいので、F5実行。
ビルドが終わると、Excelが自動で起動して右側に作業ウィンドウが表示されて、「OfficeApp2」 が表示された。
[HTML+JavaScript]部分は、実行時にサーバーに配置される。
office_app_04

次は、VisualStudio2012 なしのAppの配布方法を調査します。

続きはこちら
オフィスアプリ(App for Office 2013) を Windows Azure Web サイトに発行する

参考URL

Office 2013 用アプリの概要
JavaScriptで誰でも簡単に作って稼げる「Officeアプリ」とは?

Filed Under: Office Add-ins

Tags:

About the Author

Leave a Reply




If you want a picture to show with your comment, go get a Gravatar.