Ubuntu環境にAndroid Studioを導入し、React NativeでHello,worldを表示させる

## はじめに
Androidアプリを制作しようと考え、そのためには`Android Studio`が必要なことを知りました。
そのため、自分のUbuntu環境のPCにAndroid Studioを導入した際の手順を記録します。

## Android Studio編
公式の[インストールドキュメント](https://developer.android.com/studio/install#linux)に沿って進めていきます。

### zipファイルのダウンロード
まずは[公式のダウンロードページ](https://developer.android.com/studio/?hl=ja)から`zip`ファイルをダウンロードします。
<img src="https://qiita-image-store.s3.amazonaws.com/0/218398/2eadaac3-ed97-5ae0-e695-342a1d57642a.png" width="500px">

中央にある**`DOWNLOAD ANDROID STUDIO`**をクリックすると各PCに合わせたzipファイルがダウンロードできます。
実際に自分はクリックしただけで、**`ANDROID STUDIO FOR LINUX ダウンロード`**が表示されていました。
<img src="https://qiita-image-store.s3.amazonaws.com/0/218398/dba5ebbd-1844-f956-e4a4-0551154a9b90.png" width="500px">

### zipファイルの解凍
`zip`ファイルのダウンロードが終わったら、そのファイルを解凍します。
コマンドは以下です。

```sh
$ sudo unzip {ダウンロードしたディレクトリ}/android-studio-ide-182.5314842-linux.zip -d /opt/
// unzip A -d B　はAのファイルをBに展開するという意味。
```

### 起動させてみる
次のコマンドを打って、`Android Studio`が起動できるか確かめてみてください。

```sh
$ /opt/android-studio/bin/studio.sh 
// 起動
```

`Android Studio`は閉じても構いません。
各自の環境に合わせて設定しても大丈夫です。
その場合、基本的に`default`の設定で問題ありません。

<details>
<summary>起動時に表示される画像一覧</summary>
<div>

<img src="https://qiita-image-store.s3.amazonaws.com/0/218398/6fe8e4dd-4501-71cc-8a44-a1348239c4f2.png" width="500px">
<img src="https://qiita-image-store.s3.amazonaws.com/0/218398/ab500364-f74f-8408-33a9-95adf452c87d.png" width="500px">
<img src="https://qiita-image-store.s3.amazonaws.com/0/218398/0d33378d-0c85-d7b0-2e11-1672ccf9539c.png" width="500px">
<img src="https://qiita-image-store.s3.amazonaws.com/0/218398/ef242a33-2b6b-263c-6754-317e3d2f1e38.png" width="500px">
<img src="https://qiita-image-store.s3.amazonaws.com/0/218398/e49251ce-4009-b52f-3cdc-f0d62262cb06.png" width="500px">
<img src="https://qiita-image-store.s3.amazonaws.com/0/218398/6f0a83d0-e978-ff11-b15f-5641f5651fd7.png" width="500px">
<img src="https://qiita-image-store.s3.amazonaws.com/0/218398/3bf93b72-0d31-94cd-82f8-0c35715201df.png" width="500px">
<img src="https://qiita-image-store.s3.amazonaws.com/0/218398/2dd1b1db-6478-306f-7005-677c14e80f97.png" width="500px">

</div>
</details>

### パッケージの導入
64bitのUbuntuを使用している場合、32bit用のパッケージをインストールしましょう。

```sh
sudo apt install lib32z1 lib32ncurses5 libbz2-1.0:i386 lib32stdc++6
```

### PATHを通す
端末上からいつでも操作できるように、PATHを通しておきます。
ほとんどの場合、次の記事を参考にすればできます。
[UbuntuのPATHの設定方法](https://qiita.com/takanemu/items/6027291be8a2a6af9adc)

この記事を参考にしている場合は、`/opt/android-studio/bin/studio.sh`をPATHに通せば大丈夫です。
各自が設定したPATHで`Android Studio`が起動されるか確認してください。

### フォントを変更する
馴染みのある`Ricty Diminished`を使いたいので、フォントを変更します。
`File -> Settings -> Font`と移動し、下の写真のように変えました。

<img src="https://qiita-image-store.s3.amazonaws.com/0/218398/e166c4ac-f45e-0afe-0f72-07042a262ded.png" width="500px">

## React Native編
続いて、`React Native`の操作に移っていきます。
目標は`Hello,world!!`を表示することです。
公式の[ドキュメント - Getting Started](https://facebook.github.io/react-native/docs/getting-started.html#content)に従って作業していきます。

### java Development kit
[Ubuntu 18.04 LTSに複数のJDKをインストールする方法](https://qiita.com/SUZUKI_Masaya/items/a4eb06e826bf56541537)を参考に進めていきます。

ここで自分が行ったコマンドは以下です。

```sh
 $ sudo apt update
 $ sudo apt install oracle-java11-set-default                                                                                           
 $ sudo update-alternatives --config java                                                                                               
 $ sudo update-alternatives --config javac 
 $ sudo apt install default-jre
 $ vim ~/.bashrc
 $ source ~/.bashrc
 $ java -v
```

`.bashrc`には次の内容を記入します。

```sh:.bashrc
## Java Settings(この行は自由に記入してOK)
JAVA_HOME=$(readlink -f /usr/bin/javac | sed "s:/bin/javac::")
export JAVA_HOME
PATH=$PATH:$JAVA_HOME/bin
export PATH
```

最後のコマンドである`$ java -v`で次の内容が表示されたら完了です。
<img src="https://qiita-image-store.s3.amazonaws.com/0/218398/1a5ed6db-d958-cdf6-3725-2e63fabb07d1.png" width="500px">

### React Nativeのインストール
`React Native`は次のコマンドでインストールできます。
`react-native-cli`はnodeのバージョンが`8.3`以上である必要があるので、それができていない方は先にそちらから行ってください。

```sh
 $ npm install -g react-native-cli
```

### Android Studioの設定
続いて、`React Native`を`Android Studio`で使うための設定を行います。

`Android Studio`で`React Native`を動かすために必要なパッケージをインストールしましょう。
まずは`Android　Studio`を開いてください。
<img src="https://qiita-image-store.s3.amazonaws.com/0/218398/d8c58644-af92-8e76-bcbb-36f3d7d0862a.png" width="500px">

その後、右上にある赤枠アイコンをクリックしてください。
<img src="https://qiita-image-store.s3.amazonaws.com/0/218398/a706fbcd-5c43-aac7-dbba-9d6f671de20c.png" width="500px">

そしたら、次の画像のものが表示されます。
<img src="https://qiita-image-store.s3.amazonaws.com/0/218398/e0abb88a-ba72-0b4a-8392-9d9aebe1a308.png" width="500px">

下にある`Show PAckage Details`を押して、次の物をインストールしてください。

- **`Android SDK Platform 28`**
- **`Intel x86 Atom_64 System Image`** または **`Google APIs Intel x86 Atom System Image`**

<img src="https://qiita-image-store.s3.amazonaws.com/0/218398/31fdeba8-8676-bbbb-0b58-60d66712a1a6.png" width="500px">

上の物がインストールできたら`SDK Tools`タブを開いて`Show Package Details`から**`Android SDK Build-Tools`**の`28.0.3`を選んでインストールしましょう。
<img src="https://qiita-image-store.s3.amazonaws.com/0/218398/20e63512-db1d-0001-5ffb-ae67a7adda74.png" width="500px">

### PATHを通す
`React Native`を使用するためにはいくつかのPATHを設定する必要があります。
`$HOME/.bash_profile`など各自の`bash`に次のPATHを通してください。

```sh:$HOME/.bash_profile
export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
```

追加したら、`$ source $HOME/.bash_profile`で変更したファイルを読み込み、`$ echo $PATH`でPATHが通るようになったかを確認してください。

### ファイル操作
ここから実際にファイルを操作していきます。
ここも公式の[ドキュメント - Learn the Basics](react-native- tutorial　https://facebook.github.io/react-native/docs/tutorial)を参考に進めていきます。
#### 作業ディレクトリ作成
作業ディレクトリを作成して、そこに移動し、`react-native-init`を実行してください。

```sh
$ mkdir Android
$ cd Android
$ react-native init Hello
```

処理が終わったら`Android Stuido`を開いて、左上の`File -> Open`をクリックし、`Hello`ディレクトリを開きましょう。


#### Hello,world!! を表示させる
プロジェクト直下の`App.js`を操作します。
以下の内容に書き換えてください。

```jsx:App.js
import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.hello}>Hello,world!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  hello: {
    fontSize: 24,
    textAlign: 'center',
    margin: 10,
    color: 'red',
  },
});
```

### デバッグの設定

#### Android端末の準備
Android端末とPCを接続し、デバッグができるようにします。

##### 開発者メニューを表示させる
Android端末を用いてデバッグを行うには`開発者メニュー`を有効にする必要があります。 
そのやり方は**`設定アプリ -> システム　-> 端末情報 -> ビルド番号を七回押す`**です。
わかりにくい方は下記の画像を参考にしながら進めてください。
<details>
<summary>開発者メニューを切り替える方法</summary>
<div>

1. 設定アプリを開く
<img src="https://qiita-image-store.s3.amazonaws.com/0/218398/a2919f70-0b1f-dcd3-a0e3-c3047125d668.jpeg" width="300px">

2. システム -> 端末情報を開く
<img src="https://qiita-image-store.s3.amazonaws.com/0/218398/4dbcd42f-c024-3822-c7ca-1c8dee4cf9ed.jpeg" width="300px">

3. ビルド番号を七回押す
<img src="https://qiita-image-store.s3.amazonaws.com/0/218398/2a8af4f0-0610-f941-b709-9ee1f8c3a442.jpeg" width="300px">


</div>
</details>

以上の操作によって、開発者メニューが有効になったら、**`開発者向けオプション -> USBデバッグを有効にする`**を**`ON`**にしてください。

<img src="https://qiita-image-store.s3.amazonaws.com/0/218398/36d38736-a5f5-9a09-5155-26e88ea4df21.jpeg" width="300px">

##### PCとAndroid実機を接続する
ここまでの準備ができたら、USBケーブルを使ってPCとAndroid端末を接続してください。
PC側でAndroid端末の名前が表示されていれば接続されています。
それでも不安な方は、接続前と接続後に`$ lsusb`コマンドを使用して、接続されているかどうかを確かめてみてください。

**`$ lsusb`の例**
接続前
<img src="https://qiita-image-store.s3.amazonaws.com/0/218398/16375f3c-e981-edaf-5bdf-5b4d47fc8b0d.png" width="300px">

接続後
<img src="https://qiita-image-store.s3.amazonaws.com/0/218398/55409c6e-6d76-416c-4a1c-5a9e3710a4e8.png" width="300px">

PCとAndroid端末をしっかり繋いでいるのに接続されていなければ、ケーブルの問題かも知れません。
一般的な充電用のケーブルでは認識されなかったため、次のUSBケーブルがオススメです。
[Rampow USB Type C ケーブル](https://www.amazon.co.jp/gp/product/B0791FBQ83/ref=ppx_yo_dt_b_asin_title_o00_s00?ie=UTF8&psc=1)


PCとAndroid端末が接続されたら、`Android Studio`を開きましょう。
そして、右上にある下記画像のアイコンをクリックしてください。
<img src="https://qiita-image-store.s3.amazonaws.com/0/218398/82edfe00-4dec-0b63-ffad-74d893a11c69.png" width="500px">

そうすると、下記のような画像が表示され、**`Connected Devices`**に接続されているAndroid端末が表示されます。
<img src="https://qiita-image-store.s3.amazonaws.com/0/218398/044d2313-32ed-2fbf-ab46-9f7dd76cdc9b.png" width="300px">

Android端末を選択してOKをクリックすると、**`Build`**が開始されます。
**`Build`**が完了したら、端末を開いて**`react-native run-android`**を実行してください。

それが完了すると、Android端末に現在のアプリの状態が表示されます。

Android端末を軽く振ると**`Developer Menus`**が表示されます。
ファイルを変更した後の再読込などは、このメニューを表示させてから、`Reload`を選択すると行えます。

実際の端末を使って、どういう感覚でアプリを開発していくかを考えていきましょう。

#### Android仮想端末の作成
実機での操作ができなかった人は、`Android Studio`の仮想端末で今後の作業を行ってください。

##### kvmの設定
`Android Studio`では、仮想環境を使ってデバッグを行うことができます。
そこで使用されるのは`kvm`と呼ばれるものです。
[Android Studio: /dev/kvm device permission denied](https://stackoverflow.com/questions/37300811/android-studio-dev-kvm-device-permission-denied)を参考に設定してください。
実際に使用したコマンドは以下です。

```sh
 $ egrep -c '(vmx|svm)' /proc/cpuinfo
 //PCが仮想環境に対応しているか確認
 //0以外が表示されればOK
 $ sudo apt install qemu-kvm
 $ sudo adduser $USER kvm
 $ sudo chown $USER /dev/kvm
```

##### 仮想端末の作成
`kvm`の設定が終わったら仮想端末を作成していきます。

まず、右上の`Android SDK`の左隣にあるアイコンをクリックします。
<img src="https://qiita-image-store.s3.amazonaws.com/0/218398/91394840-c033-567c-0240-1b5689c49927.png" width="500px">

そうすると、次の画像のウィンドウが表示されるため、中央の**`Create Virtual Device ...`**をクリックします。
<img src="https://qiita-image-store.s3.amazonaws.com/0/218398/2ba688bf-408d-31b4-8ded-101a71c90af5.png" width="500px">

その後、仮想端末として設定する機種の種類を選択する画面が表示されます。
特に指定がなければ、defaultの設定となっている**`Nexus 5X`**にしてくだい。
<img src="https://qiita-image-store.s3.amazonaws.com/0/218398/215aba2b-86ef-2806-a13e-6954e9f38912.png" width="500px">

次に、**`System Image`**を選択します。
**`API Level`**が**`28`**となっている一番上の**`Pie`**をダウンロードしてください。
(右にkvmのPermission Errorが出ていますが無視してください。)
<img src="https://qiita-image-store.s3.amazonaws.com/0/218398/4c21d39d-e3e3-559c-c720-47ddfbff1dd2.png" width="500px">

ダウンロードが終わったら**`Next`**を押しましょう。
それによって、次の画面が表示されます。
ここで操作することはないため、`Finish`で大丈夫です。
<img src="https://qiita-image-store.s3.amazonaws.com/0/218398/c8e9eb71-9e9e-dd23-4eb8-2f84a52a7b56.png" width="500px">

以上で仮想端末の作成は終了です。

### 仮想端末でHello,worldを確認する
ここまできたらあとちょっとです。
#### Build
まずは`Android Studio`で`Build`を行ってください。
上にあるトンカチ(下記画像赤枠)のアイコンをクリックすると`Build`が実行されます。

<img src="https://qiita-image-store.s3.amazonaws.com/0/218398/8dc4d411-4c56-fa6d-636b-712f8f5d7622.png" width="500px">

`Build`時、`WARNING`として以下のものが表示されますが無視して大丈夫です。

```sh
WARNING: API 'variant.getMergeAssets()' is obsolete and has been replaced with 'variant.getMergeAssetsProvider()'.
It will be removed at the end of 2019.
For more information, see https://d.android.com/r/tools/task-configuration-avoidance.
To determine what is calling variant.getMergeAssets(), use -Pandroid.debug.obsoleteApi=true on the command line to display a stack trace.
Affected Modules: app
```

#### 仮想端末を起動する
`Build`が完了したら、仮想端末を起動します。
`Build`のアイコンの2つ隣にある再生ボタン、三角形(下記画像赤枠)をクリックしてください。
<img src="https://qiita-image-store.s3.amazonaws.com/0/218398/82edfe00-4dec-0b63-ffad-74d893a11c69.png" width="500px">

そうすることで、仮想端末が起動します。
時間がかかるため、ホーム画面が表示されるまで待ちましょう。

#### react-native run-androidする
仮想端末が起動したら、`Hello`ディレクトリで次のコマンドを実行してください。

```sh
 $ react-native run-android
```

このコマンドが入力されると、`Hello`ディレクトリの内容が仮想端末に反映されます。
そのため、次のような画面が表示されるようになります。

<img src="https://qiita-image-store.s3.amazonaws.com/0/218398/757fc00d-f936-2afa-854b-fabd7b24fd1e.png" height="300px">


上の画面が表示されれば終了です。
お疲れ様でした!!

## まとめ
**いや、キッツい!!**
プログラミングは好きですが、環境開発は嫌いです。
この記事を作成するのに3日もかかりました。
自分の力ではどうにもならないというか、機種や使用するものによってやり方が変わってしまうのは好きじゃありません。

なにより、仮想端末を起動して状態を確認するのがヤバイです。
自分のPCのスペックが低いからか何回も落ちました。
コードを記入していくだけでなく、作業効率なども考慮して進めていかなければならないのが目に見えています。

メモリの開放などを勉強できる良い機会だと思って(そうしないとやってられない)、Androidアプリの開発を進めていきます!!