Androidスマホ(P8max)のDPIをMac OS Xから変更してタブレットUIに

P8max ガジェットスマートフォンタブレット minmsee 11/26/2015 0 件のコメント

2016/9/4 Update: P8maxをAndroid 6にアップデートすることで、ここに書いた複雑な手順を踏まず、簡単にメニューからタブレットUI相当のdpiに変更できるようになりました(8/27より)。この記事は、スマホUIとタブレットUIでどのくらいサイズが違うかの参考としてお読みください。Android 6へのアップデートした様子はこちら。

6.8インチスマホのP8max、素晴らしい一台ですが、「巨大画面にスマホUI」だと見た目が間抜けだし表示される情報量も少なすぎ。これをタブレットUIにする方法があるとの情報を得たのでやってみました。結果は成功！大画面にふさわしい情報量となりました。変更作業はMac OS Xで行っています。Mac OS XはAndroidとの相性が良いらしく、Windowsの場合よりも少し簡単です。なお、Android公式SDKを使ったので、セキュリティの問題も少ないはず。概略以下の手順で進めます。

DPIを変えてタブレットUIにすると、こんなに見た目/情報量が変わります。後半にいくつかサンプルを載せています。

今のところ唯一の副作用が、標準UIのEmotionUIの表示がおかしくなる点。アイコンが小さくなったりずれたりします。これはホームアプリを適当なものに入れ替えて解決。ここから先は凝り始めるとキリがないので、私は定番らしいNova Launcherを入れて完了です。

ではさっそく手順へ。実は、本当にやりたいのは(13)の一行だけです。そこに至るまでの環境設定に手数がかかりますが、難しすぎてどうしようもない部分はないと思います。②Android SDKのインストールが長いですが、頑張ってみましょう。

① Java のインストール

※Javaをインストール済みの方は②へ。

(1) 以下からJavaをダウンロードし、インストールする。

https://support.apple.com/kb/DL1572?viewlocale=en_US&locale=en_US

※これは旧版のjava6なので引き続き使用する場合は日々のセキュリティに注意。
※System RequirementesにMac® OS X® 10.8.5 or higher, up to 10.9 (Mavericks)とあるのが気になりましたが、結果的には問題ありませんでした。

② Android SDKのインストール

!!! 注意 !!!
参考にしたサイトでは、adbとfastbootだけあればいいからという理由で、オリジナルのスクリプトなどでインストールするやり方が紹介されています。中をきちんと見れば問題ないのかもしれませんが、念のため、ここでは公式の開発キットをダウンロードして使用する方法にしました。必要なディスク容量が大きくなりますが、セキュリティ的にはこちらの方が安心だと思います。

(2) 以下のサイトからMac OS X用のファイルをダウンロードする。

http://developer.android.com/sdk/index.html#Other

(3) ダウンロードしたzipファイルを解凍する。

(4) android-sdk-macosxフォルダを丸ごと「アプリケーション」の下にコピーする。

※以下そこにコピーしたものとして記載します。

(5) ターミナルを起動する。

(6) androidコマンドでAndroid SDK Manager を起動する。

$ /Applications/android-sdk-macosx/tools/android

(7) Android SDK Platform-toolsだけを選択する。

※Manager起動時に複数のチェックボックスがチェックされていますが、Platform-tools以外は全部チェックを外します。adbとfastbootだけあればいいからです。画面は以下のようになります。

(8) 右下の「Install 1 packages...」のボタンを押す。

(9) adb,fastbootがインストールされたか確認する。

$ cd /Applications/android-sdk-macosx/platform-tools
$ ls
　 NOTICE.txt        etc1tool        source.properties
　 adb                fastboot        sqlite3
　 api                hprof-conv        systrace
　 dmtracedump        lib

③ スマホのモード変更

(10) 開発者オプションを表示させる。設定→端末情報→ビルド情報：これを7回タップ。

設定に開発者向けオプションが表示されるようになる。

(11) 設定→開発者向けオプション→USBデバッグ：これを有効にする。

④ USBケーブルの接続

iMacとスマホ(ここではP8max)をUSBケーブルでつなぎます。

⑤ DPI変更コマンドの実行

(12) 念のためDPI変更前に、現在のDPIを確認する。

※以下、パスを設定せずにカレントディレクトリでコマンドを実行するので./が付いています。

$ ./adb shell dumpsys display | grep mBaseDisplayInfo

以下のような情報が出力されます。P8maxの例です。400dpiなんですね。

mBaseDisplayInfo=DisplayInfo{"内蔵画面", uniqueId "local:0", app 1080 x 1920, real 1080 x 1920, largest app 1080 x 1920, smallest app 1080 x 1920, 60.000004 fps, supportedRefreshRates [60.000004], rotation 0, density 400 (315.31 x 310.624) dpi, layerStack 0, appVsyncOff 7500000, presDeadline 12666666, type BUILT_IN, state ON, FLAG_SECURE, FLAG_SUPPORTS_PROTECTED_BUFFERS}

!!! 注意 !!!
次の手順で、DPIを「320未満」にすると起動できなくなるという情報あり。タイプミスには気をつけましょう。

(13) DPIを320に変更する。

$ ./adb shell wm density 320 && ./adb reboot

(14) スマホが再起動する。

(15) 完了！

(16) 万一戻したい時は

$ ./adb shell wm size reset && ./adb reboot

Webの見た目はどう変わるか

ここまでの手順でDPI/UIを変えると、Webを見た例は以下の例のようになります。左がスマホUI(400dpi)、右がタブレットUI(320dpi)。サイトのデザインでだいぶ変わりますが、いずれも快適さは大幅に向上します。

dezeen magazine

このサイトでは、スマホUIではでかでかと一つの記事が出てしまうのに対し、タブレットUIではたくさんの情報がギュッと詰まった感じが満足。でもちょっと小さ過ぎるかな? このサイトはタブレットの場合PCと同じ画面を出すようですね。

Style4 Decor

カードタイプのレスポンシブデザインの場合、スマホUIではやっぱり記事一つも見えませんが、タブレットUIでは2ペイン構成になるので、一覧性が一挙にアップします。文字も見やすいサイズです。

Wikipedia (Android)

テキスト主体のサイトではどれくらい情報量が違うか見たのが下の例。30%増量という感じでしょうか。これはUIの違いというよりも、DPIの違いそのものになります。面積比が320^2 / 400^2 = 64%ですから、ちょうど計算もあいます。

ブログ

文字が多い場合、やっぱり30%アップくらいでしょうか。写真が並ぶタイプだともう少し見た目の差は縮まります。

ウェブマガジン

テキスト主体でも、スマホUI/タブレットUIで大幅に情報量が変わる場合がある例。30%アップどころか、3倍以上違います。デバイスの物理的なサイズまでしっかり考えてデザインしているんでしょうね。

P8max(6.8インチ)の場合、スマホUIの方がいい、という例は見つけられませんでした。

参考文献

多分これが世界で最初の記事

http://android.wonderhowto.com/how-to/change-your-androids-screen-resolution-without-root-access-0160439/

以下でもいい。

http://www.androidbeat.com/2015/07/how-to-change-dpi-of-android-device-without-root/

日本語でWindowsの場合は以下。

http://blog.livedoor.jp/cn221283/archives/cat_10028149.html