NEXUS5Xの謎

フェノメナエンターテインメントの「おっちゃん」です。

今回は、昨年10月の発売日に購入し日々使用している、 Google社の「NEXUS5X」についての話です。

購入したNEXUS5Xのスペックは、以下のとおりです。

サイズ 高さ約 147mm×幅約 73mm×厚さ約 7.9mm
重さ 136g
液晶サイズ 5.2インチ
ピクセル数 横1080×縦1920ピクセル
プロセッサ Qualcomm MSM8992
内蔵メモリ ROM 32GB
対応UIM nanoUIMカード
OS  Android 6.0

端末の大きさ、処理速度、急速充電、指紋認証ログインなど、かなり気に入っています。

しかし、この端末をしばらく開発作業に使っていて、違和感を感じ始めました。
「何かUIパーツの表示がおかしい・・・・」
そこでUIに関する詳細情報を取得するアプリを作り確認したところ、Density値が「2.625」という初めて見る値が表示されました。
今まで、AndroidのDensity値は、TV用の特別なものをのぞき、1.0、1.5、2.0、3.0、4.0 という切りの良い数値が設定されていました。
ほぼ同じサイズのNEXUS5と比べてみると明らかに文字サイズや表示レイアウト縦横比が異なっています。 最新でNEXUS5Xと同じ液晶サイズのXperiaZ5でも表示しましたが、これはNEXUS5に近い表示となっています。
(Densityグループは、XXHDPIを使用しているので3機種とも同じなのですが・・・・)
このDensity値により、8dpの四角を表示してみたところ、NEXUS5、XperiaZ5では24ピクセル、NEXUS5Xでは21ピクセルで描画されました。

DotByDot

ただし、スクリーンショットを液晶のリアルサイズ比にしたところNEXUS5とNEXUS5Xでは、若干違和感が無くなっています。

RealScale

今後、Google社は正確なDPIでDensityを管理していくつもりなのかもしれません。 これがGoogle社製端末のみなのか、他のメーカー製端末でもDensity管理を変えてくるのか引き続きチェックを続けたいと思います。

今回の確認作業をしていて、Androidには様々な液晶サイズ、解像度、アスペクト比の端末があるため、それらを考慮し可能な限り不具合無く操作・表示できるようUI開発を行うことが大切だと改めて認識しました。

余談ですが、携帯ショップに予約して発売日に受け取りに行ったところ
「発表から今日まで予約はお客様だけです。なので本日はこの1台しか入荷していません。私も初めて触ります。」
と、店員さんに言われてしまいました・・・・

知られていないCSSのコツ : 簡単な自動的CSSナンバリング

numbering-cover

フェノメナ技術担当のレミです。

HTMLの基礎をご存知の方には、番号付きのリストといえば<ol>タグを思いつく人は少なくないでしょう。

しかし、あるCSSプロパティを使うことで <ol> だけではなく、どのHTMLエレメントでもナンバリングを使うことができるようになります。

更に、HTMLに一切数字を記述せずに、細かい目次まで自動的に作れてしまうのです!

続きを読む

標準UIを用いる際の落とし穴

こんにちは。
フェノメナエンターテインメント デザイン担当の山男です。

AndroidやiOSのアプリをデザインする際、設定などの画面は、各OSが備えている “標準の画面” を踏襲するケースが多々あります。
OS標準のUIはスマートフォンユーザーが比較的操作し慣れているはずなので、アプリ毎に独自のUIを用意して操作をバラバラにするより、スムーズに使ってもらえるだろうという思惑があるからです。
また、UIデザイナーとしても大量に存在する設定系の画面などを整理・作成し易く、プログラマーにアプリ化をお願いする際、「ここはOS標準で」の一言で済むというメリットがあります。

今回は後者のメリットに関する落とし穴について、Androidを例に書いてみたいと思います。

続きを読む