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

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

アメリカのAmazon.com新着商品をRSSでチェックできるサービスを作った

New Arrivals RSS Feed Generator

構想3ヶ月、製作10時間。アメリカのAmazon.comの新着アイテム情報をRSSフィードで購読できるサービスを作った。要は、最新作をRSSでお届け!のUS版。

本の場合は著者、映画の場合は監督や俳優(女優)など好きなキーワードで検索できる。

商品のカテゴリは、DVDや本・CDはもちろんのこと、アパレルから携帯まで幅広い。MP3ダウンロードやKindleストアなんてカテゴリもある。

円高な今日この頃、アメリカのAmazon.comで割安な買い物はいかが?

New Arrivals RSS Feed Generator

で、ここからは技術的な話。

今回CSSフレームワークとしてYUI2(Reset・Fonts・Grids・Base)、jQuery UI CSS FramworkとPryn.cssを併用した。YUIとjQuery UIが共存できることが分かったのは大きな収穫。
残念なのはjQuery UIのbuttonがIEで角丸にならないこと。filterを使ってボタンらしく見せることで妥協した。

また、HTMLにはHTML5を使った。いわゆるVideoやCanvas等の「HTML5的」な目立つ使い方はしていないが、単にValidなHTMLを書くというだけでもHTML5はシンプルで使いやすい。
もうこれからはHTML5だけでいいと思う。(携帯も早くHTML5が標準にならないかな。)

しかしAmazon Product Advertising API(かつてAmazon Web Serviceと呼ばれていたものが何回かの改名を経て今はこの名前)の統一性の無さには困った。カテゴリによってsortのパラメータがバラバラ。場合によっては同じsortパラメータでもsort順が正反対。と思ったらReferenceが間違っているだけだったり。実際に動かしてみないと何が正しいかわからない。登録されてるデータもいい加減そうだから、あまり正確なsort順は期待できないかも...。

何はともあれ、New Arrivals RSS Feed Generatorをよろしくお願いします。 🙂

Pryn.js & Pryn.cssバージョンアップ(0.2.5)

読み込むだけでWebページの「おもてなし度」を向上 – Pryn.js & Pryn.css [ゼロと無限の間に]

Pryn.jsの主な変更点

  • HTML5のautofocus属性に対応(autofocus未対応のブラウザでもautoでfocusできる)
  • HTML5のplaceholder属性に対応(placeholder未対応のブラウザでも、テキストボックスに未入力の場合のみメッセージをグレイアウトで表示できる)
  • select要素の選択されているoption要素を簡単に取得できるfunctionを追加(Pryn.getSelected())
  • 四角いBOXをちょっとだけ角丸っぽく見せられるfunctionを追加(Pryn.round())
  • formをsubmitした時のマウスカーソルを「待ってる」感が出るものに変更
  • Stringを拡張してword2regexp()を持たせるのをやめた

Pryn.cssの主な変更点

  • importするYUIのCSSのスキームをスキーム指定無しからhttpsに変更(スキームなしだとIEが2回読み込んでしまう問題を回避するため)
  • テキストボックスの背景色を変えたときに枠線の見た目が変わらないようにした(IE6は非対応)
  • ボタンの見た目のブラウザ間の差異を小さくした。かつ、ボタンを押しやすいように左右のpaddingを広めにした
  • フォントはIE7・IE8はメイリオ、Macはヒラギノ角ゴ、それ以外はブラウザの設定のフォントになるようにした
    (IE6やFirefoxは設定しないとClearTypeが有効にならないので自動でメイリオにするのはやめた。ブラウザの設定等でメイリオにしている人にはFirefox等でもメイリオになる)
  • リンクの色を綺麗な青等にした
  • 角丸(border-radius)のブラウザ別のサンプルを入れた

なんかゴチャゴチャしてきたので、JavaScriptはjQueryベースで書き直したくなってきた。

CSSはjQuery UI CSS Framworkベースで?でもYUIないとクロスブラウザ的に辛いかな...