kazuakix の日記

Windows Phone とか好きです

Outlook 用 Office アプリを作ってみる

Office 365

先日気になった Outlook 用アドインの作り方を確認してみました。

作り方は MVA にそのものズバリな解説があります。まずはこれを真似してみましょう。

プロジェクトを作る

Visual Studio で Visual C# - Office/SharePoint - アプリと進んで Office 用アプリの新規プロジェクトを作ります。はじめての Office アプリなので名前は OfficeApp1 としました。

f:id:kazuakix:20151011162555j:plain,w500

アプリの種類としてメールを、

f:id:kazuakix:20151011162602j:plain,w500

表示する場所に電子メールメッセージの表示フォームを選択します。

f:id:kazuakix:20151011162609j:plain,w500

できあがったプロジェクトはこんな感じです。

f:id:kazuakix:20151011162614j:plain

いろいろできていますが、見るのは AppRead\Home フォルダの中の Home.html と Home.js だけです。(Visual C# とは何だったのか...)

それぞれ以下のように書き換えていきます。

Home.html は content-main という ID の div タグ以外すべて削除します。 

<body>
    <div id="content-main">
    </div>
</body>

Home.js で displayItemDetails() の呼び出しを削除して、先ほどの div タグに直接文字を書き込んでみます。 

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

        //displayItemDetails();
        $("content-main").text("Outlook 用 Office アプリです");
    });
};

Outlook on the Web で実行してみる

あとは F5 を押すだけです。最初だけユーザー名、パスワードを聞いてくるので Office 365 のユーザー名、パスワードを入力しましょう。

f:id:kazuakix:20151011162618j:plain,w500
　
動かしてみるとこの通り。OfficeApp1 が動いているのがわかりますね。

f:id:kazuakix:20151011165924j:plain,w500
　
アドオンの一覧にもちゃんと出てきます。

f:id:kazuakix:20151011162631j:plain,w500

次に作るときはプロバイダー名くらいは設定しておこうと思いました。
　

Outlook で実行してみる

プロジェクトのプロパティで動作開始を Office デスクトップクライアント とすることで Outlook で動かしてみることもできます。

f:id:kazuakix:20151011162637j:plain,w300

同じソースが Outlook でも動作しています。

f:id:kazuakix:20151011170334j:plain,w500

同じように iPad 版 Outlook でも動作するという事です。将来的に Windows 10 Mobile の Outlook でも動いたりするんでしょうか？ なんだか楽しそうなことができそうですね。