この記事でできること
以下のような天気情報をObsidianのdairy noteなどに埋め込めるようになります。
tokyo: ⛅️ 所により曇り +15°C（体感 +15°C） 湿度 67% 降水量 0.0mm ↑2.5m/s
tokyoの天気 | 🌅05:58 AM / 🌇05:47 PM
00:00 | 所により雨 | 11°C | 88% | 0.0mm | 1021hPa | 4km/h | 63%
03:00 | 曇り | 11°C | 0% | 0.0mm | 1020hPa | 7km/h | 65%
06:00 | 晴れ | 10°C | 0% | 0.0mm | 1020hPa | 6km/h | 68%
09:00 | 所により曇り | 12°C | 0% | 0.0mm | 1020hPa | 3km/h | 58%
12:00 | 所により曇り | 15°C | 0% | 0.0mm | 1018hPa | 7km/h | 51%
15:00 | 所により雨 | 15°C | 100% | 0.1mm | 1017hPa | 12km/h | 59%
18:00 | 弱い雨 | 14°C | 100% | 1.6mm | 1016hPa | 8km/h | 82%
21:00 | 弱い霧雨 | 13°C | 100% | 0.2mm | 1016hPa | 3km/h | 85%
wttr.inとは？
- 天気情報提供サービスです。urlで情報を場所やフォーマットを指定することで、特定の地域の天気を取得することができます。
- 向こう3日間の予報：https://wttr.in/tokyo
- 気温・降水量グラフ：https://wttr.in/tokyo?format=v2
- GitHub - chubin/wttr.in:
The right way to check the weather - iframeなどで埋め込めばブログ等に表示することも可能です。
- ただiframe・png形式でObsidianに埋め込むと、勝手に更新されて日付と対応しなくなってしまうので困ります。なのでdairy note作成時にテキストで埋め込んで変更しないようにしたいです。
Templaterによるdairy noteの作成
本旨から反れる＆様々な方が解説しているのでここではざっくり説明します。
Templaterはあらかじめ作っておいたテンプレートをコマンドやショートカットキーで新規ファイルに貼り付けることができるコミュニティプラグインです。
以下のようなテンプレートを作り新規ファイル上で呼び出すと、コマンド部分が今日の日付などに合わせて書き換わり良い感じになります。
↓これが、
---
aliases:
- "<% moment(tp.file.title).format('MMDD') %>"
- "<% moment(tp.file.title).format('YYYYMMDD') %>"
tags:
- "daily"
- "<% moment(tp.file.title).format('YYYY') %>"
- "<% moment(tp.file.title).format('YYYY-MM') %>"
---
#### << [[<% moment(tp.file.title).subtract(1, 'd').format('YYYY-MM-DD') %>]] | [[<% moment(tp.file.title).add(1, 'd').format('YYYY-MM-DD') %>]] >>
- 今年の残り日数：<% moment("2025-12-31").diff(tp.file.title, "days") %>日
<% tp.user.getWeather2() %>
-----------------------------------
## Diary：<% tp.file.title %>
-
## Memo
-
↓埋め込み時にこうなる
---
aliases:
- "0313"
- "20250313"
tags:
- "daily"
- "2025"
- "2025-03"
---
#### << [[2025-03-12]] | [[2025-03-14]] >>
- 今年の残り日数：293日
tokyoの天気 | 🌅05:58 AM / 🌇05:47 PM
00:00 | 所により雨 | 11°C | 88% | 0.0mm | 1021hPa | 4km/h | 63%
03:00 | 曇り | 11°C | 0% | 0.0mm | 1020hPa | 7km/h | 65%
06:00 | 晴れ | 10°C | 0% | 0.0mm | 1020hPa | 6km/h | 68%
09:00 | 所により曇り | 12°C | 0% | 0.0mm | 1020hPa | 3km/h | 58%
12:00 | 所により曇り | 15°C | 0% | 0.0mm | 1018hPa | 7km/h | 51%
15:00 | 所により雨 | 15°C | 100% | 0.1mm | 1017hPa | 12km/h | 59%
18:00 | 弱い雨 | 14°C | 100% | 1.6mm | 1016hPa | 8km/h | 82%
21:00 | 弱い霧雨 | 13°C | 100% | 0.2mm | 1016hPa | 3km/h | 85%
-----------------------------------
## Diary：2025-03-13
-
## Memo
-
ここからはdairy note用のtemplateを作成済みという前提で話します。
そうでないなら他記事を見ながら作っておいてください。
wttr.inからの情報取得
以下からwttr.inのhelpが参照できます。
-
wttr.in help
ただここには載っていない形式により、出力のフォーマットをいじれます。
https://wttr.in/tokyo?format=%l:+%c+%t+feels+like+%f%5CnSunrise:+%S%5CnSunset:++%s%5CnMoon:++++%m
https://wttr.in/tokyo?format=%l+%T%5Cn%c%C+%t（体感%f）+湿度%h+降水量%p+気圧%P+UV%u+%w&M
（参考：Daily weather from wttr.in in daily note - Help - Obsidian Forum）
このurlを用いて以下のjsファイルをVaultの適当な場所に保存します
getWeather.js
async function wheathernow() {
const weather = await requestUrl('https://wttr.in/tokyo?format=%l:+%c+%C+%t（体感+%f）+湿度+%h+降水量+%p+%w&M')
return weather.text
}
module.exports = wheathernow;
このjsファイルをTemplaterのUser scriptとして登録し、dairy note上の好きな箇所に<% tp.user.getWeather()%>のように記述すると、そこに現在の天気情報を埋め込めます。
#### << [[<% moment(tp.file.title).subtract(1, 'd').format('YYYY-MM-DD') %>]] | [[<% moment(tp.file.title).add(1, 'd').format('YYYY-MM-DD') %>]] >>
- 今年の残り日数：<% moment("2025-12-31").diff(tp.file.title, "days") %>日
<% tp.user.getWeather() %>
-----------------------------------
## Diary：<% tp.file.title %>
-
↓
dailynote
#### << [[2025-03-12]] | [[2025-03-14]] >>
- 今年の残り日数：293日
tokyo ⛅️ 所により曇り +15°C（体感 +15°C） 湿度 67% 降水量 0.0mm ↑2.5m/s
-----------------------------------
## Diary：2025-03-13
-
1日の天気を埋め込む
上の方法ではTemplaterを実行した時点の天気しか得られません。
どうせなら1日分ほしいですよね。
以下のformat指定により、天気情報をjson形式で得ることができます。
ここから取得したjsonを良い感じに整形してやれば、1日の天気を埋め込めます。
以下のようなjsファイルを作成します。
getWeather2.js
// utils.js (共通関数をまとめたファイル)
const formatTime = (timeStr) => {
const padded = timeStr.padStart(4, '0');
return `${padded.slice(0, 2)}:${padded.slice(2)}`;
};
// これだけ日本語にならなかったので直接変更
const replaceDescription = (desc) => {
return desc === "Patchy rain nearby" ? "所により雨" : desc;
};
async function formatWeatherData(weatherData) {
const { nearest_area, weather } = weatherData;
// エリア名、日の出、日の入りの時間を取得
const areaName = nearest_area[0].areaName[0].value;
const { astronomy, hourly } = weather[0];
const { sunrise, sunset } = astronomy[0];
const formattedData = hourly.map(period => {
const {
time,
lang_ja,
tempC,
chanceofrain,
precipMM,
pressure,
windspeedKmph,
humidity
} = period;
const formattedTime = formatTime(time);
const description = replaceDescription(lang_ja[0].value);
const paddedDesc = description.padEnd(6).replace(/ /g, " ");
const temp = `${tempC}°C`;
const wind = `${windspeedKmph}km/h`;
/*
// 表で出力
return `| ${time} | ${desc} | ${temp} | ${rainChance}% | ${precipMM}mm | ${wind} | ${humidity} |`;
});
return `${areaName}の天気\n\n| time | desc | temp | rainChance | precipMM | wind | humidity |\n| - | :- | -: | -: | -: | -: | -: |\n${formattedData.join('\n')}`;
*/
return `${formattedTime} | ${paddedDesc} | ${temp.padStart(4)} | ${chanceofrain.padStart(3)}% | ${precipMM.padStart(4)}mm | ${pressure.padStart(4)}hPa | ${wind.padStart(6)} | ${humidity.padStart(3)}%`;
});
return `${areaName}の天気 | 🌅${sunrise} / 🌇${sunset}\n${formattedData.join('\n')}`;
}
async function wheathernow() {
const response = await fetch('https://wttr.in/tokyo?format=j1&M');
const weatherData = await response.json();
return formatWeatherData(weatherData);
}
module.exports = wheathernow;
このjsファイルをTemplaterのUser scriptに登録し、dairy note上の好きな箇所に<% tp.user.getWeather2()%>と記述すると、そこに1日の天気情報を埋め込めます。
dailynote
#### << [[2025-03-12]] | [[2025-03-14]] >>
- 今年の残り日数：293日
tokyoの天気 | 🌅05:58 AM / 🌇05:47 PM
00:00 | 所により雨 | 11°C | 88% | 0.0mm | 1021hPa | 4km/h | 63%
03:00 | 曇り | 11°C | 0% | 0.0mm | 1020hPa | 7km/h | 65%
06:00 | 晴れ | 10°C | 0% | 0.0mm | 1020hPa | 6km/h | 68%
09:00 | 所により曇り | 12°C | 0% | 0.0mm | 1020hPa | 3km/h | 58%
12:00 | 所により曇り | 15°C | 0% | 0.0mm | 1018hPa | 7km/h | 51%
15:00 | 所により雨 | 15°C | 100% | 0.1mm | 1017hPa | 12km/h | 59%
18:00 | 弱い雨 | 14°C | 100% | 1.6mm | 1016hPa | 8km/h | 82%
21:00 | 弱い霧雨 | 13°C | 100% | 0.2mm | 1016hPa | 3km/h | 85%
-----------------------------------
## Diary：2025-03-13
-
その他json上の使ってない情報についても同様に取得することができますので、お好みで変更してください。
まとめ
素敵なObsidianライフを🖖。