
2008/12/23追記 モディファイ版一括ダウンロードを追加しました(このエントリ下方)
前回エントリ「時刻/日付/天気の表示」テーマのオリジナル(と思われる)『Weather Widget』を試してみました。ついでに時刻表示を加えたモディファイ版(上の画像)を作成したのでファイル一式とソース等を掲載しておきます。
以下手順です。
■Weather Widgetを入手
[RELEASE] Weather Widget (ModMyiFone)
■オリジナル版(下の画像)の補足(大部分前回と重複)
上記スレッドにある“SixDayForecast”が今回利用した、週間予報(6日間予報)を表示するレイアウトです。他に3種のレイアウトが提供されており、“Split”は前回の『Fusion』や『Weather and Time Mod』に流用されていました。

■空白アイコンが必要
2009/01/05追記:下記より便利な『iBlank』がリリースされました
表示とアイコンが被らないよう、各画面最下段1列分の“空白アイコン”が必要です。自作するよりは以下の手順で『blanks』を導入するのが手っ取り早いです。
(1)Cydiaを起動
(2)“Steffwiz(Steffwiz's source)”を検索しインストール
(3)パッケージリストに「Blank *」や「install * Blanks」が表示される
(*は空白アイコンの数、例:20なら1列×5画面分に使える)
(4)どれでも好きなものをインストール
インストールしても変化がない・・・ように思えますが、何しろ「見えない」アイコンだから当然です。アイコンの移動(アイコン長押し)を開始すると×印だけ見えるようになるから、目的の場所に移動させましょう(今回の場合は各画面最下段を埋める)。
(blanksの正体は透明アイコンを持った「何もしない」Webクリップです)
■天気の都市名を変更する
(1)『SixDayForecast』のPrivateフォルダへ
(2)“configureMe.js”をテキストエディタで開く
(3)3行目の“var locale =”の都市を変更する
(例:東京なら“Tokyo”、“TOKYO”、“Tokyo, Japan”など)
(都市はAccuWeather.comのDBにあれば利用可能)
■気温を摂氏表示に変更する
(1)同上
(2)同上
(3)7行目の“var isCelsius =”を“true”に変更する
(前回のWeather and Time Modとフラグ効果が逆ですが、変数名などからしてこちらのオリジナル版が正しい、あちらは何故逆にしちゃったのか謎)
■天気の取得先をYahoo!に変更する場合は
(1)同上
(2)同上
(3)3行目の“var locale =”の都市を該当コードに変更する
(例:東京なら“JAXX0085”)
(ロケーションコードはweather.yahoo.comで調べる)
(4)10行目の“var source =”を“yahooWeather”に変更
※ただしForecastの取得が含まれないため6日間予報レイアウトでは使えません
■その他お好みで
“configureMe.js”の変更でお天気アイコンのセット(3種同梱)を選んだり、ロック画面での表示を有効にしたり、取得インターバルを変更したりできます。
■SummerBoardフォルダに入れる場合
今回もテーマはSummerBoardのテーマフォルダに入れました。その場合同様にzip解凍後のフォルダ名から“.theme”を削除しないとWinterBoardで表示されないようです。
■ウィジェットは他のテーマと組み合わせる
『Weather Widget』はスタンドアロンで動作し他のテーマとの併用を考慮しているため、アイコンやUIImagesなどは含まれていません。テーマに追加するか、WinterBoardで“User Wallpaper”をONにするか、他のテーマと組み合わせて使います。
例えばこちらの『Reveal Transparent』と組み合わせる場合
(1)『Reveal Transparent』と『Weather Widget』をThemesフォルダに入れる
(2)WinterBoardを起動
(3)リストで『Weather Widget』が『Reveal Transparent』より「上に」あること
(下にあった場合はドラッグして並び替える)
(3)『Weather Widget』と『Reveal Transparent』の「両方」にチェックを付ける
(4)WinterBoardを終了(re-spring)
これで『Reveal Transparent』をベースに『Weather Widget』の効果を追加したテーマが適用されます。同様に他のテーマとの組み合わせも可能です。機能/効果が重複した場合、リスト上位が優先して上書きされるのがWinterBoardの仕様のようです。
■拙作モディファイ版についての説明
以下の点を変更しました。
できる限りスタイルシート(twoLine.css)だけの変更に留め、最低限必要な箇所のみhtml(Widget.html)も変更しました。外部のJavaScriptファイルは一切手を加えていません。
(1)全体を上部に移動(アイコン最上段の位置へ)
(2)上下に分かれていた要素を左右に分割
(3)時刻表示を追加
(5)フォント指定を全て“Helvetica”に変更
(6)その他フォントサイズや背景色など細かい変更
それぞれ簡単に説明します。
■全体を上部に移動
“Widget.html”の10行目“padding”を“278”→“30”に変更
■上下に分かれていた要素を左右に分割
ここは変更箇所が多いので要点のみ。
twoLine.css
(1)#WeatherContainer=左要素としてfloatをleftに(幅152px)
(2)#Forecast=右要素としてfloatをrightに(幅168px)
(3)#TextContainerは使わず要素毎にサイズ等を指定
(4)#weatherIconはpositionをabsoluteにしてマージン調整
(5)その他細かい調整(フォントサイズやパティング等)
Widget.html
(1)タグの位置を要素の新しい並び順に合わせ変更
(2)一部pタグが使われていたのを全てdivに変更
■時刻表示を追加
(1)前回の時刻取得/表示スクリプトMod版を抜粋し外部jsファイルに
(2)“Widget.html”からリンク指定
(3)“Widget.html”の該当位置にスクリプト実行文を挿入
(4)“twoLine.css”に時刻用のスタイルを追加
■フォント指定を全て“Helvetica”に変更
(1)“twoLine.css”の該当箇所を変更
(私はNeoTechフォントを使用するため指定しました。通常は不要です)
■その他フォントサイズや背景色など細かい変更
(1)“twoLine.css”の該当箇所を変更
全体位置や左右要素の高さを合わせるためフォントサイズや余白の指定で微調整しました。
※ただし、NeoTechフォント+英語表示の環境で調整しているため、iPhoneの標準フォントで利用する場合は一部再調整が必要と思われます(NeoTechの方がちょっとだけ大きい)
■拙作Mod版のソース
変更したファイルのみ掲載しておきます。改造時の参考になれば幸いです。
(右クリックして保存して下さい、htmlはIEやFirefoxでは正常に表示されません)
●html(Widget.html)
●スタイルシート(twoBox.css)
●時計表示用JavaScript(Clock.js)
■モディファイ版一括ダウンロードはこちら(zip)
※これらのファイルによって不都合が発生した場合、当方は一切責任を負いません。利用は自己責任でお願いします。
※該当箇所だけ継ぎ接ぎしたため不要なソースがあってもそのまま残っています
※スタイルシートは詳しくないためfloatやinlineの使い方がこれでよいのか不明
(とりあえずSafari(iPhoneとWin)では意図したとおりに表示されています)
※秒の表示をやめたい場合(負荷とバッテリーが心配とか)
→“Clock.js”の42行目「 + ":" + currentSeconds」を削除
2009/08/01追記
(ロック画面への表示に関して、コメントでのやりとりをまとめました)
(zipにもこれらのファイルを追加しました)
ロックスクリーン表示用
以下3ヶ所の変更が必要です
■1■.configureMe.js
var enableLockScreen = true
■2■Stylesheetsフォルダ内
ロックスクリーン表示用のcss
Under_StatusBar.css が必要
(configureMe.jsの12行目で指定されています)
(ホーム用のcss(拙作Mod版ならtwoBox.css)をコピーしてリネーム)
■3■テーマのルートフォルダ内
ロックスクリーン表示用のhtml
LockBackground.html が必要
(ホーム用のhtml(Widget.html)をコピーしてリネーム)
(10行目のpaddingを30→120程度に変更(値はお好み))
壁紙を表示させるために
LockBackground.htmlのbodyタグ(20行目)に
background="/private/var/mobile/Library/LockBackground.jpg"
を書き加える
※前掲リンクのModMyiスレッドから、6 day forecast以外の表示パターンのウィジェットも入手できますが、そちらには予めロックスクリーン用のファイル等が含まれています
この記事へのコメント
すみませーん、質問があります。空白アイコンはどこのフォルダに保存されるんでしょうか?
お願いします。
お願いします。
2008/11/18 (Tue) 01:23:30 | URL | びび #6facQlv.[ 編集]
こんにちはびびさん
blanksはウェブクリップとして保存されるので
“/private/var/mobile/Library/WebClips/Blank**.webclip/”
というフォルダに入っています(**は数字)
そこにあるicon.pngが59x60ピクセルの透明アイコンです
blanksはウェブクリップとして保存されるので
“/private/var/mobile/Library/WebClips/Blank**.webclip/”
というフォルダに入っています(**は数字)
そこにあるicon.pngが59x60ピクセルの透明アイコンです
質問なのですが、
Weather Widget の背景を透明にして、
文字を黒で表示したいのですが、
どこを編集すればよいでしょうか。
よろしくお願いします。
Weather Widget の背景を透明にして、
文字を黒で表示したいのですが、
どこを編集すればよいでしょうか。
よろしくお願いします。
2009/03/25 (Wed) 02:49:12 | URL | #g.PJSAjY[ 編集]
こんにちは
モディファイ版の“twoBox.css”で説明します。オリジナル版も要領は同じです。
まず7行目を
color:black;
にすると左側の地名や曜日などのフォントが黒になります
8行目を
background-color: rgba(0,0,0,0.0);
にすると背景が透明になります
54行目を
color:black;
にすると右側の曜日などのフォントが黒になります
55行目を
background-color: rgba(0,0,0,0.0);
にすると背景が透明になります
最後に95行目を
color: #000000;
にすると時計のフォントが黒になります
以上です
この辺の設定を変えるとフォントのカラーや背景色を自由に変えられるのでぜひ試してみて下さい
モディファイ版の“twoBox.css”で説明します。オリジナル版も要領は同じです。
まず7行目を
color:black;
にすると左側の地名や曜日などのフォントが黒になります
8行目を
background-color: rgba(0,0,0,0.0);
にすると背景が透明になります
54行目を
color:black;
にすると右側の曜日などのフォントが黒になります
55行目を
background-color: rgba(0,0,0,0.0);
にすると背景が透明になります
最後に95行目を
color: #000000;
にすると時計のフォントが黒になります
以上です
この辺の設定を変えるとフォントのカラーや背景色を自由に変えられるのでぜひ試してみて下さい
ご丁寧に教えていただき、
ありがとうございます。
試してみたところ出来ました。
ありがとうございます。
試してみたところ出来ました。
2009/03/26 (Thu) 01:48:10 | URL | #Zc0/ALGE[ 編集]
よかったですね。是非カスタマイズ楽しんで下さい。
こんにちわ。
ロック解除画面にも表示させたい場合は
var enableLockScreen = false
を何と書き換えればいいでしょう?
宜しくお願い致します。
ロック解除画面にも表示させたい場合は
var enableLockScreen = false
を何と書き換えればいいでしょう?
宜しくお願い致します。
2009/07/24 (Fri) 16:23:04 | URL | 丞相 #-[ 編集]
丞相さん、こんにちは
以下3ヶ所の変更が必要です
■1■.configureMe.js
var enableLockScreen = true
■2■Stylesheetsフォルダ内
ロックスクリーン表示用のcss
Under_StatusBar.css が必要
(configureMe.jsの12行目で指定されています)
(ホーム画面用のcss(拙作Mod版ならtwoBox.css)をフォルダ内でコピーしてリネームでOKです)
■3■テーマのルートフォルダ内
ロックスクリーン表示用のhtml
LockBackground.html が必要
(ホーム画面用のhtml(Widget.html)をフォルダ内でコピーしてリネームでOKです)
(ただしそのままだと時計表示に重なってしまうため、10行目のpaddingを30→120程度に変更します。値はお好みで。値が大きいほど下に移動します)
■問題点?
うちの3GSで試してみると、
・Loading等の文字が背景に残る
・充電中にバッテリーが表示されない
という状況です
作者がロックスクリーン表示を「余りお薦めしない」と言っているのは、このせいかもしれません
本文のリンクにあるModMyiのスレッドから、6 day forecast以外の表示パターンのウィジェットも入手できますが、そちらには予めロックスクリーン用のファイル等が含まれています
以下3ヶ所の変更が必要です
■1■.configureMe.js
var enableLockScreen = true
■2■Stylesheetsフォルダ内
ロックスクリーン表示用のcss
Under_StatusBar.css が必要
(configureMe.jsの12行目で指定されています)
(ホーム画面用のcss(拙作Mod版ならtwoBox.css)をフォルダ内でコピーしてリネームでOKです)
■3■テーマのルートフォルダ内
ロックスクリーン表示用のhtml
LockBackground.html が必要
(ホーム画面用のhtml(Widget.html)をフォルダ内でコピーしてリネームでOKです)
(ただしそのままだと時計表示に重なってしまうため、10行目のpaddingを30→120程度に変更します。値はお好みで。値が大きいほど下に移動します)
■問題点?
うちの3GSで試してみると、
・Loading等の文字が背景に残る
・充電中にバッテリーが表示されない
という状況です
作者がロックスクリーン表示を「余りお薦めしない」と言っているのは、このせいかもしれません
本文のリンクにあるModMyiのスレッドから、6 day forecast以外の表示パターンのウィジェットも入手できますが、そちらには予めロックスクリーン用のファイル等が含まれています
ありがとうございました。<(_ _*)> アリガト
無事成功しました・・・。
が、壁紙が反映されませんでした。
まぁーワタシにはスキルがありません(-_-;)
無事成功しました・・・。
が、壁紙が反映されませんでした。
まぁーワタシにはスキルがありません(-_-;)
2009/07/25 (Sat) 12:13:44 | URL | 丞相 #-[ 編集]
いやー、壁紙が表示されていないとは、言われるまで気づきませんでした
お恥ずかしい
壁紙を表示する場合は
LockBackground.htmlのbodyタグ(20行目)に
background="/private/var/mobile/Library/LockBackground.jpg"
を書き加えればOKなのを確認しました
htmlでロードされるため、一瞬タイムラグがありますが、ちゃんと自分で設定した壁紙が表示されるようになりますよ
お恥ずかしい
壁紙を表示する場合は
LockBackground.htmlのbodyタグ(20行目)に
background="/private/var/mobile/Library/LockBackground.jpg"
を書き加えればOKなのを確認しました
htmlでロードされるため、一瞬タイムラグがありますが、ちゃんと自分で設定した壁紙が表示されるようになりますよ
色々と本当にありがとうございます。、
ワタシも3Gと3GSの2台持ちなのですがー
結果3Gは壁紙も天気アイコン共に表示されました。
が・・・3GSは壁紙は反映されるもののLoadingと表示されやままお天気アイコンが表示されません・・・><
中身は3Gのものと同じなんですが・・・。
お手数をお掛けいたしまして、本当にありがとうございました。
ワタシも3Gと3GSの2台持ちなのですがー
結果3Gは壁紙も天気アイコン共に表示されました。
が・・・3GSは壁紙は反映されるもののLoadingと表示されやままお天気アイコンが表示されません・・・><
中身は3Gのものと同じなんですが・・・。
お手数をお掛けいたしまして、本当にありがとうございました。
2009/07/26 (Sun) 21:24:49 | URL | 丞相 #-[ 編集]
3GSうまくいかなかったようで残念です。たまーに先方が落ちていて取得できないときもありますし、回線の影響とか、一時的なものであればよいですね
ロック画面表示は備忘録として本文に反映させておきました
ロック画面表示は備忘録として本文に反映させておきました
こんにちは。
早速使わせていただいて、うまく表示されているのですが、背景の黒の部分が真ん中あたりで少しずれているように見えるのですが、これはtwoBox.cssを修正する感じですかね?
早速使わせていただいて、うまく表示されているのですが、背景の黒の部分が真ん中あたりで少しずれているように見えるのですが、これはtwoBox.cssを修正する感じですかね?
2009/08/17 (Mon) 23:57:36 | URL | hiro #upbXC6HE[ 編集]
hiroさん、こんにちは
おっしゃるとおりcssで調整できます
うちの環境(3GS、フォントはNeoTech)だと
5行目をpadding-top:2px;にするとピッタリです
フォント種やフォントサイズのによっても違ってくると思いますので、他の設定も含めて調整してみて下さい
おっしゃるとおりcssで調整できます
うちの環境(3GS、フォントはNeoTech)だと
5行目をpadding-top:2px;にするとピッタリです
フォント種やフォントサイズのによっても違ってくると思いますので、他の設定も含めて調整してみて下さい
こん**は。
早速使わせていただいてますが、
今日の天気アイコンと、秒数の表示が
若干重なってしまうので、天気アイコンを
少しずらしたいのですが、どこを
いじったらいいでしょうか?
早速使わせていただいてますが、
今日の天気アイコンと、秒数の表示が
若干重なってしまうので、天気アイコンを
少しずらしたいのですが、どこを
いじったらいいでしょうか?
2009/10/17 (Sat) 20:45:07 | URL | chieri #V4rYaZBU[ 編集]
chieriさん、こんばんは
言われて久々に見てみたら、確かに上にズレてますね、いつの間にこうなったのやら
天気アイコンの縦位置は
cssファイルの45行目
margin-top:42px;
この数値を変更します(数字が大きいほど下に移動)
同様に横位置は46行目で変えられます
もう一つアレンジの手段として
今日の天気アイコンを小さくするという方法もあります、例えば
cssの42行目と43行目
heightとwidthの数値を24にすると、週間天気のアイコンと同じ大きさになります
言われて久々に見てみたら、確かに上にズレてますね、いつの間にこうなったのやら
天気アイコンの縦位置は
cssファイルの45行目
margin-top:42px;
この数値を変更します(数字が大きいほど下に移動)
同様に横位置は46行目で変えられます
もう一つアレンジの手段として
今日の天気アイコンを小さくするという方法もあります、例えば
cssの42行目と43行目
heightとwidthの数値を24にすると、週間天気のアイコンと同じ大きさになります
お返事おそくなりましてすいません。
試してみたのですが・・・、天気予報が「?」
マークのまま表示されない現象が・・・。
ちょっとあせらず試してみようと思います。
天気予報の表示位置はオリジナル版と
同じ位置で表示できましたので。
あと、やっぱりlock解除画面の
バッテリマークの表示がでないのは
3.0以降の仕様なんですかねぇ・・・。
試してみたのですが・・・、天気予報が「?」
マークのまま表示されない現象が・・・。
ちょっとあせらず試してみようと思います。
天気予報の表示位置はオリジナル版と
同じ位置で表示できましたので。
あと、やっぱりlock解除画面の
バッテリマークの表示がでないのは
3.0以降の仕様なんですかねぇ・・・。
2009/10/22 (Thu) 01:05:17 | URL | chieri #V4rYaZBU[ 編集]
データが取得できなくてアイコンは時々?になっちゃいますね
バッテリーの件は、いずこか設定で回避できるかもしれないので暇なおりに調べてみます
バッテリーの件は、いずこか設定で回避できるかもしれないので暇なおりに調べてみます
| ホーム |


