iOSシミュレータで開発効率が100倍増しになった話

TL;DR

Web開発するのに、スマホ画面での検証しないと行けないじゃないですか。 いままで chrome, Chrome Canary, safari, secretWindowとかを駆使して iphone5, 7, 7plus, Xのサイズ試してたのですが、◯ぬほどめんどくさいなぁと感じてしまったんですよね。（遅い） それを解決しようってのが今回の話です。

きっかけは↑の記事でのシミュレータをフルウインドウでひらくというもの。 ↑の状態で シミュレータ複数横並び にできたら幸せじゃないですか！

という訳でやってみました！

やったこと。

https://github.com/facebook/FBSimulatorControl

今回は使ったのは FBSimulatorControlというFacebook社が提供してるOSS。 このOSSを brew を使って入れてました。

  $ brew tap facebook/fb
  $ brew install fbsimctl --HEAD

$ fbsimctl list fbsimctlコマンドにlistを渡すと起動可能なシミュレータの一覧を取得できるみたいです。

@fumihumi:fbsimctl list | grep iPhone
022068FE-C8EB-4B70-A248-59050F47DEBB | iPhone X | Booted | iPhone X | iOS 11.4 | x86_64
B4D8BDFD-0F86-411A-986F-524C3B646547 | iPhone SE | Shutdown | iPhone SE | iOS 11.4 | x86_64
5E5E1123-AEF2-4765-90AA-B6C82ED55ABF | iPhone 8 Plus | Shutdown | iPhone 8 Plus | iOS 11.4 | x86_64
BDC8695E-568C-454E-9DD8-8732677B7A9D | iPhone 8 | Shutdown | iPhone 8 | iOS 11.4 | x86_64
CA9F509D-A76B-4708-B7B1-07341D8FC324 | iPhone 7 Plus | Shutdown | iPhone 7 Plus | iOS 11.4 | x86_64
DA208130-4BED-433B-89CB-BA35C0CBC5A9 | iPhone 7 | Shutdown | iPhone 7 | iOS 11.4 | x86_64
EB6362A3-BBA7-45DD-95AF-2AFA91AAD624 | iPhone 6s Plus | Shutdown | iPhone 6s Plus | iOS 11.4 | x86_64
2DE031F8-DCDB-4CD2-91B1-C8915F3E3644 | iPhone 6s | Shutdown | iPhone 6s | iOS 11.4 | x86_64
2EBD9CF9-1654-4E18-8017-53A2901F9CC9 | iPhone 6 Plus | Shutdown | iPhone 6 Plus | iOS 11.4 | x86_64
D6F59370-3C52-4DC0-823C-85B5D20E222A | iPhone 6 | Shutdown | iPhone 6 | iOS 11.4 | x86_64
DD24F91C-A6BF-470D-B8A9-B288A8D215CC | iPhone 5s | Shutdown | iPhone 5s | iOS 11.4 | x86_64
UUID：（識別子的な何かっぽい）
機種：（AppleTV, iPad Pro, iPhone, AppleWatch）など
起動状態：（Shutdown | booted）

などが乗ってますね

まぁ

fbsimctl list | grep -e 'iPhone X' -e 'iPhone SE' とかでグレップした上でそのUUIDを元に

fbsimctl B4D8BDFD-0F86-411A-986F-524C3B646547 2DE031F8-DCDB-4CD2-91B1-C8915F3E3644 boot

のように fbsimctl UUID boot とすることで複数の端末をエミュレートできます。

結局なにしてたの？

Web開発で複数のユーザで確認したいとき。 ブラウザでタブ開いて確認してもいいんですが、シークレットウインドウつかったりChrome, safari, firefoxで別ユーザでログインしたり、大変。。。。。

そんな時にiPhoneシミュレータでできると便利なんですよね。

詰まったこと

$ brew install fbsimctl --HEAD がうまくいかなかった

org.carthage.CarthageKit/dependencies/GCDWebServer: Operation not permitted

というエラーが出ていた、

sudoつけて、Installしようとしたんですが、 sudo brew install 〇〇 ってダメなんですね。初めて知りましたw

↑のエラーは Carthage を消せば良さそうみたいです。

$ brew uninstall --force carthage
$ rm -rf ~/Library/Caches/org.carthage.CarthageKit

特に Carthage に思い入れないので容赦なく消してやりました。 まぁ大丈夫っしょw。 iOSエンジニアは少し躊躇したりするんですかね？ よくわかりませんけど 頑張ってください。。w

まとめ

iOSシミュレータを使ってスマホレイアウトの確認をすると、想像以上にやりやすい！ （最近ChromeのDeveloperToolがより便利になってなんとも言えない気持ちになってる）