« 2008年8月 | トップページ | 2008年10月 »

2008年9月25日 (木)

アンテナ増設?

前にiPhoneのアンケートがソフトバンクからSMSで来たので、その自由欄に「東横線の田園調布駅(地下)で電波が入らない」と書いたんですが…

…今日電波が入ることに気付きました。

アンケート結果からアンテナ増設!?
つか、ずーっと今までソフトバンクのケータイはここで使えなかったんだろうか?
OSのバージョンUPでつながるようになった可能性もアリ。

代官山も入りにくいんで書いておけば良かったかな???

2008年9月21日 (日)

ホーム画面も考慮してみました。

おかげさまでアメッシュ、ナウキャスト、渋滞情報を皆様に使っていただけているようで大変ありがたいばかりです。
その中で、「ホーム画面に登録す時タイトル長すぎ!」というご意見をいただいたので、HTML内のタイトルタグを思い切って短くしてみました。

まぁ長いタイトルは自分で好きに短くすることもできますが、最初から短い方がタシカニお手軽に登録できますね。
あとせっかくなのでアイコンも作ってみました。とはいえ私は絵は描けないのでフリー素材のお力を借りているわけですが。

Icon

アメッシュ、ナウキャストは超無難に傘マーク(T_T
ナウキャストの各地のページはあえてアイコンつけてないので、自分で好きな位置を拡大表示させてから登録するのがオススメです。
渋滞情報の方はクルマがひしめき合った、いやーな感じを表現してみました(--;
色の区別はヤッパリ高速道路は緑だろうっちゅう安易な考えにより一般道は道路っぽい灰色にしました。

こういう絵をパパッと描ける人がとてもウラヤマシイ今日この頃…

2008年9月18日 (木)

レーダー・降水ナウキャスト for iPhone

「東京アメッシュって、東京だけだよね…」という不満が聞こえてきそうな今日この頃。(いやここのは"関東"アメッシュとも言えますけれども)
やっぱり作っちまいました!

レーダー・降水ナウキャスト for iPhone
http://blg.cocolog-nifty.com/now_cast/

Now_cast

まだブラッシュアップとか全然してませんがとりあえず公開。
まぁ作ったといっても肝心の画像は例によって拝借している訳ですが…

使い方は、まず最初のページで地域のリストが出るのでそこから見たい所を選びます。ちなみに上の画像は「全国」を選んだ画像。台風きてますね…
この状態で画面をクリックすると3時間前から1時間後までをアニメーション再生します。ピンチ操作をすると拡大・縮小ができます。ただ10分前、現在、10分後へ移動する機能は今のところありません。
関東以外の雨情報を知りたい方、是非ご利用下さい。


コード自体は、80%東京アメッシュと一般道路渋滞情報の流用です。特に画像のナンバリングがほとんど東京アメッシュと同じだったのでかなり手間が省けました。
今回読み込む画像が2倍くらいあるんですが全然落ちませんね。拡大してもスムーズでなかなか快適。東京アメッシュは結構な確率で落ちるっていうのに…。差と言えば透過画像があるか無いか?これが落ちる最大の原因なのかも?
あとアニメーション再生の定石とも言えるImageオブジェクトですが、なんかこれ使うとかなりコマ落ちしました…。読み込むのが多すぎると捨てていっちゃうんでしょうか?
今回は(も?)style.displayでnoneとblockを切り替えて再生させてます。これだとコマ落ちしません。
このようにPCで動いてもiPhoneだとスムーズじゃないという所があって、コードの書き換えによるチューニングが必要なのはおもしろくもあり、めんどくさくもあり(^^;

ちなみに以前からあった雨レーダー for iPhoneは今回のとかぶると思うので削除しました。

まぁとりあえず、雨と渋滞はこれで事足りますかねぇ。
さて次はなにを作ろうか…

2008年9月15日 (月)

東京アメッシュ for iPhone を落ちにくくしました

昨晩も豪雨だったので、早速東京アメッシュ for iPhoneを使っていたんですが、最近薄々思っていた事。「これ、アニメーションさせてると2週目くらいで落ちる?」
電源OFFしたりOSのバージョンがあがった後も、やっぱり落ちる。
ん~なんかコードにミスがあるのか?アニメーションのループがオーバーフローしてたり??
でもコードをながめる分にはそんな所はなさそう。

しょーがないので一つずつ機能を無効にして落ちなくなるのを探そうとした所、速攻で発見。
iPhoneでURLバーを隠す定石とも言える、window.onloadでスクロールさせる部分でした。
これをinitの中でスクロールさせるようにすることで落ちるのがほとんど無くなりました。
具体的には…

before
----------------------------------------------------------------------
<body>
        <div>
         …
</body>

<script language = "javascript" type = "text/javascript" ><!--
        window.onload = function() { setTimeout( "window_move();", 100 ); }

        function window_move(){
                window.scrollTo( 0, 1 );
                init();
        }

        function init(){
                …
        }
----------------------------------------------------------------------


after
----------------------------------------------------------------------
<body onload="init();">
        <div>
         …
</body>

<script language = "javascript" type = "text/javascript" ><!--
        function window_move(){
                window.scrollTo( 0, 1 );
        }

        function init(){
                …
                setTimeout( "window_move();", 100 );
        }
----------------------------------------------------------------------

ただし、タイミングのズレがあるのかたまにスクロールがうまくいかない時もあるようです。まぁ落ちるよりはましということで。

でもなんでこれで落ちにくくなるのかは…??? windw_moveの中にinitがあるのがまずいんですかねぇ?アニメーションする毎にwindow.loadが呼ばれる?ソンナバカナ。
そもそも、window.onloadとbody要素のonloadで各々動いてくれればいいんですけど、なぜか両方を設定するとwindow.onloadしか有効にならない感じ?だったのでwindw_moveにinitを入れてしまった訳ですが、今度はinitの中でwindow_moveを設定するようにさせただけです。
なーんか致命的な事があったんですかね~?
javascript初めて1ヶ月くらいの私にはよくわかりません…

2008年9月13日 (土)

一般道交通情報 for iPhone にネイティブアプリっぽいインデックスをつけてみた

前回iphone-universalを利用してiPhoneらしいリストを作ってみたわけですが、一つ違和感が。そう、右端にインデックス(あ~Zがタテに並んでるやつ)がないんですよね。
まぁ無くてもフリックが快適だからいらないかな?と思っていたんですけど、交通情報はリストの数も多くてさすがにメンドクサイ。

ちゅーわけで作ってみました!インデックス付き。
一般道交通情報 for iPhone
http://blg.cocolog-nifty.com/ippan/
Ippan1

電話帳とかとほとんど変わらない操作感だと思いますがいかがでしょうか?
むしろアルファベットが無い「あ~わ」までのインデックスなので日本人としてはより使いやすい!?
Webアプリのリストでもココまでできればネイティブアプリと遜色無いんじゃないでしょうか。

…いやコレ、実は思ってたより相当大変でした(T_T
途中何度もあきらめかけたくらいです。

最初はフレームで分ければ出来るんじゃ~ん?というつもりでしたが、iPhoneのフレームは普通に作ると下に伸びちゃう。サイズを固定できても、スクロールが2本指でドラッグしなきゃいけないので操作性が一気に悪化!!

結局touchイベントを全部乗っ取って、全てに対して自分で動作を割り振ってあげないといけないハメになりました…
スクロールはモチロン、フリックした後の慣性スクロールとか、ちょっとタッチしただけの場合は選択させないとか、それはそれは多岐にわたります(T_T

もう途中からヤケになって作ったのでかなりダサくて汎用性も低いコードになってしまってます。あとでちょっと整理して、見せられるようなコードになったら投稿してみるかもしれません。





追記:2009/04/19
より便利な「渋滞情報 for iPhone」を作りました。

記事は以下
渋滞情報のWebアプリ、作りましたよ。
http://blg.cocolog-nifty.com/blog/2009/04/web-920b.html

高速も一般道も見れますよー。


2008年9月10日 (水)

一般道路交通情報 for iPhone

前回の高速道路渋滞情報 for iPhoneという名のただの直リンクに引き続き(^^: 一般道路版も作ってみました。

Ippan

今度はほんのちょっぴり努力してリスト表示にしてみました。
iPhone風のCSSはiphone-universalを利用させて頂きました。いやぁ手軽にカッコ良くできてホント助かります。

リストはこういうのでは珍しく「あいうえお順」にしてみました。普通は都道府県順だと思うんですが、まぁ何か気分で。使いづらすぎる場合は苦情下さいm(_ _)m
んで全部を一覧にしてみた所、スゴイ量になってしまったので、CSSをiUiのにしてみようかと試してみたんですが…なんかスクロールがもっさりだったのでやめました。清く全リストを書き出すことに決定。

で、リストを選ぶと結局直リンクです(^^;
もはやレジャーシーズンも過ぎましたが、渋滞回避にお役立て下さい。

#はやくソース元サイト自身でiPhone対応してほしいものです。こんな価値のある情報が手元で確認できるなんて、まさしくInformation Technologyなんですから。


追記:2009/04/19
より便利な「渋滞情報 for iPhone」を作りました。

記事は以下
渋滞情報のWebアプリ、作りましたよ。
http://blg.cocolog-nifty.com/blog/2009/04/web-920b.html

高速も一般道も見れますよー。

2008年9月 8日 (月)

高速渋滞情報 for iPhone

高速道路の渋滞情報を簡単に見れるものを作ってみました。

高速渋滞情報 for iPhone
http://blg.cocolog-nifty.com/kousoku/

Kousoku_2

とはいえ、東京アメッシュの時とは違ってこのソース元サイトはiPhoneで見れない訳ではないんですが…ビミョーにトップページが拡大しないと押しにくかったりしたんで、自分にとって使いやすいように最小限に手を加えて作ってみただけです。

つまり本家がiPhone対応してくれれば全然不要になるカンジですな。

実は本当はこのサイトの一般道の渋滞情報をリスト化したかったんですが、とりあえずこっちが手っ取り早く済みそうだったので。
んでその一般道の方はまた後日…(^^;

#にしても…ちょっと中身を覗いていじらせてもらったわけですが、色々冗長な記述とかあって、これちゃんと確認してんの?とかビミョーに気になる。キャラセットx-sjisとかだったし…iPhone対応なんて遠い夢かもしれないという不安が。

追記:2009/04/19
より便利な「渋滞情報 for iPhone」を作りました。

記事は以下
渋滞情報のWebアプリ、作りましたよ。
http://blg.cocolog-nifty.com/blog/2009/04/web-920b.html

高速も一般道も見れますよー。

2008年9月 6日 (土)

東京アメッシュ for iPhone これでほぼ完成

さて、最近色々やっていた東京アメッシュ for iPhoneですが、以下の事を行いました。
 ・動作スピードの改善
 ・時計表示の最適化

まずは動作スピードですが、前回いくつかの手法でスピードを見てみたら結局何もしないのが一番!という結果になったので(T_T 今度は徹底的にコードから無駄を省きました。
画像をDIVで設定していたのからIMGへ変えたり、変数は極力減らして使用後はdeleteしたり。あと県境のPNG画像を2枚重ねていたのを1枚にまとめたり。<-これが一番効果でかい?
できあがったものは、明らかに以前よりも数段速くなりました。
あと、やっぱり倍率は1倍が速いのは当たり前なんですが、今まで初期値が既に縮小だったのでわざわざ遅い状態に…。なので今回は初期画面は1倍となるようにしました。この効果もでかい!アニメーションがかなりなめらかデスヨ!
そのため今まで通り全画面が見たい場合はダブルタップ等でズームアウトしてから使って下さいm(_ _)m

ただし今度は画面のズーム率を
 全体表示
  ↑↓
 1倍
  ↑↓
 拡大表示
みたいにコントロールしたくなってきましたが…innerWidthはモチロン、resizeTo等でもダメだったのでとりあえず諦めました。よって1倍から可変すると、二度と1倍へは戻れません。そんときは一端タブを閉じてからサイドアクセスして下さい。(ただのリロードだと倍率が保持されるのでダメです)

もう一つの時計表示の最適化。結局現在の倍率を知るプロパティは解らずじまいなんですが、代わりに画面の内側サイズである 「window.innerWidth」がピンチ操作に連動していることが解りました。この大小を見ればおのずとフォントサイズも決定できるってもんで す。

まぁとりあえずそんなかんじで、これで一通り落としどころが決まりました。
とはいえ一時期の連続豪雨は去り、アメッシュを見る機会が減ってきた今日この頃です(T_T
どうかみなさんごひいきにひとつよろしく。

2008年9月 4日 (木)

東京アメッシュのiPhoneらしいUI

うちの東京アメッシュ for iPhoneは今のところ素っ気ないユーザーインターフェース(画面の左上に時間とテキストベースの操作系が出るだけ)なので、iPhoneらしくグリグリ動かせるように出来ないモノかと色々試してみました。

まず必要だと思われる操作は大雑把に言って

 ・ピンチによる拡大・縮小
 ・上下左右の移動

なので、これを以下の方法で試してみました。

 A : imgタグのtop,left,width,height
 B : divタグのtop.leftとwebkitのscale
 C : canvasのdrawImageとscale

…その結果、大体の感触としての動作スピードは

 iPhone標準(現Ver) >>>>>>>>>>>>> B > A > C

といったカンジでした(T_T
今のバージョンがダントツ速い。
そりゃ標準の機能が速いのは当然ですが、ココまで差があるとは思いませんでした。
コードはすごくシンプルに書いたつもりなんですが…ナニカ勘違いでもあるんですかねぇ。
どこかグリグリ動かせてるページがあったら参考にしてみたいものです。

んなわけで、iPhoneらしいユーザーインターフェースを検討すると言っておきながら、結局は現VerのiPhon自身そのもののユーザーインターフェースで、後は素っ気ない時計表示等をもう少しまともにする方向で考え直したいと思います…

2008年9月 2日 (火)

東京アメッシュ for iPhoneを関東アメッシュにしてみた

東京アメッシュはその名の通りと言うべきかどうか、東京にしか市区町村の線が入っていません。
他の件は位置関係から大体を見なければいけないのですが結構不便だと思います。
大人の都合ってやつでしょうか…

んなわけで、やっちまいました。他の県の線も引いてみましたよ…

東京アメッシュiPhone
http://blg.cocolog-nifty.com/amesh/

Kantou_amesh_2

いやなんか…線が太くて耳なし芳一みたいになってしまった。(T_T

1ドットで描くように修正していけば良いんだけど…こりゃドット絵職人じゃないと手に負えませんって。

誰かこの画像を1ドットの線に直して~m(_ _)m
http://blg.cocolog-nifty.com/amesh/msk000a.png

私はもうちょっとiPhoneらしいUIになるようガンバリマスので。

2008年9月 1日 (月)

東京アメッシュ for iPhone 時間表示に対応

この所連日いじっている東京アメッシュ for iPhoneですが、今更ながら時間表示も付けてみました。

東京アメッシュ for iPhone
http://blg.cocolog-nifty.com/amesh/

フツーに時間を表示する分には全然簡単なんですが、iPhoneらしくピンチ動作でズームイン/アウトをする場合、時間表示もくっついてきたらいいなーと思ったのでその追尾機能を付けました。

…ホントはscaleに合わせて文字のサイズも調整したかったんですが、その値のgetの仕方が解らなかったので断念しました(T_T
event.scaleというのがあるらしいと知り使ってみたんですが、どうやらコレはピンチ操作自体の増減値で、画面の表示倍率とは無関係。
純粋な、画面の表示倍率の値ってget出来るハズだと思うんだけど…ググってもワカラナカッタ。
誰か知っている人いたら教えて下さいm(_ _)m

« 2008年8月 | トップページ | 2008年10月 »