ポートフォリオページ
ポートフォリオページ
小幡 十矛（Obata Tomu）｜価値を共創するエンジニア・アプリ開発・新規事業立ち上げ・ブランドづくり/📝小幡 十矛（Obata Tomu）の技術・ビジネスブログ｜iOS・Notion・価値を共創するエンジニアの知見/📝 記事一覧/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プレビュー時の注意点と正しく表示する方法 になります。
小幡 十矛（Obata Tomu）｜価値を共創するエンジニア
東京を拠点に、アプリ開発・新規事業立ち上げ・ブランドづくりに取り組んでいます。
2021年にサイバーエージェントへ新卒入社後、ABEMA Live や AmebaブログのiOSアプリ開発を担当。
現在はフリーランスとして、複数の新規プロダクトやリアル店舗の立ち上げに挑戦中です。
🎯 Mission｜人の挑戦を加速する仕組みをつくる ── アイデアを形にし、前に進める“土台”や“場”を共創する
📌 「リアルな場 × デジタル」の可能性を探求し、新しい挑戦が生まれる土壌を育てる
🔹 エンジニアリング × ビジネスの視点から、アイデアを形にし、成長を支えていく
🔹 実店舗オーナーを目指し、オーダースーツ・ドライヘッドスパ・セレクトショップの複合店舗の立ち上げにも挑戦中
👥 特に、社会人1〜5年目くらいで
「やりたい気持ちはあるけど、最初の一歩に迷っている」方へ。 「自分の可能性をもっと広げたい」 「モヤっとしたアイデアがあるけど、どう進めていいかわからない」 そんなフェーズにいる方と、一緒に考えたり、手を動かしたりできたら嬉しいです。
🌱 「挑戦したい20代」との出会いも、大切にしています。 「ちょっと話してみたいな」くらいの気持ちで、気軽に声をかけてもらえたら嬉しいです！🙌
📷 Instagram（リアルイベントや趣味の発信中心）： https://www.instagram.com/tomu28creator
🌐 詳しいプロフィールはこちら https://obata-tomu.jp/
Xでポスト
小幡 十矛（Obata Tomu）｜価値を共創するエンジニア・アプリ開発・新規事業立ち上げ・ブランドづくり/📝小幡 十矛（Obata Tomu）の技術・ビジネスブログ｜iOS・Notion・価値を共創するエンジニアの知見/📝 記事一覧/Notionのページ内埋め込み徹底解説！