今回作るのは前回までコツコツ組み立てたヘッダー部の最後を飾るお天気ウィジェットです。
元ネタとはまったく別の役割になりますが、スマホのホーム画面的に工夫してみました。

とはいいつつ、表示できる天気はひとつだし、精度もあまり良くないようなので、天気情報としてはあくまで目安程度ですかね。
そのためタップした時にお天気アプリが起動するようにしています。

ざっと説明すると、以前のページで配布した画像セットを使って、Zooperが取得した天気情報によって画像を切り替えるものです。

目次

ウィジェット設定

天気

設定自体は単純。タップ時のアクションは好きなお天気アプリを設定。

天気2

ロケーション設定では僕の端末だとオート・ロケーションは使えませんでした。
（天気が不明になる。）

天気3

モジュール設定

天気4

モジュールは画像だけを使います。

天気5

天気6

画像のように設定。

高度なパラメーター

ここが肝心。

まず、取り込んだ画像が入っているフォルダのアドレスを調べます。

/storage/.../w**.png

のようになると思います。
**の部分は数字ですが、後に記述するZooperの天気コードでは以下のように決められています。

  1. unknown
  2. storm
  3. thunderstorm
  4. drizzle
  5. rain
  6. showers
  7. flurries
  8. rainandsnow
  9. snow
  10. hail
  11. fog
  12. haze
  13. wind
  14. partly_cloudy
  15. mostly_cloudy
  16. clear
  17. fair

以上の17種類。それに合わせて画像を作ってあります。

天気7

天気8

天気9

だいたいあっているはず……。

そして、画像が用意できたら高度なパラメーターに記述していきます。

[b]/storage/.../w#W0CODE#.png[/b]

...の部分は実際のアドレスに合わせて入力してください。
今回は『今日の天気コード』を使いますので#W0CODE#となりますが、0をCに変えると現在の、1に変えると明日の天気コードになります。（数字を増やせば明後日以降も設定可能）
以上で設定は完了です。
うまく取得できない場合はロケーション設定や天気情報の取得元設定を変えたりしてみてください。

ちなみに、アイコンをgifにして元ネタのように回転させる方法もなくはないみたいですが、結構面倒くさそうなので今回は割愛しました。

今回でヘッダー部は完成しました。次回はフッター部に入ります。

-追記-

Zooperの高度なパラメーターのタグを使って画像の回転も実装できそうです。

上記で書いたパラメーターの末尾に

[r]$(#Ds#*6)$[/r]

とすると、一分で一周するようにできます。

コードの解説
[r]で囲んだ数字(0~360)の角度に画像を回転させる
#Ds#は現時刻の秒を取得（多分非推奨です。理由は後ほど。分なら#Dmm#）
かける６しているのは秒を角度に変換するためですね。360度÷60秒

ただこのまま実装するといくつか問題点があって、

  1. Zooperの表示更新が一秒よりも遅い（表示がカクカクする）
  2. 僕が用意した画像が円じゃない

分にしたり、ちゃんと画像を用意すれば大丈夫だと思います。
同じやり方で割愛してしまった右下の歯車も回転できそうですね。

ちゃんとした画像を用意するかはちょっと未定です・・・。