1. アプリ開発 端末毎の解像度の 違いを吸収する方法 プロの方はご遠慮ください ! 株式会社 PM9 野田邦昌

2. 自己紹介 PM9 雑用係 野田邦昌 たまたま「 OpenWnn フリック ( 入力対応版 ) 」 というものを開発 先日、 おっさんの仲間入り をはたしました。 誕生日が来たとかということではなく、 ある意味悟りの境地というか 座右の銘は 「押してだめなら引いてみろ」

3. 自己紹介 「会社名の由来は？」って良く聞かれます。 よっぽど「 あやしいん 」でしょうか。 「株式会社 PM9 」に対する一般的なイメージ ナイスミドルな方は、「え？ 11PM 」となるらしい。 ※ 11PM( テレビの 深夜番組 巨泉さん とか 欽也さん出演 ) ナイスミドルで、なおかつ 常識的 な方は… 心の声 : 「まさか、そんな 露骨 なわけない」 表の声 : 「 PM ( プロマネ ) が 9 人いらっしゃると !! 」 心の声 : 「けっ ハッタリが ! 」となる傾向にあります

4. 自己紹介 フレッシュな方は… 「やっぱ、あれ系ですか ? ♡ 僕もやってみたいです」 たぶん、 ご想像されているものとは違う と思います。 やってもらってもかまいませんが 。 というか、 むしろありがたい。

5. 俺の開発スタイル (Android も含めて ) 気持ちの良いアプリを 気持ちよく作ってますか？ サクッと !! (PM9) 野田の場合 一日の過ごし方

6. 結論 気持ちよく作る って言うのは、ちょっと どうやって良いのか 分からない けれども、 気持ちの良いアプリ ( を作る ) ってのは、 どうにかなる のかもしれない。 たぶん !!

7. 結論 斬新なアイデアが、 1 つあれば十分 もちろん、斬新すぎて理解不能なのはちょっと 小奇麗であれば十分 違和感を感じる部分をコツコツと直していく … ここ結構 重要 アイデアはお客さんがくれる

8. やっと本題 -- アプリケーション開発における様々な端末特性の考慮 端末 ( 機種 ) 毎に特性が違います。 ・ OS バージョン ・画面サイズ・画面密度 ・色々なセンサーなどのデバイスの有無とか特性 放って置いても、自動的にやってくれる… というわけにはいかない ときがある。

9. 開発者としては、一応勉強してアプリを作っているつもりなんだけれども マーケットのコメント欄は… 普段からでも 「へーそんな使い方できるんだ～」 って 開発者でさえ気づかないような使い方 でコメントされるわけですが、

10. 開発者としては、一応勉強してアプリを作っているつもりなんだけれども マーケットのコメント欄は… 「～ ( 機種名 ) で動きません。」 「 OS アップデートしたら、落ちるようになりました。」 「端っこの方が見えません。」 × 開発者としては、思っても見なかった非難に さらされた ○ 有り難い助言をいただいた

11. 開発者は何をしているのだ？ 開発者のみなさん、結構まじめです。 Android エミュレーター (AVD ってやつ ) を 使ってテスト 手元にある実機でテスト お約束のテストは当然行います。

12. 開発者は何をしているの？ でも、実機だと何故かエラーが 「マニュアル見りゃ分かるだろうがー」となりますが、 いえ、わかりません 。 特にセンサーのようなデバイスまわりの API 情報が足りてません 。 全ての種類の端末で試すのは無理 情報を共有する手段を持つ 法則性を見つけて、計画的に問題を回避

13. ちょっと、一言 端末特性情報共有サービスのご提案 (1) 「端末特性テスト」アプリというものを Android マーケットで配布。 (2) Android アプリ開発者等を含む Android ユーザーは このアプリをダウンロードして実行する。 すると、クラウド上のサーバーに下記の情報がアップロードされる。 端末機種名 OS バージョン 各入出力デバイスの有無とかスペックとか ROM を焼いてたらその情報も API を使ってデバイスにアクセスした場合、 どんなことが起るのか、どんな値を得ることができるのか ( これが一番重要 ) ※ どの API を試すのかは、 Android アプリ開発者からの リクエストを元に

14. 端末特性情報共有サービスのご提案 (3) アップロードされた各端末の特性情報は、 誰でも参照可能 Android アプリ開発者は、これを見てへんな動きをする等の原因が掴めるようになる。 奇特な開発者は、誰でも簡単に統一した仕様でデバイスに アクセスできるラッパー用のライブラリを作って配布する。 商品として売っても良し。 メーカーさんとしては、ちゃんと仕様どおりに 作っておられるわけだけれども、 他のメーカーさんの端末特性を見ることで新しい発見とか あるでしょ？

15. まずは、 Android コーディングのおさらい - プロジェクト HogeHoge / AndroidManifest.xml src / com.fuga.hogehoge / HogeHogeActivity.java … 画面表示 res / layout / hogehoge.xml … UI 定義 ( レイアウト + UI 部品 ) drawable / icon.png hoge.png … 画像等 values / strings.xml … 文字列定数 gen / com.fuga.hogehoge / R.java … ビルドすると自動生成される

16. Android コーディングのおさらい - プロジェクト R.java って？ ビルドすると自動生成される。 リソース ID と リソースインデックス の関係が記述されている。 リソース ID : res ディレクトリ下のパス名 + リソースの各項目の id 属性 から決定される。 android:id=“ @+id/button_1 ” プログラムからは、 R.id.button_1 で参照 リソースインデックス : 全てのリソースに自動的に通し番号が割り振られる。

17. おさらい - UI の構成要素 ViewGroup ( ようするにレイアウト ) 例 ) LinerLayout とか TableLayout とか 子 View の配置方法などを指定して、 View の追加ができる ViewGroup を子供として配置可能 View (UI 部品のこと ) 例 ) Button とか EditText とか LayoutParams ( レイアウトの為のパラメータ ) View の配置のしかたを指定 ※ 感覚的には HTML に近い

18. おさらい - UI 定義 XML によるレイアウト定義 HogeHoge / res / layout / hogehoge.xml <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> < LinearLayout xmlns:android= http://schemas.android.com/apk/res/android android:id=“@+id/hoge_id” android:orientation=&quot;vertical&quot; android:layout_width =&quot;fill_parent&quot; android:layout_height =&quot;fill_parent&quot;> < Button android:id=&quot;@+id/button_2&quot; android:layout_width =&quot;fill_parent&quot; android:layout_height =&quot;wrap_content&quot; android:text=&quot;Button 2&quot;/> </ LinearLayout >

19. おさらい - UI 定義 XML による定義 Java からは、こんな感じで利用する。 public class HogeHogeActivity exteds Activity { public void onCreate ( Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView ( R.layout.hogehoge ); } } HogeHoge/ res/layout/hogehoge.xml に基づいて画面が描画される。

20. おさらい - UI 定義 Java から定義 レイアウト XML を用いず、 動的に UI を生成 public class HogeHogeActivity extends Activity { public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); LinearLayout layoutHogehoge = new LinearLayout(this); setContentView( layoutHogehoge ); Button button1 = new Button(this); button1 .setText(&quot;Button&quot;); layoutHogehoge .addView( button1 , new LinearLayout.LayoutParams ( ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT)); } }

21. おさらい - レイアウト用 XML を Java から読み込んで弄くる (1) hogehoge.xml (2) fugafuga.xml setContentView( R.layout.hogehoge ); LinearLayout layoutHogehoge = (LinearLayout)findViewById( R.id.hoge_id ); LayoutInflater inflater = (LayoutInflater)getApplicationContext().getSystemService( Context.LAYOUT_INFLATER_SERVICE); LinearLayout layoutFugafuga = (LinearLayout) inflater .inflate( R.layout.fugafuga , null); layoutHogehoge .addView( layoutFugafuga );

22. いよいよ端末特性 Android における 「画面サイズ」の分類 small ～ 3.7 inch ぐらい normal 3.x ～ 4.x inch ぐらい large 4 ～ 7 inch ぐらい xlarge 7 inchi 以上

23. Android における 「画面密度」の分類 dpi = Dot per inch 一般的な CRT 、 LCD は、 72 ～ 96dpi 印刷物は 300 ～ 350dpi 以上のピクセル密度となっている ldpi 低密度 ( 実測値 :100 ～ 140dpi) システム上は 120 dpi として扱う mdpi 中密度 ( 実測値 : 140 ～ 180dpi) システム上は 160 dpi として扱う hdpi 高密度 ( 実測値 : 190 ～ 250dpi) システム上は 240 dpi として扱う xhdpi システム上は 320 dpi として扱う

24. Android における 「アスペクト比」の分類 アスペクト比 ( 画面の縦横比 ) が 4:3 ～ 16:9 の間におさまっているか？ not-long おさまっている long おさまっていない

25. Android における 「オリエンテーション」の分類 画面が縦向き / 横向きの状態 port 縦向き land 横向き

26. Android における長さの単位 (1) px -- いわずと知れたピクセル単位 (pixel) dp もしくは dip device-independent pixel ( 端末非依存ピクセル ) ※ dpi じゃなくて dip mdpi(160dpi) の機種の 物理的なピクセル幅 (px) を基準とした単位

27. Android における長さの単位 (1) dp 続き… 中解像度 mdip(160dpi) の機種 (HT-03A 等 ) 上に 32px x 32px のサイズの「箱」を描いた 物差しではかったらどれも大体約 5mm x 5mm ぐらいの「箱」が描かていることになる。 中解像度 mdip(160dpi) の機種 (HT-03A 等 ) 上に 32dip x 32dip のサイズの「箱」を描いた 高解像度 hdpi(240dpi) の機種 (Xperia arc 等 ) 上に 32dip x 32dip のサイズの「箱」を描いた

28. Android における長さの単位 (2) sp もしくは sip Scale-independent Pixels ( 倍率非依存ピクセル ) dp に似ているが 標準文字サイズ という情報も 考慮 して調整してくれるという 何か良い具合 な単位 フォントサイズの指定 に使うお約束 ※ ポイント指定じゃないのね

29. Android における長さの単位 (2) pt -- 言わずと知れたポイント = 1/72 インチ in -- インチ mm -- ミリメートル

30. <resource> < dimen name=&quot; hogehoge_text_size &quot;>12sp</dimen> < dimen name=&quot;hogehoge_icon_sp&quot;>32dp</dimen> </resource> とやっておいて、名前で指定できちゃいます。 <TextView android:textSize=&quot;@ dimen / hogehoge_text_size &quot; ... /> 長さに名前を付けることができます

31. 長さに名前を付けることができます ちなみに、 Java からもアクセスできちゃいます。 float txSize = Resources.getDimension ( R.dimen . hogehoge_text_size );

32. レイアウト (1) 基本は、 res/layout 下にレイアウト用 XML を置く HogeHoge / res / layout / hogehoge.xml ところで、 魔法のようなことが … HogeHoge / res layout hogehoge.xml layout -xlarge hogehoge.xml <= ここにレイアウト用 XML を置くと… 画面サイズが 7inch ( つまり xlarge ) のタブレットだと こちらのレイアウトが…

33. レイアウト (2) されにさらに、 HogeHoge / res / layout / hogehoge.xml layout -xlarge / hogehoge.xml layout -xlarge-land / hogehoge.xml <= ここにレイアウト用 XML を置くと 横向きのときのレイアウトが…

34. レイアウト (3) こういう表がありまして、こちらを自由に組み合わせて作ることができます。 small normal large xlarge 画面サイズ en-rUS fr-rFR etc 言語と地域 DoCoMo Softbank au mcc440-mnc10 mcc440-mnc20 mcc440-mnc70 MCC, MNC 備考 値 修飾子

35. レイアウト (3) v3 v4 … システムバージョン (API レベル ) ldpi mdpi hdpi nodpi 画面ピクセル密度 (dpi) night notnight ナイトモード car desk ドックモード port land 画面オリエンテーション long notlong 画面アスペクト

36. レイアウト (3) nonav dpad trackball wheel 主な非タッチナビゲーション方式 navexposed navhidden ナビゲーションキーの使用 nokeys qwerty 12key 主なテキスト入力方式 keysexposed keyssoft keyshidden キーボードの使用状態 notouch stylus finger タッチ画面タイプ

37. レイアウト (4) 例 ) layout-xlarge-xhdpi-long-port-querty-v12 特大スクリーン、 320dpi 、細長画面、 縦向き、 Qwerty キーボード搭載、 Android 3.1 の画面レイアウト ルール : 項目がもっとも多くマッチしたものを採用

38. レイアウト (5) android:layout_width 、 android:layout_heigth 等 wrap_content ( その UI 部品を表示するための最小のサイズ ) fill_parent ( 親要素の幅 / 高さに合わせて最大限の領域を使うサイズ ) を使う !! android:padding ～ 、 android:textSize 等 dp や sp を使う !!

39. 画像リソースについて -- オートスケールと言う考え方 お約束のように res/drawable 下に画像ファイルを 置いておく Android は、端末のピクセル密度に合わせて、 かってに 画像を拡大・縮小してサイズを調整してくれる。 ※ オートスケールにまかせると、画像がぼやけることがあります。 例 ) Xperia( 初代 ) が出たばかりのころの OpenWnn フリック キートップの画像の hdpi 対応をサボったため、 キーボードが「 ゆうれいみたい 」とのお言葉を いただきました。

40. 画像リソースについて -- プレスケール res / drawable / hogehoge.png drawable -hdpi / hogehoge.png drawable -mdpi / hogehoge.png drawable -ldpi / hogehoge.png レイアウトの場合と同じ考え方で、画面の性質に合わせて 魔法のように 自動的に最適な画像が選ばれます。

41. 画像リソースについて -- プレスケール Tips: ( いくぶん受け売りです ) 予想以上のスピードでハードウェアは進化します。 アイコンとかを作るときは、最初から思いっきり大きなサイズで作っておこう !! 拡大は、エッジがぼやけてどうしようもなくなるけど、縮小は簡単だから。

42. 場合によるけど、はまったら凄く便利な画像形式 指定した部分だけが自動的に伸縮して周りに合わせてくれる。 変形しても型崩れしない画像 Nine Patch ( ナインパッチ ) 画像形式 変形しても それなりの デザインを 保っている これを

43. NinePatch フォーマット画像の作り方 上下左右の端 1 ライン分のところにエディタを使って黒いラインを引く 上 と 左 の端に引いた黒の部分が、自動的に 引き伸 ばされるところ 下 と 右 の端に引いた黒の部分が、 コンテンツ領域 ( ラベル文字列が乗っかる部分 )

44. NinePatch フォーマット画像の作り方 あらかじめボタンのようなデザインの画像を png 形式で作っておく android-sdk-windows\tools 下にある draw9patch.bat をダブルクリック エディタが立ち上がるので、 先の画像をドラッグ & ドロップ

45. NinePatch フォーマット画像の作り方 上下左右の端 1 ライン分のところにエディタを使って黒いラインを引く 上 と 左 の端に引いた黒の部分が、自動的に 引き伸 ばされるところ 下 と 右 の端に引いた黒の部分が、 コンテンツ領域 ( ラベル文字列が乗っかる部分 )

46. ベクター形式画像リソース ShapeDrawable SVG のようなベクター形式画像 <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> < shape xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot; android:shape=&quot;rectangle&quot; > < solid android:color=&quot;#FF666666&quot;/> < corners android:radius=&quot;3dp&quot; /> </ shape > res/drawable の下に ???.xml の名前で置く

47. ImageView 内の 画像データの自動リサイズ ScaleType について ImageView の ScaleType プロパティの使い方の例 ImageView image = new ImageView(this); image.setImageResource(R.drawable.hogehoge); image. setScaleType ( ImageView.ScaleType . CENTER_CROP ); ※ 余白領域を含めた範囲内で元の画像の縦横比を維持ながら拡大し中央に寄せる

48. ImageView の ScaleType について 描画時に Matrix を使用 MATRIX 元の画像の縦横比を維持しつつ枠内ぎりぎりまで拡大し右下端に寄せる FIT_END 元の画像の縦横比を維持しつつ枠内ぎりぎりまで拡大し中央に寄せる FIT_CENTER 元の画像の縦横比を維持しつつ枠内ぎりぎりまで拡大し左上端に寄せる FIT_START 元の画像の縦横比を維持せず枠内ぎりぎりまで拡大 FIT_XY 余白領域を除いた範囲内で元の画像の縦横比を維持ながら拡大し中央に寄せる CENTER_INSIDE 余白領域を含めた範囲内で元の画像の縦横比を維持ながら拡大し中央に寄せる CENTER_CROP リサイズせず画像を中央に寄せる CENTER

49. Java のプログラムから 長さの指定を行うとき 指定できる長さの単位は、下記のどちらか (1) px ( ピクセル ) (2) dp 、 sp ( 密度非依存ピクセル ) アプリ内では、 (1) または (2) に統一される。 ※ AndroidManifest.xml android: anyDensity で指定 ( 後述 )

50. px 指定の場合どうするのか？ fugafuga_box.setTextSize( 12sp ) … なんてのは ムリ こう書きます。 DisplayMetrics metrics = new DisplayMetrics(); getWindowManager() .getDefaultDisplay(). getMetrics ( metrics ); float density = metrics .density; float textSize = density * 12.0f; fugafuga_box.setTextSize( textSize );

51. DisplayMetrics について 標準文字サイズを意識したスケーリングファクタ scaledDensity （ mdpi のとき 160 、 hdpi のとき 240 … ） 論理ピクセル密度 densityDpi （ 160dpi のスクリーンでは１、 240dpi スクリーンでは 1.5 … ） 論理ピクセル密度のスケーリングファクタ density 縦方向の実質ピクセル密度（ DPI ） ydpi 横方向の実質ピクセル密度（ DPI ） xdpi 画面の縦幅（ピクセル数） heightPixels 画面の横幅（ピクセル数） widthPixels

52. AndroidManifest.xml による 解像度対応の指定 <supports-screens android: smallScreens =&quot;true&quot; android: normalScreens =&quot;true&quot; android: largeScreens =&quot;true&quot; android: anyDensity =&quot;true&quot;/> ～ Screens アプリケーションがそのサイズの スクリーンに対応 するかどうかを示すもの anyDensity Java プログラムが 自らピクセル密度を意識 して位置や長さを計算しているかどうかを示すもの true のときピクセル密度を意識している。だから API の引数は 「 px 」 単位 false のときピクセル密度を意識していない。 API の引数は単位は 「 dp 」 で、 OS 側で自動的 に処理を行う。

53. AVD -- いつものやつ (Android Virtual Device) で画面をテストする 起動 : Eclipse の Window メニュー⇒ Android SDK and ADV Manger (1) 画面サイズ の指定 -- 「 Skin 」項目で指定 Built-in: QVGA (240 x 320) HVGA (320 x 480) WVGA (480 x 854) … 他 または、 Resolution: 横ピクセル数、縦ピクセル数を入力 (2) 画面密度 の指定 Hardware 項目で Property リストに下記の項目を追加 Abstructed LCD density value に 160 とか 240 とかの値を設定する (3) ついでに、 OS バージョン の指定も (4) 名前を付けて、 Generate する。

54. AVD で指定できるハードウェア特性 入力系 タッチスクリーン、トラックボール、キーボード、 Dpad センサー等 カメラ、 GPS 、加速度計 オーディオ オーディオ録音、オーディオ再生 その他 GSM モデム、 SD カード、バッテリ サイズの指定 デバイス RAM サイズ、キャッシュパーティション サイズ カメラの水平最大ピクセル、カメラの垂直最大ピクセル 上記全て、 Hardware 項目で Property リストに項目を追加して指定

55. AVD でテスト 画面関連機能 エミュレータ画面が大きすぎる場合、 Launch Options の Scale display to real size で指定する Screen Size(in) と Monitor dpi を設定 Ctl + F12 -- 画面を横に 入出力関連 F6 トラックボールモードのトグル etc etc

56. OpenWnn ではどうやっているのか？ ■ お約束の AndroidManifest.xml <supports-screens android:smallScreens=&quot;true&quot; android:normalScreens=&quot;true&quot; android:largeScreens=&quot;true&quot; android:anyDensity=&quot;true&quot;/>

57. OpenWnn ではどうやっているのか？ ■ drawable について res / drawable / drawable-hdpi / キートップデザイン等、オートスケールでごまかせないものは、それぞれ用意 絵文字に関しては drawable のみ キーの部分は、 9-patch 画像です。

58. OpenWnn ではどうやっているのか？ ■ 画面向きの判定 public void onConfigurationChanged (Configuration config ) { int displayOrientation = ( config . orientation == Configuration.ORIENTATION_LANDSCAPE) ? DefaultSoftKeyboard.LANDSCAPE : DefaultSoftKeyboard.PORTRAIT; } この後、要するに LayoutInflater を使って、縦向き / 横向きのキーボードレイアウトをロードしている。

59. OpenWnn ではどうやっているのか？ ■ ハードウェアキーを使用しているかどうかの判定 public void onConfigurationChanged (Configuration config) { int hiddenState = config . hardKeyboardHidden ; ... ハードウェアキー使用中は、ソフトウェアキーボードはうざいので隠します。 if (!mHardKeyboardHidden) { mMainView. removeView (mKeyboardView); }

60. OpenWnn フリック入力対応版 ではどうやったのか？ --- バグ減らしのちょっとしたコツ ■ AndroidManifest.xml API Level は、 Android1.5 以上対応ということで、 <uses-sdk android:minSdkVersion=&quot;3&quot; /> ■ Project Build Target プロジェクトのプロパティ⇒ Android⇒Project Build Target で 新しいコードを追加したら、 Project Build Target を色々変えて試してみる。 OpenWnn フリックの場合、現在のところ Android 2.3.1

61. OpenWnn フリック入力対応版の企画～製品開発までの流れ あらかじめ言っておきますが、 うちの製品開発プロセスでは わりと異例 の方です。 ■ 製品企画 1 嫁 : 「旅行に行くの～ Google Map で地図が見れたらとっても便利そう」 俺 : 「じゃ Google 携帯にすれば？」 国内初の Android 携帯 HT-03A 購入決定 まるで、テレビ CM のお約束のような流れ

62. OpenWnn フリック入力対応版の 企画～製品開発までの流れ ■ 製品企画 2 しばらく経ってから 嫁 : 「メール打つとき、この日本語の入力が xxxx 」 とおっしゃられたわけです。 何度も。 俺 : 「 Google 携帯にすれば」と言った手前、 何とかしなきゃ いけない状態だった。 立場上。

63. OpenWnn フリック入力対応版の 企画～製品開発までの流れ ■ 製品企画 3 で、まったくもってたまたま、 Android のソースコードをダウンロード。 そこに OpenWnn のソースがあった。 HT-03A の日本語 IME イコール OpenWnn のことだと思い込んでいた俺は、「 改造しちゃえ 」と思った。 以上

64. OpenWnn フリック入力対応版の 企画～製品開発までの流れ ■ 製品開発はもっと簡単 その週、お客様との飲み会があって Android を見せびらかした俺 客 : 「ほー これが TV CM でやってる あれ ですか !! 」 俺 : 「ほらほらー こんなことも でますよ～」 俺 : 「早々に何らかの 自社製品を公開 するつもりです～ 」

65. OpenWnn フリック入力対応版の 企画～製品開発までの流れ ■ 製品開発はもっと簡単 で、家に帰って 酔った勢い のまま OpenWnn を改造、そのままマーケットに公開。 マーケット公開 直前に アプリのアイコンを アップロードしなければいけないことに 気づいて 、 15 分ほどで デッチあげ ました。 ※ そのまま現在のアイコンとなりました。

66. OpenWnn フリック入力対応版の企画～製品開発までの流れ ■ フィードバック＆バージョンアップ 公開して 2 時間後には、フィードバックのメールをいただきました。 「 2ch をご覧になってください 」 招待をうけて 2ch の掲示板 にいくと 何やら盛り上がって いて、掲示板が 要望リスト状態 になっていた。 それを見てバージョンアップ ⇒ さらに盛り上がった という経緯

67. 引用させていただきました 梅田 郁 様 ソフトウェア技術ドキュメントを勝手に翻訳 あんざいゆき 様 Y.A.M の 雑記帳 有山 圭二 様 解像度の異なる端末に対応する その他、高度な技術情報を惜しみなく ご提供いただいた方々に 深い感謝の意を表します。

68. Fin ご聴取いただき、誠に有難うございます。 また、どこかでお会いしましょう。