CSS Nite LP, Disk 16「スマートフォン特集 (2) Android編」
ものすごいお久しぶりです。実に半年ぶりとか。。
最近仕事でAndroidアプリをやってることもあり、興味がHCDとかUXDとかIxDとかUIデザインとかユーザビリティとかに寄ってきています。それもあって「ブログでなに書いたらいいん!?」というこれまで何度も何度も何度でもなった症状に懲りずにかかって半年、というのが近況です。
ただそろそろ書きたいなと思ってきたので、とりあえずやる気が起きた時に書けそうなことから。CSS Nite LP16に行ってきました。
今年の頭にはiPhone/iPad特集として、CSS Nite LP13、CSS Nite LP13 repriseが開催されました[1]。今回は、スマートフォン特集(2)と題し日本でもイキオイ激しいAndroid特集です。以前のレポートほどがっつりしたものじゃなくて、気軽に、備忘録として、くらいな気持ちで書いていきます。
- Android OSと現状のデバイス総まとめ
- 切っても切り離せないAndroidアプリとクラウドとの連携
- Android技術者とのデザイナーとのハッピーな出会い
- iPhone・AndroidアプリのUI・挙動はどこが違う?
- Android向けサイトのはまりポイントと脱出法
- Android向けサイト制作のあれこれ:viewportについて
- Androidサイト制作に jQuery Mobileを活用しよう
- まとめ
Android OSと現状のデバイス総まとめ
– あんざい ゆき@yanzm さん
30分ほど遅れての参加でしたが、フォローアップのスライドを拝見して、Androidとはなんぞや、から、iOSとは何が違うか、日本独自機能の紹介、今後のGoogleのAndroid戦略、までAndroidに関わる様々なトピックをぎゅっとまとめたお話でした。この資料は一度見ておいた方がいいと思います。
個人的には、キャリアが展開する独自マーケットでのアプリ配布方法の扱いが気になりました。資料を補足しつつまとめてみました。
- ドコモマーケット
- Android Marketへリンクしているのみ。ニュースやゲームの紹介、広告を掲載しており、ポータルサイト(いわゆるiMenu)のような作り
- au one Market
- 独自にアプリの審査制を採り入れており、アプリ配布も独自に行っている
- SoftBank ピックアップ
- Android Marketアプリ内のタブ?に一画面を組み込んでいる
これには、各キャリアのスタンスが現れているんじゃないかと想像できますが、なかなか興味深いです。それぞれにPCからアクセスすると分かるのですが、auとSoftBankがサービスの紹介程度のページを用意しているのに対し、ドコモではAndroid端末で表示されるページをそのまま掲載しているなど、各キャリアの取り組みも注目です。
ちなみにau one Marketってどうやって配布しているんだろう?Android Market以外からのインストールには「提供元不明のアプリ」にチェックが必要だという認識だけど、au one Market要らないのかな?情報求む。
OSのバージョンごとのシェアのグラフも興味深かった。OS1.6以下のシェアはすでに4%程度しかないため、「対応は切っていいと思います」とのこと。OS1.6のブラウザはやっかいですからね・・・(HTML5未対応だったり)。ただ、日本でのシェアとは確実に異なる[2]だろうからそれを含めた判断をどうすればいいのか気になるところ。
切っても切り離せないAndroidアプリとクラウドとの連携
– 華井 雅俊@MasatoshiHanai さん
スミマセン、細かいところはよくわかりませんでした><
興味が沸いたのはC2DMについて。iOSのNotificationは「情報」を送るだけなので、それからアクションをとる(メールアプリ開いたり、とか)のはユーザが能動的に操作する必要がある。一方、AndroidのC2DMは「命令」も送ることができるため、(PCで観ているURLを端末のブラウザアプリを起動して表示する、など)端末にアクションを取らすことができる。
これは似て非なると思います。できることの幅も全然違う。iOSユーザのワタシとしては、PCで見てるサイトのURLをiPhoneにPushすることは思いついても、iPhoneのブラウザ立ち上げて表示させてしまうことまで想像できませんでした。想像できる幅も変わってくる。
ただ、このセッションを聴いて感じたのは、Web制作者の視点だと、このお話を聴いて参加者がどんな行動をとればいいのかわからなかった、というのが正直なところ。Web制作サイドとして「夢があるなぁ」と感じるだけ以上に、僕らにできることがあるのかという点で、専門家の方の考え方を聞きたかったな。
Android技術者とのデザイナーとのハッピーな出会い
– 杉本 札彦@yoshi_rr さん
感動した。これほどエネルギーで満たされたプレゼンを久しぶりに聴いたな、と思いました。熱意とエネルギーに満ちあふれていたお話でした。ざっくりといえば、デザイナーはプログラマと協力してAndroidアプリつくろうよ!今がチャンスなんだよ!というお話でした。印象に強く残っているのは以下の3つ。
- 「技術者を一方的に搾取するな」
- Androidのインテントは、「汎用的」「標準的」「拡張的」な取り決めであり、これがインターネットの黎明期と同じ可能性をもたらす
- すべてのチャンスは「かっこいいAndroidアプリから始まる」
特に3つ目。iPhoneによって、売れる・使われるアプリの条件に「かっこよさ」が加わったのはやっと認知されるようになってきましたが、「かっこよさ」はプログラマでは表現できない。デザイナーが必要なんです。逆にかっこいい見た目は作れてもデザイナーではアプリにできない。プログラマが必要なんです。
ビジネスとして大きく飛躍するAndroid OSのチャンスに乗るには、デザイナーと一緒にかっこいいアプリを作らなくてはいけない、と。
聴いていてすごくワクワクしました。
iPhone・AndroidアプリのUI・挙動はどこが違う?
– 石野 和明@akaitembin さん
iPhoneとAndroid端末のハード的な違いをおさらいした上で、「livedoor ニュース」では、iOS、Android向けにそれぞれの特性を考慮してUI設計をしているですよ、というお話でした。左右に眺めながらの比較はすごく参考になりました。
以下、気になった点をまとめました。ちなみに、太字は私のコメント。
| iOS | Android | |
|---|---|---|
| 「戻る」操作 | UI上に「戻る」ボタンを設置する必要あり。 普通は左上ですね |
HWボタンがあるため不要。 明示的に配置するアプリもある |
| フッター | フッター(タブバー)は下部に固定(お作法) | フッターは透明にし、表示領域を大きめに。 ちなみにAndroidでタブバーは上部 |
| 「共有」ボタン | 共有は独自に作り込んだ | インテントを使って工数かからずに他アプリ連携が容易にできる |
| Pad対応 | ターゲットはiPad一択 | OS3.0対応が必要であり、難しい。 GALAXY TabのようにOS2系でもPad型しているのもありますしね |
Android向けサイトのはまりポイントと脱出法
– 執行 大介@mattari_panda さん
今回の中では最もCSS Nite系でノウハウ豊富なセッションでした。てことで箇条書きでざっとメモを転記します。太字は私のコメント。
- とあるサイトで計測したら、OS1.6の訪問率は1.4%だった。IE6よりも低い。
- AndroidはDroidフォントという大変ざんねんなフォントがデフォルトだが、これはどうしようもない
国内モデルでは、UDフォントやモリサワ、AXISなど質の高いフォントをバンドルしていますね。 - Androidの「ブラウザ」アプリは、Webkitベースだが、Chromeではない。過信するとハマる可能性も
- 数字の羅列を勝手に電話番号と認識してリンクを張ってしまう。しかも端末ごとに挙動が違う。
<meta name="format-detection" content="telephone=no">をして、個別に<a href="tel:番号">番号</a>する。 -webkit接頭辞は付ける。今後のことを考えて接頭辞なしのも含める。順序は「接頭辞あり、なし」で記述する- Androidでは、
-webkit-tap-hightlight-colorが悪さをすることも。かといって消すとどこをタップしたか認知できない。 -webkit-box-reflectはiOSとAndroidで記述方法が異なる- AndroidのJavaScriptには要注意
- よくわかんないところでresizeイベント頻発(ページが開いたとき、キーボード出したとき(数回出る)、変換候補でたとき)
- touchイベントがiPhoneに比べて全然で取れない。だいたいiPhoneの1/3、端末によってバラバラ
個人的には、Androidは、JavaScriptの処理がしょぼいところが困ります。アプリっぽくJSで作り込もうとすると端末ごとのパフォーマンスにものすごく引っかかってしまい、結局端末によっては使い物にならなかったりする。これは最後のjQuery Mobileのお話にも関係してきますが。
Android向けサイト制作のあれこれ:viewportについて
– 高津戸 壮@Takazudo さん
viewportは奥が深いなぁと。とくにスマートフォンになって、dpiに気を遣わなくてはいけなくなって余計混乱を招いている気がする・・・。
viewportについては、現実的に利用するスニペットとしたら3つとのこと。
- 1. 固定 : PC向け
-
<meta name="viewport" content="width=xxx" /> - 2. リキッド : オススメ
-
<meta name="viewport" content= "width=device-width, initial-scale=1" /> - 3. リキッド(ズーム禁止) : 一番使われている
-
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" />
ここまでviewportについてわかりやすくまとめたスライドもないと思いますので、後で要チェックですよ!
ちなみにCSS Viewportってどうなったんでしたっけ?
Androidサイト制作に jQuery Mobileを活用しよう
– たにぐち まこと@seltzer さん
トリは、スマホ対応サイト制作のバイブル「マカロン本」の著者のたにぐちさんによるjQuery Mobileの紹介。
冒頭に「ジャパネットたにぐち」と鷹野さんのご紹介されていましたが、結構話すスピードが速い(これはボリュームによる所もあると思いますが、)割に、たいへん聞き取りやすく、デモがたいへん美しく、すばしかったです。zen-cordingを使いこなされてるところに惚れました。
話の趣旨としては、
- スマホサイト対応は、とっても手間がかかります。(iOS, Android, スマホらしいデザイン、スマホらしいUI・・・)
- jQuery Mobileを使えば、iOS, Androidだけでなく、Pad端末などのマルチデバイスにこれ1つだけで対応できるんです!
- しかもHTMLを書くだけで見た目も動きも表現できます!
- HTMLの書き方に若干の作法があるけど、ソース観ればわかるレベルです。Web制作者の方なら問題ありません!
送料と分割手数料はたにぐちさんが負担します!
という、うれしいライブラリとなっております。、と言いたいところですが現実は・・・
- デザインは「それなり」。変更するのがしんどい=だいたいみんな同じ見た目になる
- 動きも若干不安定なときがある
- 作法に従って書くHTMLがあまり構造的ではない
- Androidの標準ブラウザでは(端末次第で)「使えない」レベル
最近アルファ版からベータ版になったばかりですので、まだまだこれからなんですが、十分期待できる可能性を持っているライブラリだとは思います。たにぐちさんも「モックアップ・Webアプリに使うのがベスト?」とまとめられていました。
個人的にはここまでいたれりつくせりじゃなくて、基本的な動きとかパーツをまとめた単なるjQueryの1プラグインがほしいなぁ。
まとめ
軸は「Android」で、アプリケーションからWebサイトまで広範囲をカバーしたセミナーでした。普及しつつあるといっても、やっぱりAndroidはまだまだこれからだと思う。
「Webサイトを表示する」上では、フォントとかブラウザとかまだ色々残念な感じです[3]。しかしながら、市場はこのとおり待ってはくれないので、ドンドン対応してノウハウを溜めていく必要があるのが現実のようです。
個人的には「Android UIデザインのパターン」についてじっくりお話をきいてみたい。iOSの標準アプリ(Apple謹製)と違って、Androidアプリに関してはまだまだ「お作法」が確立していないように思えます。Androidの標準アプリみてもなんかパターンとかよくわかないところが多いです[4]。
余談ですが、最近「iPhoneアプリ設計の極意」買いました。これから読みたいと思います。
- 上記の2つはすでに資料が上がっているのでチェックすることをオススメします。 [back]
- 参考 : コレ [back]
- そのうち標準ブラウザアプリもChromeになるんでしょうかね。 [back]
- Google I/O 2010であった「Android UI design patterns」は要チェックです [back]
