「東京アメッシュ」アプリにもズーム機能を追加しました。
全域を見渡すことができるようになったので、雨が上がるタイミングを狙いやすくなったんじゃないかと思います。
2009/08/29
2009/08/15
Androidアプリ: 「日本のお天気レーダー」シーク動作を高速化
新たに画像の先読み・キャッシュ機能に対応して、シーク動作を高速化しました。
アプリを起動すると、まず最新画像を読み込んで表示します。その後、バックグラウンドで過去3時間分の画像を先読みします。
先読み中にシークした場合は、その時刻の画像のダウンロード・表示が優先されます。非同期処理の実装にはAsyncTaskを使っているのですが、先読みを小分けにすることで、UI操作に素早く反応できるようになっています。
JPEGファイルがメモリにキャッシュされると、それ以降ネットワークにアクセスしなくなるので、以前と比べて高速にシークできるようになりました。ただ、JPEGのデコードにそれなりに時間がかかるので、思ったほど劇的には高速化しませんでした。残念。
デコード後のBitmapをキャッシュする方法も試してみたのですが、さすがにメモリが足らずに安定して動作しないので断念。
これで、Android Marketのユーザーコメント欄にあったリクエストには対応したつもり。
アプリを起動すると、まず最新画像を読み込んで表示します。その後、バックグラウンドで過去3時間分の画像を先読みします。
先読み中にシークした場合は、その時刻の画像のダウンロード・表示が優先されます。非同期処理の実装にはAsyncTaskを使っているのですが、先読みを小分けにすることで、UI操作に素早く反応できるようになっています。
JPEGファイルがメモリにキャッシュされると、それ以降ネットワークにアクセスしなくなるので、以前と比べて高速にシークできるようになりました。ただ、JPEGのデコードにそれなりに時間がかかるので、思ったほど劇的には高速化しませんでした。残念。
デコード後のBitmapをキャッシュする方法も試してみたのですが、さすがにメモリが足らずに安定して動作しないので断念。
これで、Android Marketのユーザーコメント欄にあったリクエストには対応したつもり。
2009/08/08
Androidアプリ: 「日本のお天気レーダー」にズーム機能を追加しました
Androidアプリ「日本のお天気レーダー」にズーム機能を追加しました。
「ズーム機能が付いてたらいいのに」というコメントがいくつかあったので、実装してみました。画面にタッチした後の1秒間だけ、ズームボタンが表示されます。また、画像のスクロール位置や、ズームの設定が、アプリ終了時に保存されるようになりました。
Androidのブラウザや地図アプリで使われているのと同じUIを実装してみようと調べてみると、ZoomControlsを使えばいいことが分かりました。
LayoutファイルにZoomControlsを追加して、ズームボタンを押された時のListenerを設定すればOK。例えばこんな感じ。
ちょっと手間取ったのは、画像の拡大・縮小の実装でした。調べてみると、ImageView.setImageMatrix()を使えばいいことは分かったのですが、いまいち使い方が分からない。
ドキュメントには実際の使い方がわかるような記述がないし、ネットで調べてみても参考になりそうなコードはなかなか見つからない。結局、Androidのカメラアプリのソースを見てみることに。
postScale()とpostTranslate()を組み合わせて、何とか動くようになったものの、カメラアプリの洗練された実装と比べると、何かいまいちな感じ。Matrixの使い方はもうちょっと勉強する必要がありそう。落ち着いたら、他のお天気アプリにもズーム機能を実装してみよう。
あと、画像の拡大・縮小率もちょっと工夫しました。はじめ、何も考えずに一定間隔のスケールで拡大・縮小させてみたのですが、元画像に細かい模様が含まれているので、中途半端なスケールで拡大・縮小すると、モアレが生じてしまって画質が悪くなってしまいました。そこで、[50%, 75%, 100%, 125%, 150%, 200%, 300%]のステップで変化させるようにしてみました。
次は端末を回転したときに、いちいち画像を再ダウンロードしないようにして高速化してみようかな。
アプリを公開してから約1ヶ月でダウンロード数が5000を越えました。今、日本でAndroid携帯はどれぐらい売れているんでしょうかね。
「ズーム機能が付いてたらいいのに」というコメントがいくつかあったので、実装してみました。画面にタッチした後の1秒間だけ、ズームボタンが表示されます。また、画像のスクロール位置や、ズームの設定が、アプリ終了時に保存されるようになりました。
Androidのブラウザや地図アプリで使われているのと同じUIを実装してみようと調べてみると、ZoomControlsを使えばいいことが分かりました。
LayoutファイルにZoomControlsを追加して、ズームボタンを押された時のListenerを設定すればOK。例えばこんな感じ。
mZoomControls = (ZoomControls) findViewById(R.id.zoom_controls);
mZoomControls.setOnZoomInClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
zoomIn();
}
});
mZoomControls.setOnZoomOutClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
zoomOut();
}
});
ちょっと手間取ったのは、画像の拡大・縮小の実装でした。調べてみると、ImageView.setImageMatrix()を使えばいいことは分かったのですが、いまいち使い方が分からない。
ドキュメントには実際の使い方がわかるような記述がないし、ネットで調べてみても参考になりそうなコードはなかなか見つからない。結局、Androidのカメラアプリのソースを見てみることに。
postScale()とpostTranslate()を組み合わせて、何とか動くようになったものの、カメラアプリの洗練された実装と比べると、何かいまいちな感じ。Matrixの使い方はもうちょっと勉強する必要がありそう。落ち着いたら、他のお天気アプリにもズーム機能を実装してみよう。
あと、画像の拡大・縮小率もちょっと工夫しました。はじめ、何も考えずに一定間隔のスケールで拡大・縮小させてみたのですが、元画像に細かい模様が含まれているので、中途半端なスケールで拡大・縮小すると、モアレが生じてしまって画質が悪くなってしまいました。そこで、[50%, 75%, 100%, 125%, 150%, 200%, 300%]のステップで変化させるようにしてみました。
次は端末を回転したときに、いちいち画像を再ダウンロードしないようにして高速化してみようかな。
アプリを公開してから約1ヶ月でダウンロード数が5000を越えました。今、日本でAndroid携帯はどれぐらい売れているんでしょうかね。
2009/07/25
Androidアプリ: 「クイズ研」リリースしました
Androidアプリ第4弾として、「クイズ研」アプリをリリースしました。
クイズのデータは本家「クイズ研」のサイトからダウンロードしています。今までリリースしたお天気アプリは、Webページを解析して勝手に画像データを取得していましたが、今回はクイズ研にデータ取得用のWeb APIを実験的に用意してもらいました。
どうしてそんな事ができたかというと、クイズ研を運営しているのが大学の研究室時代の同期だからなんです。
先日、Google Developer Day 2009に参加した際、会場で偶然10年ぶりに彼と再会しました。それ以来、Twitterでお互いFollowしてたんですが、GDDフォンをもらった事 がきっかけで自分が最近Androidアプリを作っている事を知った彼が、「試しに作ってみてよー」と開発の依頼をしてきたというわけです。
まだクイズに答えるだけの基本的な機能しかないですが、これから少しずつ追加していきたいと思ってます。
クイズのデータは本家「クイズ研」のサイトからダウンロードしています。今までリリースしたお天気アプリは、Webページを解析して勝手に画像データを取得していましたが、今回はクイズ研にデータ取得用のWeb APIを実験的に用意してもらいました。
どうしてそんな事ができたかというと、クイズ研を運営しているのが大学の研究室時代の同期だからなんです。
先日、Google Developer Day 2009に参加した際、会場で偶然10年ぶりに彼と再会しました。それ以来、Twitterでお互いFollowしてたんですが、GDDフォンをもらった事 がきっかけで自分が最近Androidアプリを作っている事を知った彼が、「試しに作ってみてよー」と開発の依頼をしてきたというわけです。
まだクイズに答えるだけの基本的な機能しかないですが、これから少しずつ追加していきたいと思ってます。
Androidアプリで画像が正しく表示されない?
リリースしたAndroidお天気アプリ3兄弟のユーザーの方から、「Wi-Fi経由だと正しく画像が表示されるんですが、3G経由だと文字が表示されません」との報告メールが来た。(以下の画像は確認のためにユーザーの方に送ってもらいました)
自分が開発に使っているのはGoogle Developer Day 2009でもらったGDDフォンで、SIMカードを挿していないので、3G経由のデバッグはできません。3G経由だとダウンロードに時間がかかって何か問題があるんだろうか?といろいろ調べてみても原因分からず。
1日経って同じユーザーの方から、「原因が分かりました。mopera UのWeb圧縮が原因でした」とのメールが来る。
おっと、mopera Uにそんな機能があるとは知りませんでした。
解決して一安心。
自分が開発に使っているのはGoogle Developer Day 2009でもらったGDDフォンで、SIMカードを挿していないので、3G経由のデバッグはできません。3G経由だとダウンロードに時間がかかって何か問題があるんだろうか?といろいろ調べてみても原因分からず。
1日経って同じユーザーの方から、「原因が分かりました。mopera UのWeb圧縮が原因でした」とのメールが来る。
おっと、mopera Uにそんな機能があるとは知りませんでした。
解決して一安心。
2009/07/13
Androidアプリ: 「日本のお天気レーダー」リリースしました
Androidお天気アプリ第3弾として、「日本のお天気レーダー」アプリをリリースしました。
国土交通省の防災情報提供センターのWebサイトから画像を取得しています。
東京アメッシュアプリと同様、シークバーを使って過去3時間分のデータをグリグリ表示可能です。メニューから表示する地域を選択することも可能です。
これで普段PCで見ているお天気関係のサイトを、ブラウザを使わずにAndroid携帯で確認できるようになりました。やっぱりブラウザよりも表示が高速で快適快適。
JavaScriptでウィジェット作る方が簡単だしコード量も少なくて済むけど、ブラウザ起動して表示するとなると、今の携帯のスペックではどうしても動作が遅い。サクサク表示できるようにするためには、今のところはネイティブアプリをJavaで書いてしまう方が良さそうです。
相変わらずズーム機能に対応できてませんが、そのうち対応しようと思います。iPhoneと違ってAndroidでは2本指で画面を拡大・縮小させる「ピンチ」動作がサポートされていないので、どういうUIが使いやすいのか、もうちょっと考えてみます。
国土交通省の防災情報提供センターのWebサイトから画像を取得しています。
東京アメッシュアプリと同様、シークバーを使って過去3時間分のデータをグリグリ表示可能です。メニューから表示する地域を選択することも可能です。
これで普段PCで見ているお天気関係のサイトを、ブラウザを使わずにAndroid携帯で確認できるようになりました。やっぱりブラウザよりも表示が高速で快適快適。
JavaScriptでウィジェット作る方が簡単だしコード量も少なくて済むけど、ブラウザ起動して表示するとなると、今の携帯のスペックではどうしても動作が遅い。サクサク表示できるようにするためには、今のところはネイティブアプリをJavaで書いてしまう方が良さそうです。
相変わらずズーム機能に対応できてませんが、そのうち対応しようと思います。iPhoneと違ってAndroidでは2本指で画面を拡大・縮小させる「ピンチ」動作がサポートされていないので、どういうUIが使いやすいのか、もうちょっと考えてみます。
2009/07/12
Androidアプリ: 東京アメッシュをリリースしました
Androidお天気アプリ第2弾として、「東京アメッシュ」の画像をブラウザを使わずに表示するアプリをリリースしました。
東京と下水道局が運営している「東京アメッシュ」から画像を取得して表示しています。(ここ数日雨が降ってないので雨が降った場合の画面をキャプチャできてません。。。)
指でドラッグすると表示する部分を変更することが可能です。画面下のシークバーで、過去2時間分の10分ごとのデータを表示することも可能です。
過去データ表示機能の実装にはいろいろと悩みました。はじめ、毎回サーバーにアクセスするのは効率が悪いだろうと、一度ダウンロードした画像をBitmapでキャッシュしてみたのですが、メモリが足りずに頻繁に落ちてしまいました。
そこで、Bitmapではなく、ダウンロードしたBitstreamをキャッシュして、表示の度にBitmapにデコードしてみたのですが、Bitstreamが格納されているInputStreamは、一度デコードに使うとポインタが進んでしまい、ポインタの位置を戻すことができない模様。
結局、シークの度に毎回サーバーからダウンロード&デコードする実装に落ち着きました。decodeByteArrayを使うようにすれば、データをキャッシュしつつ効率良く表示できるのかなぁ。
全体表示にも対応しようとしたのですが、縦型表示時に横長の画像を全体表示すると空白だらけになって見づらいので、とりあえず実装は見送りました。
それにしても、アプリの名前を「東京アメッシュ」ってそのままなのは、やっぱりまずいかなぁ。とは言え、他にいい名前が思いつかないのでそのまま使わせてもらいました。有用な情報の提供、ありがとうございます>東京都下水道局さま
東京と下水道局が運営している「東京アメッシュ」から画像を取得して表示しています。(ここ数日雨が降ってないので雨が降った場合の画面をキャプチャできてません。。。)
指でドラッグすると表示する部分を変更することが可能です。画面下のシークバーで、過去2時間分の10分ごとのデータを表示することも可能です。
過去データ表示機能の実装にはいろいろと悩みました。はじめ、毎回サーバーにアクセスするのは効率が悪いだろうと、一度ダウンロードした画像をBitmapでキャッシュしてみたのですが、メモリが足りずに頻繁に落ちてしまいました。
そこで、Bitmapではなく、ダウンロードしたBitstreamをキャッシュして、表示の度にBitmapにデコードしてみたのですが、Bitstreamが格納されているInputStreamは、一度デコードに使うとポインタが進んでしまい、ポインタの位置を戻すことができない模様。
結局、シークの度に毎回サーバーからダウンロード&デコードする実装に落ち着きました。decodeByteArrayを使うようにすれば、データをキャッシュしつつ効率良く表示できるのかなぁ。
全体表示にも対応しようとしたのですが、縦型表示時に横長の画像を全体表示すると空白だらけになって見づらいので、とりあえず実装は見送りました。
それにしても、アプリの名前を「東京アメッシュ」ってそのままなのは、やっぱりまずいかなぁ。とは言え、他にいい名前が思いつかないのでそのまま使わせてもらいました。有用な情報の提供、ありがとうございます>東京都下水道局さま
2009/07/08
Android Marketにアプリをリリースしてみた(Tepco Thunder)
もうすぐ日本でもAndroid携帯が発売されるということで、初めて作ったアプリをAndroid Marketにリリースしてみた。
東京電力が提供している雨量・雷 観測情報のページから最新画像を取得して表示するという、とてもシンプルなアプリ。
リリース直後に、「ズーム、凡例の表示に対応してくれればいいな」というコメントが書き込まれたので、とりあえず凡例の表示機能を追加してみた(ただし日本語のみ対応)。そのうち英語でも表示できるようにしてみよう。
それにしても、Tepco Thunderって名前じゃ、何ができるアプリなのか分かりづらいな。でも、一度リリースしてしまうと、途中からアプリの名前を変更できないみたい。
東京電力が提供している雨量・雷 観測情報のページから最新画像を取得して表示するという、とてもシンプルなアプリ。
リリース直後に、「ズーム、凡例の表示に対応してくれればいいな」というコメントが書き込まれたので、とりあえず凡例の表示機能を追加してみた(ただし日本語のみ対応)。そのうち英語でも表示できるようにしてみよう。
それにしても、Tepco Thunderって名前じゃ、何ができるアプリなのか分かりづらいな。でも、一度リリースしてしまうと、途中からアプリの名前を変更できないみたい。
2009/07/06
glEnable(GL10.GL_DEPTH_TEST)が有効にならない
Android向けのOpenGL ESのコードを書いていたときの話。
デプスバッファのテストをしてみようと、glEnable(GL10.GL_DEPTH_TEST)を呼んでみたけどなぜか有効にならない。
あれこれ調べてみると、setEGLConfigChooser(false)を呼んでしまっていたのが原因で、デプスバッファが生成されていなかった。
なぜこんなコードを書いてしまったのかというと、Android SDKに含まれていた以下のサンプルコード(ApiDemos)をベースに、デプスバッファのテストをしていたからだということが分かった。
ちゃんと理解しないでコードをコピペするとはまるよ。それにしても、setEGLConfigChooser(false)がデプスバッファを無効化するコードだなんて、ちょっと想像つかなかったな。。。
デプスバッファのテストをしてみようと、glEnable(GL10.GL_DEPTH_TEST)を呼んでみたけどなぜか有効にならない。
あれこれ調べてみると、setEGLConfigChooser(false)を呼んでしまっていたのが原因で、デプスバッファが生成されていなかった。
なぜこんなコードを書いてしまったのかというと、Android SDKに含まれていた以下のサンプルコード(ApiDemos)をベースに、デプスバッファのテストをしていたからだということが分かった。
ちゃんと理解しないでコードをコピペするとはまるよ。それにしても、setEGLConfigChooser(false)がデプスバッファを無効化するコードだなんて、ちょっと想像つかなかったな。。。
2009/06/30
登録:
投稿 (Atom)