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系だけを気にすれば良いスマホアプリには相性が良さそうです。

ということで、買い物ランチャー、使ってみてください。

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の公開は禁止しています。)

東京通勤道中を少しバージョンアップしました

スマートフォン向けに電車の路線に関するつぶやきをリアルタイム検索できる+東京+通勤+道中+をパワーアップしました。

主な変更点は、

  • 東京の電車の路線名だけでなく、他の路線名や駅名、その他どんなキーワードでも検索できるように検索BOXを追加
  • 不動産の広告のTweetが表示されにくいようにフィルターをかけるようにした
  • Tweetの内容が二重にHTMLエスケープされていた問題を解消

といったところです。

検索窓はjQuery Mobileのおかげで簡単にそれらしいものができました。jQuery Mobileすごいですね。

苦労したのはjQuery MobileによるAjax遷移で、検索BOXから検索してからHomeに戻ると、なぜか次の遷移がおかしくなるという謎の現象が起きて、対症療法的に結局該当ケースのみJavaScriptで動的にAjax遷移をさせないようにしました。(原因は深く追ってません…)

Ajax遷移はキャッシュが効けばサーバアクセスが無いので、モバイルで電波状況が不安定な場合などには効果的にサクサク動かすことができていいんですけどね。これからの改善に期待です。

スマートフォンで東京の路線に関するTweetをリアルタイム検索できるサイトを作りました

iPhone、Android等のスマートフォンで、東京を走っている電車の路線に関するつぶやきをTwitterからリアルタイムで検索できるサイトを作りました。その名も東京+通勤+道中です。

朝の通勤や帰宅前のダイヤのチェックや、台風等で電車が止まった場合の情報収集などにお役立てください。

ところで今回初めてjQuery Mobileを使いました。(RC1が出たばかり!)
jQueryという名前が付いているのでJavaScriptでバリバリ作っていくのかと思ったら、読みこむだけで後はHTML要素の属性を見て勝手にいい感じにやってくれるというPrynスタイルでした。これはいいですね。jQuery UIよりさらにメソッドを進化した感じというか。

ついでにPCで見てもスマートフォンっぽく視えるようにしてみたんですけど、いかがですか?

AppEngine-Twitter / AppEngine-OAuthの動作サンプルに「乗換案内Bot」を追加

Google App Engine(Python)用ライブラリのAppEngine-Twitter / AppEngine-OAuthの動作サンプルに、新しいTwitter Botを追加した。

その名も乗換(道順)案内Bot

出発地点と目的地を告げると、Googleマップでその経路を調べてURLをリプライしてくれるBotだ。デフォルトは電車・飛行機での乗換案内だが、Googleマップに行ってしまえば車や徒歩でのルート案内も表示できる。

おまけにiPhone/iPadでも使えると思う。(未検証ですが。)

使い方はここを参照。

短縮URLにはBit.lyを使ったが、放っておいてもt.coで短縮してくれるんだっけ?まあいいや。

久しぶりのPythonでいろいろ忘れてた。嫌いではないけどなあ、Python。