leopardgeckoのブログ

Macの関連事項など

GeekToolでお天気表示

注:これは古い記事です。Geekletで天気を表示する記事はこのリンク先が最新版になります。
ここの記事は記録のために一応残しておきますが今後は改訂されません。最新版をご覧ください。

はじめに

GeekToolとはMacのデスクトップをカスタマイズできるソフトです。デスクトップに色々なものを表示できて便利なのですが、スクリプトが公開されているものでなければ自分でスクリプトを書かなければなりません。
天気を表示するスクリプトはネットで公開されているものは情報が古くて今では使えないものが多い上に自力で作るとなるとHTMLソースを解析する必要があるなど結構大変な作業が必要になります。そこでこちらではAccuWeatherという天気予報サイトを利用したスクリプトをご紹介します。私自身も使っているものなので、天気予報サイトの仕様変更などがあった場合にはそれに対応すべく適宜更新していく予定です。
(GeekTool自体の使い方は他の入門用サイトを参照してください)

例えば下の画像のような感じで表示させるとします。
一番上の小さめの数字が本日の最高・最低気温。その右が直近2時間くらいの変化を教えてくれる予報。一番大きな文字が現在の気温・天気、その下の小さな文字が紫外線・雲量・湿度・気圧・風量・風向き、その左が現在の天気の画像です。
中段のずらっと並んだ画像と文字が時間単位の天気予報で、とりあえず16時間後まで表示しています。
下段が明日と週末の天気予報です。
それぞれ独立したスクリプトなので、どれか好きなものだけを表示させることもできます。
スクリプトのコピペや画像の位置合わせが面倒な方は、記事の最後の方でGeekletをダウンロードできますのでご利用ください。

f:id:leopardgecko:20190918133616p:plain

事前準備

下で紹介するスクリプトは初期状態では東京都江東区の天気が表示される設定になっていますので、表示したい地域に合わせてそれぞれのスクリプトを書き換える必要があります。
まず、https://www.accuweather.com/en/jp/japan-weatherにアクセスします。天気を表示したい市や区の名前をローマ字で入力して検索してそこを選ぶと、その地域の天気が表示されるようになります。その段階でWebブラウザに表示されているURLをどこかに保存しておいてください。

https://www.accuweather.com/en/jp/場所/数字/weather-forecast/数字

のような形式になっているはずです。例えば東京都江東区の場合は

https://www.accuweather.com/en/jp/koto-ku/221230/weather-forecast/221230

という形になります。URLに「weather-forecast」が入っていない場合はサイト内の「NOW」のタブをクリックしてみてください。
スクリプトにはそれぞれ「# 場所のURL」の下に

WEATHER_URL=${WEATHER_URL:='https://www.accuweather.com/en/jp/koto-ku/221230/weather-forecast/221230'}

という記述がありますが、この赤い文字で示した部分が表示したい場所のURLなので、ここを上で保存したURLに書き換えてください。

スクリプトをいちいち全部書き換えるのは面倒臭い!という方は、「~/.bashrc」に

export WEATHER_URL='https://www.accuweather.com/en/jp/koto-ku/221230/weather-forecast/221230'

のような形で記入すれば全てのスクリプトがその設定で動作します。(「.bashrc」が何だかわからないという人はググってください)

英語ではなく日本語で表示したい場合は、URLの「/en/」のところを「/ja/」に書き換えてください。ただし海外のサイトなので日本語は微妙な感じです。「/de/」でドイツ語、「/zh/」で中国語など、他の言語での表示も一応可能です。

スクリプト内部でcurlを使っていますので、社内での使用などでプロキシを指定する必要がある場合はプロキシの設定を~/.curlrcや~/.bashrcに記載するなどしてください。

<各スクリプトの説明>

現在の気温と天気

現在の気温と天気を表示してリアルな画像の天気アイコンを取得するスクリプトを下に示します。

天気アイコンの画像は「/tmp/weather_now.png」に保存されるので、GeekToolの「Image」をデスクトップにドラッグ&ドロップしてURLを「file://localhost/private/tmp/weather_now.png」と指定してください。
(ここで配布しているGeekletを使うならばこの作業は必要ありません)

スクリプトはPropertiesウインドウの「Refresh every 〜s」のところで表示を更新する秒数を設定してください。私は300秒に設定しています。他のスクリプトも同様に最後にRefreshの秒数を設定してください。これを忘れると表示が定期的に更新されません。
ちなみにこのスクリプトは画像表示を自動的に更新する仕組みになっているので、画像の方はRefreshを設定する必要はありません。

画像をリアルではなく他と同じシンプルなものにしたい場合は、スクリプトの最後の方の「https://vortex.accuweather.com/adc2010/images/icons-numbered/」のところを「https://vortex.accuweather.com/adc2010/images/slate/icons/」に変えてください。

最高気温と最低気温

今日の最高気温と最低気温の表示は以下の通りです。

直近の天気予報

直近120分の天気の変化を教えてくれます。AccuWeatherではこの予報を「MINUTECAST」と呼んでいるようです。上の画像では8分後に雨が降ってくる予報になっています。雨が短時間のときは時間単位の予報に表示されないこともあるので、これも見ておくと安心でしょう。
天気に変化があるときは分単位で表示が変わるので、Refreshは60〜180秒くらいに設定しておくのがお勧めです。
120分間天気に変化がなければ表示は出てきませんが、スクリプト内の

# 120分間天気に変化がない時のMINUTECASTの表示(0 変化がなければ表示しない、1 常に表示する)
MC_SHOW=0

というところの「MC_SHOW=0」を「MC_SHOW=1」に書き換えれば常時表示させることもできます。スクリプトは以下の通りです。

時間単位

以下は現在時刻から7時間後までと、8時間後から15時間後までのスクリプトです。これは等幅フォントを指定しないと表示がずれますのでご注意を。日本語で表示させる場合は日本語を等幅で表示できるフォント(全角文字が半角文字2個分の幅になるフォント。Osaka等幅やRictyなど)を指定してください。(上の画像ではOsaka等幅を指定しています。英語表示ならMonacoやMenloなどでも問題ありません)

天気アイコンの画像は「/tmp/weather_hour_0.png」から連番で「/tmp/weather_hour_7.png」まで保存されるので、上の応用で画像を一つずつ貼り付けて並べてください。
この作業は非常に面倒なので、ここで配布しているGeekletを使った方が良いでしょう。また、画像をまとめて並び替えるためのAppleScriptを同封しています。これを開いて実行し指示の通りに数値を入力していけば配布した画像Geekletを好きな場所に綺麗に並べることができます。画像の場所やサイズを変えたい時に使ってください。

まず一つ目、現在時刻から7時間後までのスクリプトはこんな感じです。

視認性を上げるためにAMとPMの色を変えています。他の色に変えたい場合は「# AMとPMの色」のところで「AM_COLOR」と「PM_COLOR」をそれぞれ指定してください。色と数値の対応はそこのコメントに書いてある通りです。色を変えたくない場合は「0」を指定してください。

8時間後から15時間後までは下のようになります。上のスクリプトの応用ですから内容はほとんど同じです。 天気アイコンの画像は「/tmp/weather_hour_8.png」から連番で「/tmp/weather_hour_15.png」まで保存されます。

スクリプトの「# 何時間後?」というところの「LATER=」の後の数値を「16」にすれば16時間後から24時間後の表示にすることもできます。その場合は天気アイコンの画像は「/tmp/weather_hour_16.png」から連番で「/tmp/weather_hour_23.png」になります。

明日の天気

明日の天気は以下の通り。
表示される文章を詳細なものと簡略化されたもののどちらかを選んで設定することができます。スクリプトの「# 天気の詳細」というところの「DETAIL=」の後の文字を「longPhrase」にすれば詳細な文章、「phrase」にすれば簡略化された文章になります。デフォルトでは詳細表示ですが、文章が長すぎると感じる場合は簡略表示が良いでしょう。
時間単位のスクリプトと同じような感じで、Tomorrowの文字色を変えることができます。ちなみに黒は「30」ですが十の位を4にする、つまり「40」を指定すると文字色ではなく背景色を黒にすることもできます。
天気アイコンは「/tmp/weather_tomorrow.png」に保存されます。
「# 何日後?」のところの「LATER=」の後の数字を書き換えれば、2日後や3日後などの天気を表示できます。工夫すれば週間天気予報もできるでしょう。

明日の紫外線、雲量、風速・風向き、降水確率

明日の紫外線、雲の量、風速と風向き、降水確率の表示は以下の通りです。
こんなにたくさん表示はいらないという場合は、スクリプトの設定を書き換えて表示したいものだけ選ぶことができます。
また、明日の天気と同じようにスクリプトを書き換えると表示される日を変えることができます。

週末の天気

週末の天気は以下の通り。土曜日までは同じ週の週末、日曜日になると次の週の週末の天気が表示されます。
表示される文章を詳細なものと簡略化されたもののどちらかを選んで設定することができます。スクリプトの「# 天気の詳細」というところの「DETAIL=」の後の文字を「longPhrase」にすれば詳細な文章、「phrase」にすれば簡略化された文章になります。デフォルトでは詳細表示です。お好みでどうぞ。
時間単位のスクリプトと同じような感じで、土曜日と日曜日の文字色を変えることができます。ちなみに赤は「31」ですが十の位を4にする、つまり「41」を指定すると例で挙げた画像のように文字色ではなく背景色を赤にすることもできます。
天気アイコンの画像が置かれる場所は土曜日が「/tmp/weather_sat.png」、日曜日が「/tmp/weather_sun.png」です。

Geekletのダウンロード

ここで紹介したスクリプトと画像表示のGeekletを一括してダウンロードできます。
スクリプトの見出しと同じファイル名をつけておきましたので、必要なものだけダブルクリックして使ってください。スクリプトはここの記事のコピペでも大した手間ではないですが、画像の設定や位置の変更は手作業でやるとかなり大変なのでこちらを使うことをお勧めします。
ここの記事では説明していない週間天気や24時間表示のGeekletもおまけで入っています。
[Geekletのダウンロード]

さいごに

他にもAccuWeatherには色々な予報がありますので、これまでに挙げたスクリプトの仕組みがわかれば様々な応用が可能でしょう。要はHTMLソースの中から欲しい情報をゲットするためのキーワードを拾ってテキストを整形しているだけですから、キーワードを確実に拾えるパターンを見つけさえすればOKです。

ここのスクリプトの転載や改造などは自由にしていただいて構いませんが、公開するならばこのブログへの言及をお願いします

更新履歴

2019/10/2 .bashrcにURLを記入しておけばスクリプトを書き換えずに済むようにした。文字と画像の表示変更が連動するようにした。時間表示の画像を並び替えるためのAppleScriptを追加。週間天気や24時間表示のGeekletをおまけで追加。
2019/10/1 時間単位の予報でわずかな仕様変更によると思われる状況に対処。直近の天気(MUNITECAST)で細部の修正。
2019/9/19 各国語表示に対応。日本語表記にしたい場合は「場所のURL」の/en/を/ja/に書き換えてください。/de/でドイツ語、/fr/でフランス語、などなどです。時間単位の表示をカスタマイズしやすいように修正。
2019/9/18 天気のフレーズにコンマが入っていると表示が崩れてしまう問題を修正。明日の降水確率などを表示するスクリプトを追加。
2019/9/14 雲量、湿度、風速・風向きのスクリプトを追加。他スクリプトの細部の修正。
2019/9/13 あまりにも強引なデータの拾い方を反省して、データを整形してキーワードから必要な情報を拾っていくスタイルに改訂。
2019/9/12 AccuWeatherの大幅な仕様変更に合わせてスクリプトを全面的に書き換え。以前のスクリプトを使っている場合は時間単位の表示が画像とずれますので、画像の位置を適宜修正するか画像表示用のGeekletをダウンロードして使用してください。
2019/4/12 明日の天気の表示が崩れる問題を修正。
2019/2/4 細部の修正。スクリプトGitHubからのソース埋め込みで表示するように変更。
2019/1/23 AccuWeatherの仕様変更に合わせて、現在の天気と気温、時間単位、明日の天気の表示が崩れる問題を修正。
2018/12/12 直近の天気予報(MUNITECAST)の変化がない時とサービス停止中には表示しないように仕様変更。
2018/5/9 AccuWeatherの仕様変更(User-Agent関係)に合わせてスクリプトを若干修正。(それぞれのスクリプトの「# 元データ取得」のところだけコピペで書き直せばOKです)
2018/3/14 Geekletの配布開始。
2017/11/21 AccuWeatherの仕様変更に合わせてスクリプト修正。カラー設定の変更をやりやすいように記述追加。