2012年4月29日日曜日

実機にビルドできない…

Xcodeに実機をつないでも、実機が見えない。。。
昨日、iOS5.1にしたことでXcode4.2が対応していないんやね。

安定一番なのであんまり気は進まないがXcode4.3.2にアップデイト…。

2012年4月21日土曜日

Android UIデザインとタブレット向けUXデザイン

UIガイドラインは、Android UI Design Parrernsになる
 http://www.google.com/events/io/2010/sessions/android-ui-design-patterns.html

Nativeアプリについてのデザイン(Not Wen app)

iPhoneぽいnアプリを作って欲しいというのは、まったく違うよ
Android is not iOS
Androidはバックキーなどのハード特有がある

iPhoneユーザ→Androidになるのは少ない(逆は多い)

Android UI デザインバターン
 ダッシュボード(Dashboard):トップページにデザイン(Google+などのイメージ)
 アクションバー(Action Bar):上部メニューバー。アイコン形式
 サーチバー(Search Bar):URLを直接打つ感じ
 クイックアクション(Quick Action):長押しでメニューを開く(プルダウンメニューではなく、あくまでアクション)
 ウィジット(Compainon Widget):アプリケーションの機能の一部をウィジットとして設置する
iOSAndroidアプリでも、同じデザインパターンで統一すれば、ユーザに対しても使い勝手が良い

Honeycomb UI Elements(通称:ハニカム
 すでのいくつかのデザインパターンが用意されている

Honeycomb UI pattern
 Action Barはフレームワークでサポート
 Muliti-pan Layouts(Stretch, Stack, Expand/collapse, Show/hide)

アプリケーションを切り分けて作ったほうが効率的
 1.6、2,X、3.X(スマフォタブレット

ハニカム以降のもの、ジンジャーブレッドで切り分けたほうがいいかも

HC タブレット
 5~7インチのサイズ、10インチ以上になるとHCは入らない(無理やりなら入れられる)
 10インチ以上になると扱いづらくなる:親指や人差し指で操作できる範囲を超えてしまう
 (※写真 青:親指 赤:人差し指)
f:id:samril:20110717134054j:image:w360

アクションバーでの表示は、日本専用のアプリなら下部表示のほうがいよい
 アメリカでは、スマフォは両手で包み込むように操作するのが支流なので、上部表示が良いが、
 日本(ヨーロッパでは片手操作が支流なので、下部表示が使いやすい)


串かつ http://sites.google.com/site/94katsu/spec
 NFC-felicaを使った通信機能アプリ

PushMoNi
 IMoNiというメールクライアントにPUSH配信機能の付加するプラグインアプリ

ShakeDroid
 任意の画像の任の領域をゆらゆら揺らせるアプリ

JisuiDroid
 コミックに最適化された「自炊」ビューアー(自炊:本のデジタル化)
 Google Docsを本棚として利用

iTranslator for Android
 59カ国語対応の翻訳アプリ
 音声認識による翻訳機能

AndroidDeviceInfoShare
 端末のスペックをみんなでシェアするアプリ
 自分の端末のスペックサーバにUPする
  167種類の端末
  ビルド情報、カメラのスペック、ディスプレイのスペック環境変数など

Deb App index
 デ部メンバーが作成したアプリの紹介アプリ
 一覧機能表示~インストールまで


アプリ開発・端末毎の解像度の違いを吸収する方法
端末情報共有サービス
 端末機種名、OSバージョンなどのスペック情報を共有

Androidコーディングのおさらい
 Android Projectについて
 R.javaファイルについて
 UIの構成要素について
 UI定義をJavaから定義
 レイアウト用XMLJavaから読み込む(LayoutInflater)

画面サイズの分類
 small ~3.7インチ
 nomal ~3.X~4.Xインチ
 large
 xlarge

画面密度
 ldpi:低密度 システム上では120dpi
 mdpi:中密度 システム上では160dpi
 hdpi:高密度 システム上では240dpi 現在販売されている端末はこれが多い
 xhdpi:システム上では320dpi

アスペクト比 4:3~16:9で収まっているかどうか
 not-long:収まっている
 long:収まっていない

オリエンテーション

Androidにおける長さの単位
 px ピクセル
 dpもしくはdip(密度非依存ピクセル ※dpiではなくdip)
 spもしくはsip(倍率非依存ピクセル
 pt 1/72インチ
 in インチ
 mm ミリメートル

キャリアや端末によってレイアウトを変更できる
 MMC,MNC Docomo,SoftBank,au
 アスペクト比やナイトモードなど・・・
 
 レイアウトごとのプロジェクトでの指定が可能
  layout{-(option)}でレイアウト指定

画像
 大きいサイズの画像を基本とする:縮小のほうがごまかしがきくから
 Nine Patch画像形式で対応する

グラデーション
 ベクター形式画像リソース

AndroidManifest.xmlによる解像度指定

AVDでの画面テストについて
 画面サイズの指定>画面密度の指定(abstracted LCD...)>OSver
 ハードウェア特性の追加

OpenWnnについて
 開発秘話


押さえておきたいスマホデザイントレンド
スマホサイトのトレンド
 iPhoneサイト(iPhoneUIをもちいた最適化サイト)
 yahooサイト

スマホサイトの特徴
 横スクロールしない
 横幅にフィットさせる

縦画面と横画面の違いについて
 デザイナーは、横幅の画像を作って、縦幅に応用させる方法が支流になってくる

フィットの方法
 比率で対応させる
 縦横でレイアウトを変える(2ソース管理)

viewport

パーツについて
 指で操作するので、大き目のパーツで作成する

画像は極力使わない
 角丸、グラデーション、複数背景、シャドウは、HTML5+CSS3で実装

HTML5最適化サイトをつくる
 非対応端末(iOS3.x)は、JavaScriptで対応する

動きのデザイン
 スライド
 タブ
 カーセル
 続きを読む
 バルーン

 JavaScriptで実装する
  しかし、端末のスペックによって表示速度が依存するため、JSは極力動作が軽くなるように設計する

今後のデザイントレンド
 レスポンシブWEBデザイン:画面の解像度によって表示内容を変えること
  「未来館のひと」http://blog.miraikan.jst.go.jp/
  ※CSS確認できます

 何故かXperia neoではCSS3が使えない

今後、スマホサイトがなくなるかもしれない
 why = PCサイトの情報は最適化サイトではない場合が多いので
 PCのサイト自体をスマトサイトで見ても何も違和感がないように作成する必要がある
 ※appleのサイト:PCサイトのままで、少しだけスマホサイトでも見やすいようにしている

最適化サイトをつくるにあたって
 HTML5+CSS3は今後の必須要素
 スマートフォンの特性を考慮したデザイン
 スマホサイトの必要性と、PCサイトとのバランス


Androidアプリデザイン入門編
Androidアプリの開発は3通りある
 ネイティブアプリJavaを使ったアプリ
 HTML5+CSS+JavaScript
 Adobe AIR

知っておくべきポイント
 端末によっての解像度差
 指で押せる幅と高さ(40px)
 背景やボタンはrepeatか9patchを使う
 実際の端末で表示確認が必要
 端末によって色の見え方が違う

避けたいデザイン
 ランダム模様
 重なっているタブ
 9patchが使えない枠、ボタンなど
 画像使用のシークバー
 Abdoid標準ではないチェックボックスラジオボタン

メニューバーのデザインはアイコンだけ

9patch
 ファイル名をXXX.png⇒XXX.9.pngにする
 指定した1ドットがコピーされているので、画像が拡大しているようになる
 シミュレートはDraw 9patchで分かります。

Androidのデザインは9patchでつくったものをライブラリ
 http://d.hatena.ne.jp/tomorrowkey/20110501/1304245217

Android デザイン制作MEMO

(参考サイト)

http://genesixdev.wordpress.com/2011/06/30/android%E3%82%A2%E3%83%97%E3%83%AA%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AE%E5%9F%BA%E7%A4%8E%E7%9F%A5%E8%AD%98/


1.端末ごとの解像度の理解

Android端末は、ディスプレイサイズ、画像解像度が端末により異なるため、もちろん見え方もそれぞれです。フォントもメーカーにより異なります。よって、デザインをするにあたり、まず端末ごとの特徴の理解は必須になります。
下記リンクに端末ごとの情報が詳しくまとめられています。
Hacking My Way ~ itogのhack日記:  Androidデバイスのディスプレイサイズ、DPI一覧
※一番右のリスト:Densityが、
・0.75=ldpi(低解像度)
・1=mdpi(中解像度)
・1.5=hdpi(高解像度)
・2=xhdpi(超高解像度)
になります。

2.Android独自の単位の理解

Androidは端末によって解像度や画面サイズが異なるため、
サイズ指定をする上で、独自の単位が存在します。
デザイナーとして主に使うのは、pxの代わりに使われる
dip(ディップ)またはdp(ディーピー) = Density-independent Pixelsと呼ばれる抽象的な単位、
フォントサイズを指定するときに使うsp=Scale-independent Pixelsと呼ばれる単位です。
※Density-independent Pixels・・・密度非依存ピクセル
※Scale-independent Pixels・・・スケール非依存ピクセル
(どちらも解像度に合わせて表示サイズを拡縮する単位。)
下記の記事をよく理解し、特にdipの理解を高めましょう。

3.Read “Android UI Design Tips”(必読!)

Android端末用にUI設計、デザインするにあたり、google社がどういったものを求めているのか、書かれています。
“Android Developers”のUI Guidelineよりも、具体的なデザインテイストについて、画像の書き出し方など、参考になります。(ちょっとしたiOS Human Interface Guideline的な感じです)
※絵も入っているので、訳だけでなくプレゼンテーションの方もぜひみてください。

4.Android端末3つのカテゴリ

Androidの端末には大きく分けて3つのカテゴリに分けられます。
・海外製
ex ) HTC, LG, SAMSUNG(Galaxy)
画面解像度が低いものが多い。
アンドロイドの基準に添って作られている。
Galaxyはこの中ではソニエリ寄り。(解像度が大きかったりするので)
・ソニエリ製
ex ) Xperia arc, mini…
ソニエリが独自にアンドロイド基準をカスタマイズして搭載している。
アイコンのデザインやボタンのデザインが異なる場合が多い。
海外でも売られている。
・日本製
ex ) REGZA phone, AQUOS phone, LYNX, etc…..
海外では売られていない。
日本のガラケーからの機能を搭載している。(おさいふケータイ、赤外線通信、ワンセグ、、など。)
【まとめ】
海外をターゲットにいれているアプリを開発する場合は海外製の端末において一番よいデザインや設計をするとよい。このように、case by caseで端末対応をすること。上記カテゴリ分けは基礎知識として頭に入れておくとよい。

5.SDKをインストール

スクリーンキャプチャを撮る、また後で出てくる9-patchという技法を用いた画像を制作するために
SDKをインストールする必要があります。
・How to Install
インストールの仕方が詳しく載っています。
smartgoods.me:  【初心者向け】Android SDKインストール手順 2011年1月版!(windows版)
・ここからインストール
バージョンは常に新しくなるのでこちらから最新版をダウンロードしてください。
Android Developers:  Download the Android SDK
ツールの具体的な使い方については後ほど説明しております。

Design Steps

ここからは実際デザインをスタートするところから、アプリのデザインを完成させるまでの流れを
ステップごとに説明していきます。
Step1: 480*854(hdpi)でレイアウト作成
Step2: 画像の最適な書き出し方をエンジニアさんと相談
Step3: 部品を書き出す
Step4: エンジニアにデザイン指定を伝える
Step5: Lancher Iconの作成
Step6: マーケット素材の用意

Step1: 480*854(hdpi)でレイアウト作成

現在、Android端末において最も多いのが高解像度(hdpi)です。
よって、この解像度をベースに実機で確認しながらデザインするのがベストだと考えています。
【私なりのコツ・ポイント】
部品、レイアウトは3で割れる整数を使うこと。
hdpi=1dp=1.5pxなので、dip指定するとき計算しやすいため。
dipは視覚的単位なので、それぞれの解像度の端末で確認したとき、多少のずれはある可能性もあるが、目安にはなる。
高解像度でも480*854、480*800のように縦横の比率が違うものがあるが、基本上からdipを優先してあわせていき、下はみきれさせる、と考えるのが妥当ではなかろうか。
ライブドアのデザイナーさんは、高解像度(hdpi)をベースにグリッドを使って比率を出して制作しているとのことでした。

Step2: 画像の最適な書き出し方をエンジニアと相談

アプリをデザインする時は、エンジニアさんと密にやりとりをしながら進めていくことが基本です。
ベストな組み方を開発者と一緒に考えて、それにそった部品の書き出し方を考えるべきです。
(※書き出しパターンについては次のStep3にて詳しく説明しております。)

Step3:  部品を書き出す

・各部品のサイズやデザインルールはこちら(参考までに)
Android Developers:  User Interface Guidelines 
※特にアイコンやパーツのルールが書いてあります。
ただ、指定されたサイズで作ると少し小さいといった問題もあるので
その辺はフレキシブルに対応すること。
例:Lancher Iconの余白は上下左右1px(シャドウ分)程度で十分。など

~書き出しパターン~

以下、あくまで私のやり方として、紹介させていただきます。
その1: 高解像度用に書き出した画像を縮小する
高解像度用に書き出したPNGを縮小して、中解像度、低解像度用の画像を作成する方法。
そのまま画像を縮小しても絵のディテールなどつぶれたりしない場合は、こちらで対応すると早い。
その2: 各解像度ごとに部品を作りこむ
(特にアイコンなど、必ず綺麗に出したい画像に適した方法)
高解像度ベースで仕上げたデータをもとに、解像度の調整を行い、それぞれの解像度ごとに、
シェイプなどの修正を加える方法。(Android Developersでは推奨されているやり方)
各解像度別の画像のサイズは、
高解像度(hdpi)→100%とする場合、
中解像度(mdpi)→66% (正確には66.666・・・)
低解像度(ldpi)→50%
・・・となります。
解像度を落としたとき、画像に含まれた文字や絵がつぶれてしまったり、レイヤー効果などがうまく反映されなかったりするときもあるので、そのときは調整する必要があるとAndroid Developersには書いてあります。また、低解像度用の部品に関しては、アンシャープマスクをかけてあげることで、若干ですがぱっきりした画像を制作することができます。
その3: 9-patchを使って作成
9-patchとは、解像度に応じてグラフィックを伸縮させるリキッドデザインを可能とした画像制作方法です。画像の一部分を引き伸ばすことが可能な画像は、9-patchをうまく利用して、超高解像度の端末対応もカバーしてしまいましょう。
~やりかた~
  1. できるだけ最小サイズで画像を書き出す
  2. SDKのtoolsの中にある”draw9patch.bat”を立ち上げる
  3. 画像の上下左右に1pxの黒い線を引く(下記の9patchの原理参照)
  4. ツールバーのメニューから保存(自動的に「ファイル名.9.png」と保存される)
☆9patchの原理
左、上は引き伸ばしてよい場所に黒の線を引く。
右、下は文字などがその上からのる場合に、そのコンテンツの領域を指定した線。
引き伸ばしたくないところっていう観点で引いたりもしました。
その4: 大きめに作った部品をdip指定してあげる
高解像度よりも大きめにひとつ部品を作ってあげて、レイアウトで決めたdipを指定する。

Step4: エンジニアにデザイン指定を伝える

Step3で切り出したパーツを実際に組み込んでもらうために、エンジニアさんにデザイン指定を詳しくお伝えします。
私の場合、ページのデザインを大きく印刷した紙に、フォントサイズやカラー、マージンの幅、各パーツのサイズなど、できるだけ詳細まで分かりやすく書き込み、エンジニアさんにお渡ししています。
伝わりやすいように、パーツの名前は何かルールを決めておくのがよいです。
なお、実機に組み込んで確認する場合は、各端末により見え方が異なるため、
できるだけたくさんの端末で確認しましょう。

Step5: Launcher Iconの作成

端末のホーム画面で表示されるアプリのアイコンをLauncher Iconと呼びます。
エンジニアさんがカリカリ組み込んでいただいてる間に、
端末でちょいちょいチェックしながらLauncher Icon制作もとりかかっていきましょう。
アシアルブログ: AndroidにおけるLauncherアイコン、背景画像の作り方
一度目を通してみてください。わかりやすくまとまっています。

Step6: マーケット素材の用意

最後はマーケットに出す際に必要な素材作成です。
サイズや書き出し方などのルールがありますので下記リンクを確認してください。
Android Market ヘルプ: アプリケーション用の画像アセット
こちらでマーケット上に素材をアップします。
Android Market: google アカウント
——–  これで一連の流れはおわりです! ——–

Others

上記リンクにステップが記載してあります。
私は「1. Android SDK のみで実行する方法(DDMS)」のやり方で撮っていました。
端末の解像度と同じ大きさでスクリーンショットが撮れます。

Conclusion

Androidアプリを初めて作るにあたり、つまづいたことから学んだ知識をわかりやすくまとめたものになります。
Androidアプリ展開の傾向として、iPhoneですでにリリースされているものを今度はAndroidで、、といったケースも多いと思います。この場合、ただデザインをそっくりそのまま使おうという考え方だと、より使い勝手のよいアプリを開発することはできません。
まず、メニューボタンが存在すること、タブは上に存在すること、戻るボタンがあることなど、様々な面でAndroidはiPhoneとは違う点があがります。その上、Androidマーケットにおいて上位に常に生き残ることは至難の業ですので、使い勝手のよくないアプリはダウンロード数が伸びず、すぐに埋もれてしまいます。Androidの特性をよく理解し、適切なUIパーツを用い、Android用にアプリをカスタマイズすることが、よりよいAndroidアプリを生み出す肝だと思います。
また、”Android Developers”で述べられているUIガイドラインはおおよその目安であって、”iOS Human Interface Guideline”と比較すると、まだまだしっかりとしたものではありません。さらに、バージョンアップする度に仕様等が変わっていくので、さらっと読んで、頭の片隅に入れておけばいいと思います。必読と書かせていただいた”Android UI Design Tips”をよく理解し、デザインする上で役立てていただければと思います。
**********

Androidのステータスバーの高さ


Displayクラスを使用すると、画面の高さや幅を取得することができますが、これは画面全体のものです。
このためステータスバーの高さまで含みます。

ステータスバーの高さを得るメソッドなどは今のところ(Android2.3)存在しません。

おおよその目安

ldpi19px0.75
mdpi25px1
hdpi38px1.5
xhdpi50px2
表示領域の上部の位置を使用すると、ステータスバーの高さとなります。

2012年4月20日金曜日

Android:画面密度によるリソースのスケーリング

解像度にあったサイズを割り出すには下記の比率を覚えておくと便利です。
3:4:6:8
左から ldpi, mdpi, hdpi, xhdpi となります。

mdpiで100pxの画像をhdpiでも同じ見た目に仕上げたい場合は
4:6=100:x
4x=600
として x=150px が求められます。

もう少し掘り下げてみます。

開発者はどのプラットフォームでも同じ動作をするようにアプリを作成する必要があります。
UIについても同様に「特定の端末でレイアウトが崩れる」といった問題を避けなければい
けません。
今回はマルチ画面対応を実現するために欠かせない「画面密度」「解像度」についてです。

・画面密度
画面の物理的な領域内におけるピクセル数。
通常dpi(ドット数/インチ dot per inch)と呼ばれます。
画面密度の低い(lowな)画面は、画面密度の高い(highな)画面と比べて、領域あたりのピ
クセル数が少なくなります。
Androidは、画面密度の程度をlow, medium, high, extra highの4つに分類しています。
それぞれの画面密度は下記です。
  • low dpi(ldpi):120dpi
  • mdpi(medium dpi):160dpi
  • hdpi(high dpi):240dpi
  • xhdpi(extra high dpi):320dpi

・解像度 
画面の物理ピクセルの総数。
PC等でもよく見る1280x768がこれに当たります。

マルチ画面をサポートするにあたって、画面密度と解像度は非常に重要です。
対象とするユーザが持つ端末の画面密度と解像度はバラバラです。
同じ画像をA端末で表示した場合とB端末で表示した場合とでは見た目に差がでる場合が
あります。

どの画面密度と解像度でも同じような見た目にしたい場合は、密度非依存pxを
使用します。密度非依存pxは単位dpとして知られます。
dpは画面密度に依存しない依存しないサイズです。
160dpi(mdpi)の画面では1pxに相当し、240dpi(hdpi)の画面では1.5pxに相当します。
dpでサイズを指定すると、画面密度が変化しても見た目は変化しないため、各画面密度
におけるスケーリングを透過的に扱うことができます。

●dp→px変換、px→dp変換
変換は簡単です。
Androidでは160dpiが画面密度の基準として扱われるため1dp=1pxとなります。
ldpi~xhdpiまでの画面密度比は3(ldpi):4(mdpi):6(hdpi):8(xhdpi)になります。
100pxは各画面密度では何dpになるのかはmdpiを基準に相似比で考えます。
  • 100dpはldpiで何pxか? 3:4=x:100となり75px
  • 100dpはmdpiで何pxか? 4:4=100:xなので100px
  • 100dpはhdpiで何pxか? 4:6=100:xとなり150px
  • 100dpはxhdpiで何pxか? 4:8=100:xとなり200px

px→dp変換も同じです。
mdpiで100pxの場合、xhdpiで同じ見た目のサイズとするには
4:8=100:xとなり200pxのサイズを指定する必要があります。

各画面密度におけるdpサイズとpxサイズの関係は下記の図がわかりやすいです。



●解像度による画像サイズ
画像ファイルのサイズは静的ですので、上記で述べたように同じ画像をhdpiとxhdpiで描
画すると見た目のサイズが変わってきます。
これも画面密度の違いにより、画像がスケーリングされるためです。

スケーリングは画像にとっては大敵で、画像が拡大されてしまうと粗く見えてしまいます。
そのため、画像は各解像度毎に用意する必要あります。
用意するべき画像のサイズの計算も3:4:6:8の相似比を利用します。

画像サイズ100px×100pxの見た目を画面密度毎に統一したい場合、
  • ldpiでは、3:4=x:100となり75px×75pxの画像をdrawable-ldpiに配置
  • mdpiでは、4:4=100:xとなり100px×100pxの画像をdrawable-mdpiに配置
  • hdpiでは、4:6=100:xとなり150px×150pxの画像をdrawable-hdpiに配置
  • xhdpiでは、4:8=100:xとなり200px×200pxの画像をdrawable-xhdpiに配置
となる。

マルチ画面のサポートとスケーリングについてはDeveloperサイトが参考になります。
http://developer.android.com/guide/practices/screens_support.html

以上です。