Notion にお天気ウィジェットを配置し、毎日の天気を確認する

// 🙎‍♂️ Yuji Tsuburaya📆 June 01, 2020🔖 Notion

最近 Notion のデイリーログのページにお天気ウィジェットを配置するようになりました。僕は、毎日決まった Notion のページ(デイリーログページ)を開くのですが、そこにお天気ウィジェットを配置しておくことで、その日の天気が嫌でも目に入るようになり、傘を忘れたりすることがなくなくなる見込みです。もちろん、お天気ウィジェットはリアルタイムで自動更新されます。

今日は、このお天気ウィジェットの配置方法を説明したいと思います。大きく以下の 2ステップで実現することができるようになります。各々詳しく解説していきます。

  1. 埋め込み用 URL の取得
  2. Notion への埋め込み

1. 埋め込み用 URL の取得

meteoblue というサービスを利用します。こちらのサイトから埋め込み用 URL を取得します。

ページにアクセスすると、以下のような画面になるので、サイドバーから Widget > Widget Day を選択してください。(今回は、1週間単位の天気ウィジェットを作成したかったので、Widget Day を選択しましたが、Widget 3h を選択することで、3時間ごとの天気等も出力可能です。)

meteoblue ホーム画面のスクリーンショット
meteoblue ホーム画面のスクリーンショット

ウィジェットの設定画面に遷移します。Days を 7 に指定してやることで、一週間の天気を出力できるようになります。そのほかにも設定がいくつかあり、設定によってウィジェットの見た目が変化するので、ポチポチとあとはお好みでいじってみてください。

meteoblue ウィジェット設定画面
meteoblue ウィジェット設定画面

同じページの下部に、HTML というセクションがあるので、その中から iframe 用の URL をコピーしてください。src="xxx" となっている、xxx の部分をコピーします(画像で選択されている部分です)これで、埋め込み用 URL の取得はOKです。

2. Notion への埋め込み

あとは簡単です。先程取得した URL を Notion へと埋め込んでいきます。スラッシュコマンド、もしくは、ブロックの + ボタンから、 Embed を選択します。

Embed 選択ダイアログ(Notion)
Embed 選択ダイアログ(Notion)

URL を入力する欄があるので、さきほど meteoblue からコピーしてきた URL をペーストします。これで設定が完了です。

Embed 選択ダイアログ(Notion)URL 入力後
Embed 選択ダイアログ(Notion)URL 入力後

🚀 完成

以下のように、お天気ウィジェットが表示されたら成功です。

Notion へのお天気ウィジェットの埋め込みが完了
Notion へのお天気ウィジェットの埋め込みが完了

お好きな位置に、お天気ウィジェットを配置してみてください。

🙌 冒頭のツイートのスクリーンショットのような見た目で良ければ、以下の URL をまるっとコピーすることで、手順 1 を省略することもできます。もし良ければお使いください。

https://www.meteoblue.com/en/weather/widget/daily/tokyo_japan_1850147?geoloc=fixed&days=7&tempunit=CELSIUS&windunit=KILOMETER_PER_HOUR&precipunit=MILLIMETER&coloured=monochrome&pictoicon=0&pictoicon=1&maxtemperature=0&maxtemperature=1&mintemperature=0&mintemperature=1&windspeed=0&windgust=0&winddirection=0&uv=0&humidity=0&precipitation=0&precipitation=1&precipitationprobability=0&precipitationprobability=1&spot=0&pressure=0&layout=light

meteoblue 以外にも、埋め込み URL を発行してくれるサービスがあるかもしれません。もしもっとオシャレなものがあったら教えてください。

🔗 (少しニッチな)Notion の使い方まとめ

広告

書いた人

___35d

Yuji Tsuburaya (@___35d

👩‍💻 Frontend Engineer

🏢 J-CAT CTO Co-Founder / ex. BizReach

🎨 by @ch1ch1ch1_123

💚 Minimalism / Notion / Figma

📱 Author of @FastNotion

広告