Obsidianのデイリーノートに今日の天気を埋め込みたい

## この記事でできること

以下のような天気情報をObsidianのdaily noteなどに埋め込めるようになります。

```md
tokyo: ⛅️  所により曇り +15°C（体感 +15°C） 湿度 67% 降水量 0.0mm ↑2.5m/s
```

```md
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%
```

:::note
続編書きました：[Obsidianのデイリーノートに今日の天気を埋め込みたい（その2） - Qiita](https://qiita.com/alumite14/items/b8f16d2ef56c7e005658)
:::

## wttr.inとは？

- 天気情報提供サービスです。urlで情報を場所やフォーマットを指定することで、特定の地域の天気を取得することができます。
    - 向こう3日間の予報：<https://wttr.in/tokyo>
    - 気温・降水量グラフ：<https://wttr.in/tokyo?format=v2>
- [GitHub - chubin/wttr.in: :partly_sunny: The right way to check the weather](https://github.com/chubin/wttr.in)
- iframeなどで埋め込めばブログ等に表示することも可能です。
- ただiframe・png形式でObsidianに埋め込むと、勝手に更新されて日付と対応しなくなってしまうので困ります。なのでdaily note作成時にテキストで埋め込んで変更しないようにしたいです。

## Templaterによるdaily noteの作成


本旨から反れる＆様々な方が解説しているのでここではざっくり説明します。
- 参考
    - [Templater - Minerva](https://minerva.mamansoft.net/Notes/Templater)
    - [ObsidianのTemplaterの使い方と設定 | eiji.page](https://eiji.page/blog/obsidian-templater-howto/)

Templaterはあらかじめ作っておいたテンプレートをコマンドやショートカットキーで新規ファイルに貼り付けることができるコミュニティプラグインです。
以下のようなテンプレートを作り新規ファイル上で呼び出すと、コマンド部分が今日の日付などに合わせて書き換わり良い感じになります。

↓これが、
```js
---
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

- 


```

↓埋め込み時にこうなる
```md
---
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

- 


```

ここからはdaily note用のtemplateを作成済みという前提で話します。
そうでないなら他記事を見ながら作っておいてください。
参考：[頑張らない最低限のObsidian環境構築 #setup - Qiita](https://qiita.com/alumite14/items/d3ca4f25bfbf08c3b5e2)

## wttr.inからの情報取得

以下からwttr.inのhelpが参照できます。
- [wttr.in help](https://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](https://forum.obsidian.md/t/daily-weather-from-wttr-in-in-daily-note/55516/2)）

このurlを用いて以下のjsファイルをVaultの適当な場所に保存します

```javascript: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として登録し、daily note上の好きな箇所に`<% tp.user.getWeather()%>`のように記述すると、そこに**現在の**天気情報を埋め込めます。

```javascript
#### << [[<% 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 %>

- 

```
↓
```markdown: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形式で得ることができます。
- 予報あり：<https://wttr.in/tokyo?format=j1>
- 現在のみ：<https://wttr.in/tokyo?format=j2>

ここから取得したjsonを良い感じに整形してやれば、1日の天気を埋め込めます。
以下のようなjsファイルを作成します。

```javascript: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に登録し、daily note上の好きな箇所に`<% tp.user.getWeather2()%>`と記述すると、そこに1日の天気情報を埋め込めます。

```markdown: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ライフを🖖。