OneNote ページでノート シールを使用するUse note tags in OneNote pages

適用対象 OneDrive のコンシューマー ノートブック | Office 365 のエンタープライズ ノートブックApplies to Consumer notebooks on OneDrive | Enterprise notebooks on Office 365

次の図に示すように、data-tag 属性を使用してチェック ボックス、星、その他の組み込みノート シールを OneNote ページに追加したり、更新したりします。Use the data-tag attribute to add and update check boxes, stars, and other built-in note tags on a OneNote page, as shown in the following image.

OneNote ページに表示される 3 つのノート シール

ノート シールの属性Note tag attributes

OneNote ページの HTML では、ノート シールは data-tag 属性として示されます。次に例を示します。In the HTML of a OneNote page, a note tag is represented by the data-tag attribute. For example:

  • チェック マークのない To Do ホックス: <p data-tag="to-do">An unchecked to-do box: <p data-tag="to-do">

  • チェック マークのある To Do ホックス: <p data-tag="to-do:completed">A checked to-do box: <p data-tag="to-do:completed">

  • 星: <h2 data-tag="important">A star: <h2 data-tag="important">

data-tag の値は shape で構成されますが、status の場合もあります (すべてのサポートされる値をご覧ください)。A data-tag value is composed of a shape, and sometimes a status (see all supported values).

プロパティProperty 説明Description
shapeshape ノート シールの識別子 (例: to-doto-do または importantimportant)。The identifier of the note tag (example: to-do or important).
statusstatus チェック ボックス ノート シールの状態。The status of check box note tags. チェック ボックスを完了状態に設定する場合にのみ使用します。This is used only to set check boxes as completed.

ノート シールの追加または更新Add or update note tags

組み込みのノート シールは、サポートされた要素で data-tagdata-tag 属性を使用するだけで、追加したり更新したりすることができます。たとえば、重要としてマークされた段落があるとします。 For example, here's a paragraph marked as important:To add or update a built-in note tag, just use the data-tag attribute on a supported element. For example, here's a paragraph marked as important:

<p data-tag="important">...</p>

複数のノート シールをコンマで区切ります。Separate multiple note tags with commas:

<p data-tag="important, critical">...</p>

次の要素の data-tagdata-tag を定義できます。You can define a data-tag on the following elements:

Microsoft Graph で使用できるノート シールのリストの「組み込みノート シール」を参照してください。See Built-in note tags for a list of note tags that you can use with Microsoft Graph. Microsoft Graph を使用したカスタム シールの追加または更新はサポートされていません。Adding or updating custom tags using Microsoft Graph is not supported.

Examples

最初の項目が完了状態の簡単な To Do リストを以下に示します。Here's a simple to-do list with the first item completed.

<p data-tag="to-do:completed" data-id="prep">Till garden bed</p> 
<p data-tag="to-do" data-id="spring">Plant peas and spinach</p>
<p data-tag="to-do" data-id="summer">Plant tomatoes and peppers</p>

上記の <p> タグには、それぞれ data-id 属性が含まれている点に注意してください。Note that the <p> tags above each include a data-id attribute. このようにすると、チェック ボックス ノート シールの更新が簡単になります。This makes it easier to update the check box note tags. たとえば、次に示す要求では、春植え (spring planting) の To Do 項目に完了のマークを付けます。For example, the following request marks the spring planting to-do item as completed.

PATCH https://graph.microsoft.com/v1.0/me/onenote/notebooks/pages/{page-id}/content

Content-Type: application/json
Authorization: Bearer {token}

[
   {
    'target':'#spring',
    'action':'replace',
    'content':'<p data-tag="to-do:completed"  data-id="spring">Plant peas and spinach</p>'
  }
]

次の要求は、すべての組み込みノート シールを含んだページを作成します。The following request creates a page that contains all built-in note tags.

POST https://graph.microsoft.com/v1.0/me/onenote/notebooks/pages

Content-Type: text/html
Authorization: Bearer {token}


<!DOCTYPE html>
<html>
  <head>
    <title data-tag="to-do:completed">All built-in note tags</title>
  </head>
  <body>
    <h1 data-tag="important">Paragraphs with built-in note tags</h1>
    <p data-tag="to-do">to-do</p>
    <p data-tag="important">important</p>
    <p data-tag="question">question</p>
    <p data-tag="definition">definition</p>
    <p data-tag="highlight">highlight</p>
    <p data-tag="contact">contact</p>
    <p data-tag="address">address</p>
    <p data-tag="phone-number">phone-number</p>
    <p data-tag="web-site-to-visit">web-site-to-visit</p>
    <p data-tag="idea">idea</p>
    <p data-tag="password">password</p>
    <p data-tag="critical">critical</p>
    <p data-tag="project-a">project-a</p>
    <p data-tag="project-b">project-b</p>
    <p data-tag="remember-for-later">remember-for-later</p>
    <p data-tag="movie-to-see">movie-to-see</p>
    <p data-tag="book-to-read">book-to-read</p>
    <p data-tag="music-to-listen-to">music-to-listen-to</p>
    <p data-tag="source-for-article">source-for-article</p>
    <p data-tag="remember-for-blog">remember-for-blog</p>
    <p data-tag="discuss-with-person-a">discuss-with-person-a</p>
    <p data-tag="discuss-with-person-b">discuss-with-person-b</p>
    <p data-tag="discuss-with-manager">discuss-with-manager</p>
    <p data-tag="send-in-email">send-in-email</p>
    <p data-tag="schedule-meeting">schedule-meeting</p>
    <p data-tag="call-back">call-back</p>
    <p data-tag="to-do-priority-1">to-do-priority-1</p>
    <p data-tag="to-do-priority-2">to-do-priority-2</p>
    <p data-tag="client-request">client-request</p>
    <h1 data-tag="important">Paragraphs with check boxes marked with "completed" status</h1>
    <p data-tag="to-do:completed">to-do:completed</p>
    <p data-tag="discuss-with-person-a:completed">discuss-with-person-a:completed</p>
    <p data-tag="discuss-with-person-b:completed">discuss-with-person-b:completed</p>
    <p data-tag="discuss-with-manager:completed">discuss-with-manager:completed</p>
    <p data-tag="schedule-meeting:completed">schedule-meeting:completed</p>
    <p data-tag="call-back:completed">call-back:completed</p>
    <p data-tag="to-do-priority-1:completed">to-do-priority-1:completed</p>
    <p data-tag="to-do-priority-2:completed">to-do-priority-2:completed</p>
    <p data-tag="client-request:completed">client-request:completed</p>
    <h1 data-tag="important">Multiple note tags</h1>
    <p data-tag="project-a,  client-request:completed">Two note tags:  project-a, client-request:completed</p>
    <p data-tag="idea, send-in-email, question">Three note tags:  idea, send-in-email, question</p>
    <h1 data-tag="important">Using note tags with other elements</h1>
    <p><b>Note tag on a list item:</b></p>
    <ul>
      <li data-tag="to-do-priority-1:completed">Make a to-do list</li>
    </ul>
    <p><b>Note tag on an image:</b></p>
    <img data-tag="source-for-article" src="https://placecorgi.com/200" />
    <p><b>Note tag with embedded style:</b></p>
    <p data-tag="important">Next time, <b>don't</b> forget to invite <span style="background-color:yellow">Dan</span>.</p>
  </body>
</html>

ページ作成の詳細については、「OneNote ページの作成」を参照してください。ページ更新の詳細については、「OneNote ページの更新」を参照してください。 ページ作成の詳細については、「OneNote ページの作成」を参照してください。ページ更新の詳細については、「OneNote ページの更新」を参照してください。For more information about creating pages, see Create OneNote pages. For more about updating pages, see Update OneNote pages.

リストのノート シールNote tags on lists

リストのノート シールの処理方法に関するいくつかのガイドラインを次に示します。Here are some guidelines for working with note tags on lists:

  • Use p elements for to-do lists. To Do リストには p 要素を使用します。この要素は段落記号や行番号を表示しません。また、簡単に更新できます。Use p elements for to-do lists. They don't display a bullet or number, and they're easier to update.

  • すべてのリスト項目に対して同じノート シールを表示するリストを作成または更新する場合は、ul または oldata-tag を定義します。To create or update lists that display the same note tag for all list items, define data-tag on the ul or ol. リスト全体を更新するには、data-tag または ulol を再定義する必要があります。To update the entire list, you'll need to redefine data-tag on the ul or ol.

  • 一部またはすべてのリストアイテムに固有のノートシールを表示するリストを作成またdata-tagli更新するには、要素liを定義しulol要素をまたはにネストしないようにします。To create or update lists that display a unique note tag for some or all list items, define data-tag on li elements, and don't nest the li elements in a ul or ol. リスト全体を更新するには、出力 HTML で返さulれたを削除し、ネストliされていない要素のみを指定する必要があります。To update the entire list, you'll need to remove the ul that's returned in the output HTML and provide only the unnested li elements.

  • 特定liの要素を更新するにliは、要素を個別data-tagにターゲットliにして、要素にを定義します。To update specific li elements, target the li elements individually and define the data-tag on the li element. 個別に処理された li 要素は、元のリストがどのように定義されていても、一意のノート シールを表示するように更新できます。Any individually addressed li element can be updated to display a unique note tag, no matter how the list was originally defined.

    ガイドラインは、Microsoft Graph によって適用される次の規則に基づいています。The guidelines are based on the following rules that are applied by Microsoft Graph:

    • The data-tag setting for a ul or ol overrides all settings on child li elements. ulul または olol の data-tagdata-tag の設定は、子の lili 要素ですべての設定を上書きします。これは、ul または ol は data-tag を指定しないが、その子の li 要素は指定する場合でも適用されます。The data-tag setting for a ul or ol overrides all settings on child li elements. This applies even when the ul or ol doesn't specify a data-tag but its child li elements do.

      For example, if you create a ul or ol that defines data-tag="project-a", all its list items will display the Project A note tag. Or if the ul or ol doesn't define a data-tag, none of its items will display a note tag. This override happens regardless of any explicit settings on child li elements.For example, if you create a ul or ol that defines data-tag="project-a", all its list items will display the Project A note tag. Or if the ul or ol doesn't define a data-tag, none of its items will display a note tag. This override happens regardless of any explicit settings on child li elements.

  • 以下の条件下では、固有の data-tagdata-tag 設定がリスト項目に適用されます。Unique data-tag settings are honored for list items under the following conditions:

    • 作成または更新要求では、lili 要素が ulul や olol で入れ子になることはありません。The li elements are not nested in a ul or ol in a create or update request.

    • 更新要求では、lili 要素が個別に処理されます。An li element is individually addressed in an update request.

  • 入力 HTML で送信される、入れ子になっていないlili 要素は、出力 HTML では ulul で返されます。Unnested li elements sent in input HTML are returned in a ul in the output HTML.

  • 出力 HTML では、すべての data-tagdata-tag リストの設定はリスト項目の spanspan 要素で定義されます。In output HTML, all data-tag list settings are defined on span elements on the list items.

次のコードは、これらの規則の一部がどのように適用されるかを示しています。入力 HTML は、ノート シールが含まれる 2 つのリストを作成します。出力 HTML は、ページ コンテンツを取得するときに返されるリストです。The following code shows how some of these rules are applied. The input HTML creates two lists with note tags. The output HTML is what's returned for the lists when you retrieve page content.

入力 HTMLInput HTML

<!--To display the same note tag on all list items, define note tags on the ul or ol.--> 
<ul data-tag="project-a" data-id="agenda">
  <li>An item with a Project A note tag</li>
  <li>An item with a Project A note tag</li>
</ul>

<!--To display unique note tags on list items, don't nest li elements in a ul or ol.--> 
<li data-tag="idea" data-id="my-idea">An item with an Idea note tag</li>
<li data-tag="question" data-id="my-question">An item with a Question note tag</li>

出力 HTMLOutput HTML

<ul>
  <li><span data-tag="project-a">An item with a Project A note tag</span></li>
  <li><span data-tag="project-a">An item with a Project A note tag</span></li>
</ul>
<br />
<ul>
  <li style="..."><span data-tag="idea">An item with an Idea note tag</span></li>
  <li style="..."><span data-tag="question">An item with a Question note tag</span></li>
</ul>

ノート シールの取得Retrieve note tags

ページのコンテンツを取得する場合、組み込みのノート シールは出力 HTML に含まれています。Built-in note tags are included in the output HTML when you get page content:

GET ../api/v1.0/pages/{page-id}/content

出力data-tag HTML 内の属性には、常に図形の値が含まれており、[完了] に設定されているチェックボックスノートシールを表す場合は状態のみが含まれます。A data-tag attribute in the output HTML always includes a shape value, and it only includes a status if it represents a check box note tag that's set to completed. 次の例は、いくつかのノートシールを作成するために使用される入力 html と、返される出力 html を示しています。The following examples show the input HTML used to create some note tags and the output HTML that's returned.

入力 HTMLInput HTML

<h1>Status meeting</h1>
<p data-tag="important">Next week's meeting has been moved to <b>Wednesday</b>.</p>
<p data-tag="question">What are the exact dates for the conference?</p>
<p>Upcoming training opportunities. See Katie for more info.</p>
<p data-tag="project-a">Around the room updates.</p>
<ul data-tag="critical">
  <li>Design handouts</li>
  <li>Plan keynote</li>
</ul>

出力 HTMLOutput HTML

<h1 style="...">Status meeting</h1>
<p data-tag="important">Next week's meeting has been moved to <span style="font-weight:bold">Wednesday</span>.</p>
<p data-tag="question">What are the exact dates for the conference?</p>
<p>Upcoming training opportunities. See Katie for more info.</p>
<p data-tag="project-a">Around the room updates.</p>
<ul>
  <li><span data-tag="critical">Design handouts</span></li>
  <li><span data-tag="critical">Plan keynote</span></li>
</ul>

リスト レベルで定義されている data-tagdata-tag 属性は、そのリスト項目にプッシュされます。リストとノート シールの併用の詳細については、「リストのノート シール」を参照してください。 リスト レベルで定義されている data-tag 属性は、そのリスト項目にプッシュされます。リストとノート シールの併用の詳細については、「リストのノート シール」を参照してください。Note that the data-tag attribute defined at the list level is pushed to its list items. For more information about using note tags with lists, see Note tags on lists.

注: 出力 HTML では、[定義] ノートシールと [後で記憶] ノートシールのdata-tag="remember-for-later"両方がとして返されます。Note: In the output HTML, the definition and remember-for-later note tags are both returned as data-tag="remember-for-later". title 要素はノート シールの情報を返しません。The title element doesn't return any note tag information.

OneNote の組み込みノート シールBuilt-in note tags for OneNote

OneNote には、次に示す組み込みのノート シールが用意されています。OneNote includes the following built-in note tags:

All built-in note tags.

data-tag属性に割り当てることができる値を次の表に示します。The values you can assign to the data-tag attribute are shown in the following table. Custom tags are not supported.Custom tags are not supported.

タグTags
shape[:status] to-do

to-do:completed
important
question definition highlight
contact address phone-number
web-site-to-visit idea password
critical project-a project-b
remember-for-later movie-to-see book-to-read
music-to-listen-to source-for-article remember-for-blog
discuss-with-person-a

discuss-with-person-a:completed
discuss-with-person-b

discuss-with-person-b:completed
discuss-with-manager

discuss-with-manager:completed
send-in-email schedule-meeting

schedule-meeting:completed
call-back

call-back:completed
to-do-priority-1

to-do-priority-1:completed
to-do-priority-2

to-do-priority-2:completed
client-request

client-request:completed

応答情報Response information

Microsoft Graph は、応答で次の情報を返します。Microsoft Graph returns the following information in the response.

応答データResponse data 説明Description
成功コードSuccess code 成功した POST 要求に対しては 201 HTTP ステータス コード、成功した PATCH 要求に対しては 204 HTTP ステータス コードが戻ります。A 201 HTTP status code for a successful POST request, and a 204 HTTP status code for a successful PATCH request.
エラーErrors Microsoft Graph から返されることのある OneNote エラーに関する詳細については、「Microsoft Graph の OneNote API のエラー コード」を参照してください。Read Error codes for OneNote APIs in Microsoft Graph to learn about OneNote errors that Microsoft Graph can return.

アクセス許可Permissions

OneNote ページを作成または更新するには、適切なアクセス許可を要求する必要があります。アプリの動作に必要な最低限のアクセス許可を選択してください。To create or update OneNote pages, you'll need to request appropriate permissions. Choose the lowest level of permissions that your app needs to do its work.

POST ページのアクセス許可Permissions for POST pages

  • Notes.CreateNotes.Create
  • Notes.ReadWriteNotes.ReadWrite
  • Notes.ReadWrite.AllNotes.ReadWrite.All

PATCH ページのアクセス許可Permissions for PATCH pages

  • Notes.ReadWriteNotes.ReadWrite
  • Notes.ReadWrite.AllNotes.ReadWrite.All

アクセス許可のスコープと動作のしくみの詳細については、「OneNote のアクセス許可のスコープ」を参照してください。For more information about permission scopes and how they work, see OneNote permission scopes.

関連項目See also