2019年度下期 React Nativeでアプリ作る③

###■ はじめに

前回に続き、React Nativeでアプリを作る。
前回：https://qiita.com/satosingo5/items/eae80242c4e79e8388d0


今回やること
・固めてスマホに突っ込む（ビルドしてAndroid実機にインストールする）
　－前回作ったハロワアプリをビルド。
　－ビルド後はapk形式でローカルに保存。
　－apkを使用し、Android実機にインストールする。

apkを使用したインストールについては以下を参照。
https://smartasw.com/archives/android8-1%EF%BD%9Eandroid4-0%E3%81%AE%E7%AB%AF%E6%9C%AB%E3%81%AB%E3%80%8C%E9%87%8E%E8%89%AF%E3%82%A2%E3%83%97%E3%83%AA%EF%BC%88-apk%EF%BC%89%E3%80%8D%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88.html#toc7

###■ ビルド準備
今回も先人の記事を参考にする。
https://qiita.com/hitotch/items/04637fb753482ed683ee

※後日追記：参考にした記事中にWSLを使用できるようにしているが、実際に操作しなくても問題なく実機のインストールまでできた。
なお、私の環境にはもともとWSLの環境はあったので、WSLが不要かどうかまでは確認できていない。WSLの手順を省略する際はご留意を。

まず、ビルドするにはExpoアカウントが必要らしい。
なんでもExpoサーバ側でビルドしてくれるみたい。

また、expo-cliのインストールも必要。

早速コマンドたたいてインストールしようとしたらエラー発生。
例によってバージョンを下げる作戦を決行。

https://nodejs.org/download/release/v10.16.3/
node-v10.16.3-x64.msiをクリックし、10.16.3のwindows向けのインストーラをダウンロードする。

Next連打してインストール。


expo-cliのインストールに再挑戦。念のため管理者権限でcmdを実行しておく。
↓npm install expo-cli --globalを実行。警告は出ているが順調にすすむ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/0e89de8b-160b-836c-e4f9-9f17e0e76eae.png)
ダメでした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/3ff4c1d2-9961-ba73-66a9-ad0754e35ac4.png)


エラーの出てるパスをたどってみる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/12d7b402-94c9-bb38-b068-0f5227734ea1.png)
ん？タイムスタンプが1月１日？

あ～初回の環境構築時に入れてましたね。

---
2019年度下期 React Nativeでアプリ作る①
■ Node.js他もろもろの導入
Python導入後

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/a7e1ce94-2789-a63a-af3c-e562746ee7f6.png)

---

と言うことは、あとはビルドコマンドたたけばいいだけなのでは。

### ■ ビルドする
ビルドしますよ。
パブリッシュとかいうのもあるらしいけど、前回使用したExpo公式のクライアントアプリを介して、ほかのユーザが見れるようにするためのものらしい。
オフラインで使用するためにはやはりビルドが必要。

以下の画像のとおり、ビルドを開始する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/6af092a3-1074-1cab-447b-b5e4fe3f7ec9.png)
ドキドキして待っていたが、ログイン待ちだった。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/5074562f-c499-63b6-e321-24e2969dc9bd.png)
カーソル動かしてログインをする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/9ea40946-b269-1c9e-5417-1f64709017b6.png)
ログインはできたが、エラー発生。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/69d06b47-7bc9-eb39-da98-93d7119f6391.png)
app.jsonにAndroidのパッケージの設定せんかいみたいなエラー？

ひとまず適当に設定（29行目）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/2afd9a96-7c3a-b0df-a126-366e8d2a2124.png)
ダメみたいですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/b7ca9ed2-65ba-0c30-4d19-22a51ef38405.png)
「.」とかつけろって言われてるようなので「.」をつけた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/f1fa22f1-b51a-cc31-2d8e-0741f287ba46.png)
再チャレンジ。なんか進んだ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/79b55758-1295-7cb2-0611-107428563367.png)
google先生に訳してもらう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/9dee50d9-61d3-9f32-791c-8b9018d1f365.png)
お任せにする！:)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/98ca26a4-47bf-2dcc-c995-c1adfa3f3e7e.png)
なんでこうも進まないのか。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/386cdafb-de94-9d3c-8f65-b274c9e2547e.png)
app.jsonの5行目を勝手にprivateにしてたからですね。publicに修正。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/aaae114d-5a75-63d7-cb92-e33c158b45af.png)
再チャレンジ。もちろんお任せで。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/25ea7c62-cb90-b743-ed8c-fa69873c5ccf.png)
お？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/33dfcd32-3fb3-6058-18ff-ff068d3f2f03.png)
これは参考にした記事内に回避策が乗っていたのでそれを実施。
https://qiita.com/hitotch/items/04637fb753482ed683ee#%E3%83%93%E3%83%AB%E3%83%89%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%8C%E5%87%BA%E3%82%8B%E5%A0%B4%E5%90%88

### ■ 今度こそビルド
別Windowでexpo start
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/7fc09586-7878-5f3c-c999-626e36da58e0.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/75339338-df3e-a573-a6a7-d3aacb80503d.png)
そしてお任せビルド
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/5b59f707-cfd9-7ad8-5724-4c9beb670ba8.png)
順調。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/b96b6a99-118f-1df3-51ae-415237d78b34.png)
Webコンソールでビルド状況が見れる！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/fb3471b3-cfa5-07d4-50a8-9081df84629c.png)
暫し待つ。
ローカルでの作業が終わると、サーバにアップロードされ、サーバ側で何か作業が始まる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/35ea24b1-2447-1458-6e7e-05ae396623d0.png)
上記、赤枠のRULからビルド状況が確認できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/17920efa-ee2a-b935-02b6-8b02fb5f90ea.png)

cmd上はタイムアウト発生。かれこれ20分経つ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/e9cf93fb-0bf7-bc4c-37bc-3bfc784dc4cd.png)


40分くらい経ってなんか画面が変わった。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/8c125e1c-c3b8-1f04-e575-8db8f0641aec.png)
まだあと35分かかるんかいと思ったら10分もしないうちに終わった。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/280f2030-a381-db97-c31a-1b9bec9deaad.png)
Downloadボタンからapkがダウンロードできる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/923acb78-3a5b-7125-0edf-51999a94e7d3.png)
PCにスマホをつないでapkをコピペ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/469f9ed7-d194-cc59-7125-2a09a7f86b89.png)

ちなみに今回のソースはこちら。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/883210aa-1d89-4e6e-6be7-3b5905923470.png)

以下、スマホ側で操作
### ■ apkからインストールする
ファイルマネージャから、PCよりコピーしたフォルダへ移動。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/48bb5635-71de-27d1-f697-dad921b82046.png)

タップするとインストール開始。
Playストアからのインストールじゃないので警告がでる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/eb1017d1-5bf5-153f-4ff6-2e92c7b597c3.png)

続行をタップすると警告が消える。
右下のインストールをタップする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/a1f3f389-942c-908b-c8d3-1c69ff896f40.png)

ブロックされた。
こうしてみるとOKボタンが強調され、UI的に安全な方へ誘導するようになっており、Googleさんのユーザへの配慮が見受けられる。
左のインストールをするをタップ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/377953c1-2374-d7d8-4f68-501a01eca87e.png)

インストール完了。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/ea70aa6f-8357-818a-f464-216574a54a7f.png)

一覧にも出てくる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/818262bc-a2e4-738e-7dd4-bdfd66354314.png)


開くとちゃんとHello,World!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!が表示される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/2554d044-7a47-9939-6e5a-ae1b45a7e12b.png)

ここまできて、どうせならもっと動きのあるものを作ってからインストールすればよかったと後悔。

### ■まとめ
今日やったこと
・固めてスマホに突っ込む（ビルドしてAndroid実機にインストールする）

次回やること
・動きのあるものにする。

以上