Notionのページ内埋め込みに適したコンテンツ紹介①WeatherWidget

NotionAdvent Calendar
Tomu Obata
📅2020/12/15

Notion Advent Calendar 15日目の記事になります。Apption・レスポンシブお天気Widgetの紹介をしています☀️

はじめに

12日目の「Notionのページ内埋め込み徹底解説!」ではスラッシュコマンドからページ内埋め込み出来るコンテンツをメインにご紹介しました。

今回は、Notionのページ内埋め込みに適したコンテンツについて書いていきます📝

Notionのページ内埋め込み徹底解説!
Notion Advent Calendar Notion Advent Calendar 12日目の記事になります。Notionのページ内埋め込みは非常に便利なのでぜひご覧ください!👀 本記事では、ページ内埋め込みすると便利なものについて書いていきます📝 Notionでは以下のような様々な形式のページ内埋め込みに対応しています。 スラッシュコマンドからサポートされている埋め込みコンテンツを確認することも出来ます。 次に Typeform が便利のためピックアップしてご紹介します。 Typeform は質問フォームを簡単に作成・共有できるツールです。 Notionのページに埋め込むことで、Notion上で回答を完結させることができ、ページ遷移が不要になるので非常に相性が良いと感じています。 ちなみに Typeform はSlackアプリもあります。 URLをペーストすると、以下3つを選択するホップアップが表示されます。 まずは、それぞれの違いについてご説明していきます。 本Advent CalendarsのURL( https://adventar.org/calendars/6140 )を例にあげます。 まとめると、このような使い分けになります。 URLのみ表示したい場合は、Dismiss サイト名・サブタイトル・OGP画像・URLを表示したい場合は、Create bookmark Notion上でコンテンツを埋め込んで利用したい場合は、Create embed 先ほどご紹介した Create embed を使うことで、Notionのページ上に様々な拡張が行えます。 くじ引き お天気確認 埋め込み用URLの取得などは以下の記事が大変参考になります。 今回は、Notionのページ内埋め込み機能についてご紹介してきました。 NotionのWeb bookmark機能は、とてもコンパクトかつサイトの主情報がまとまって表示されるので大変気に入ってます 🔖 13日目の記事は「 PDFプレビューの注意点について 」になります。

Notionのページ内埋め込みに適したコンテンツを複数紹介しているサービス:Apption

ApptionはNotion埋め込みに適したコンテンツを一覧で見ることがサービスになります。

様々なコンテンツを一覧で見ることが出来るので非常に便利です!

ジャンル検索も可能👌

Apptionの検索について
Apptionの検索について

WeatherWidget -レスポンシブお天気 Widget -

まずは、WeatherWidgetというページ内に綺麗にお天気情報を埋め込むことが出来るサービスを紹介します。

Notionに埋め込む際に必要な手順についてご紹介していきます。

手順1:WeatherWidgetからHTMLコードを取得

以下にアクセスし表示したい内容を設定した後、「GET CODE」をClickしHTMLコードを取得します。

WeatherWidgetの特徴:

テーマのカスタマイズ一覧
テーマのカスタマイズ一覧

Settingが終了した後は、「GET Code」をClickしHTMLコードを取得します。

WeatherWidgetの様子
WeatherWidgetの様子

手順2:Notion埋め込み用のURLを生成

以下サイトにアクセスし、手順1で取得したHTML Codeをペースト後、Generate URLボタンをClickします。

Notion埋め込み用のURLを生成している様子
Notion埋め込み用のURLを生成している様子

手順3:Notionにページ内埋め込みを行う

以下のスラッシュコマンドを使いEmbed linkに生成したURLを入力します。

Embed linkに生成したURLを入力している様子
Embed linkに生成したURLを入力している様子

一例として、https://apption.co/embeds/phu293 を埋め込んだ場合は以下のように表示されます。

WeatherWidgetで生成したWidgetをNotionに埋め込んだ様子
WeatherWidgetで生成したWidgetをNotionに埋め込んだ様子

さいごに

今回は、Notionのページ内埋め込みに適したコンテンツ紹介 その1ということでWeatherWidgetを取り上げてご紹介しました🌤️

16日目の記事は「Notionのページ内埋め込みに適したコンテンツ紹介その②Comments for Notion, Link Copy」になります。

SHARE

スポンサーリンク