Office アドイン

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

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

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

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

JavaScriptでExcel 2013用作業ウィンドウのアプリを作成する。」では「How to: Create your first task pane or content app for Word and Excel by using Visual Studio」を参考にVisual Studioで作業を行いましたが、今回はテキストエディタで作業しようと思います。

  1. ネットワーク共有フォルダ(\\XXXX\Apps)を作成します。
  2. Excelを起動し、オプション画面からセキュリティセンターを開きます。
  3. 信頼されているアプリケーション カタログ」を選択し、「カタログの URL」欄に手順1.で作成した共有フォルダのパスを入力します。
  4. カタログの追加」ボタンをクリック後「メニューに表示する」にチェックを入れ、「OK」ボタンをクリックします。
  5. 設定を保存しました。次回 Office を起動したときに適用されます。」とのメッセージが表示されるので、一度Excelを終了します。
  6. テキストエディタで下記3つのファイル(すべてUTF-8)を作成し、手順1.で作成した共有フォルダにコピーします。
  7. ・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" />
        </head>
        <body>
            <p>Hello World!</p>
        </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属性の値は自分で作成した共有フォルダのパスに変更してください。

  8. Excelを再度起動し、「挿入」タブから「Office 用アプリ」ボタンをクリックします。
  9. アプリケーションの挿入」ウィンドウが表示されるので、「共有フォルダー」をクリックすると、手順6.で作成した「HelloWorld」が表示されます。
  10. HelloWorld」を選択して「挿入」ボタンをクリックすると、作業ウィンドウに手順6.で作成した「HelloWorld」が表示されます。

以上で作業は終了です。
上記のように、非常に簡単な手順で作業ウィンドウ用のアプリを作成することができます。
個人的にはVisual Studioで作業するよりもテキストエディタで作業する方が性に合っています。

ちなみに、上記作業は「How to: Create your first task pane or content app by using a text editor」を参考にしたのですが、このページ通りに作業しても上手くいきませんでした。
上記ページにあるHelloWorld.xmlのコードの中で、Id要素の値が「5678」になっていることが上手くいかない原因で、この値を「Create GUIDs online」で作成したGUIDに変更したところ、ようやく上手くいくようになりました。
こういった細かいところで躓くのはMicrosoftの説明ページではよくあることですね…。

■ 関連Webページ:

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

ページごとにPNG形式で出力するWordマクロ(Word 2013)前のページ

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

関連記事

  1. Office関連

    指定したフォルダ内にあるExcelファイルを一つにまとめるVBAマクロ

    複数あるファイルを一つにまとめるにはどうすれば良いか?という質問をいた…

  2. Office関連

    Outlookの連絡先をvcf形式で一括保存する方法

    Outlookの連絡先をvcf形式で保存する場合、通常は「連絡先を v…

  3. Office アドイン

    [Office用アプリ]法人登録する際の参考資料

    法人としてMicrosoft Seller DashboardでOff…

  4. Office関連

    ページごとにPNG形式で出力するWordマクロ(Word 2013)

    ※ この情報はOffice 2013 カスタマー プレビュー版を元にし…

  5. Office アドイン

    Office 365でVisio JavaScript APIsを試してみました。

    昨年末にVisio Onlineの機能をJavaScriptで拡張する…

  6. Office アドイン

    Outlook.comが正式版になりました。

    「新しいOutlook.comのプレビュー版を触ってみました」記事を書…

コメント

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

Time limit is exhausted. Please reload CAPTCHA.

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

Translate

最近の記事

アーカイブ

PAGE TOP