サンフランシスコでAndroidアプリを作ってるのですが、
まずはトライアル的にビューコンポーネントはデフォルトの部品を使っています。
そしたら、スマートフォン決済とかで急上昇中のSquare(http://squareup.com)っていう
スタートアップのAndroidのUIに関する取り組みの話が聞けるMeetupがあるっていうことで
↓のMeetupに行ってきました。
Taming Android UIs(http://www.sfandroid.org/events/30397751/)
会場は元々Squareのオフィスだったのが、StackMobという会社のオフィスに変更になりました。
結構ダウンタウンの中心部からは離れてたりして、30分くらいかけてテクテク歩いて行ってきました。
途中、割とおっかなそうな人が溜まってるとことか通ったりして、ちょっと南行くと、
ガラっと雰囲気変わるな、と。
StackMobはデッカイ交差点の脇みたいなところにあって、
元々倉庫かなんかだったところを改装したのかな？みたいな感じですが、
中入ってみるとカッコいいっすねー
んでもってワンコがウロウロしてて癒されますｗ
StackMobってこんな会社ですよーみたいなヤツ。
いつも通りガッツリピザいただきまして、隣の人とチロっと話したりします。
隣の人は見た目、自分の親より年食ってそうな感じでしたが、
PowerBookっぽいマシンにEclipse入れて、パズルっぽいアプリとか作ってました。
結構会場広かったけど、最終的には席足りないくらい人入ってました。
まずは主催の人から、今日のスポンサーの話とか、Squareってのはこんな事やっててねとか
って話があって、StackMobのお姉さんからはMeetupに会場提供するのはじめてで～なんて話があって、
Marakanaっていう最新のOSSのプロダクトの研修会社の人から先生募集してるよんみたいな話がありました。
いよいよ今日の本題です。SquareのEric Burkeさん。
SquareはiPhoneの印象が強いと思うけどAndroid版もありますよ、と。
挙手アンケート的に知ってる？って聞いたら会場のほとんどの人は認知してなかったけど。
■ 画像の角を丸くする
↓みたいな事するとラインがギザギザになっちゃうから駄目よ、と。
Path clip = new Path(); clip.addRoundRect(...); canvas.clipPath(clip);
Alpha Compositingがどうたらとか、友達の@shiestyleとか詳しそうな感じ。
仕事でも使ってるBitmapクラスを拡張して、Lazy Bitmapってのを作ったよ、とか、
onDrawメソッドでこんな風にーとかってコード見ながら話きくとなんとなく分かったような気分になります。
Bitmap.Config.ARGB_8888がどうのとか、よく分かりませんでしたが、
レイヤ的な感じにして文字を表示するところを用意したり、そういう感じなんだ！って勉強になりました。
印象的だったのは、デザイナーは端末がどうだとか意識してモックアップを作ってくるわけじゃないし。
その辺はUIエンジニアがちゃんとやんなきゃだよねっていう話で。
LinerLayoutもplastic_background.xmlで定義してPlasticLinearLayoutってクラス作ったぜ、とか。
Paint shinePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
みたいなの宣言してdispatchDrawをオーバーライドしてホゲホゲ、と。
そしたら、プロジェクタがしょっぱくて見たいとこ見せられないしとかｗ
クオリティを確認するのにDigitalColor MeterとかxScopeっていうツールが良いよ
ってことでした。有償らしいですが。
■ アイコンの話
ちっちゃいアイコンはタップしずらいよね、と。
みえないところでタップ出来る部分を拡張しておく。
TouchDelegateのexpandTouchAreaってメソッドで～。
こういうところがユーザビリティ左右するとこだよなぁと。
どうやって実装するかはちゃんとトレース出来てないですが、とても参考になりました。
■ 地図を表示する話
Flameに地図を入れ込む場合にこれまたFlameLayoutを拡張して角を丸くして、
フチをThickなLineにすることで～なんていう。
ちょっと必要性がよく分からなかったな。。。
■ Doneボタン(日本語のAndroidだと確定ボタンですかね)
キーボードDoneじゃなくてキーボードのじゃなくて画面上のDoneボタンを
押してもらうにはどうしたらイイか？なんていう。
インプットに次にフォーカス当てるところを指定して、とか。
■Flipper
ViewFlipper。なんかひどいバグがあるらしい。HoneycombでFatal bug priorらしい。
これまたオーバーライドしてSafeViewFlipperってのを作ったよ、と。
Exceptionをcatchしたらフリッピんぐを止める～なんていう拡張。
カードホルダーみたいなやつ。カードを引っこ抜いたり入れたり。
ハックじゃなくてテクニックだな、ヘヘヘ、と。。
■ QA質問集
Q:UI作るときWYSIWYGみたいなツール使ってる？
A:Eclipseで普通に開発してますよ、とｗ
工夫してるところは、同じアプリの違うバージョンをインスコ出来るように
バイナリをコピってからXMLを引っ張り出して中身書き換えて～みたいのを
サクっと出来るような仕掛けを持ってることですかねぇ。
Q:どのくらいの端末でテストしてるの？
A:かなりたくさん。30～40くらいかな
Q:画像とかdpi毎に違うの作ってるの？
A:モノによる。カード会社のロゴとかはコンシャスだからそれぞれに最適なサイズを作ってる
Q:AndroidのAPIのミニマムバージョンは？
A:7がミニマム。ちっこい画面のはサポートしてない。
Q:オリジナルUI部品とデフォルトUI部品の割合は？
A:基本的に全てのUI部品はオリジナルを拡張したもの
Q:どれくらいの時間をUIに充ててるの？
A:85パーセントとか。というかSquareはチームが細分化されていて、
iPhoneはiPhoneのチーム。サーバはサーバのチームって感じになっていて、
EricさんはJavaのUI屋。
UIって言っても、出てくるのはJavaとXMLなので、とても馴染みあるはずなんだけど、 コードみても、あんまりピンとこなかったりするのは新鮮でしたｗ 本気でAndroidでデザインやってる話ってはじめて聞いた気がして、 普通に継承して拡張出来ちゃうあたりが興味深いというか。 iPhoneより自由度高いし、AndroidのUI屋ってのはこれからアツいかもしれないですね。 にしても自分の↓のブログのネタとかちょっと恥ずかしいな、、こゆ話きくと。。 Androidアプリで写真の選択or新しく写真を撮ってからプレビューする(http://shinodogg.com/?p=3670)
帰りがけにTシャツいただきました！
どこの会社も似たような事するんですねｗ
自分とこのもFacebookでチョロっとさらしてますがｗｗ
バックはこんな感じ
