OneNote ページでノート シールを使用するUse note tags in OneNote pages
適用対象OneDrive のコンシューマーノートブック |Microsoft 365 のエンタープライズノートブックApplies to Consumer notebooks on OneDrive | Enterprise notebooks on Microsoft 365
次の図に示すように、data-tagdata-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.
ノート シールの属性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:
- pp
- ul、ol、li (詳細については、「リストのノート シール」を参照)ul, ol, li (see more about note tags on lists)
- imgimg
- h1 - h6h1 - h6
- titletitle
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
pelements for to-do lists. To Do リストには p 要素を使用します。この要素は段落記号や行番号を表示しません。また、簡単に更新できます。Usepelements for to-do lists. They don't display a bullet or number, and they're easier to update.すべてのリスト項目に対して同じノート シールを表示するリストを作成または更新する場合は、
ulまたはolにdata-tagを定義します。To create or update lists that display the same note tag for all list items, definedata-tagon theulorol. リスト全体を更新するには、data-tagまたはulにolを再定義する必要があります。To update the entire list, you'll need to redefinedata-tagon theulorol.一部またはすべてのリストアイテムに固有のノートシールを表示するリストを作成または更新するには、要素を定義し、要素をまたはにネストしないようにし
data-tagliliulolます。To create or update lists that display a unique note tag for some or all list items, definedata-tagonlielements, and don't nest thelielements in aulorol. リスト全体を更新するには、出力 HTML で返されたを削除し、ネストされてulいない要素のみを指定する必要がありliます。To update the entire list, you'll need to remove theulthat's returned in the output HTML and provide only the unnestedlielements.特定の要素を更新するには、要素を
li個別にターゲットにしてli、要素にを定義しdata-tagliます。To update specificlielements, target thelielements individually and define thedata-tagon thelielement. 個別に処理されたli要素は、元のリストがどのように定義されていても、一意のノート シールを表示するように更新できます。Any individually addressedlielement 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-tagsetting for auloroloverrides all settings on childlielements. ululまたは ololの data-tagdata-tagの設定は、子の lili要素ですべての設定を上書きします。これは、ul または ol は data-tag を指定しないが、その子の li 要素は指定する場合でも適用されます。Thedata-tagsetting for auloroloverrides all settings on childlielements. This applies even when theuloroldoesn't specify adata-tagbut its childlielements do.For example, if you create a
ulorolthat definesdata-tag="project-a", all its list items will display the Project A note tag. Or if theuloroldoesn't define adata-tag, none of its items will display a note tag. This override happens regardless of any explicit settings on childlielements.For example, if you create aulorolthat definesdata-tag="project-a", all its list items will display the Project A note tag. Or if theuloroldoesn't define adata-tag, none of its items will display a note tag. This override happens regardless of any explicit settings on childlielements.
以下の条件下では、固有の data-tag
data-tag設定がリスト項目に適用されます。Uniquedata-tagsettings are honored for list items under the following conditions:作成または更新要求では、li
li要素が ululや ololで入れ子になることはありません。Thelielements are not nested in aulorolin a create or update request.更新要求では、li
li要素が個別に処理されます。Anlielement is individually addressed in an update request.
入力 HTML で送信される、入れ子になっていないli
li要素は、出力 HTML では ululで返されます。Unnestedlielements sent in input HTML are returned in aulin the output HTML.出力 HTML では、すべての data-tag
data-tagリストの設定はリスト項目の spanspan要素で定義されます。In output HTML, alldata-taglist settings are defined onspanelements 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 asdata-tag="remember-for-later".title要素はノート シールの情報を返しません。Thetitleelement doesn't return any note tag information.
OneNote の組み込みノート シールBuilt-in note tags for OneNote
OneNote には、次に示す組み込みのノート シールが用意されています。OneNote includes the following built-in note tags:
次の一覧に、属性に割り当てることができる値を data-tag 示します。The values you can assign to the data-tag attribute are shown in the following list. Custom tags are not supported.Custom tags are not supported.
shape[:status]to-doto-do:completedimportantquestiondefinitionhighlightcontactaddressphone-numberweb-site-to-visitideapasswordcriticalproject-aproject-bremember-for-latermovie-to-seebook-to-readmusic-to-listen-tosource-for-articleremember-for-blogdiscuss-with-person-adiscuss-with-person-a:completeddiscuss-with-person-bdiscuss-with-person-b:completeddiscuss-with-managerdiscuss-with-manager:completedsend-in-emailschedule-meetingschedule-meeting:completedcall-backcall-back:completedto-do-priority-1to-do-priority-1:completedto-do-priority-2to-do-priority-2:completedclient-requestclient-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.