Notionのページ内埋め込みに適したコンテンツ紹介その③Simple CountDown

NotionAdvent Calendar
Tomu Obata
📅2020/12/17

Notion Advent Calendar 17日目の記事になります。

はじめに

本記事では、15日目16日目に続きでNotionのページ内埋め込みに適したコンテンツについて書いていきます📝

Notionのページ内埋め込みに適したコンテンツ紹介①WeatherWidget
Notion Advent Calendar Notion Advent Calendar 15日目の記事になります。Apption・レスポンシブお天気Widgetの紹介をしています。 12日目の「 Notionのページ内埋め込み徹底解説! 」ではスラッシュコマンドからページ内埋め込み出来るコンテンツをメインにご紹介しました。 今回は、Notionのページ内埋め込みに適したコンテンツについて書いていきます📝 Apption はNotion埋め込みに適したコンテンツを一覧で見ることがサービスになります。 様々なコンテンツを一覧で見ることが出来るので非常に便利です! ジャンル検索も可能👌 まずは、WeatherWidgetというページ内に綺麗にお天気情報を埋め込むことが出来るサービスを紹介します。 Notionに埋め込む際に必要な手順についてご紹介していきます。 以下 にアクセスし表示したい内容を設定した後、「GET CODE」をClickしHTMLコードを取得します。 WeatherWidget の特徴: テーマなどカスタマイズ可能な内容が多い点が嬉しいです😄 Settingが終了した後は、「GET Code」をClickしHTMLコードを取得します。 以下サイトにアクセスし、手順1で取得したHTML Codeをペースト後、 Generate URL ボタンをClickします。 以下のスラッシュコマンドを使い Embed link に生成したURLを入力します。 一例として、 https://apption.co/embeds/phu293 を埋め込んだ場合は以下のように表示されます。 今回は、Notionのページ内埋め込みに適したコンテンツ紹介 その1ということでWeatherWidgetを取り上げてご紹介しました🌤️ 16日目の記事は「 Notionのページ内埋め込みに適したコンテンツ紹介その②Comments for Notion, Link Copy 」になります。

指定した日時のカウントダウンを行いたい時は

Simple CountDownで生成したURLより、以下のようなカウントダウンをNotionページに埋め込むことが出来ます。

Simple CountDownで生成したカウントダウン

106行目の値を変更することで、上記のように指定した日付のカウントダウンを行うことが出来ます。

const myDate = new Date('Oct 15, 2020 00:00:00');

色を変えたい場合は、変更したい箇所のbackgroundのパラメータの値を変更し再度HTML CodeをGenerateすればOKです👌

💡
普段よくアクセスするページにカウントダウンを埋め込んでおくと、締め切りを意識する習慣がつくので良いかも😎

他にも

Google Sheetの図を綺麗にNotion埋め込みする際は、

Google Sheetの図をNotion埋め込みしている様子
Google Sheetの図をNotion埋め込みしている様子

メールフォームをNotion埋め込みする際は、

メールフォームをNotion埋め込みしている様子
メールフォームをNotion埋め込みしている様子

さいごに

今回は、Simple CountDownとその他埋め込みに関してご紹介をさせていただきました。

参考になりましたら幸いです😄

18日目の記事は「【比較】Indifyを使用しGoogle カレンダーを表示」になります。

【比較】Indifyを使用しGoogle カレンダーを表示
Notion Advent Calendar Notion Advent Calendar 18日目の記事になります。シンプルにGoogle カレンダーと表示した場合と、Indifyを使用しGoogle カレンダーを表示した場合の比較を行っています。 本記事では、Google カレンダーを表示する流れとIndifyを使用した場合との比較について書いていきます📝 以下サイトの説明通りに進めることで、Notion上にGoogle カレンダーのページ内埋め込みが行えます。 Notion Officialの説明サイト: 埋め込み時のUIはシンプルなものですが、ページ内埋め込みのため、表示エリアを自由自在に伸縮させることが可能です。 表示エリアが狭いと上記画像のように予定が省略されてしまいます。 表示エリアを広げる時は、カーソルを画面端に合わせドラッグ&ドロップすればOKです👌 シンプルで綺麗なUIをページ内埋め込みしやすくするツールです。 まずはサインアップします。Google サインインも可能なのでアカウントがある方はそちらの方がスムーズかと思います。 Let's do this! をClickすると追加したいWidgetを選択する画面へ遷移します。 Google カレンダーを選択してみます。 使用感としては、 ダークテーマも選択でき、Indifyを使った方がよりスタイリッシュにGoogle カレンダーを表示できる 無料プランでは、複数カレンダーの切替が出来ないなどの制約はあるものの基本的な機能は使えるため困ってはいない 今回はGoogle カレンダー埋め込みについて比較検討も交えてご紹介してきました。 予定の内容を編集せずに確認したいだけであれば、Notion上のGoogleカレンダー埋め込みは十分運用な可能という使用感です。 「シンプルなGoogle カレンダー埋め込み」「 Indify を使ってGoogle カレンダー埋め込み」どちらにしても基本的な機能は同じなので、好みのUIを選択するのが良いと思います。 19日目の記事は「」になります。

SHARE

スポンサーリンク