OneNote ページでノートタグを使用する

[アーティクル]
11/07/2024

適用対象 OneDrive のコンシューマーノートブック | Microsoft 365 のエンタープライズノートブック

次の図に示すように、data-tagdata-tag 属性を使用してチェックボックス、星、その他の組み込みノートシールを OneNote ページに追加したり、更新したりします。

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

ノートシールの属性

OneNote ページの HTML では、ノートシールは data-tag 属性として示されます。以下に例を示します。

オフになっている To Do ボックス: <p data-tag="to-do">
チェックされた To Do ボックス: <p data-tag="to-do:completed">
star:<h2 data-tag="important">

data-tag の値は shape で構成されますが、status の場合もあります (すべてのサポートされる値をご覧ください)。

プロパティ	説明
shape	ノートシールの識別子 (例: to-do`to-do` または important`important`)。
status	チェックボックスノートシールの状態。チェックボックスを完了状態に設定する場合にのみ使用します。

ノートシールの追加または更新

組み込みのノートシールは、サポートされた要素で data-tag 属性を使用するだけで、追加したり更新したりすることができます。例として、important というマークが付けられた段落を次に示します。

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

複数のノートシールをコンマで区切ります。

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

次の要素の data-tagdata-tag を定義できます。

p
ul、ol、li (詳細については、「リストのノートシール」を参照)
img
h1 - h6
title

Microsoft Graph で使用できるノートシールのリストの「組み込みノートシール」を参照してください。 Microsoft Graph を使用したカスタムシールの追加または更新はサポートされていません。

例

最初の項目が完了状態の簡単な To Do リストを以下に示します。

<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>

たとえば、次の要求は、2 番目の To Do 項目を完了済みとしてマークします。

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

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

[
   {
    'target':'p:{33f8a242-7c33-4bb2-90c5-8425a68cc5bf}{40}',
    'action':'replace',
    'content':'<p data-tag="to-do:completed"  data-id="spring">Plant peas and spinach</p>'
  }
]

次の要求は、すべての組み込みノートシールを含んだページを作成します。

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 ページの更新」を参照してください。

リストのノートシール

リストのノートシールの処理方法に関するいくつかのガイドラインを次に示します。

To Do リストの要素を使用 p します。この要素は行頭文字も番号も表示せず、更新が簡単に行えます。
すべてのリスト項目に対して同じノートシールを表示するリストを作成または更新する場合は、ul または ol に data-tag を定義します。リスト全体を更新するには、data-tag または ul に ol を再定義する必要があります。
一部またはすべてのリスト項目の一意のメモタグを表示するリストを作成または更新するには、要素をli定義data-tagし、または olにul要素をli入れ子にしないでください。リスト全体を更新するには、出力 HTML で返されるを ul 削除し、未更新 li の要素のみを指定する必要があります。
特定のli要素を更新するには、要素を個別にli対象とし、要素に対してをdata-tagli定義します。個別に処理された li 要素は、元のリストがどのように定義されていても、一意のノートシールを表示するように更新できます。

ガイドラインは、Microsoft Graph によって適用される次の規則に基づいています。
- data-tag または ul の ol 設定は、子 li 要素の設定をすべて上書きします。これは、子 ul 要素でのみ ol を指定している (data-tag または li では指定していない) 場合にも当てはまります。
  
  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 設定がリスト項目に適用されます。
- 作成または更新要求では、lili 要素が ulul や olol で入れ子になることはありません。
- 更新要求では、lili 要素が個別に処理されます。
入力 HTML で送信される、入れ子になっていないlili 要素は、出力 HTML では ulul で返されます。
出力 HTML では、すべての data-tagdata-tag リストの設定はリスト項目の spanspan 要素で定義されます。

次のコードは、これらの規則の一部がどのように適用されるかを示しています。入力 HTML は、ノートシールが含まれる 2 つのリストを作成します。出力 HTML は、ページコンテンツを取得するときに返されるリストです。

入力 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>

出力 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>

ノートシールの取得

ページのコンテンツを取得する場合、組み込みのノートシールは出力 HTML に含まれています。

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

data-tag出力 HTML の属性には常に図形値が含まれており、完了に設定されているチェックボックスノートタグを表す場合にのみ状態が含まれます。次の例は、ノートタグの作成に使用される入力 HTML と、返される出力 HTML を示しています。

入力 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>

出力 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-tag 属性がリスト項目にプッシュされている点に注目してください。リストにノートシールを使用することに関する詳細については、「リストのノートシール」を参照してください。

注:

出力 HTML では、[定義] ノートシールと [要確認] ノートシールが、どちらも data-tag="remember-for-later" として返されます。 title 要素はノートシールの情報を返しません。

OneNote の組み込みノートシール

OneNote には、次に示す組み込みのノートシールが用意されています。

All built-in note tags.

属性に割り当てることができる値を data-tag 次の一覧に示します。 Custom tags are not supported.

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

応答情報

Microsoft Graph は、応答で次の情報を返します。

応答データ	説明
成功コード	成功した POST 要求に対しては 201 HTTP ステータスコード、成功した PATCH 要求に対しては 204 HTTP ステータスコードが戻ります。
エラー	Microsoft Graph から返されることのある OneNote エラーに関する詳細については、「Microsoft Graph の OneNote API のエラーコード」を参照してください。

アクセス許可

OneNote ページを作成または更新するには、適切なアクセス許可を要求する必要があります。アプリの動作に必要な最低限のアクセス許可を選択してください。

POST ページのアクセス許可

Notes.Create
Notes.ReadWrite
Notes.ReadWrite.All

PATCH ページのアクセス許可

Notes.ReadWrite
Notes.ReadWrite.All

アクセス許可のスコープと動作のしくみの詳細については、「OneNote のアクセス許可のスコープ」を参照してください。

次の方法で共有

OneNote ページでノートタグを使用する

ノートシールの属性

ノートシールの追加または更新

例

リストのノートシール

入力 HTML

出力 HTML

ノートシールの取得

入力 HTML

出力 HTML

OneNote の組み込みノートシール

応答情報

アクセス許可

POST ページのアクセス許可

PATCH ページのアクセス許可

フィードバック

その他のリソース

次の方法で共有

OneNote ページでノート タグを使用する

ノート シールの属性

ノート シールの追加または更新

例

リストのノート シール

入力 HTML

出力 HTML

ノート シールの取得

入力 HTML

出力 HTML

OneNote の組み込みノート シール

応答情報

アクセス許可

POST ページのアクセス許可

PATCH ページのアクセス許可

関連コンテンツ

フィードバック

その他のリソース

OneNote ページでノートタグを使用する

ノートシールの属性

ノートシールの追加または更新

リストのノートシール

ノートシールの取得

OneNote の組み込みノートシール