Androidアプリ開発環境の構築
Expo開発ツールを使って、Windows10上にAndroidアプリの開発環境を構築します。
事前準備
expo.ioアカウントの登録
expo.io(https://expo.io/) のページで、「Sing Up」して、アカウントを登録します。
Expo開発ツールのインストール
インストーラーで、node.jsをインストールし、npmコマンドで、Expo開発ツールをインストールします。
-
node.js - https://nodejs.org/ja/
インストーラー: node-v14.16.1-x64.msi -
Expo - https://expo.io/
インストールコマンド:npm install -global expo-cli
Android Studioのインストールと設定
Androidエミュレーターでデバッグする為、Android Studioをインストールします。
-
Android Studio - https://developer.android.com/studio?hl=ja
インストーラー: android-studio-ide-202.7322048-windows.exe
Android Studioを起動し、Configure から SDK Manager と AVD Manager を開き、それぞれの設定を行います。
SDK Manager
右下の「Show Package Details」をチェックし、「Android 11.0 (R)」配下にある次の項目をチェックします。
- Android SDK Platform 30
- Sources for Android 30
- Google APIs Intel x86 Atom_64 System Image
「OK」ボタンを押下すると、コンポーネントのダウンロードが開始され、インストールされます。
AVD Manager
「Create Virtual Device...」で、次の内容で、Androidの仮想デバイスを作成します。
- Hardware - Pixel 4
- System Image - x86_64, Android 11.0 (Google APIs)
Android SDK に関する環境変数の設定
Android SDKに関して、環境変数ANDROID_HOMEとPATHを設定します。
| 変数 | 値 |
|---|---|
| ANDROID_HOME | %USERPROFILE%\AppData\Local\Android\Sdk |
| PATH | %USERPROFILE%\AppData\Local\Android\Sdk\tools |
| PATH | %USERPROFILE%\AppData\Local\Android\Sdk\tools\bin |
| PATH | %USERPROFILE%\AppData\Local\Android\Sdk\platform-tools |
%USERPROFILE% は、 echo %USERPROFILE%で表示される値に置き換えます。
Expo Go アプリのインストール
Android端末の実機にExpo Goアプリをインストールします。
開発 - hello
プロジェクトの初期化
コマンドプロンプトを起動し、次のように、作業用フォルダでプロジェクトの初期化を実行します。
mkdir c:\workExpo
cd c:\workExpo
expo init hello
「blank」テンプレートを選択したままで、Enterキーを押下し、続行します。
デバッグの開始
コマンドプロンプトを起動し、次のように、プロジェクトのフォルダで、Expo開発ツールを開始します。
expo start c:\workExpo\hello
Androidエミュレーターでの実行
コマンドプロンプト画面で、aキーを押下するとAndroidエミュレーターが起動し、開発中のアプリが実行されます。
Android実機での実行
Android実機でExpo goアプリを開き、QRコードをスキャンします。
もし、Android実機から開発用PCへネットワーク接続できない場合は、接続モード(Connection)をTunnelにし、再度、QRコードをスキャンします。
インターネット経由で、開発中のアプリが実行されます。
開発アプリのリロード
例えば、C:\workExpo\hello\App.jsをエディタで開き、編集後に保存すると、自動的に開発アプリがリロードされ、最新の状態で開発アプリが実行されます。
おわりに
Windows10上に、Expoの開発環境を構築し、次のとおり、アプリ開発を試してみました。
- プロジェクトの初期化
- デバッグの開始
- Androidエミュレーターでの実行
- Android実機での実行
- 開発アプリのリロード