最初の 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. 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 ジェネレーターのプロンプトと応答のスクリーンショット

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

  2. プロジェクトのルート フォルダーに移動します。Navigate to the root folder of the project in the Terminal app, and from Terminal run:

    cd "My Office Add-in"
    

コードを更新する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. <body> 要素を次のマークアップに置き換え、ファイルを保存します。Replace the <body> element inside the element with the following markup and save the file.

    <body class="ms-font-m ms-welcome">
        <header class="ms-welcome__header ms-bgColor-themeDark ms-u-fadeIn500">
            <h2 class="ms-fontSize-xxl ms-fontWeight-regular ms-fontColor-white">OneNote Add-in</h1>
        </header>
        <main id="app-body" class="ms-welcome__main">
            <br />
            <p class="ms-font-m">Enter HTML content here:</p>
            <div class="ms-TextField ms-TextField--placeholder">
                <textarea id="textBox" rows="8" cols="30"></textarea>
            </div>
            <button id="addOutline" class="ms-Button ms-Button--primary">
                <span class="ms-Button-label">Add outline</span>
            </button>
        </main>
        <script type="text/javascript" src="node_modules/jquery/dist/jquery.js"></script>
        <script type="text/javascript" src="node_modules/office-ui-fabric-js/dist/js/fabric.js"></script>
    </body>
    
  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.

    import * as OfficeHelpers from "@microsoft/office-js-helpers";
    
    Office.initialize = (reason) => {
        $(document).ready(() => {
            $('#addOutline').click(addOutlineToPage);
        });
    };
    
    async function addOutlineToPage() {
        try {
            await OneNote.run(async 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 text to the page by using the specified HTML.
                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));
                        }
                    });
                });
        } catch (error) {
            OfficeHelpers.UI.notify(error);
            OfficeHelpers.Utilities.log(error);
        }
    }
    
  4. app.css ファイルを開いて、アドインのカスタム スタイルを指定します。Open the file app.css to specify the custom styles for the add-in. すべての内容を次のものに置き換え、ファイルを保存します。Replace the entire contents with the following and save the file.

    html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    
    ul, p, h1, h2, h3, h4, h5, h6 {
        margin: 0;
        padding: 0;
    }
    
    .ms-welcome {
        position: relative;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
        min-height: 500px;
        min-width: 320px;
        overflow: auto;
        overflow-x: hidden;
    }
    
    .ms-welcome__header {
        min-height: 30px;
        padding: 0px;
        padding-bottom: 5px;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
    }
    
    .ms-welcome__header > h1 {
        margin-top: 5px;
        text-align: center;
    }
    
    .ms-welcome__main {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-align-items: center;
        align-items: left;
        -webkit-flex: 1 0 0;
        flex: 1 0 0;
        padding: 30px 20px;
    }
    
    .ms-welcome__main > h2 {
        width: 100%;
        text-align: left;
    }
    
    @media (min-width: 0) and (max-width: 350px) {
        .ms-welcome__features {
            width: 100%;
        }
    }
    

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

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

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

  3. Description 要素の DefaultValue 属性にはプレースホルダー値が含まれています。The 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="My Office Add-in" />
    <Description DefaultValue="A task pane add-in for OneNote"/>
    ...
    

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

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

    npm start
    
  2. Internet Explorer または Microsoft Edge のいずれかを開き、https://localhost:3000 にアクセスします。Open either Internet Explorer or Microsoft Edge and navigate to https://localhost:3000. 証明書エラーなしでページが読み込まれた場合は、この記事の次のセクションに進みます (お試しください)。If the page loads without any certificate errors, proceed to the next section in this article (Try it out). サイトの証明書が信頼できないとブラウザーに表示された場合は、次の手順に進みます。If your browser indicates that the site's certificate is not trusted, you will need to add the certificate as a trusted certificate.

  3. 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. そのため、Internet Explorer または Microsoft Edge のいずれかを使用して、証明書が信頼できることを確認する必要があります。Therefore, you should use either Internet Explorer or Microsoft Edge to verify that the certificate is trusted.

  4. ブラウザーに証明書エラーなしでアドイン ページが読み込まれたら、アドインをテストする準備ができています。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. [アドインのアップロード] ダイアログで、プロジェクト フォルダー内の 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. テキスト エリアに次の HTML コンテンツを入力し、[アウトラインの追加] を選択します。Enter some text in the text area and then choose Add outline.

    <ol>
    <li>Item #1</li>
    <li>Item #2</li>
    <li>Item #3</li>
    <li>Item #4</li>
    </ol>
    

    指定したアウトラインがページに追加されます。The outline that you specified 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