最初の OneNote アドインをビルドする

この記事では、jQuery と Office JavaScript API を使用して OneNote アドインを作成する手順について説明します。

前提条件

アドイン プロジェクトの作成

  1. ローカル ドライブにフォルダーを作成し、my-onenote-addin という名前を付けます。 ここにアドインのファイルを作成します。

  2. 新しいフォルダーに移動します。

    cd my-onenote-addin
    
  3. Yeoman ジェネレーターを使用して、OneNote アドイン プロジェクトを作成します。 次のコマンドを実行し、以下のプロンプトに応答します。

    yo office
    
    • Would you like to create a new subfolder for your project?: (プロジェクトの新しいサブフォルダーを作成しますか) No
    • What would you want to name your add-in?: (アドインの名前を何にしますか) OneNote Add-in
    • Which Office client application would you like to support?: (どの Office クライアント アプリケーションをサポートしますか) OneNote
    • Would you like to create a new add-in?: (新しいアドインを作成しますか) Yes
    • Would you like to use TypeScript?: (TypeScript を使用しますか) No
    • Choose a framework: (フレームワークを選択してください) Jquery

      次に、resource.html を開くかどうかを確認するメッセージがジェネレーターによって表示されます。このチュートリアルでは開く必要はありませんが、関心がある場合は自由に開くことができます。[はい] または [いいえ] を選択してウィザードを完了し、ジェネレーターが作業を実行することを許可します。

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

コードを更新する

  1. コード エディターで、プロジェクトのルートにある index.html を開きます。 このファイルには、アドインの作業ウィンドウにレンダリングされる HTML が含まれています。

  2. <body> 要素内の <main> 要素を次のマークアップに置き換えて、ファイルを保存します。 これは、Office UI Fabric コンポーネントを使用してテキスト領域とボタンを追加します。

    <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. app.js ファイルを開いて、アドインのスクリプトを指定します。 すべての内容を次のコードに置き換え、ファイルを保存します。

    'use strict';
    
    (function () {
    
        Office.initialize = function (reason) {
            $(document).ready(function () {
                app.initialize();
    
                // 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)); 
                        } 
                    }); 
            });
        }
    })();
    

マニフェストを更新する

  1. one-note-add-in-manifest.xml ファイルを開いて、アドインの設定と機能を定義します。

  2. ProviderName 要素にはプレースホルダー値が含まれています。 それを自分の名前に置き換えます。

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

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

    ...
    <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"/>
    ...
    

開発用サーバーの起動

  1. プロジェクトのルートで bash ターミナルを開いて、次に示すコマンドを実行して開発用サーバーを起動します。

    npm start
    

    これで、https://localhost:3000 で Web サーバーが起動し、そのアドレスで既定のブラウザーが開きます。

  2. Office Web アドインは、開発中であっても HTTP ではなく HTTPS を使用する必要があります。 ブラウザーにサイトの証明書が信頼されていないことが示された場合は、その証明書を信頼された証明書として追加する必要があります。 詳細については、「自己署名証明書を信頼されたルート証明書として追加する」を参照してください。

    注意

    自己署名証明書を信頼されたルート証明書として追加する」で説明されているプロセスを完了した後でも、Chrome (Web ブラウザー) は、サイトの証明書が信頼されていないことを引き続き示すことがあります。 Chrome でのこの警告は無視して構いません。また、Internet Explorer あるいは Microsoft Edge の https://localhost:3000 に移動して、証明書が信頼されていることを確認することもできます。

  3. ブラウザーに証明書エラーなしでアドイン ページが読み込まれたら、アドインをテストする準備ができています。

試してみる

  1. OneNote Online でノートブックを開きます。

  2. [挿入] > [Office アドイン] の順に選択し、[Office アドイン] ダイアログを開きます。

    • コンシューマー アカウントでサインインしている場合は、[マイ アドイン] タブを選択し、[マイ アドインのアップロード] を選択します。

    • 職場または学校アカウントでサインインしている場合は、[自分の所属組織] タブを選択し、[マイ アドインのアップロード] を選択します。

      次の図は、コンシューマー ノートブックの [マイ アドイン] タブを示しています。

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

  3. [アドインのアップロード] ダイアログで、プロジェクト フォルダー内の one-note-add-in-manifest.xml を参照し、[アップロード] を選択します。

  4. アドインは、OneNote ページの横にある iFrame で開きます。テキスト領域にテキストを入力し、[アウトラインの追加] をクリックします。入力したテキストは、ページに追加されます。

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

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

  • ブラウザーの開発者ツールを使ってアドインをデバッグできます。Gulp Web サーバーを使っており、Internet Explorer や Chrome でデバッグしている場合は、ローカルで変更を保存して、アドインの iFrame を更新するだけです。

  • OneNote オブジェクトを調べる場合、現在使用可能なプロパティに実際の値が表示されます。読み込む必要のあるプロパティには、undefined と表示されます。_proto_ ノードを展開し、オブジェクトで定義されているものの、まだ読み込まれていないプロパティを確認します。

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

  • アドインで任意の HTTP リソースを使っている場合は、ブラウザーで混在したコンテンツを有効にする必要があります。運用アドインでは、セキュリティで保護された HTTPS リソースのみを使う必要があります。

  • 作業ウィンドウ アドインは、任意の場所から開くことができますが、コンテンツアドインは、通常のページ コンテンツ (タイトル、イメージ、iframe などは含まない) の内部にのみ挿入できます。

次の手順

これで完了です。OneNote アドインが正常に作成されました。 次に、OneNote アドイン構築の中心概念の詳細について説明します。

関連項目