はじめに

アプリチームの中川です。弊社が開発しているアプリやウェブサービスでは、ユーザーからの各種改善リクエスト受け付けています。（その仕組については別記事、「プロダクトにユーザーの声を　アプリの改善プロセスを追う」でご紹介しています）

その改善リクエストより「iPhoneX だと、画面の下部分を触ってもスクロールできない」というユーザーからの声が届きました。実機で確認してみるとその通りで、下部分を触ってもスクロールできるように修正しました。

ここまでの話と結果だけ見るとタイトルにあるような「大改造劇的ビフォーアフターじゃないじゃん」と言われそうなのですが、実はこれを実装するのに土台部分から直しました。まさしくリフォーム・・・・。家造りにたとえてこの対応をしたお話をしようと思います。

リフォーム案を考える

とある日ボスから iPhoneX で下部分を触ってもスクロールできないのを解決してほしいという依頼が来ました。とりあえずコードを見てみると・・・これは今まで基準となっていた土台を消して、しかもその面積を画面全体に設定＋しかも iOS9~11 までの OS と iPad、iPhone、縦と横全てに対応・・嫌な予感がしました

設計図を確認する

紙面ビューアーは９階建て構造になっていて、それぞれ担当する機能が異なります

やらなくてはいけないこと

• 横スワイプできる View の土台を画面全体に拡張する
• 拡大縮小できる View の土台は紙面サイズと同じ大きさかつ画面の真ん中に設置すること（iOS9~11 までの OS と iPad、iPhone、縦と横全てに対応）

家の床の面積を拡張（view の土台を変える）

とりあえず始めなければ終わりません。土台を変えると今まで立っていた家の内装が壊れてしまいます。これだと、紙面画像外の灰色のところをタップすると意図しないところで拡大縮小ができてしまいます。

家の壁を垂直に修正

画面が切り替わりレイアウトされるタイミングで拡大縮小できる View を紙面サイズを同じにします

隣のお家も修正

紙面ビューアは家が横に３つ並んでいるような設計です。これが全て画面を切り替えた時にキレイにレイアウトできている必要があります

対地震設計（回転時の画面修正）

モバイル端末は回転をします。回転をしたとしても崩れないレイアウトをする必要があります

iPhoneX 横	iPad 横

突き上げ地震対応（iOS11 contentInset 対応）

iOS11 だとナビゲーションバーがあると自動でタブバー分の高さだけコンテンツをずらしてしまう機能が追加されていた。タップしてバーを出したり消したりすると縦揺れを起こして読みづらい問題がありました（前の製品版のバージョンでも起きてます）

iPhone6s よこバーがあるとき	iPhone6s よこバーがないとき

土台の面積が勝手に変わる問題(iPhoneX safeArea 対応)

iPhoneX は土台の面積がツールバーある無しで勝手に変わってしまうので、ツールバーは存在しているけど透明度を最小にすることでまるであたかも消えたかのように見せる演出にしました。端末ごとの条件分岐で諦めるのではなく、未来でてくるであろう端末でも上手くレイアウトできるようにしました。

古い OS の庭のモグラ退治（iOS9 だとツールバー何故か出てくる問題）

上の SafeArea に対応すると iOS9 から何故かツールバーを透明度最小にしたはずなのに、画面を切り替えるとツールバーだけひょっこり出て来るように・・・・原因が結局わからなかったので iOS9 を切る時に簡単に整理できるように分岐をつくりました

家族内覧会（リリース）

ようやくリリースにこぎつきました。 iPhoneX ユーザーが幸せになったなら私は満足です。あきらめなくてよかったです。

ユーザーの幸せのためにプロダクトを作り、妥協しないものづくりができることが幸せです。よりよいものをユーザーに届ける初心を思い出しました。初心を忘れずチームに貢献できるように自分の武器を磨こうと思います。