WeatherNowのスキンを作ろう！

2012年04月06日

　結構前にorefolder.netでも紹介したのですが、WeatherNowというアプリが最近楽しいです。
紹介した当時はデザインが吹き出しとフレームの2種類で、ドロイド君のデザインは面白いなーという感じだったのですが、いつの頃からかスキン（スタイル）に対応し始めていて、さらに自分で好きなように作ることができるようになっていました。

　天気系のアプリでは「デザイン」と「予報の精度」が重要なポイントになってきます。日本の天気予報だとCliph WeatherやYahoo!天気情報などが人気ですが、
デザイン的な選択の幅が狭く、なかなか統一されたホーム画面には置きにくいものでした。一方、海外製のアプリはスキンを変更できたり種類が豊富でデザインはいいものもあるのですが、なにぶん海外のものなので日本の天気はそこまで詳しくないというか何というか…。

　その点WeatherNowは天気情報のソースが気象庁なので、信頼度は高いでしょう。そしてデザイン的にも自分で好きなスタイルを適用できるのでお勧めです。

　肝心のスタイルですが、他の人が作ったものをアプリ内でサーバからダウンロードして適用することができます。（自分で作ったSDカードに保存されているものを適用することもできます。）スタイルを作った人は無償でこのサーバにアップロードできるのですが、~~現在のところWeatherNow作者さまの公式なスタイルと私が作ってアップした物しか無い状態です…。~~他の人のもアップされ始めています！
もっとたくさんの人が作ってたくさんのスタイルから選べるようになればもっと使いやすくなるんじゃないでしょうか。

　前置きが長くなりましたが、WeatherNowのスタイルの作り方を簡単に解説です。これを読んでぜひあなたもWeatherNowのスタイルを作成・公開してください。

…とは言っても、ちゃんとした解説はWeatherNowの公式サイトに書いてあるので、それを読めばいいのですが…。とりあえず私の場合のスタイルの作り方を書いておきます。

本記事は広告およびアフィリエイトプログラムによる収益を得ています。

スタイルファイルの構造

スタイルはzipで圧縮されたxmlファイルと画像で構成されています。

style
├--style.xml
│
├-img/
│  ├bg_widget1x1_land.png
│  ├bg_widget1x1_port.png
│  ├f.png
│  ├（略）
│  └fc.png
│  
└-xml/
    ├icon.xml
    └widgetstyle.xml

　いろいろ面倒なので、とりあえずサンプルファイルを1つダウンロードして、それを改造するのが早いです。WeatherNowの公式サイトにも置いてありますが、私の使っているものを以下に置きますので、それを使ってもらってもOKです。

minimalwhite.zip

style.xml

いろいろありますが、<Metadataから始まるところを自分のものに変えればOKです。

styleName=”****”: スタイルの名前を設定します。
styleIcon=”****”: スタイルの一覧時に表示されるアイコンファイルの位置を指定します。
authorName=”****”: スタイル作者の名前を設定します。
popupWidget=”****”: スタイルの設定を記したxmlファイルの場所を示します。frameWidgetでフレームウィジェットの、notifyWidgetで通知ウィジェットのスタイルです。
weatherIcon=”****”: アイコンファイルの設定を記したxmlファイルの場所を示します。

icon.xml

アイコン画像に冠する設定を記します。
<icon number=”0″ src=”img/f” />というようなテキストがズラーッと並んでいます。これはアイコン番号1にimg/f.pngのファイルを適用する、ということです。

アイコン番号がどういう天気（「晴れ」だとか「晴れのち雨」だとか）を示すのかについては、公式サイトを見てください。

widgetstyle.xml

ウィジェットの細かい設定をします。何ができるか、どこを設定できるか等は公式サイトを見てください。
ごく簡単には、以下の項目を設定します。

<FontStyle color=”#ffffffff” place=”default” />: 全体的なフォントの色を決めます。最初の2桁が不透明度、その後の6桁がRGB値になります。
<FontStyle color=”#ffffa0c0″ place=”defaultRed” />: 日曜や最高気温など赤っぽいフォントの色を決めます。
<FontStyle color=”#ffa0c0ff” place=”defaultBlue” />: 土曜や裁定気温など青っぽいフォントの色を決めます。

画像の設定

icon.xmlで指定した画像を指定した天気のアイコンとして使えるようになります。サンプルの場合はimgフォルダの中身ですね。簡単にいえば、ここの画像を入れ替えればオリジナルのスキンにできます。

　天気の種類はいろいろ（0から42まで43種類）ありますが、基本的には「晴」「曇」「雨」「雪」「晴（夜）」の5種類と、それを「一時、時々」「のち」で組み合わせたものになります。よって、アイコンも「晴」「曇」「雨」「雪」「晴（夜）」の5種類さえ作ってしまえばもう9割できたようなものです。

　アイコンをオリジナルで描くことの出来る人はどんどん作ってください。頑張ってください。アイコンを作れない人はどうしましょう？→探しましょう。「天気　アイコン　フリー」で検索すればそういうものも出てきます。ウェブサイトに使えるアイコンとしても色々公開されています。そういうものを見つけてきてくれる情報サイトもあります。こんなのとかこんなのとか。「アイコン　まとめ」で検索してもいいかもしれませんね。

　そうやってアイコンをダウンロードして、43種類それぞれに当てはめられればそれでよし、できなければ基本の5種類を組み合わせてアイコンを作成すればいいのです。まぁその場合は画像編集ソフトが」ないとキツイですが…。

　ちなみに、私の場合は基本の5種類を晴=f.png, 曇=c.png, 雨=r.png, 雪=s.png, 晴（夜）=n.pngとしています。そして晴のち雨はfr.png、曇りのち晴はcf.pngというようにファイル名も組み合わせて分かりやすいようにしています。
それから、面倒なときは「のち」と「時々、一時」を同じファイルにしてしまいます。どっちもそんなに変わらないじゃないですか。

まとめて、スタイルファイルの完成

　これらのファイル修正と画像入れ替えの作業が終了したらstyleフォルダをzip圧縮します。で、それをSDカードのどこでもいいので置きます。あとはWeatherNowの設定→アプリスタイル→スタイルの管理→Explolerでそのスタイルファイルを選択します。するとスタイルが使えるようになるのであとは自分でウィジェットを置いてちゃんと表示されるか試してみましょう。何か問題があればまたファイルを修正して試しての繰り返しです。

　良さ気なスタイルが完成したら、ぜひ公開してください。公式のスタイルアップローダーがありますので、そこからアップロードすればWeatherNowのアプリからダウンロードできるようになります。たくさんのスタイルが使えるようになると私も嬉しいです。