アプリ開発をOfficeから始めよう

  • 51
    いいね
  • 1
    コメント

Life is Tech! advent calendar 2016 の 13日目の記事です!

前回の予告に

13日目に当たる明日はひめちゃんが「なんか書く」と 意気込みを語ってくれております!究極の抽象的単語「なんか」からどんな記事が飛び出してくるのか!?

と書いてあったので、マイナーなところを突いて、それに応えようと思います。

比較的いつもはPythonばかり使っているので、それについて書きたいんですけど、Pythonについては、Python Advent Calendar 2016 4日目に「やはり素晴らしいコードは共有すると特に僕と僕以外の全てが嬉しいのである。」を投稿しているので気になる人は見てちょ。

まぁまぁ、LiTにはなにせコースにPythonなんてないので、WEBの話しますね。(担当しているコースは最近はiPhoneが多い)

皆さん、 Office 使ってます?

あの Office です。場所とか会社とかじゃなく、 Microsoft Officeです。タイトルで釣られた人ドンマイ!

なんだかんだ事務処理とかで避けられないアレです。
プレゼン発表とかも研究発表会では大体パワポでやってね^^。研究データはパワポで!
みたいな感じになっちゃいますよね。(いや、俺のところは違う、とか言う人はおいとく)

Keynoteもいいのだけれど、数式が書けないのは実は辛かったりするし、オートシェープとか文字の縁取りとか、
研究データの保存もできちゃうパワポたんは実はすごかったりするので、なかなか脱パワポとは行かないのが僕の周りの現状なんです。

最近になって、パワーポイントがようやっとSVGに対応した(?)とかニュースになっていた気がするけど、Macのパワポならある程度ベクター形式のデータをそのまま入れることもできるんやで!!!(この辺はKeynote優勢)

さてはて、本題。

Officeのアドインを知ろう

Officeのアドイン使ったこと有ります?作ったことあります?
エディタにはあれだけ拡張機能いれてても、パワポには入れないなんてことはないですよね?(煽る)

え?数が少ない?そうですよ。そーともですよ。知名度が低いんですよ実は。

もう4年も立ってるんですよ!こちらの記事見てあげて下さい!(というか見たげて!!!!)

記事がいっぱいあるから見たげて!!!

有名所でいえば E2D3 とかあるんじゃないかなー。

こんな記事もなかったけ(棒)

これは、し、知ってるよね?(震え)

Officeのアドインを使ってみる

※Microsoftのアカウントが必要です。Gmailとかでも登録できるので作っておくと、この記事のやってることを実感できると思います。

アドインなので、Officeがないと使えませぬ。なので、WEB上でOffice使いましょう。

左上のメニューを開くアイコンからPowerPointを選択

001.png

PowerPointをWEBで開いたときの画面は次のようになる

002.png

「挿入」タブから「Office アドイン」を選択

003.png

適当に「複数選択クイズ」を追加してみる。

004.png

スライド上にアドインが出てくる。

005.png

適当に何か書いて、スライドショーモードで見てみる。

006.png

スライドショーモードでもクリックできる(衝撃)

いや、Keynoteもインタラクティブなモードはあった気がするので、衝撃的なことではなかったか・・・・。

以上が使い方になります。でも、アドインの数が少ないとです。

Officeのアドインを作ってみる

Officeのアドインですが、HTML + CSS + JavaScriptさえあればできます。

公式ドキュメント

開発環境を知る

選択肢は3つあります。(リンクはドキュメントに飛びます。Napa Cloudだけエディタにリンクしています)

Visual Studioを使ってやりたい人は、この記事を読む前に Office Developer Tools をダウンロードしてインストールシておいたほうが良いです。

とりあえず試しにやってみようと考えているなら、Napa Cloud を使いましょう。

自分の開発環境じゃなきゃやだ!って人は任意のエディタ を選びましょう。

個人的に全て使ってみましたけど、自分のエディタを最終的には使っています。が、OfficeのAPIをローカルで使うときはどーーーーしてもOfficeがローカルにないといけないし、Office内でコンソール開くわけじゃないので、どこでエラーが出るかわからかったので、APIの検証用にはVisual StudioまたはNapaが便利でした。

なるべくAPI癒着したコードを書かないのがキモですね。

ここでは大衆向けと思って、Napa Cloud での開発を紹介しますね。

ちなみに、開発環境についてもこちらがやはり良くまとまっています。

公式ドキュメントのGithub

ググっても引っかかりづらいので、Githubにあるドキュメントを読んだほうが早いでしょう。

開発方法を知る

Napa を使って解説していきます。

Napaにアクセスしマイクロソフトアカウントでログインします。

007.png

作成可能なアプリケーションのタイプとして3つあります。

  • Content Add-in
    • エクセルやパワポ上にオブジェクトとして埋め込まれるタイプのアドイン。ビジュアライズするタイプのもの。
  • Task panel Add-in
    • サイドバーとして表示されるアドイン。テキストの加工・編集・検索などに向いているかと。
  • Mail Add-in
    • メール用のアドイン。こいつだけ特殊。

008.png

今回はContent Add-inを作ってみる。
Basic add-inにチェックを入れてCreate。すると、次の図のようにエディターが立ち上がる。

009.png

さきに、ちょこっとRunのボタンをハックしておく。デフォルトだとExcelのWeb Appしか選択できないのだが・・・・

010.png

おもむろにデベロッパーツールを開いて、強引に選択する。(多分いけないのでは・・・・)
一応バグ報告はしておいた。。。Applyを押せばきちんと設定が保存される。

011.png

とりあえず、初期に有るアプリを立ち上げてみる。
左のツールバーに有る、▶ ボタンを押してWebAppを立ち上げてみる。

012.png

新たにウィンドウが立ち上がって、パワーポイントが出現する。その中にAdd inがあることが分かる。

013.png

大体いじっていれば分かってくるがデフォルトのエントリーポイントはhome.htmlになっている。
変更したくば、設定のGeneralからStartPageを変えると良い。

014.png

あとは煮るなり焼くなり、HTMLとCSS、JavaScriptを編集するといい。

OfficeのAPIを知る

OfficeのAPIの使い方を紹介します。OfficeのAPIを使いたい時、つまりパワポやワードの文字とか、エクセルの表の値とかにアクセスしたい時に使ったりするんだけれども、2つの工程が必要となります。

  1. OfficeのScriptを読み込んでおく
<script src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js" type="text/javascript"></script>
  1. APiを使う前にOfficeのイニシャライザでラップしておく。
Office.initialize = function(reason) {
    $(document).ready(function() {
      // OfficeのAPIをここで使うことができる
    });
};

つまり、Officeが立ち上がってないのに先にAPI叩かれたら困るという・・・。
最小限これだけあればOfficeのJavaScript APIを利用することが可能となる。

データの保存方法を知る

具体的に、OfficeのAPIを1つ紹介しよう。
それは、コンテンツアプリで最も使うであろう保存機能について書き残しておく。
さくっとサンプルコード。HTMLとJavaScriptだけ置いとくので、Napa で試しにやってみるとよい。

home.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>Hello Office!</title>
    <!-- jQueryの読み込み -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <!-- Office jsの読み込み -->
    <script src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js" type="text/javascript"></script>
    <!-- 自作スクリプトの読み込み -->
    <script src="home.js" type="text/javascript"></script>
</head>
<body>
  <h1>Officeのデータ保存について</h1>
  <label for="user_name">Name</label>
  <input type="text" id="user_name" value="" placeholder="Your Name"><br />
  <label for="user_age">Age</label>
  <input type="number" id="user_age" value="" placeholder="Your Age"><br />
  <a href="#" id="save_config">保存</a>
  <h2>Debug</h2>
  <div id="debug"></div>
</body>
</html>
home.js
(function() {
    // モデルの作成
    var user_config = {
      name: "",
      age: 0
    };

    // イニシャライズ
    Office.initialize = function(reason) {
        $(document).ready(function() {
            message("Office.initialize");
            loadSettings();
            setValueToWidget();
            addEventListner();
        });
    };

    // 設定の読み込み
    function loadSettings() {
        if (Office.context.document.settings.get("config") !== null) {
            message("loadSettings");
            console.log(Office.context.document.settings.get("config"));
            user_config = Office.context.document.settings.get("config");
            setValueToWidget();
        }
    }

    // 設定を保存
    function saveSettings() {
        message("saveSettings");
        user_config = getValueFromWidget();
        Office.context.document.settings.set("config", user_config); // インメモリに保存
        Office.context.document.settings.saveAsync();                // 即時保存
    }

    // 読み込んだデータをウィジェットに適用
    function setValueToWidget() {
        message("setValueToWidget");
        $("#user_name").val(user_config["name"]);
        $("#user_age").val(user_config["age"]);
    }

    // 現在の値をウィジェットから取得
    function getValueFromWidget() {
        message("getValueFromWidget");
        return {
          name: $("#user_name").val(),
          age: parseInt($("#user_age").val())
        }
    }

    // イベントを登録
    function addEventListner() {
        message("addEventListner");
        $("#save_config").on('click', function() {            
            saveSettings();
            return false;
        });
    }

    // デバッグ用
    function message(msg) {
      document.getElementById('debug').innerText += msg + "\n"; 
    }
})();

次の画像は、上のコードを実際に書いてみた画面。

017.png

作ったアドインは複数設置することができる。このとき、 Office.context.document.settings.set() で保存されるデータはアドインごとに保存される。

試しに、複数のアドインを突っ込んでみたときの様子が次の画像。

016.png

また、 Office.context.document.settings.set() を使用した場合はOfficeアプリ(1つのWord, Excel, PowerPointファイル)の内部にデータが保存されるので、一度閉じても再びデータが呼び出すことが可能となる。

さらに、アドインはオフィス内の ブラウザ 内部で動いているので、 CookielocalStoragesessionStorage が使用できる。
アドイン間のデータのやり取りとかに便利かな、と考えている。

最後に、OfficeのAPIを使って保存しない場合は通常のブラウザと同様のため、保存の仕掛けを作っていなければOfficeアプリをいくら保存しても、アドイン上の設定値は決して保存されないので注意が必要。

ということで、まずはいちばん大事であろうデータの保存方法について紹介した。

「Office Add in データ保存」などでググるとこちらか引っかかるので、こちらも参照。

次の記事も参考になるので読んでおくと良い。

Officeアドイン開発のメリット・デメリット

個人的に感じたメリット・デメリットを挙げておく。

メリット

Officeアドインを使う・作るメリットはいくつか有ります。
Power Pointを例にあげれば、

  • WEBの資源を最大活用できる。
  • 小さなアプリケーションとしてのみ作成すればよい。
  • 小さなアプリケーションはユーザーがスライド上で自由に配置できるので、ユーザー側が必要に応じてオリジナルアプリとして作成できる。
  • スライド上でインタラクティブなことが可能になり、WEB上で動くものはスライドショーを切る必要がなくなる。

デメリット

  • わざわざOffice上のアプリにする必要がない。
  • ネットワークに接続していなければ、アドインがそもそも起動しない。
  • パワーポイント自身が有料ソフト。(WEB上は無料で有る)

  • Visual Studio / Napa / yoeman などを使用する必要があり、敷居が高めである。

  • 日本語記事が少ない。(あっても、若干悲観的w)

メリット・デメリットの議論に関しては下記の記事でも紹介されているので、気になる人は見てみようず。

最後に

Office Add in作りたくなってきました?ちなみに、今申請しているのですが、アプリのリリース自体はWEBサーバーにホスティングして、https化を自分でする必要があるのですよね。これまた一癖あるので、リリースされたらまた別で記事を書こうと思います。オフィス業務がOfficeで苦行にならないようにいろんなアドインが登場すると嬉しいですね。

開発環境や、リリースまわりも改善されることを祈ってます。

それじゃ、またどこかでお会いしましょう!

次回予告

次回は、Tamaki Hidetsugu氏が「トラブルシューティングのすゝめ」について書いてくれるらしい!
この記事書いた後に彼のプロフィール見て、「Microsoft Student Partners」という文字があったので、「うわ!やべ!」とか思ったのは内緒!

Life is Tech!のアドベントカレンダー後半戦も楽しみにしてます〜。後半の皆さんがんばってください!

この投稿は Life is Tech ! Advent Calendar 201613日目の記事です。