Office アドイン

JavaScriptでExcel 2013用作業ウィンドウのアプリを作成する。(3)

2012/11/1 追記:
Office 2013 RTMリリースに伴い、下記記事でOffice用アプリ(apps for Office)の概要と開発方法について改めてまとめてみました。

・Office用アプリ(apps for Office)の概要と開発方法
//www.ka-net.org/blog/?p=2412

※ この情報はOffice 2013 カスタマー プレビュー版を元にしています。製品版では変更になる可能性がありますのでご注意ください。

前回はとりあえず作業ウィンドウにHTMLページを表示するだけでしたが、今回は前回のファイルにJavaScriptのプログラムを追加してみようと思います。

  1. Internet Explorerのセキュリティオプションから「信頼済みサイト」に前回の手順1.で作成した共有フォルダのパスを追加します。
  2. 前回の手順6.と同様にテキストエディタで下記4つのファイル(すべてUTF-8)を作成し、手順1.の共有フォルダにコピーします。

  3. ・HelloWorld.html

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=Edge">
            <link rel="stylesheet" type="text/css" href="program.css">
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
            <script src="https://az88874.vo.msecnd.net/api/1.0/office.js"></script>
            <script src="HelloWorld.js"></script>
        </head>
        <body>
            <input id="btnHelloWorld" type="button" value="OK">
        </body>
    </html>

    ・program.css

    body
    {
        position:relative;
    }
    li :hover
    {  
        text-decoration: underline;
        cursor:pointer;
    }
    h1,h3,h4,p,a,li
    {
        font-family: "Segoe UI Light","Segoe UI",Tahoma,sans-serif;
        text-decoration-color:#4ec724;
    }

    ・HelloWorld.xml

    <?xml version="1.0" encoding="UTF-8"?>
    <OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:type="TaskPaneApp">
      <Id>dc0b801d-f0ba-4045-b260-09d3729e6ea1</Id>
      <Version>1.0</Version>
      <ProviderName>kinuasa</ProviderName>
      <DefaultLocale>en-US</DefaultLocale>
      <DisplayName DefaultValue="HelloWorld" />
      <Description DefaultValue="My first app."/>
      <IconUrl DefaultValue="http://officeimg.vo.msecnd.net/_layouts/images/general/office_logo.jpg" />
      <Capabilities>
        <Capability Name="Workbook" />
      </Capabilities>
      <DefaultSettings>
        <SourceLocation DefaultValue="\\XXXX\Apps\HelloWorld.html" />
      </DefaultSettings>
      <Permissions>ReadWriteDocument</Permissions>
    </OfficeApp>

    ※ HelloWorld.xmlのSourceLocation要素のDefaultValue属性の値は自分で作成した共有フォルダのパスに変更してください。

    ・HelloWorld.js

    // Add any initialization logic to this function.
    Office.initialize = function (reason) {
        $(document).ready(function () {
            $("#btnHelloWorld").click(function () { Office.context.document.setSelectedDataAsync('Hello world!!'); });
        });
    }
  4. Excelを起動し、Office 用アプリ「HelloWorld」を挿入します(※ アプリの設定・挿入方法は前回のページをご参照ください)。
  5. 作業ウィンドウの「OK」ボタンをクリックすると、選択セルに「Hello world!!」と入力されます。

以上の手順でJavaScriptのコードが動作することが確認できました。
この記事を書くにあたって、最初Internet Explorerのセキュリティオプションを設定していなかったためにコードが実行されず、結構ハマりました…。

2012/07/19 追記:
別の環境で試したところ、「信頼済みサイト」に追加しなくても動作しました。まずはコードを動かしてみて、動作しない場合は信頼済みサイトに追加してみる、というやり方にした方が良いかもしれません。

■ 関連Webページ:

・JavaScriptでExcel 2013用作業ウィンドウのアプリを作成する。
//www.ka-net.org/blog/?p=1995
・JavaScriptでExcel 2013用作業ウィンドウのアプリを作成する。(2)
//www.ka-net.org/blog/?p=2022

関連記事

  1. Office アドイン

    [Office用アプリ]アプリ開発コンテスト・受賞者発表

    以前書いた記事でお知らせしていた「Apps for Office アプ…

  2. Office関連

    すべてのテーブルの結合を解除するWordマクロ

    すべてのテーブルのセル結合を解除するWordマクロを考えてみました(W…

  3. Office関連

    Office 2013 カスタマープレビュー版の「Spy Utility」

    たまたま見つけたWebページ「Office2013のデバッグ用ツールが…

  4. Office関連

    VALUE DOMAINで管理しているドメインをOffice 365で使用する。

    Office 365をセットアップすると設定される初期ドメイン「onm…

  5. Office関連

    ガイドを追加するPowerPointマクロ

    PowerPointで図形の位置を調整するときに役立つガイド機能(ガイ…

  6. Office関連

    Excelで地理データや株価情報を取得する方法

    下記記事にある、今年3月に追加された「データの種類」機能を使って、Ex…

コメント

  1. この記事へのコメントはありません。

Time limit is exhausted. Please reload CAPTCHA.

最近の記事

アーカイブ

RapidSSL_SEAL-90x50
PAGE TOP