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

JavaScriptでExcel 2013用作業ウィンドウのアプリを作成する。(2)前のページ

JavaScriptで作成した作業ウィンドウアプリを検証してみる。次のページ

関連記事

  1. アイコン一覧

    Office 365アイコン(imageMso)一覧(S)

    Office 365のデスクトップ版Officeアプリケーション(Wo…

  2. Office関連

    スライド内容を自動的に機械翻訳するPowerPointマクロ

    前回の記事で紹介した各スライドに配置されたオートシェイプからテキストを…

  3. Excel

    CDOを使ってGmail送信を行うVBAマクロ(UTF-8対応版)

    2年ほど前にCDOを使ってGmail送信を行うVBAマクロについて記事…

  4. Office関連

    表の特定の列に対して処理を行うWordマクロ

    2015/6/12 追記:下記で紹介しているコードはセルの結合を考…

  5. Office関連

    外部からOutlookのマクロを実行するマクロ

    外部からOutlookのマクロを実行するマクロ今回は外部からO…

コメント

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

Time limit is exhausted. Please reload CAPTCHA.

※本ページはプロモーションが含まれています。

Translate

最近の記事

アーカイブ

PAGE TOP