LoginSignup
44
29

More than 5 years have passed since last update.

今度のiPhone Xは我々開発者をどれほど苦しめるのか #okamoba

Last updated at Posted at 2017-09-20

当日のSlide

随分キャッチーなタイトルですが、 岡山モバイルアプリ開発もくもく会 で 先日、LTの発表をさせて頂きました。

iPhone X 発表されたけど・・・
ホームボタン廃止!!??
メニューバー!!??
iPhonePlusより大きい画面サイズ!!??

次は何を対応すれば良いのだろう、という事で発表させて調べて頂きました。

LTのテーマ

ははーーん、 そんな感じか って思ってもらう事。

そもそも岡山モバイルアプリ開発もくもく会自体、初心者向けのイベントなので、なるべく分かりやすく概要をまとめました。
(なので、お手柔らかにお願いします。)

iPhone X の端末サイズについて

まずは端末のサイズですね。

死ぬほどざっくりとしたサイズを比較出来るようにまとめてみました。

Untitled(1).png

今回のiPhoneXの特徴としては、
画面の横幅・縦幅: iPhone7 < iPhoneX < iPhone7 Plus なのに
画面サイズは iPhone7 < iPhone7 Plus < iPhone X
って所でしょうか。

iPhone X の描画可能サイズについて

次に描画可能サイズについてです。
便宜的に ステータスバーを含む画面サイズ の事を 描画可能サイズと定義してます。
以下のコードで取得してます。

// 幅
UIScreen.main.bounds.size.width

// 高さ
UIScreen.main.bounds.size.height

Untitled(2).png

こちらも特徴としては
画面の横幅は iPhone7 = iPhoneX < iPhone7 Plus ですが
画面の縦幅は iPhone7 < iPhone7 Plus < iPhone X である所でしょうか。

iPhone X で予想される懸念事項

・ iPhone7 と width は同じなのに、 height は 150px程 大きいとかつらみあるんじゃないの?
・ iPhone7 Plus より height は大きいけど、 widthは小さいとか何かとつらみあるんじゃないの?

とか思ってました。

iPhone X Simulator で確認してみた。

Untitled(4).png

あれ?

Untitled(5).png

何か大丈夫そう。
※ あ!! ちなみに2枚目のアプリは僕の作ったアプリです!!

詳しくはこちらを見てねw ↓↓
初めてアプリをリリースした話

何で大丈夫だったのか。

次の図を見て頂ければ、と思います。

Untitled(3).png

Top Layout Guide と Buttom Layout Guide

iPhoneアプリを作る時のこれまでの概念は、右図の概念でした。
Top Layout GuideButtom Layout Guide という概念です。
(Top Layout Guide....画像だと・・StatusBar除かれてる、ごめんなさい。。。w)

まあ、ざっくりいうと、TopLayoutGuideを考慮して画面を作る事で、折角作った画面が StatusBarNavigationBarに被ってしまう事を防ぐ事が出来ました。

Safe Area Layout Guide

iPhone X(正確には iOS11 から) は右の概念は廃止され、左図のようになります。
このSafe Area Layout GuideStatus BarNavigation Barに被らない事が保障されています。

これまでは開発者がTop Layout GuideButtom Layout Guideに注意を払って開発して行かなくてはいけなかったのですが、iPhone X では Apple が 予め Safe Area Layout Guide という枠内でを教えてくれていて、画面を定義してくれ、という概念に変わったわけですね。

Safe Area Layout Guide を有効にするには

XCode9 で StoryBoardを開いて各ViewControllerに設定する事が出来ます。

スクリーンショット 2017-09-17 14.02.26.png

やったか!?

これで iPhone X の対応は終わったと言っても良いでしょう。
簡単ですよね。

でも、iPhone Xは未来の端末なのです。

スクリーンショット 2017-09-20 23.56.15.png

スクリーンショット 2017-09-20 23.56.30.png

僕は上記のような問題があると思ってます。

一番伝えたかった事

スクリーンショット 2017-09-20 23.59.56.png

iPhone X の画面への対応は簡単だと思います。
でも、旧式の端末で使い古したUIを未来の端末に適用させてしまって良いでしょうか。

・ ホームに戻りたかったのに、アプリの何かが動いちゃった。
・ アプリの何かを動かしたかったのに、ホームに戻っちゃった。

変な所でユーザーにストレスを感じさせたくないですよね。

新しい未来の端末については、 Appleさんは一言物申してくれていて、それを僕達は簡単に読む事が出来ます。
(※ 英語さえ読めれば・・・・・)

iPhone X Human Interface Guidelines

iPhone Xを機会に画面レイアウトについて、もう一度考えましょう!
Human Interface Guidelines 読みましょう! って話ですね。w

・・ さて、これは 苦しみ?辛み? それとも・・ 楽しみ?

以上
今度のiPhone Xは我々開発者をどれほど苦しめるのか でした^^

後述

あー、iPhone X 楽しみだなー。

買わないけど。 皆様のレビュー楽しみにしてます!!

拙い長文、お読み頂きありがとうございましたー!

44
29
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
44
29