Web ページで OneNote 保存ダイアログを使用する

  • [アーティクル]

適用対象: OneDrive のコンシューマー ノートブックのみ

OneNote の保存ダイアログは、Web 開発者が容易に Web ページを OneNote に送信できるようにします。必要なパラメーターを指定した URL を埋め込むだけで、保存ダイアログにより認証が行われ、転送先を選択するプロンプトがユーザーに表示されます。

保存ダイアログをプレビューする

OneNote の保存ダイアログが実行される様子を見るには、次の手順に従います。

  1. 次のアンカー タグを自分の Web ページの HTML にコピーします。

     <a href="https://www.onenote.com/clipper/save?sourceUrl=https://dev.onenote.com/&
 imgUrl=http://antyapps.pl/wp-content/uploads/2013/09/onenote-logo-630x347.jpg&
 title=Use the OneNote save dialog on your webpages&
 description=It's easy to send web content to OneNote with the OneNote save dialog!&
 notes=Sending the OneNote Dev Center webpage to OneNote."
 onclick="window.open(this.href, 'targetWindow', 'width=525, height=525'); return false;">
 Try the OneNote save dialog</a>

  2. リンクをクリックします。Microsoft アカウントを使用して認証を行うと、次のダイアログ ボックスが表示されます。

    OneNote の保存ダイアログ

  3. ページを保存するノートブックとセクションを選択して、[クリップ] をクリックします。ダイアログにより、OneNote Dev Center ページが保存されます。

保存ダイアログは、サイズが 525 x 525 ピクセルのウィンドウで起動することをお勧めします。OneNote のロゴを使用するボタンを作成する場合は、設計に役立つ「ブランドのガイドライン」を参照してください。

次のセクションでは、リンクで使用される URL を分割して、独自の URL を作成する方法について説明します。

保存ダイアログの URL を構築する

OneNote の保存ダイアログを起動するためのベース URL は https://www.onenote.com/clipper/save です。 https://www.onenote.com/clipper/save

これは、各クエリ文字列パラメーターをプレースホルダーにすると、完全な URL がどのようになるのかを示しています。

https://www.onenote.com/clipper/save?sourceUrl={url}&imgUrl={url}&title={text}&description={text}&notes={text}`

次の表は、各クエリ文字列パラメーターについて説明しています。sourceUrl パラメーター以外は必要ありませんが、優れたユーザー エクスペリエンスを提供するために、imgUrl パラメーター、title パラメーター、および description パラメーターも設定します。

パラメーター 説明
sourceUrl 必須

OneNote に送信する Web ページの URL。 このページのスクリーン ショットは、ユーザーが選択したノートブックとセクションに追加されます。
imgUrl 推奨

ユーザーの認証後、保存ダイアログの左上隅に表示されるイメージ。 このイメージにより、Web ページのプレビュー、またはユーザーがターゲットのページを確認するための目印を提供します。 このイメージは OneNote には送信されません。
title 推奨

OneNote ページのタイトル。
説明 推奨

Web ページの説明。 imgUrl パラメーターに渡されるイメージと同様に、このテキストもユーザーがページを確認するために役立ちます。 このテキストはダイアログに表示されますが、OneNote には送信されません。 90 文字を超える説明は切り捨てられます。
注意事項 省略可

Web ページに関するメモ。 ダイアログのテキスト ボックスに自動入力されます。 ページを送信する前に、ユーザーはダイアログでメモを追加することもできます。 メモは、OneNote に表示されます。

関連項目