Webアプリ開発環境作ってみた(4) - React Native(4)

[前回](https://qiita.com/KororonX/items/5d1edb07f006cbd0f2fb)はAndroid SDKがインストールできないところで終わり。その続きです。

### やっとSDKインストール成功
前回のような事象がどこかにあがっていないかと、Webを探索。しかし有用な情報にはたどり着かなかった。何か見落としやヒントがないかと、改めてAndroid Studioを起動。そうすると、再びウィザードがスタート。

![17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3622594/e219b6e7-0880-98e8-80d2-5e7a212c1bac.png)
<br>
SDKないよって言われているが、そんなことわかってるよ。とりあえず先に進むしかないので、「Next」をクリック。そうしたら、さっき「(unavailabe)」となっていたSDKの詳細が、なんだか表示されている！

![18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3622594/f0d9863b-eed1-0691-373b-8287311ba29a.png)
<br>
プロキシの設定変更は、Android Studioをいったん閉じないと全体に共有されないのかもしれないね。とにかく今度こそうまくいきそう。期待しながら「Next」を。再びVerify Settingsが表示されるが、今度はインストール対象らしきものが表示されている。

![19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3622594/f684e53c-8035-3f96-1ba9-3756097fc267.png)
<br>
License Agreementウィンドウが表示される。初めて見た。右下の「Accept」を選択すると、「Licenses」のところの各インストール対象に付与されていた赤い印が消える。

![20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3622594/c24456ca-6342-a5e7-27a7-848b91845f97.png)
![21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3622594/356eabcc-719e-a168-4e53-b2f7dfa81b6c.png)
<br>
「Finish」をクリック。ついにSDKのダウンロードがスタート。ようやくここまで来た。

![22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3622594/56231b0c-084e-e09b-cd98-f4f6f6684772.png)
<br>
しばらくして、全てのコンポーネントインストールが完了。「Finish」をクリックし、Welcome画面に。

![23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3622594/b08d5ec7-0196-060e-34f9-1603ced4e348.png)
<br>

### ダミープロジェクト作成
[書籍](https://www.amazon.co.jp/React-Native-JavaScript%E3%81%AB%E3%82%88%E3%82%8BiOS-Android%E3%82%A2%E3%83%97%E3%83%AA%E9%96%8B%E7%99%BA%E3%81%AE%E5%AE%9F%E8%B7%B5-%E9%AB%99%E6%9C%A8/dp/4297113910/)によると、テストにはAndroid仮想デバイスが必要だが、それを作成するためのEmulator管理ツールが、なんかプロジェクトを1つ作らないと有効にならないとのこと。なので、ダミーのプロジェクトを1つ作成することに。

Welcome画面で「New Project」をクリック。

![24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3622594/d2b0e873-76aa-e482-a795-78481c3e7985.png)
<br>
プロジェクトテンプレートの選択ウィンドウが。ここでは書籍どおりに「No Activity」を選択。

![25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3622594/cf13f6d7-f5c4-fea7-8c54-9eb4f9b4166c.png)
<br>
基本属性指定ウィンドウは何も変更せず「Finish」をクリック。

![26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3622594/eecaa450-6513-ad22-3c72-6286d096fb59.png)
<br>
そのままプロジェクトができあがると思っていたら、なんだか再びSDKインストールが開始されてしまった。さっきインストールしたのは確か34って書いてあった。1つ前のバージョンのSDKのようだけど。よくわからないのでそのまま継続。

![27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3622594/820b3614-e014-3d46-8625-6214dcaaffa0.png)
<br>
インストール自体は問題なく完了。「Finish」をクリック。

![28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3622594/1a3d29ef-e40a-93d5-e056-dc0ea52902d8.png)
<br>
とりあえずプロジェクトは作成されたみたい。[書籍](https://www.amazon.co.jp/React-Native-JavaScript%E3%81%AB%E3%82%88%E3%82%8BiOS-Android%E3%82%A2%E3%83%97%E3%83%AA%E9%96%8B%E7%99%BA%E3%81%AE%E5%AE%9F%E8%B7%B5-%E9%AB%99%E6%9C%A8/dp/4297113910/)では、そのうちビルドが開始されるのでそれを待つように、とのこと。

![29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3622594/9f0b7da2-643f-9343-b37a-1a2d8b039078.png)


### プロジェクトビルド
プロジェクト作成後も、なんだかいろいろとダウンロードされてきているようだ。そうこうするうちに、ファイアウォールのアクセス許可要求ダイアログが表示された。対象はadb.exe。

![30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3622594/682a91e6-0f22-afd9-27f0-3f3372c8c2be.png)
<br>
とにかくまずは開発環境として動くようにすることを最優先ということで、いずれのネットワークについてもアクセス許可を設定。

![31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3622594/dc485737-645e-bd94-2a36-aca33b5376f8.png)
<br>
引き続きダウンロードが継続。またしばらくすると今度はまたプロキシの設定画面が。さっきしたはずだけど？

![32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3622594/1f15a0e0-942b-34a0-ac02-aff80c3259ff.png)
<br>
よく見ると「Enable HTTPS Proxy」のところにチェックがついている。さっきはHTTPのプロキシ設定だったけど、HTTPSもしたほうがいいっていうおすすめなのかな？どちらも使えたほうがよさそうなので、内容を確認し「Yes」をクリック。よ～く見ると、画面下ステータスバーのところに「Build」という、ハンマーアイコンが付いた表示が見える。ついにビルドがスタートしたのか。タブウィンドウになっているようなので、それを選択。

![33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3622594/44477429-1c0f-f58b-eb63-badab6cb83a0.png)
<br>
ビルドとは言っても、まだ必要なコンポーネントのダウンロードが継続されているようだ。これらを手動で全部揃えるのはかなり大変。今は便利になっているね。かなりの時間待った後、ようやく「BUILD SUCCESSFUL」の文字が。それに重ねるようにしてバルーンが表示されているが、とりあえず今回は気にしないことに。ビルドが成功したのは素直にうれしい。

![34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3622594/572f1507-dece-257f-ba7a-3333df7530c0.png)

### 開発ツールインストール
続いて、開発ツールのインストールが必要とのこと。[書籍](https://www.amazon.co.jp/React-Native-JavaScript%E3%81%AB%E3%82%88%E3%82%8BiOS-Android%E3%82%A2%E3%83%97%E3%83%AA%E9%96%8B%E7%99%BA%E3%81%AE%E5%AE%9F%E8%B7%B5-%E9%AB%99%E6%9C%A8/dp/4297113910/)では、以下の手順で設定箇所にたどり着くとある。
1. メニューから「Preferences」を開く
1. 「Apperance & behavior, System Settings」の下の「Android SDK」を選択

しかし。まずメニューに「Preferences」がない。うーん。書籍をもう一度見ると、まずインストールが必要なのは以下の2つとなっている。
* Android SDK Platform 28
* Google APIs Intel x86 Atome_64 System Image

Android SDKならさっきSDK Managerからたどり着いたSettingsウィンドウにあった。それならと、メニューの「File」－「Settings」を選択。

![35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3622594/da8732ac-846f-2ae9-00d1-5ea0f5b61956.png)
<br>
「Languages & Frameworks」－「Android SDK」を選択する。Android Studioのバージョンによりこのあたりの構成が違うのは仕方ないところか。

![36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3622594/1218bb9e-e51a-a7b7-8afd-0fdd8d015370.png)
<br>
SDKは、最初34がインストールされ、続いてダミープロジェクト作成の時に33がインストールされた。一覧をよく見ると、それらのStatusが以下のようになっている。
* Android API 34: チェックあり Installed
* Android 13.0("Tiramisu"): チェックなし Partially installed

うーん。なんだか状態が同じじゃなさそう。[書籍](https://www.amazon.co.jp/React-Native-JavaScript%E3%81%AB%E3%82%88%E3%82%8BiOS-Android%E3%82%A2%E3%83%97%E3%83%AA%E9%96%8B%E7%99%BA%E3%81%AE%E5%AE%9F%E8%B7%B5-%E9%AB%99%E6%9C%A8/dp/4297113910/)でも右下の「Show Package Details」でバージョンごとのインストール対象を細かく制御できるというので、API Level 33, 34のインストール状態を確認してみることに。

まず34。確認すると以下の2つがインストール済になっていた。
* Android SDK Platform 34
* Sources for Android 34

![37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3622594/8339447a-178b-73a3-9e0f-89ded1c7f534.png)
<br>
それに対し、33の方は以下のもののみインストール済だった。
* Android SDK Platform 33

ソースの有無の差なんだね。ということで、以下のコンポーネントをインストール対象にチェック。
* Sourecs for Android 33

続いて、SDK Toolsの選択に。[書籍](https://www.amazon.co.jp/React-Native-JavaScript%E3%81%AB%E3%82%88%E3%82%8BiOS-Android%E3%82%A2%E3%83%97%E3%83%AA%E9%96%8B%E7%99%BA%E3%81%AE%E5%AE%9F%E8%B7%B5-%E9%AB%99%E6%9C%A8/dp/4297113910/)では以下のコンポーネントを指定している。
* Android Emulator
* Android SDK Platform-Tools
* Android SDK Tools
* Intel x86 Emulator Accelerator (HAXM installer)

Settingsウィンドウでは、以下のような状態になっていた。
* Android SDK Build-Tools 34: Installed
* Android Emulator: Installed
* Android SDK Platform-Tools: Installed
* Intel x86 Emulator Accelerator (HAXM Installer) - Deprecated: <font color="red">Not installed</font>

![38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3622594/396594fc-5e13-f70d-d561-eb4125281332.png)
<br>
名称に若干の差異があるものの、HAXM Installerのみが未インストールのよう。「Deprecated」ってなってるけど？とりあえず気にせずインストール対象に選択。

いったんいいかなということで、「Apply」をクリック。インストール対象とディスク消費量の確認メッセージが表示されるので、「OK」。

![39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3622594/98cb7ba7-8619-aa64-2378-86066cd4d363.png)
<br>
License Agreementウィンドウが表示されるが、HAXM Installerについてのもののみ。Sources for Androidについてはなかった。SDK本体が既にインストールされているからだいじょうぶってことかしら？インストールは継続。

![40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3622594/4e63a37c-6be9-6e83-b3fe-8c060cd40998.png)
<br>
ダウンロードを開始。HAXM Installerから。

![41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3622594/4db9d4ff-ebf0-b116-bc5d-6895ffd6f00e.png)
<br>
しばらくするとHAXMの設定画面が。[書籍][ReactNativeBook]には特に記載がなく、既定の内容のまま「Next」。

![42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3622594/dbba2c55-c731-d90f-33a5-56530696262f.png)
<br>
また少し待つと、再びLicense Agreementが表示される。対象はHAXM Installerのよう。さっきAcceptしなかったっけ？また？になりながら、再度「Accept」。

![43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3622594/dde4cdc7-3ae9-8a06-31da-83e6eccf1ff0.png)
<br>
最終的にインストールは失敗した。

![44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3622594/1780629e-53be-3c88-36c3-cd1e2ca57604.png)
![45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3622594/81047021-a889-51c0-5114-d16ae4433c4a.png)

どうやらインストールが2回動作しているようだ。HAXM Installerだけ繰り返しインストールしてみながら、フォルダーの様子を観察していると、確かにHardware_Accelerated_Execution_ManagerとHardware_Accelerated_Execution_Manager-2というフォルダーが2つできる。Hardware_Accelerated_Execution_Managerができたところでいったん消してみたりもしたけど、結局うまくいかなかった。まあ「Deprecated」ってついてるし、気にしないことに。

これでコンポーネントのインストールは終わったはず。次はAndroid仮想デバイスの作成。うまくいくかしら？


[ReactNativeBook]: https://www.amazon.co.jp/React-Native-JavaScript%E3%81%AB%E3%82%88%E3%82%8BiOS-Android%E3%82%A2%E3%83%97%E3%83%AA%E9%96%8B%E7%99%BA%E3%81%AE%E5%AE%9F%E8%B7%B5-%E9%AB%99%E6%9C%A8/dp/4297113910/