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

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

PHP製お手軽マスタ管理ツールをGithubで公開しました

Excelのように気軽に編集できて、Excelよりも縛りのある汎用的なマスタ管理用ツールが欲しかったので作りました。Mastersです。今回はGithubで公開しました。

RailsのScaffoldのように編集するたびに画面遷移するのが嫌なので、表上でダブルクリックで編集できるようにしました。検索も好きな項目を好きなだけ指定して絞り込めるようにしました。

TODOとしては、

  • 日付の入力補助用にDatepickerを付ける
  • 外部キーはIDではなくそれを表す名前を表示する(編集モードにすれば今でも確認できますが)

といったところでしょうか。

技術的な話をすると、内部的にはP3 Frameworkを使っていて、jscdnやBootstrapCDN経由でjQuery, Twitter Bootstrap, Bootswatch, Font Awesomeを使っています。

ところで、今回はSourceTreeを使い始めた記念でGithubで公開しました。最近は勉強がてらGitを使うようにしてるのですが、1人で開発することが多いせいか、いまだにSubversionの方が便利な気がしてます…。

jQuery Mobile 1.1RCを東京通勤道中に適用してみた

jQuery Mobile 1.1.0のRC1が出たので、さっそく東京+通勤+道中に導入してみました。(ついでにFlic 100Kにも。)

jQuery Mobile 1.0.xではスクロールすると明滅してぎこちなく付いてくる奥ゆかしさが不評だったStickyなヘッダーが普通に固定になっていい感じですね。

IE8(IE9の互換モードで確認)ではレイアウトが思いっきり崩れたり、そもそも表示されなかったりしますが、もう気にしないことにしましょう…(IE7-9もAグレード扱いだから、きっとRC2で治るはず…だといいな。)

Pryn 1.0、デビュー。

長い雌伏のバージョン0.2.xの時期を経て、Pryn 1.0をリリースしました。

PrynはJavaScriptとCSSのファイルを1つずつ読み込むだけでWebサイトのユーザービリティを向上させる、つまり「おもてなし」度を上げるツールです。

内容的にはJavaScriptの方はクロスブラウザに特にフォームまわりの使い心地を楽に良くすることを中心に書かれています。それに対してCSSの方は学んできたTipsの集積地という感じです。

最初にこれを作った頃は、JavaScriptのフレームワークはまだPrototype.jsが一番手で、それに対してjQueryがカウンターテーゼとして台頭してきたという頃でした。他にもDojoやMootoolsがコアなファンに後押しされて、JavaScriptライブラリ群雄割拠という感じでした。
そんな状況で、どのフレームワーク/ライブラリにも依存しない、かつどのフレームワーク/ライブラリとも併用できるようなライブラリが欲しくなり、作ったのがこのPryn.js & cssです。
当初はクロスブラウザなイベントリスナーの追加やclass属性の追加・削除、それにいくつかのフォーム部品等のおもてなし向上とYUI2 CSSのインポートとシンプルな内容でしたが、老舗の鰻屋のタレのように、じっくり時間をかけてじわじわ知り得た知識や経験を足していき、旨みを凝縮させました。(忘れないようにメモがわりにしつつ、かつ、実験場にしてきたとも言います。)

なにはともあれ、Pryn.js & css、可愛がってやってください。

スマホで見られる写真地図の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で見てもスマートフォンっぽく視えるようにしてみたんですけど、いかがですか?

たしざん、ひきざん、かけざんの練習ができるページを作りました

小学校低学年向けに、たしざん、ひきざん、かけざん(九九)の練習ができるページを作りました。

けいさんのれんしゅうです。

計算の種類と、計算に使う数字の範囲を指定して「スタート」をクリックすると、ひたすら問題が表示されます。

子どもが気が散らないように、なるべく余分なものを表示しないようにしました。

ご活用ください。

jQuery UIの各テーマの色が人目で分かる便利ツール

jQueryのサブプロジェクトであるjQuery UIは、豊富なテーマとDatepicker等のウィジェットが用意されていて、なかなか便利です。

しかしウィジェットに比べて、class属性の指定だけで簡単にサイトを彩ることが出来て便利なThe jQuery UI CSS Frameworkの存在が意外と知られていない気がします。
そしてその原因は、jQuery UI ThemeRollerで簡単に見た目を確認できる各ウィジェットに比べて、その効果がすぐに分かるページが用意されていないからではないでしょうか。

そこで、各テーマを適用した時にそれぞれのCSSクラスがどんな背景やフォントになるかをひと目で確認できるツール、名付けてThe Colors Viewer for jQuery UI CSS Frameworkを作りました。

これがあれば、着せ替え感覚で気軽にテーマを選んだり、classを変更したりできると思います。ぜひご活用ください!