時間天気付きアナログ時計

当サイト「ウィジェットを作る」では、「アナログ時計」の作り方を紹介しております。
さらに、我ながら長いシリーズになってしまった「天気情報の表示」も紹介しています。
この両者の組み合わせを考えると、１時間毎の天気の取得が絶対条件になります。
しかし、当サイトで紹介している天気情報の表示方法には、３時間毎の天気情報までしか紹介していないため、１時間毎の天気情報を配信しているサーバーを探したのですが、「アプリ」ばかりが次々と見つかるだけでした。しかもそのすべてが有料のアプリだったのです。
唯一見つけた、私が実現したいモノに一番近いものが、日本気象協会（tenki.jp）のブログパーツです。
私が作らなくても良いと思えるほど、イメージ通りのモノだったのですが、Flashだったのです・・・
iPhoneは、Flashを拒否していますので、Flashだと分かった瞬間に「ムリ」と判断しました。

ググっている間に見つけたのですが、私なりに分かってきたことがあります。
サイトでは１時間毎の天気情報を表示しているのに、その情報をデータとして配信していないサイトばかりなのです。
まるで、「見せますが、差し上げません」と言われているようなのです。
きっとそこに付加価値があるのでしょうね。
だから、アプリが有料になるのだと・・・

そこで、考え方を変えました。
情報を配信しているサーバーがないのなら、表示されている情報をデータにしてしまうのはどうか？ということです。
当サイト「ウィジェットを作る」の「天気情報の表示（邪道編）」で紹介しているやり方です。
３時間も１時間も、やり方は何も変わりませんからね。
その方向性でサイトの中身を解析し、情報の抜き出しやすいサイトを探し回りました。
そこで辿り着いたのが、「AccuWeather」です。
もともと知っていたサイトなのですが、見直した際、かなり日本に対応していたことや、時間天気のURLが１時間毎で指定できるため、とても都合が良いので採用しました。
さらに、天気の画像も充実しているのは嬉しい限りですね。

ウィジェットサンプル

iPhoneで閲覧している方は、サンプルをダブルタップすると拡大されますので、ウィジェット実行中の雰囲気を味わえるかと思います。
＜注意＞このサンプルはiPhone向けに作成したものですので、今のところ、確認できたブラウザはありません。
Winterboardで適用させて確認して下さい。

ロックスクリーン

天気時計

特徴

冒頭でも記述しましたが、当サイトの「アナログ時計」と１時間天気を組み合わせました。

更新履歴

2013/04/20　基本形完成
2013/04/27　ブラウザ対策断念
2013/04/29　イニシャルリリース
2013/04/30　日付と地域名の表示を追加

ダウンロード

ダウンロードはこちら　ーーー＞　ロックスクリーン天気時計（ls_weather_clock.zip）

使い方

裏で、サイトを読み込んでいるので、天気が表示されない場合は、しばらくお待ちください。
待てない場合は、ロックを解除し、天気アプリでや天気サイトで確認して下さい。
定期更新として、毎時０分になった時に更新するようにしていますが、更新による画像書き換え完了までの時間は、実測平均で１０秒前後です。
デフォルトの地域は「深川江戸川町」ですが、変更する場合は script.js 内を書き換える必要があります。
書き換える場所は、ファイル内130行付近にある var url="・・・" の部分です。
ブラウザで、http://www.accuweather.com/ja/jp/japan-weather を開いて、目的の地域を検索し、表示させて下さい。
その時のアドレスバーを確認して頂き、地域を表す「文字列」と、地域を表す「数字」を見つけます。
「深川江戸川町」の場合は、「fukagawa-edokawacho」と「221223」です。
script.js内の相当する部分を置き換えれば完了です。
ちなみに、地域を表す「数字」の方は、２つありますのでご注意ください。

カスタマイズポイント

3.5インチへの対応

iPhone5は画面が長いため、ロックスクリーン時計を消さなくても、このウィジェットが収まります。
しかし、iPhone4などの3.5インチデバイスでは、従来通りロックスクリーン時計を消し、位置を調整しなければなりません。
ロックスクリーン時計を消すには、LockScreen Clock Hideをご利用ください。
位置調整は、style.css内の margin-top: 256px; となっている部分が高さの指定部分ですので、この数字を80にして頂くと、3.5インチの画面に収まります。
height: 1136px;の部分ですが、こちらも3.5インチの画面に合わせて960にするべきですね。

今後の更新予定

カレンダーと同様に、メニュー方式を導入します。
そのメニューから、時計のデザインや、表示する天気情報の種類を選択できるようにしたいですね。
ただ、そのすべてをメニューに並べて選択するには、ロック画面では狭すぎるので、メニューだけのページにブラウザでアクセスし、そこで設定してもらう形になりそうです。

2013-04-28

当サイトの更新状況を、アラートで表示するかどうかの設定をします。

保存する