ポートフォリオページ
ポートフォリオページ
小幡 十矛（Obata Tomu）｜プロフィール｜共創で価値をつくるエンジニア・新規事業×ブランドづくり/📝 小幡 十矛（おばた とむ）の共創ブログ｜iOS×新規事業×リアルとデジタルの交差点から生まれる挑戦の記録/Notionのページ内埋め込み徹底解説！

Notionのページ内埋め込み徹底解説！

Notion Advent Calendar 12日目の記事になります。Notionのページ内埋め込みは非常に便利なのでぜひご覧ください！👀
Notionのページ埋め込み機能を完全ガイド！対応コンテンツ一覧やWeb bookmark・embedの違い、TypeformやGoogle Driveなどの活用事例を詳しく解説します。

はじめに

本記事では、ページ内埋め込みすると便利なものについて書いていきます📝

Notionで対応しているページ内埋め込みコンテンツについて

Notionでは以下のような様々な形式のページ内埋め込みに対応しています。(2020/12/12時点)
  • PDF
 
スラッシュコマンドからサポートされている埋め込みコンテンツを確認することも出来ます。
スラッシュコマンドで呼び出せる埋め込みコンテンツ | スラッシュコマンドで呼び出せる埋め込みコンテンツ
スラッシュコマンドで呼び出せる埋め込みコンテンツ | スラッシュコマンドで呼び出せる埋め込みコンテンツ
次に Typeform が便利のためピックアップしてご紹介します。
Typeformは質問フォームを簡単に作成・共有できるツールです。
Notionのページに埋め込むことで、Notion上で回答を完結させることができ、ページ遷移が不要になるので非常に相性が良いと感じています。
ちなみにTypeformはSlackアプリもあります。

Web bookmark, embedとの使い分けについて

URLをペーストすると、以下3つを選択するホップアップが表示されます。
  • Dismiss
  • Create bookmark
  • Create embed
URLペースト時の様子 | URLペースト時の様子
URLペースト時の様子 | URLペースト時の様子
まずは、それぞれの違いについてご説明していきます。
本Advent CalendarsのURL（https://adventar.org/calendars/6140）を例にあげます。
を選択すると、
Dismissを選択した様子 | Dismissを選択した様子
Dismissを選択した様子 | Dismissを選択した様子
を選択すると、
Create bookmarkを選択した様子 | Create bookmarkを選択した様子
Create bookmarkを選択した様子 | Create bookmarkを選択した様子
を選択すると、
Create embedを選択した様子 | Create embedを選択した様子
Create embedを選択した様子 | Create embedを選択した様子
まとめると、このような使い分けになります。
  • URLのみ表示したい場合は、
  • サイト名・サブタイトル・OGP画像・URLを表示したい場合は、
  • Notion上でコンテンツを埋め込んで利用したい場合は、

その他、ページ内埋め込みの活用例

先ほどご紹介したを使うことで、Notionのページ上に様々な拡張が行えます。
くじ引き
Notionにページ内埋め込みした時の様子 | Notionにページ内埋め込みした時の様子
Notionにページ内埋め込みした時の様子 | Notionにページ内埋め込みした時の様子
お天気確認
埋め込み用URLの取得などは以下の記事が大変参考になります。
Notion にお天気ウィジェットを配置し、毎日の天気を確認する
最近 Notion のデイリーログのページにお天気ウィジェットを配置するようになりました。僕は、毎日決まった Notion のページ（デイリーログページ）を開くのですが、そこにお天気ウィジェットを配置しておくことで、その日の天気が嫌でも目に入るようになり、傘を忘れたりすることがなくなくなる見込みです。もちろん、お天気ウィジェットはリアルタイムで自動更新されます。 今日は、このお天気ウィジェットの配置方法を説明したいと思います。大きく以下の 2ステップで実現することができるようになります。各々詳しく解説していきます。 meteoblue というサービスを利用します。こちらのサイトから埋め込み用 URL を取得します。 ページにアクセスすると、以下のような画面になるので、サイドバーから Widget > Widget Day を選択してください。（今回は、1週間単位の天気ウィジェットを作成したかったので、Widget Day を選択しましたが、Widget 3h を選択することで、3時間ごとの天気等も出力可能です。） ウィジェットの設定画面に遷移します。Days を 7 に指定してやることで、一週間の天気を出力できるようになります。そのほかにも設定がいくつかあり、設定によってウィジェットの見た目が変化するので、ポチポチとあとはお好みでいじってみてください。 同じページの下部に、HTML というセクションがあるので、その中から iframe 用の URL をコピーしてください。 src="xxx" となっている、 xxx の部分をコピーします（画像で選択されている部分です）これで、埋め込み用 URL の取得はOKです。 あとは簡単です。先程取得した URL を Notion へと埋め込んでいきます。スラッシュコマンド、もしくは、ブロックの + ボタンから、 Embed を選択します。 URL を入力する欄があるので、さきほど meteoblue からコピーしてきた URL をペーストします。これで設定が完了です。 以下のように、お天気ウィジェットが表示されたら成功です。 お好きな位置に、お天気ウィジェットを配置してみてください。 🙌 冒頭のツイートのスクリーンショットのような見た目で良ければ、以下の URL をまるっとコピーすることで、手順 1 を省略することもできます。もし良ければお使いください。 meteoblue 以外にも、埋め込み URL を発行してくれるサービスがあるかもしれません。もしもっとオシャレなものがあったら教えてください。 🔗 （少しニッチな）Notion の使い方まとめ 以下のボタンを押して、SNS でシェアしてくれたら喜びます 👨‍🎤
https://blog.35d.jp/2020-06-01-notion-weather

さいごに

今回は、Notionのページ内埋め込み機能についてご紹介してきました。
NotionのWeb bookmark機能は、とてもコンパクトかつサイトの主情報がまとまって表示されるので大変気に入ってます 🔖
Web bookmark | Web bookmark
Web bookmark | Web bookmark
13日目の記事は NotionのPDFプレビュー時の注意点と正しく表示する方法 になります。
署名2025/3/3 16:552025/4/1 23:47
Xでポスト
小幡 十矛（Obata Tomu）｜プロフィール｜共創で価値をつくるエンジニア・新規事業×ブランドづくり/📝 小幡 十矛（おばた とむ）の共創ブログ｜iOS×新規事業×リアルとデジタルの交差点から生まれる挑戦の記録/Notionのページ内埋め込み徹底解説！