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

はじめに

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

Android Studio編

zipファイルのダウンロード

まずは公式のダウンロードページからzipファイルをダウンロードします。

中央にあるDOWNLOAD ANDROID STUDIOをクリックすると各PCに合わせたzipファイルがダウンロードできます。
実際に自分はクリックしただけで、ANDROID STUDIO FOR LINUX ダウンロードが表示されていました。

zipファイルの解凍

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

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

起動させてみる

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

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

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

起動時に表示される画像一覧

パッケージの導入

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

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

PATHを通す

端末上からいつでも操作できるように、PATHを通しておきます。
ほとんどの場合、次の記事を参考にすればできます。
UbuntuのPATHの設定方法

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

フォントを変更する

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

React Native編

続いて、React Nativeの操作に移っていきます。
目標はHello,world!!を表示することです。
公式のドキュメント - Getting Startedに従って作業していきます。

java Development kit

Ubuntu 18.04 LTSに複数のJDKをインストールする方法を参考に進めていきます。

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

 $ 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には次の内容を記入します。

.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で次の内容が表示されたら完了です。

React Nativeのインストール

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

 $ npm install -g react-native-cli

Android Studioの設定

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

Android StudioでReact Nativeを動かすために必要なパッケージをインストールしましょう。
まずはAndroid　Studioを開いてください。

その後、右上にある赤枠アイコンをクリックしてください。

そしたら、次の画像のものが表示されます。

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

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

上の物がインストールできたらSDK Toolsタブを開いてShow Package DetailsからAndroid SDK Build-Toolsの28.0.3を選んでインストールしましょう。

PATHを通す

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

$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-initを実行してください。

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

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

Hello,world!! を表示させる

プロジェクト直下のApp.jsを操作します。
以下の内容に書き換えてください。

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端末を用いてデバッグを行うには開発者メニューを有効にする必要があります。
そのやり方は設定アプリ -> システム　-> 端末情報 -> ビルド番号を七回押すです。
わかりにくい方は下記の画像を参考にしながら進めてください。

開発者メニューを切り替える方法

設定アプリを開く
システム -> 端末情報を開く
ビルド番号を七回押す

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

PCとAndroid実機を接続する

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

$ lsusbの例
接続前

接続後

PCとAndroid端末をしっかり繋いでいるのに接続されていなければ、ケーブルの問題かも知れません。
一般的な充電用のケーブルでは認識されなかったため、次のUSBケーブルがオススメです。
Rampow USB Type C ケーブル

PCとAndroid端末が接続されたら、Android Studioを開きましょう。
そして、右上にある下記画像のアイコンをクリックしてください。

そうすると、下記のような画像が表示され、Connected Devicesに接続されているAndroid端末が表示されます。

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を参考に設定してください。
実際に使用したコマンドは以下です。

 $ 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の左隣にあるアイコンをクリックします。

そうすると、次の画像のウィンドウが表示されるため、中央のCreate Virtual Device ...をクリックします。

その後、仮想端末として設定する機種の種類を選択する画面が表示されます。
特に指定がなければ、defaultの設定となっているNexus 5Xにしてくだい。

次に、System Imageを選択します。
API Levelが28となっている一番上のPieをダウンロードしてください。
(右にkvmのPermission Errorが出ていますが無視してください。)

ダウンロードが終わったらNextを押しましょう。
それによって、次の画面が表示されます。
ここで操作することはないため、Finishで大丈夫です。

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

仮想端末でHello,worldを確認する

ここまできたらあとちょっとです。

Build

まずはAndroid StudioでBuildを行ってください。
上にあるトンカチ(下記画像赤枠)のアイコンをクリックするとBuildが実行されます。

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

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つ隣にある再生ボタン、三角形(下記画像赤枠)をクリックしてください。

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

react-native run-androidする

仮想端末が起動したら、Helloディレクトリで次のコマンドを実行してください。

 $ react-native run-android

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

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

まとめ

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

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

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