OneNote ページに画像、ビデオ、ファイルを追加する

[アーティクル]
03/26/2023

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

img、object、および iframe 要素を使用すると、OneNote ページの作成時や更新時に、画像、ビデオ、およびファイルをページに追加できます。

img を使用して、ページに画像を表示します。
iframe を使用して、ページにビデオを埋め込みます。
object を使用して、ページに添付ファイルを追加します。

画像を追加する

URL の参照または生データの送信によって、画像を追加できます。 Microsoft Graph では、OneNote ページに画像、ロゴ、および写真を追加する次の方法がサポートされています。

Web からパブリックイメージを追加する

とをsrc="https://image-url"使用imgし、パブリックにアクセス可能なイメージの URL を指定します。 OneNote ページにイメージをレンダリングします。

バイナリデータを使用して画像を追加する

とをsrc="name:image-block-name"使用imgし、マルチパート要求のデータ部分でイメージファイルを送信します。 OneNote ページにイメージをレンダリングします。

Web ページのスナップショットを追加する

とをdata-render-src="https://webpage-url"使用imgし、Web ページの URL を指定します。 OneNote ページ上の Web ページ全体のスナップショットをレンダリングします。

HTML から表示される画像を追加する

data-render-src="name:html-block-name"を使用imgし、マルチパート要求のデータ部分で HTML を送信します。 OneNote ページで HTML をイメージとしてレンダリングします。

PDF ファイルのコンテンツの画像を追加する

<img data-render-src="name:part-name" />を使用します。マルチパート要求のデータ部分で PDF ファイルを送信します。 OneNote ページの個別の画像として、PDF の各ページを表示します。

添付ファイルとして画像ファイルを追加する

とをdata="name:file-block-name" data-attachment="file-name.file-ext" type="media-type"使用objectし、マルチパート要求のデータ部分でイメージファイルを送信します。 OneNote ページに添付ファイルを追加し、ファイルアイコンを表示します。

注:

OneNote ページで画像を取得するには、最初にページのコンテンツの GET 要求を送信します。これにより、ページで画像リソースへの URL を返します。次に、画像リソースに対する GET 要求を分離します。

画像の属性

img 要素には、alt、height、width 属性をオプションで含めることができ、スタイル属性の max-width と max-height を含めることができます。

画像のメディアタイプ

Microsoft Graph では、TIFF、PNG、GIF、JPEG、BMP の画像タイプがサポートされています。変換を望まない別の形式を使用する画像をキャプチャするには、マルチパート要求でバイナリデータを送信します。 Base64 を使用する必要はなく、送信するバイナリデータをエンコードする必要もありません。

注:

API は元の入力画像の種類を検出し、それを出力 HTML の data-fullres-src-type 属性として返します。 API は、data-src-type で最適化された画像の種類も返します。

メディアを含むページを作成する場合に適用する制限を確認してください。

Web からパブリックイメージを追加する

要求の入力 HTML では、<img src="https://..." /> を含め、src 属性に公開されていてアクセス可能な画像の URL を指定します。

Content-Type: multipart/form-data; boundary=MyAppPartBoundary
Authorization: Bearer {access-token}

--MyAppPartBoundary
Content-Disposition: form-data; name="Presentation"
Content-Type: text/html

<!DOCTYPE html>
<html>
  <head>
    <title>A page with an image: Public URL</title>
    <meta name="created" value="2015-11-11T12:45:00.000-8:00"/>
  </head>
  <body>
    <p>This page displays an image from the web.</p>
    <img src="https://..." width="300"/>
  </body>
</html>

--MyAppPartBoundary--

バイナリデータを使用して画像を追加する

要求の Presentation 部分の入力 HTML に、<img src="name:part-name" /> を含めます。ここで、part-name は、バイナリ画像データを含むマルチパート要求のデータ部分の一意識別子です。バイナリデータのみを送信するようにし、Base64 を使用したりエンコードしたりしないでください。

Content-Type: multipart/form-data; boundary=MyAppPartBoundary
Authorization: Bearer {access-token}

--MyAppPartBoundary
Content-Disposition: form-data; name="Presentation"
Content-Type: text/html

<!DOCTYPE html>
<html>
  <head>
    <title>A page with an image: Image binary data</title>
    <meta name="created" value="2015-11-11T12:45:00.000-8:00"/>
  </head>
  <body>
    <p>This page displays the uploaded image.</p>
    <img src="name:image-block-name" alt="a cool image" width="500"/>
  </body>
</html>

--MyAppPartBoundary
Content-Disposition: form-data; name="MyAppPictureId"
Content-Type: image/jpeg

... image binary data ...

--MyAppPartBoundary--

Web ページのスナップショットを追加する

Microsoft Graph を使用して、Web ページ全体のスナップショットを作成し、新しいページに挿入できます。この方法は、Web ページのアーカイブや、(一部の CSS など) OneNote がサポートしない機能を持つ複雑な Web ページをキャプチャする場合に便利です。

要求の入力 HTML では、<img src="https://..." /> を含め、挿入する Web ページの URL を src 属性に指定します。

Content-Type: multipart/form-data; boundary=MyAppPartBoundary
Authorization: Bearer {access-token}

--MyAppPartBoundary
Content-Disposition: form-data; name="Presentation"
Content-Type: text/html

<!DOCTYPE html>
<html>
  <head>
    <title>A page with an image: Webpage capture</title>
    <meta name="created" value="2015-11-11T12:45:00.000-8:00"/>
  </head>
  <body>
    <p>This page displays an image of the webpage.</p>
    <img data-render-src="https://www.onenote.com" width="200"/>
  </body>
</html>

--MyAppPartBoundary--

HTML から表示される画像を追加する

データブロックとして HTML を追加する場合は、ユーザーの資格情報、または事前に読み込まれたブラウザープラグインが必要となるアクティブコンテンツがないことを確認します。 Microsoft Graph が HTML ページを画像にレンダリングするために使用するエンジンには、ユーザーがログインする機能がなく、Adobe Flash、Apple QuickTime のようなプラグインは含まれていません。これはつまり、データの取得にユーザーのログイン資格情報または Cookie が必要な場合、AJAX スクリプトで使用されるような動的に読み込まれるコンテンツが表示されないということです。

要求の Presentation 部分の入力 HTML に、<img data-render-src="name:part-name" /> を含めます。ここで、part-name は、HTML を含むマルチパート要求のデータ部分の一意識別子です。

Content-Type: multipart/form-data; boundary=MyAppPartBoundary
Authorization: Bearer {access-token}

--MyAppPartBoundary
Content-Disposition: form-data; name="Presentation"
Content-Type: text/html

<!DOCTYPE html>
<html>
  <head>
    <title>A page with an image: HTML block</title>
    <meta name="created" value="2015-11-11T12:45:00.000-8:00"/>
  </head>
  <body>
    <p>This page displays the block of HTML as an image.</p>
    <img data-render-src="name:html-block-name" alt="a cool image" width="500"/>
  </body>
</html>

--MyAppPartBoundary
Content-Disposition: form-data; name="html-block-name"
Content-Type: text/html

<html>
<body>
<h1>This HTML will render as an image</h1>
<p><b>Don't</b> try to embed another <i>data-render-src</i> type-image inside the HTML part--
it won't work. Instead, use URL-based real images like this:</p>
<img src="https://cdn.onenote.net/1664161560_Images/OneNote.ico" />
</body>
</html>

--MyAppPartBoundary--

添付ファイルとして画像ファイルを追加する

要求の Presentation 部分の入力 HTML に、<object data="name:part-name" data-attachment="file-name.file-ext" type="media-type/media-subtype" /> を含めます。ここで、part-name は、バイナリ画像データを含むマルチパート要求のデータ部分の一意識別子です。バイナリデータのみを送信するようにし、Base64 を使用したりエンコードしたりしないでください。

Content-Type: multipart/form-data; boundary=MyAppPartBoundary
Authorization: Bearer {access-token}

--MyAppPartBoundary
Content-Disposition: form-data; name="Presentation"
Content-Type: text/html

<!DOCTYPE html>
<html>
  <head>
    <title>A page with an image: Binary image data as file attachment</title>
    <meta name="created" value="2015-11-11T12:45:00.000-8:00"/>
  </head>
  <body>
    <p>This page contains the image as a file attachment.</p>
    <object data-attachment="image-file.jpg" data="name:image-block-name" type="image/jpeg" />
  </body>
</html>

--MyAppPartBoundary
Content-Disposition: form-data; name="logo1-file"
Content-Type: image/jpeg

... binary file data ...

--MyAppPartBoundary--

ファイルのメディアタイプについて説明します。

ビデオを追加する

入力 HTML の <iframe data-original-src="https://..." /> を使用して、OneNote ページにビデオを埋め込むことができます。

サポートされるビデオサイト

Dailymotion
Office Mix
Sway
Sketchfab
TED
YouTube
Vimeo
Vine

iframe の属性

data-original-src

必須。ビデオの URL。

例: data-original-src="https://www.youtube.com/watch?v=3Ztr44aKmQ8"

width

省略可能です。ビデオを含む iframe の幅。既定値は 480 です。

例: width="300"

height

省略可能です。ビデオを含む iframe の高さ。既定値は 360 です。

例: height="300"

例

要求の入力 HTML では、<iframe data-original-src="https://..." /> を含め、data-original-src 属性のビデオの URL を指定します。

Content-Type: multipart/form-data; boundary=MyAppPartBoundary
Authorization: Bearer {access-token}

--MyAppPartBoundary
Content-Disposition: form-data; name="Presentation"
Content-Type: text/html

<!DOCTYPE html>
<html>
    <head>
        <title>A page with an embedded video</title>
    </head>
    <body>
        <iframe data-original-src="https://www.youtube.com/watch?v=3Ztr44aKmQ8" width="340" height="280"/>
    </body>
</html>

--MyAppPartBoundary--

ファイルを追加する

入力 HTML の オブジェクト 要素を使用して、OneNote ページに添付ファイルを追加できます。 PDF ファイルを追加する場合は、 img 要素を使用して PDF ページを画像としてレンダリングできます。

添付ファイルを追加する

<object .../>を使用します。マルチパート要求のデータ部分でファイルを送信します。 OneNote ページでファイルアイコンを表示する添付ファイルを追加します。

PDF ファイルのコンテンツの画像を追加する

ファイルの属性

object 要素には、次の属性が必要です。

data-attachment

OneNote ページで表示するファイル名と拡張子。

例: data-attachment="filename.docx"

data

バイナリファイルのデータを含むマルチパート要求のボディ部の名前。 Microsoft Graph は、ここでの URL 参照の受け渡しはサポートしていません。

例: data="name:part-name"

type

ファイルのメディアタイプ。ページで利用するファイルアイコンの決定に使用されます。また、ユーザーが OneNote からデバイス上のファイルをアクティブ化する際に開始されるアプリケーションを決定します。

例: type="application/pdf"

ファイルのメディアタイプ

Microsoft Graph は、添付ファイルの定義済みのファイルタイプのアイコンを使用し、API がファイルタイプを認識しない場合は汎用のアイコンを使用します。 API によって認識されている一般的なファイルタイプのいくつかを次の表に示します。

application/pdf
application/vnd.openxmlformats-officedocument.wordprocessingml.document
application/vnd.openxmlformats-officedocument.presentationml.presentation
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
image/png
image/jpeg
image/gif
audio/wav
video/mp4
application/msword
application/mspowerpoint
application/excel

メディアを含むページを作成する場合に適用する制限を確認してください。

添付ファイルを追加する

要求の Presentation 部分の入力 HTML に、<object data="name:part-name" data-attachment="file-name.file-ext" type="media-type/media-subtype" /> を含めます。ここで、part-name は、バイナリファイルのデータを含むマルチパート要求のデータ部分の一意識別子です。バイナリデータのみを送信するようにし、Base64 を使用したりエンコードしたりしないでください。

Content-Type: multipart/form-data; boundary=MyAppPartBoundary
Authorization: Bearer {access-token}

--MyAppPartBoundary
Content-Disposition: form-data; name="Presentation"
Content-Type: text/html

<!DOCTYPE html>
<html>
  <head>
    <title>A page with an image file attachment</title>
  </head>
  <body>
    <p>This is an image file attachment.</p>
    <object data-attachment="Logo.jpg" data="name:logo1-file" type="image/jpeg" />
  </body>
</html>

--MyAppPartBoundary
Content-Disposition: form-data; name="logo1-file"
Content-Type: image/jpeg

... binary file data ...

--MyAppPartBoundary--

PDF ファイルのコンテンツの画像を追加する

要求の Presentation 部分の入力 HTML に、<img data-render-src="name:part-name" ... /> を含めます。ここで、part-name は、バイナリファイルのデータを含むマルチパート要求のデータ部分の一意識別子です。バイナリデータのみを送信するようにし、Base64 を使用したりエンコードしたりしないでください。

Content-Type: multipart/form-data; boundary=MyAppPartBoundary
Authorization: Bearer {access-token}

--MyAppPartBoundary
Content-Disposition: form-data; name="Presentation"
Content-Type: text/html

<!DOCTYPE html>
<html>
  <head>
    <title>A page with images of the pages of a PDF file</title>
  </head>
  <body>
    <p>The pages of this PDF file render as images.</p>
    <img data-render-src="name:file-part" alt="PDF file as images" width="500"/>
  </body>
</html>

--MyAppPartBoundary
Content-Disposition: form-data; name="file-part"
Content-Type: application/pdf

... binary file data ...

--MyAppPartBoundary--

POST pages 要求のサイズの上限

画像やファイルのデータを送信する場合は、これらの制限に注意してください:

Microsoft Graph REST API には、4 MB という要求の上限があります。この値を超えると、”要求が大きすぎます (413)” というエラーメッセージとともに失敗します。
基になる OneNote REST API の要求の上限はより高くなっていますが、Microsoft Graph API 経由でそれを利用することはできません。
- 合計 POST サイズの上限は 70 MB までであり、画像、ファイル、その他のデータが含まれます。実際の上限は、ダウンストリームのエンコーディングの影響を受けるため、固定のバイト数の上限はありません。上限を超える要求は、信頼性の低い結果を生み出す可能性があります。
- 各データ部分の上限は、part ヘッダーを含めて 25 MB です。上限を超えるデータ部分は、Microsoft Graph によって拒否されます。
ページあたりの画像の最大数は 150 です。属性を src="https://..." 使用する場合、API は制限を超えて img タグを無視します。
データ部分の最大数は、必須の Presentation パートを含めて 1 POST あたり 6 です。
各要求には、data-render-src を使用する最大 5 つの img 要素と、data-render-src を使用する 1 つのオブジェクト要素を含めることができます。追加のイメージ参照とファイル参照は無視されます。
1 つの POST 内のイメージの最大数は、API に送信するために使用する方法に関係なく、30 です。追加のイメージは無視されます。多数の画像を含む Web ページをキャプチャする場合は、ページ全体をスナップショットとしてキャプチャすることを検討してください。

HTML を使用する場合と data-render-src を使用する場合

HTML を OneNote ページに直接配置するか、data-render-src 属性を使用するかを検討している場合、以下を考慮してください。

複雑な HTML は、Microsoft Graph が受け入れることができるように HTML を変更するよりも、data-render-src を使用してレンダリングエンジンに送信する方がおそらく適しています。これは、サポートされていないタグが HTML に含まれている場合にも当てはまります。
ページのレイアウトや外観を保持する正確なページレンダリングは、data-render-src を使用してレンダリングエンジンを使用する方法が最適かもしれません。
直接編集可能なテキストは、多くの場合 HTML をページに直接挿入する方法が適しています。表示された画像は、光学式文字認識 (OCR) システムによってスキャンされますが、これは同じではありません。
履歴またはアーカイブのためのスナップショットインタイムには、通常 data-render-src メソッドが最も適しています。
改訂するための Web ページ設計のマークアップは、data-render-src が真価を発揮する分野です。 OneNote のインク機能を使用して、変更箇所を示すためイメージ上に描画したり、重要な場所をコールアウトすることができます。 Web ページをイメージにすることにより、これらがより簡単になります。
非常に大きい画像、または OneNote が直接受け入れない形式の画像は、data-render-src 属性を使用すると、独自のコードで行うよりも容易にサムネイル化し変換できる場合があります。画像がオンラインでも利用できる場合でも、POST にデータを埋め込むことで、OneNote ページの構築に必要なラウンドトリップの合計数を減らし、キャプチャしたページを OneNote ユーザーがすぐに利用できるようになる場合があります。

ユーザーにどの方法が最適かを判断するのに、アプリを開発する際に両方の方法を試してみることが最善の場合があります。

アクセス許可

OneNote ページを作成または更新するには、適切なアクセス許可を要求する必要があります。アプリで作業を行う必要がある最も低いレベルを選択します。

POST ページのアクセス許可

Notes.Create
Notes.ReadWrite
Notes.ReadWrite.All

PATCH ページのアクセス許可

Notes.ReadWrite
Notes.ReadWrite.All

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

OneNote ページに画像、ビデオ、ファイルを追加する

画像を追加する

画像の属性

画像のメディアタイプ

Web からパブリックイメージを追加する

バイナリデータを使用して画像を追加する

Web ページのスナップショットを追加する

HTML から表示される画像を追加する

添付ファイルとして画像ファイルを追加する

ビデオを追加する

サポートされるビデオサイト

iframe の属性

data-original-src

width

height

例

ファイルを追加する

ファイルの属性

ファイルのメディアタイプ

添付ファイルを追加する

PDF ファイルのコンテンツの画像を追加する

POST pages 要求のサイズの上限

HTML を使用する場合と data-render-src を使用する場合

アクセス許可

POST ページのアクセス許可

PATCH ページのアクセス許可

フィードバック

フィードバック

その他のリソース

OneNote ページに画像、ビデオ、ファイルを追加する

画像を追加する

画像の属性

画像のメディア タイプ

Web からパブリック イメージを追加する

バイナリ データを使用して画像を追加する

Web ページのスナップショットを追加する

HTML から表示される画像を追加する

添付ファイルとして画像ファイルを追加する

ビデオを追加する

サポートされるビデオ サイト

iframe の属性

data-original-src

width

height

例

ファイルを追加する

ファイルの属性

ファイルのメディア タイプ

添付ファイルを追加する

PDF ファイルのコンテンツの画像を追加する

POST pages 要求のサイズの上限

HTML を使用する場合と data-render-src を使用する場合

アクセス許可

POST ページのアクセス許可

PATCH ページのアクセス許可

関連コンテンツ

フィードバック

フィードバック

その他のリソース

画像のメディアタイプ

Web からパブリックイメージを追加する

バイナリデータを使用して画像を追加する

サポートされるビデオサイト

ファイルのメディアタイプ