第３．１回「複数画面をサポートする（Android）」プログラミング未経験ゆるふわ文系女子大生がアプリを開発した話

プログラミング未経験のゆるふわ文系女子大生インターンが、

知育アプリ「[どうぶつあつめ図鑑～音と英語～さわって遊ぶ｜FRIENZOO](https://play.google.com/store/apps/details?id=jp.materialize.frienzoo)」

を開発し、GW直前にリリースしました。

アプリ開発のはずが・・・インターンに来た頃には彼女も思いもよらなかった大量のお絵描き、筆算の嵐。[第３回](https://note.mu/ashibehair/n/n74e124f80e26?magazine_key=mcd2a433209ee)では、そんな彼女の手描きのノートを公開しました。

彼女が開発したのは**Androidアプリ**です。
[第３回](https://note.mu/ashibehair/n/n74e124f80e26?magazine_key=mcd2a433209ee)では詳細には触れませんでしたが、Androidスマホには、実に**様々な画面サイズ**が存在しています。

# 多種多様な画面サイズ

例えば・・・、
以下のサイトの「**Width x Height px**」を見てください。

[Device Metrics - Material Design - Material.io](https://material.io/devices/)

本当に、多種多様な画面サイズのスマホが存在していることが分かります。

Androidアプリ開発をしていると、
「**何でこんなに画面サイズもアスペクト比もバラバラなのか**」
「**自由すぎるだろ**」
「**Googleはダイバーシティに優しすぎか？**」
と本気で恨み半分に思います。
ハッキリ言って、画面設計はメチャクチャに面倒くさいです。

彼女はインターンの立場を弁えていたのかは分かりませんが、恨み節もなく、黙々と、それぞれの画面用のサイズ計算、リソース作成を行っていました。
長時間。
苦戦していました。
数字がゲシュタルト崩壊したはずです。
私もたまにします。
なんせ、ひとつのリソースを用意するのに、**サイズ別５パターン分**の画像を作成しなければならないのですから。
**ノート一面、筆算のみになってしまったページ**は、紛れもなく、彼女の涙ぐましい努力の証でしょう。
プログラミング初心者はこのようにして前向きに勉強しなければなりません。

とにかく・・・、
Androidアプリ開発では、これら様々な画面サイズのスマホに対応することが必要になります。
自分の持っているAndroidスマホの画面だけが全てではない、ということを前提に設計を考えなければなりません。
これは画面サイズの問題だけでなく、OSバージョンの違いで実現できる機能が異なっていたり、メーカーによって微妙に動作・挙動が異っていたり、など、自分の目に見えていることだけが全てではなく、常に自分とは異なる人たちのことを考えなければなりません。

良いAndroidアプリというのは、こうして、様々な使用状況をカバーできていることが最低条件です。
「**自分の手元にあるAndroidスマホで問題なく動作しているから良いじゃないか**」
「**自分の手元にあるAndroidスマホで起きない問題は無視しよう**」
悲しいことに、こういう発想になってしまう人は非常に多いです。
そして、世の中に受け入れられないアプリになってしまう。
自分の目に見えないことを想像するというのは、本当に難しくて、疲れますから。

彼女も最初の頃はしばらくそうでした、どうしても、やはり、手元にあるAndroidスマホ以外は特殊である、と思ってしまうのです。人間が他人のことを理解できないのと同じです。
そんな考えでは、[第２回](https://note.mu/ashibehair/n/nd0d100a1e93d?magazine_key=mcd2a433209ee)で述べたように、「**アマグラマー**」に成り下がってしまいます。
本当に笑われますから、初心者は「**アマグラマーの道だけは避ける！**」という強い意志、信念を抱いてアプリ開発に望んでください。

# 公式サイトを無視しないで

さて、Androidアプリ開発において、「**複数画面をサポートする**」ことは、避けられないことです。
まずは以下のAndroid公式Developersサイトを読んでください。

[複数画面をサポートする | Android Developers](https://developer.android.com/guide/practices/screens_support.html)

公式サイトのベストプラクティスやリファレンスを読むのが、どこの馬の骨とも分からない技術者のブログを読むよりも、圧倒的に捗ります。

公式サイトの内容を熟読して理解してもらえれば、当記事はここで終わりなのですが、彼女もそうですが、どうも、何故か、**公式サイトを読みたがらない**。
本当に何故なのでしょう。
それが一番間違いがなく、迷いも残らないのに。

公式サイトはそんなに難しいことは書いていないのですが、どこの馬の骨とも分からない技術者のブログを読んで、公式サイトに反する間違った知識を覚えてしまい、それをさも正しいリファレンスを読んだかのように設計の根拠としてドヤ顔で説明してくる（アマグラマーが特にヒドイ）。

この光景は、プログラミング初心者には非常に危険なことです。
医師免許を持っていない独学の見知らぬ人に病気の診察・手術を受けているようなものです。
なんて危なっかしいことか、分かりますよね？

プログラミング初心者は、必ず公式サイトを読みましょう。
その中の説明で、どうしようもなく理解できないことがあれば、それを解説してくれているブログなどを探すようにします。
この順序を逆にしては絶対にいけません。
時間の無駄です。
無駄な時間は、モチベーションの低下を招きます。
「**ムチ**」はいけません！
[第１回](https://note.mu/ashibehair/n/nbcb7d76c2ef0)で述べた通り、常に「**アメ**」を舐めることを考えてください。

# 複数画面をサポートする

私は公式サイトを読めば十分派なので、本意ではありませんが、ここでも軽く、「**複数画面をサポートする**」ことについて、解説しておきましょう。

例えば・・・、
「**Nexus 5（Androidスマホ）**」は、横幅が**「1080」ピクセル**です。
正方形の動物イラストを「横いっぱいに２匹」並べたいと考えた場合、

**「540」ピクセル　×　「540」ピクセル**

のリソース画像を２匹分、作成すればよいです。
これは、当たり前ですよね。
でも、Androidアプリ開発では、「Nexus 5」よりも横幅が**狭い**スマホ、**広い**スマホのサポートが必要になりますから、これで完成、終わりではありません。

[Device Metrics - Material Design - Material.io](https://material.io/devices/)

このサイトの「**Nexus 5**」の「**Density**」を見てください。

「**3.0 xxhdpi**」

と記載がありますよね？
これは、基準である「**mdpi**」の「**3.0倍**」という意味になります。

[公式サイト](https://developer.android.com/guide/practices/screens_support.html)によると、Androidスマホの分類は、

**ldpi
mdpi
hdpi
xhdpi
xxhdpi
xxxhdpi**

の「**６分類**」になっていて、それぞれ画面密度（Density）は、

**0.75倍　ldpi
1.0倍　mdpi　　※これが「基準」
1.5倍　hdpi
2.0倍　xhdpi
3.0倍　xxhdpi
4.0倍　xxxhdpi**

という倍率になっています。
現在、Androidアプリに「**ldpi**」はほぼ不要になっていますから、**サイズ別５パターン分**のリソース画像が必要になります。先ほどの「540」ピクセル四方の画像は、以下の通りのサイズ別５パターン分が必要ということになります。

**1.0倍　「180」ピクセル四方　mdpi
1.5倍　「270」ピクセル四方　hdpi
2.0倍　「360」ピクセル四方　xhdpi
3.0倍　「540」ピクセル四方　xxhdpi　　※これが「Nexus 5」用
4.0倍　「720」ピクセル四方　xxxhdpi**

ひとつのリソース画像を用意するのに、**×５個の作成が同時に必要**なわけです。
一画面に１０パーツ存在するのなら、５０リソース画像の作成が必要となるわけです。
全部で１０画面あるのなら、５００リソース画像の作成が必要となるわけです。

彼女のノートが**一面筆算だらけ**になるのも、分かりますよね・・・？

# 自分のスマホの画面密度などを知るには？

使用しているAndroidスマホの画面密度などは、実は、プログラム上で簡単に知ることができるのですが、プログラミング初心者には、それを知るだけのプログラムを組むだけでも、かなりハードルが高いと思います。

そういう場合は、WEB検索して、以下のようなサイトで知るのが良いでしょう。

[Device Metrics - Material Design - Material.io](https://material.io/devices/)
[2015年発売Android端末のdp解像度まとめ](http://qiita.com/nein37/items/0a622f7ebbbb92db93d5)

考えることはみんな同じで、こうやって、まとめてくれている人も多いです。

# プログラミング未経験ゆるふわ文系女子大生がアプリを開発した話

[第３回「義務教育ってすごい」プログラミング未経験ゆるふわ文系女子大生がアプリを開発した話](https://note.mu/ashibehair/n/n74e124f80e26?magazine_key=mcd2a433209ee)
[第２回「アマグラマーの道は歩むな」プログラミング未経験ゆるふわ文系女子大生がアプリを開発した話](https://note.mu/ashibehair/n/nd0d100a1e93d?magazine_key=mcd2a433209ee)
[第１回「とにかくアメが大事」プログラミング未経験ゆるふわ文系女子大生がアプリを開発した話](https://note.mu/ashibehair/n/nbcb7d76c2ef0)

![Screenshot_2017-04-28-17-24-51.png](https://qiita-image-store.s3.amazonaws.com/0/181035/0475a262-f93b-0d60-f71c-5ea0c345299e.png)