Todo.phpのDatepikcer(カレンダー表示)をYUI2からjQuery UIに変更しました。YUI2だとAndroidで前/次の月の表示ができなかったので…。
買い物ランチャーに履歴機能を追加
Androidアプリの買い物ランチャーに、入力した検索キーワードの履歴を表示する機能を追加しました。
履歴はリンクになっていて、クリックするとそのキーワードが検索窓にセットされます。
Monacaは手軽でいいですね。(それに比べてAndroid Studioは…)
Androidアプリの”買い物ランチャー”を作りました
欲しいものがある時に、Amazon・楽天などのショッピングサイトでまとめて検索したい時ってありませんか?それを簡単に実現できるAndroidアプリです。下記リンク先(Google Play)からインストールできます。
買い物ランチャー – Google Play の Android アプリ
いわゆる横断検索サイトのアプリ版みたいなものですね。ショッピングサイト横断検索補助アプリでしょうか。
技術的には、monaca (+ PhoneGap/cordova) + pure.css + jQueryで作っています。monacaで何か作ってみたかったので、とにかく手軽にできるものを作ってみました。開発は実質1時間くらいでしょうか。(外部サイトで開く処理で手間取りました…monaca.invokeBrowser()が動かない?)
これまでAndroidアプリをTitanium、Android Studioで作ってきましたが、それらに比べてmonacaは非常に手軽で良いです。
まずオンラインのIDEの起動が早い。Webアプリなのでインストールもアップデートも不要です。(Android Studioは進化が早くて、何ヶ月か触らないと色々変わってしまうので苦労しました。)
機能は限られているので、仕事でがっつり使いたい場合には足りないかもしれません。でもその分必要な機能が見つけやすいので、日曜プログラマには最適です。
また、デバッガをAndoridにインストールすれば、動作確認も簡単です。この手軽さは他のIDEも追随して欲しいです。
最初はonsen uiを使おうとも思ったのですが、習得に時間がかかりモチベーションが落ちるのを避けるため、使い慣れたHTML/jQuqeryにしました。
monacaの特徴の1つはAndroidアプリとiOSアプリ(とWindowsあぷりとChromeアプリ)が同時に作れてしまうことですが、実際には、Titaniumの時もそうだったのですが、細かい部分や、あるいはデザインなどで条件分岐が必要になり、別々に作った方がメンテナンス性が良い、ということになりそうです。
また、今回やっとpure.cssが使えたのですが、bootstrapよりも手軽でいいですね。Webkit/blink系だけを気にすれば良いスマホアプリには相性が良さそうです。
ということで、買い物ランチャー、使ってみてください。
Androidアプリの3分タイマーをアップデートしました
いくつかバグを修正しました。詳細は下記でご確認ください。
3分タイマー – Google Play の Android アプリ
こんな単純なアプリでも、下記のような携帯ならではの対応が必要な状態変化方法が次々に見つかって、奥の深さを感じます。
- スリープ
- サスペンド(=deep sleep、画面が消えるだけではなくて電力消費抑制のために一部を除いてアプリの動きを止める)
- 端末の回転による画面の縦⇔横の変換
- バックボタンによる終了
- ホームボタンによるバックグラウンドへの移行
中には状況が一致する日本語情報がほとんどない(検索ワードの知識不足のせいですが)ものもあり、調べては解決して進めていく作業が初々しくて良いです。
サスペンド対策についてはAlermManagerを使うのが根本的な対策だとは思いますが、シンプルなアプリには大げさな気もするのでWakeLockで対応しました。
WakeLockはリリースしないようなパスがあるとバッテリー浪費アプリになってしまうのが怖いですが。onDestroy()でリリースしたので、大丈夫なはずです…。
Androidアプリ「3分タイマー」を作りました
とにかく簡単に使える3分タイマーのAndroidアプリ、その名も「3分タイマー」を作りました。自分自身が欲しかったので。
3分タイマー – Google Play の Android アプリ
上記リンク先にも書きましたが、できることは
- アプリを起動する(と同時に自動でタイマーがスタートする)
- 3分たつと、ブルブル震えて報せてくれる
あとは終了ボタンでアプリを終了するだけ。
(起動後のスタートボタンをタップするのさえ面倒だったのです。)
Androidに入れておけば、いつか役に立つと思います。1台に1つ、ぜひどうぞ。
技術的な話
ここからは技術的な話。
前作の+東京+通勤+道中+Androidアプリ版はTitanium Mobileで作りましたが、今回は普通にJavaで作りました。
きっかけはAndroid Studioの公開です。Android StudioはまだBeta版ですが、なかなか使いやすいと思います。Eclipseよりも、Titanium Studioよりも、Androidアプリを作るには適していると思いました。
Titaniumで原因不明の異常終了に悩むより、参考情報の多いJavaで作った方が精神衛生上良い気がします。
Javaを使うのはかなり久しぶりなので、頭がぎゅっぎゅっと締められる感じがしてなかなか良かったです。少し文法も変わったみたいです。
今後もAndroidアプリを作っていくなら、素のJavaというよりはオレオレライブラリ(フレームワーク?)を少しずつ作っていくと思います。きっともう定番処理詰め合わせのライブラリがあるんでしょうが、今はまだそれよりも小さな頭で悩みつつ進めるのが心地よさそうです。
また、今回は多国語化として英語にも対応しました。(アイコンのみ言語による切り替えが無いですが。)Android StudioもGoogle Playも、多国語化しやすいよう便利にできてます。Javaがもっと簡単に多国語化する方法をサポートしてればもっと良かったのですが。
ただ、一番の問題は、英語を書く力が足りないことでした…。
Titanium Mobile用のライブラリ、Prometheus.jsを公開しました
iPhoneアプリもAndroidアプリもJavaScriptで手軽に作れるTitanium Mobileをさらに手軽にするライブラリ、Prometheus.jsを公開しました。
Ti.UI.createXxxx()の冗長さが嫌だった(Titaniujm Studioのコード補完を使うことを考えると、子要素のさらに子関数を呼び出すより、直接子関数を呼び出せる方が楽なのです)のと、後々のことを考えて各UIのデザイン設定を一括して変えられるようにしたかったのが主な作成の動機です。
これからもTitanium Mobileを使って行くなら、秘伝の鰻屋のタレのように、このPrometheus.jsに便利機能や備忘録的なTipsや手癖のようなスニペット等々を加えていく、かもしれません。
ちなみに、Titanium Mobileに神の火を! – Prometheus.jsのアイキャッチの画像は、無料素材・フリー素材|BEIZ Graphics Webで配布されているものです。カッコイイですね!よく見ていると、そこに人の顔でも浮かんできそうな、不思議な画像です。
Google Mapper V3に現在位置取得機能を追加しました
Google Mapper V3をバージョンアップしました。バージョン0.7.0です。
変更点は、Geolocation APIを使って現在位置を取得できるようにしたことです。
要するにnavigator.geolocation.getCurrentPosition()を呼び出すというのが主な処理なのですが、その前後の面倒そうなことも合わせてやるので、呼び出す側は楽になります。
まあ、どちらかと言えば、Geolocation APIの使い方の覚え書きという側面が強いかも…
主にスマートフォンで使われる機能ですが、PCでも無線LANのあるノートPC等ならまあまあ使えます。(古いIEは使えません。新しいIEは…使えるのですが…残念です。)
でもiPhoneだとgetCurrentPosition()だけでなく、watchPosition()とか使ったりしないとうまく取得できなくてタイムアウトしているようですが、とりあえず今回はそこまで追ってません。
スマホで見られる写真地図のFlic 100K(ふりく百景)を作りました
東京+通勤+道中に続くスマートフォン向けのWebサイトとして、今自分がいる場所の近くで撮影された美しい写真を地図上にマッピングして表示するFlic 100K (ふりく百景)を作りました。
(分かりにくかもしれませんが、「富嶽百景」とかけています…)
位置情報を取得できなかった場合は、外国の方が喜びそうな金閣寺周辺の写真を表示するようにしました。
Androidでは大丈夫なのですが、iPhoneだとGPSやWi-Fiからの位置情報取得がタイムアウトして金閣寺が表示されることが多いようです。SafariのGeolocation APIの問題かもしれません。
技術的には、今回もjQuery Mobileを使いました。ページ遷移が無いので見た目をそれっぽくするために使っただけですが。
一点、listviewのdividerへのテーマの反映が期待通りに動かなかったのが残念です。黄色にしたかったです。jQuery Mobileは現在RC2ですが、正式版リリースまでには直るといいですね。
Flickr APIはPHPのserialized形式があってPHPに優しいのですが、Twitter APIのようにKEYなしでSearchができたらJavaScriptだけで済んだのでもっとよかったのにと思いました。
まあKEYを公開してJavaScriptでアクセウするような参考ページもたくさんありますが。(Flickr APIの規約としてはKEYの公開は禁止しています。)
+東京+通勤+道中+をAndroid Marketで公開しました
東京近郊の電車の路線に関するつぶやきをTwitterからリアルタイム検索する+東京+通勤+道中+を、Androidアプリ化して、Android Marketで公開しました。
こちらです → 東京+通勤+道中 – Android マーケット
インストールしてみると分かりますが、アプリを起動するとWebブラウザを立ち上げて東京+通勤+道中のWebサイトを表示するだけです。(よくあるなんちゃってネイティブアプリです…。)
まあブラウザを起動してお気に入りから選ぶよりはちょっと楽ですね。
余談ですが、アプリの詳細(アクセス許可)を見ると、アプリでは使っていないはずのSDカードやUSBストレージやWi-Fi状態の表示にアクセスする場合があるとなぜかなっています。
Manifestあたりをもう少しきちんといじらないとダメなんでしょうね。もしバージョンアップすることがあったら調べてみます。
ということで、よかったらインストールしてみてください!
↓
東京+通勤+道中 – Android マーケット
Google Mapper V3をちょっとバージョンアップ(0.6.1)
Google Mapper V3を微修正したました。IEで動かないバグの修正と、load()でGoolge Maps APIのJavaScriptを読み込む場合に位置情報使用有無のパラメータであるsensorを指定できるようにしました。
で、このsensorとtrueにすると、ブラウザが対応していればユーザーの位置情報が取得できます。(Firefoxはデフォルトでは許可を求めてきます。Androidでは設定で位置情報を使えるようにしておく必要があります。)
スマートフォン向けの地図表示などでは需要があるのではないでしょうか。
で、試しに、Google Mapper V3で現在地を取得する動作サンプルを作ってみました。
スマートフォンでGPSを使えばもちろんかなり正確な場所が分かりますが、GPSを使わなくてもGeolocation APIは無線LAN等からある程度場所を特定できます。ノートPCとFirefoxの組み合わせでも、意外に正確な場所が取得できました。興味のある方は上記のサンプルで試してみてください。
(無線LANの使えないPCなどではかなり残念な結果になります…。)
追記:IE(9)では無線LANが使える環境でも残念な結果になってしまいました…