最初の OneNote アドインをビルドするBuild your first OneNote add-in

この記事では、jQuery と Office JavaScript API を使用して OneNote アドインを作成する手順について説明します。In this article, you'll walk through the process of building a OneNote add-in by using jQuery and the Office JavaScript API.

前提条件Prerequisites

アドイン プロジェクトの作成Create the add-in project

  1. ローカル ドライブにフォルダーを作成し、my-onenote-addin という名前を付けます。Create a folder on your local drive and name it my-onenote-addin. ここにアドインのファイルを作成します。This is where you'll create the files for your add-in.

  2. 新しいフォルダーに移動します。Navigate to your new folder.

    cd my-onenote-addin
    
  3. Yeoman ジェネレーターを使用して、OneNote アドイン プロジェクトを作成します。Use the Yeoman generator to create a OneNote add-in project. 次のコマンドを実行し、以下のプロンプトに応答します。Run the following command and then answer the prompts as follows:

    yo office
    
    • Choose a project type:​ (プロジェクト タイプを選択してください) Office Add-in project using Jquery frameworkChoose a project type: Office Add-in project using Jquery framework
    • Choose a script type: (スクリプト タイプを選択してください) JavascriptChoose a script type: Javascript
    • What would you want to name your add-in?: (アドインの名前を何にしますか) My Office Add-inWhat do you want to name your add-in?: My Office Add-in
    • Which Office client application would you like to support?: (どの Office クライアント アプリケーションをサポートしますか) OnenoteWhich Office client application would you like to support?: Onenote

      Yeoman ジェネレーターのプロンプトと応答のスクリーンショット

      ウィザードが完了すると、ジェネレーターはプロジェクトを作成し、サポートする Node コンポーネントをインストールします。After you complete the wizard, the generator will create the project and install supporting Node components.

コードを更新するUpdate the code

  1. コード エディターで、プロジェクトのルートにある index.html を開きます。In your code editor, open index.html in the root of the project. このファイルには、アドインの作業ウィンドウにレンダリングされる HTML が含まれています。This file contains the HTML that will be rendered in the add-in's task pane.

  2. 要素内の <main> 要素を次のマークアップに置き換えて、ファイルを保存します。<body>Replace the <main> element inside the <body> element with the following markup and save the file. これは、Office UI Fabric コンポーネントを使用してテキスト領域とボタンを追加します。This adds a text area and a button using Office UI Fabric components.

    <main class="ms-welcome__main">
        <br />
        <p class="ms-font-l">Enter content below</p>
        <div class="ms-TextField ms-TextField--placeholder">
            <textarea id="textBox" rows="5"></textarea>
        </div>
        <button id="addOutline" class="ms-welcome__action ms-Button ms-Button--hero ms-u-slideUpIn20">
            <span class="ms-Button-label">Add Outline</span>
            <span class="ms-Button-icon"><i class="ms-Icon"></i></span>
            <span class="ms-Button-description">Adds the content above to the current page.</span>
        </button>
    </main>
    
  3. src\index.js ファイルを開いて、アドインのスクリプトを指定します。Open the file app.js to specify the script for the add-in. すべての内容を次のコードに置き換え、ファイルを保存します。Replace the entire contents with the following code and save the file.

    'use strict';
    
    (function () {
    
        Office.initialize = function (reason) {
            $(document).ready(function () {
                // Set up event handler for the UI.
                $('#addOutline').click(addOutlineToPage);
            });
        };
    
        // Add the contents of the text area to the page.
        function addOutlineToPage() {        
            OneNote.run(function (context) {
                var html = '<p>' + $('#textBox').val() + '</p>';
    
                // Get the current page.
                var page = context.application.getActivePage();
    
                // Queue a command to load the page with the title property.             
                page.load('title'); 
    
                // Add an outline with the specified HTML to the page.
                var outline = page.addOutline(40, 90, html);
    
                // Run the queued commands, and return a promise to indicate task completion.
                return context.sync()
                    .then(function() {
                        console.log('Added outline to page ' + page.title);
                    })
                    .catch(function(error) {
                        app.showNotification("Error: " + error); 
                        console.log("Error: " + error); 
                        if (error instanceof OfficeExtension.Error) { 
                            console.log("Debug info: " + JSON.stringify(error.debugInfo)); 
                        } 
                    }); 
            });
        }
    })();
    

マニフェストを更新するUpdate the manifest

  1. one-note-add-in-manifest.xml ファイルを開いて、アドインの設定と機能を定義します。Open the file one-note-add-in-manifest.xml to define the add-in's settings and capabilities.

  2. 要素にはプレースホルダー値が含まれています。ProviderNameThe ProviderName element has a placeholder value. それを自分の名前に置き換えます。Replace it with your name.

  3. 要素の DefaultValue 属性にはプレースホルダー値が含まれています。DescriptionThe DefaultValue attribute of the Description element has a placeholder. これは、A task pane add-in for OneNote に置き換えてください。Replace it with A task pane add-in for OneNote.

  4. ファイルを保存します。Save the file.

    ...
    <ProviderName>John Doe</ProviderName>
    <DefaultLocale>en-US</DefaultLocale>
    <!-- The display name of your add-in. Used on the store and various places of the Office UI such as the add-ins dialog. -->
    <DisplayName DefaultValue="OneNote Add-in" />
    <Description DefaultValue="A task pane add-in for OneNote"/>
    ...
    

開発用サーバーの起動Start the dev server

  1. プロジェクトのルートで bash ターミナルを開いて、次に示すコマンドを実行して開発用サーバーを起動します。Open a bash terminal in the root of the project and run the following command to start the dev server.

    npm start
    

    これで、https://localhost:3000 で Web サーバーが起動し、そのアドレスで既定のブラウザーが開きます。This will start a web server at https://localhost:3000 and open your default browser to that address.

  2. Office Web アドインは、開発中であっても HTTP ではなく HTTPS を使用する必要があります。Office Web Add-ins should use HTTPS, not HTTP, even when you are developing. ブラウザーにサイトの証明書が信頼されていないことが示された場合は、その証明書を信頼された証明書として追加する必要があります。If your browser indicates that the site's certificate is not trusted, you will need to add the certificate as a trusted certificate. 詳細については、「自己署名証明書を信頼されたルート証明書として追加する」を参照してください。See Adding Self-Signed Certificates as Trusted Root Certificate for details.

    注意

    自己署名証明書を信頼されたルート証明書として追加する」で説明されているプロセスを完了した後でも、Chrome (Web ブラウザー) は、サイトの証明書が信頼されていないことを引き続き示すことがあります。Chrome (web browser) may continue to indicate the the site's certificate is not trusted, even after you have completed the process described in Adding Self-Signed Certificates as Trusted Root Certificate. Chrome でのこの警告は無視して構いません。また、Internet Explorer あるいは Microsoft Edge の https://localhost:3000 に移動して、証明書が信頼されていることを確認することもできます。You can disregard this warning in Chrome and can verify that the certificate is trusted by navigating to https://localhost:3000 in either Internet Explorer or Microsoft Edge.

  3. ブラウザーに証明書エラーなしでアドイン ページが読み込まれたら、アドインをテストする準備ができています。After your browser loads the add-in page without any certificate errors, you're ready test your add-in.

試してみるTry it out

  1. OneNote Online でノートブックを開きます。In OneNote Online, open a notebook.

  2. [挿入] > [Office アドイン] の順に選択し、[Office アドイン] ダイアログを開きます。Choose Insert > Office Add-ins to open the Office Add-ins dialog.

    • コンシューマー アカウントでサインインしている場合は、[マイ アドイン] タブを選択し、[マイ アドインのアップロード] を選択します。If you're signed in with your consumer account, select the MY ADD-INS tab, and then choose Upload My Add-in.

    • 職場または学校アカウントでサインインしている場合は、[自分の所属組織] タブを選択し、[マイ アドインのアップロード] を選択します。If you're signed in with your work or school account, select the MY ORGANIZATION tab, and then select Upload My Add-in.

      次の図は、コンシューマー ノートブックの [マイ アドイン] タブを示しています。The following image shows the MY ADD-INS tab for consumer notebooks.

      The Office Add-ins dialog showing the MY ADD-INS tab

  3. [アドインのアップロード] ダイアログで、プロジェクト フォルダー内の one-note-add-in-manifest.xml を参照し、[アップロード] を選択します。In the Upload Add-in dialog, browse to one-note-add-in-manifest.xml in your project folder, and then choose Upload.

  4. ホームタブから、リボンのタスクペインを表示ボタンを選択します。In Word, choose the Home tab, and then choose the Show Taskpane button in the ribbon to open the add-in task pane. アドインは、OneNote ページの横にある iFrame で開きます。6- The add-in opens in an iFrame next to the OneNote page.

  5. テキスト領域にテキストを入力し、[アウトラインの追加] をクリックします。Enter some text in the text area and then choose Add outline. 入力したテキストは、ページに追加されます。The text you entered is added to the page.

    このチュートリアルでビルドした OneNote アドイン

トラブルシューティングとヒントTroubleshooting and tips

  • ブラウザーの開発者ツールを使ってアドインをデバッグできます。Gulp Web サーバーを使っており、Internet Explorer や Chrome でデバッグしている場合は、ローカルで変更を保存して、アドインの iFrame を更新するだけです。You can debug the add-in using your browser's developer tools. When you're using the Gulp web server and debugging in Internet Explorer or Chrome, you can save your changes locally and then just refresh the add-in's iFrame.

  • OneNote オブジェクトを調べる場合、現在使用可能なプロパティに実際の値が表示されます。読み込む必要のあるプロパティには、undefined と表示されます。_proto_ ノードを展開し、オブジェクトで定義されているものの、まだ読み込まれていないプロパティを確認します。When you inspect a OneNote object, the properties that are currently available for use display actual values. Properties that need to be loaded display undefined. Expand the _proto_ node to see properties that are defined on the object but are not yet loaded.

    デバッガーでアンロードされた OneNote オブジェクト

  • アドインで任意の HTTP リソースを使っている場合は、ブラウザーで混在したコンテンツを有効にする必要があります。運用アドインでは、セキュリティで保護された HTTPS リソースのみを使う必要があります。You need to enable mixed content in the browser if your add-in uses any HTTP resources. Production add-ins should use only secure HTTPS resources.

  • 作業ウィンドウ アドインは、任意の場所から開くことができますが、コンテンツアドインは、通常のページ コンテンツ (タイトル、イメージ、iframe などは含まない) の内部にのみ挿入できます。Task pane add-ins can be opened from anywhere, but content add-ins can only be inserted inside regular page content (i.e. not in titles, images, iFrames, etc.).

次の手順Next steps

これで完了です。OneNote アドインが正常に作成されました。Congratulations, you've successfully created a OneNote add-in! 次に、OneNote アドイン構築の中心概念の詳細について説明します。Next, learn more about the core concepts of building OneNote add-ins.

関連項目See also