スマホアプリの作成にあたって、ローカル環境での動作確認のために必要となるEmulatorの設定方法と、そのために必要となるExpo等の設定方法をまとめました。
Expoとは
Reactのための、framwork,platformであり、iOSとAndroidに同じJavaScript/TypeScriptのコードで、build, deployできるようにしてくれるとても便利なツールです。
これによって、iOSとAndroidのアプリを同じコードでアプリリリースができるという超効率化を図ることができるツールなんですね!
Expo install
まずはinstallする前に現在の最新versionを確認します。
以下コマンドを実行すると、つらつらといっぱい出てきます。
$ npm show expo-cli
expo-cli@5.0.3 | MIT | deps: 58 | versions: 408
The command-line tool for creating and publishing Expo apps
expo-cli/packages/expo-cli at main · expo/expo-cliTools for creating, running, and deploying universal Expo and React Native apps - expo/expo-cli
keywords: expo, react-native
bin: expo, expo-cli
dist
.tarball: https://registry.npmjs.org/expo-cli/-/expo-cli-5.0.3.tgz
.shasum: 33da75542828162f076c89a35e49b0e5eb436013
.integrity: sha512-Wou4IPj/V2VggX6k818WnU9Gz/JMgPln02282tQAvmouvkYInXwLG8IFkRqHJdt25nJvz9xrN7RATzn4IFcMWg==
.unpackedSize: 2.6 MB
dependencies:
@babel/runtime: 7.9.0 @expo/osascript: 2.0.31 bplist-parser: 0.2.0
@expo/apple-utils: 0.0.0-alpha.26 @expo/package-manager: 0.0.48 chalk: ^4.0.0
@expo/bunyan: 4.0.0 @expo/plist: 0.0.16 cli-table3: ^0.6.0
@expo/config-plugins: 4.0.14 @expo/prebuild-config: 3.0.14 command-exists: ^1.2.8
@expo/config: 6.0.14 @expo/spawn-async: 1.5.0 commander: 2.17.1
@expo/dev-server: 0.1.101 @expo/xcpretty: ^4.1.0 dateformat: 3.0.3
@expo/dev-tools: 0.13.138 better-opn: ^3.0.1 env-editor: ^0.4.1
@expo/json-file: 8.2.34 boxen: ^5.0.1 envinfo: ^7.8.1
(...and 34 more.)
maintainers:
- tsapeta <npm@tsapeta.com>
- dsokal <dominiksokal@gmail.com>
- wkozyra <wojciech.kozyra@swmansion.com>
- bbarthec <bartlomiejbukowski.b@gmail.com>
- ide <ide+npm@jameside.com>
- lukmccall <kosmatylukasz@gmail.com>
- kgc00 <kirbygc00@gmail.com>
- fiber-god <datwheat@gmail.com>
- brentvatne <brentvatne@gmail.com>
- ccheever <ccheever@gmail.com>
- evanbacon <baconbrix@gmail.com>
- quinlanj <quinlanjung@gmail.com>
- esamelson <eric@expo.io>
- expoadmin <support@expo.io>
- charliecruzan <charliecruzan@gmail.com>
- tcdavis <tc@expo.io>
- exponent <exponent.team@gmail.com>
- wschurman <wschurman@gmail.com>
- jkhales <jonathan@expo.io>
- bycedric <me@bycedric.com>
- jonsamp <sampjon@gmail.com>
- princefleaswallow <mhampton@hey.com>
- andyboythekid <andydevs123@gmail.com>
- kudochien <ckchien@gmail.com>
- fson <ville.immonen@iki.fi>
- jesseruder <jesseruder@gmail.com>
- terribleben <ben@exp.host>
- nikki93 <s.nikhilesh@gmail.com>
- sjchmiela <sjchmiela@gmail.com>
dist-tags:
latest: 5.0.3 next: 5.0.4
published 2 weeks ago by brentvatne <brentvatne@gmail.com>
見るべきところは一番最後だけで、latest は5.0.3となっていますので、最新がこちらであることが確認できます。
それではinstallしましょう!
-g と指定して、global installをします。
$ npm install -g expo-cli@5.0.3
installができているか確認しましょう。
$ expo --version
5.0.3
ちゃんとversionが返ってきたので、これでExpoのinstallは完了です!
Expoの会員登録
会員登録ができたら、terminalからloginします。
$ expo login
✔ Username/Email Address: … "Username"
✔ Password: … ***************
Success. You are now logged in as "Username".
UsernameまたはEmailと、Passwordを入力すると「success」と表示され、loginできたことがわかります。
スマホにもExpoをインストール
App Store または、Play Storeで「Expo Client」と検索すると出てくるのでそれをinstallします。
XcodeをinstallしてiOS Simulatorを起動
iPhoneのSimulatorを動かすにはXcodeが必要になるのでPCにXcodeをinstall
これでiphoneのSimulatorを使うことができるようになりました。
Simulatorをclickすると、こんなスマホの画面が出現します!!
Android用のEmulatorをdawnload
Android Studioというサイトを開きます。
こちらのサイトより、「Download Android Studio」からダウンロードします。
ダウンロードが完了したら、以下の Preference より、以下画面を開き、Amdroid SDK Locationのpathをコピーして、pathを通す設定をしていきます。
ここでコピーしたのをvimでファイルを開いて記述します。
$ vim ~/.zshrc
開かれたファイルに以下を記述し、環境変数を設定します。
記述位置はどこでも良いです。
export ANDROID_SDK_ROOT="Amdroid SDK Locationでコピーしたpath"
export PATH=$ANDROID_SDK_ROOT/platform-tools:$PATH
export PATH=$ANDROID_SDK_ROOT/emulator:$PATH
記述が完了したら、一度ターミナルを立ち上げ直します。
pathが設定できているか確認します。
$ echo $ANDROID_SDK_ROOT
ANDROID_SDK_ROOTに設定したpathが表示されるはずです。
続けて、以下を実行
$ echo $PATH
platform-tools と emulator に設定したpathが表示されるはずです。
最後に環境変数の設定ができているか確認のため、
Android Debug Bridge というもののversionを確認しましょう!
$ adb --version
Android Debug Bridge version 1.0.41
Version 31.0.3-7562133
Installed as /Users/XXXXX/Library/Android/sdk/platform-tools/adb
この画面が表示されればちゃんとできています。
Emulatorをinstall
More ActionからADV Managerを開きます。
「+ Create Virtual Device」をクリック
こちらで機種を選択しますが、Pixelが安定しているようですので、「Pixel 3」とします。
次にOSを選択します。
私はM1 macですので、M1 macで使用可能確認済の「Other Image」の中のAndroid 12.0(Google API)をDownloadします。
このDownloadには結構時間かかります。
Downloadができたら、こちらの再生ボタンを実行すると、Androidのスマホ画面を立ち上げることができました。
Emulatorをターミナルからコマンドラインで立ち上げる
有効になっているEmulatorのdeviceを確認します。
$ emulator -list-avds
Pixel_3a_API_32_arm64-v8a
確認したdevice名を使って、Emulatorを立ち上げます。
上記で表示されたdevice名をコピーして、@を付けて以下を実行すれば、起動できます。
$ emulator @Pixel_3a_API_32_arm64-v8a
この状態だと、google環境下以外にアクセスできていないので、コマンドに少し付け加えて実行します。
$ emulator @Pixel_3a_API_32_arm64-v8a -dns-server 8.8.8.8
このようにして立ち上げることで、chrome検索ができるようになりました!
以上、読んでいただきありがとうございました。
コメント