FC2ブログ

スマフォのアプリを作りたい(2):環境づくりで迷走Ⅱ-React Native

   プログラミング [2019/12/22]
前回、VS2017+スマフォのクロスプラットフォーム環境を構築しようとして、
手持ちのタブレットPCのディスク容量不足で挫折して、開発着手に至らなかった話を書きましたが、
いよいよ必要に迫られてる気分になって、環境のチョイスから見直し検索をしてみました。

◆別のクロスプラットフォーム開発環境
最近では、facebookが開発?したReact Nativeと言うのがあるとのこと。
JavaScriptで開発するようで、かつスマホアプリ開発初心者には向きだとある。
しばらく悩んだがまずはやってみることを優先します。また無駄足になるかもしれないけど・・・


◆ReactNative環境の構築
以下のサイトを参考に作業してみました。
★:https://qiita.com/courage-liberty/items/2e1b72b0acb15ad78e1e
★2:https://qiita.com/kk300/items/3c629234df076ebf9642
★3:https://qiita.com/tekoneko1997/items/ab1254e4472802514190

この時点で手持ちタブレットのDisk容量の残りは18.xGB。
VS2017とPythonの環境が既にインストールされています。


●Node.jsインストール
★サイトによると、「Node.js」というのが必要だそうです。
リンクが張られてたのでダウンロードサイトへ。
https://nodejs.org/en/download/
「Windows Installer(msi)-64bit」を選択し、ダウンロード。

ダウンロードした「node-v12.13.1-x64.msi」を実行。

ガイドのダイアログが出る。最初は権利関係の注意事項。acceptにチェックして続けます。
インストールフォルダもデフォルト、その後[Next]を押し続けて、最後に「Node.jsを他の環境?C/C++で使うようにするか?」みたいな内容のダイアログが出たので、「Automatic...」:自動で判断?(注:全くの誤訳かもしれない)をチェックして続けました。

インストールは無事終了の模様。
[finish]ボタンを押すと、コマンドプロンプト画面が出てなにやら書いてある。

「Node.jsネイティブモジュールをコンパイルするためのPythonとVisualStudio向けのToolをインストールするよ。ChocolateyとWindows Updateもされるでしょう。ディスク容量が3GB必要だ。・・・動作している他のプログラムは止めておけ。・・・」
もし、失敗したときとかのことも書いてある。

ともかく、何かキーを押せと出てるので押す。
もう一回何やらメッセージが出たが、よく読まずにもう一回キーを押す。

PowerShellが動き出した。

PowerShell上で、何やらWarningと警告が出たが処理を続けてます。
-Phthon環境の更新?
-MSのKBxxxxxのインストール?
-VS環境の更新?
まあ、最初の予告通りの動作のようだ。

結構時間が掛ったが、以下のメッセージ
-----------------------------------------------


Upgraded:
- visualstudio2017buildtools v15.9.17.0
- kb2919355 v1.0.20160915
- kb3033929 v1.0.5
- python2 v2.7.17
- kb2999226 v1.0.20181019
- chocolatey-core.extension v1.3.5.1
- dotnetfx v4.8.0.20190930
- chocolatey-visualstudio.extension v1.8.1
- visualstudio2017-workload-vctools v1.3.2
- kb2919442 v1.0.20160915
- visualstudio-installer v2.0.1
- vcredist140 v14.23.27820
- chocolatey-dotnetfx.extension v1.0.1
- kb3035131 v1.0.3
- chocolatey-windowsupdate.extension v1.0.4
Type ENTER to exit:
-----------------------------------------------

素直にEnterしました。
うまく行ったんですよね。

残りのディスク容量は16.5GB。
ところで、Chocolateyって何?・・・「Windows 用のパッケージ管理ソフトウェア」だそうです。
ふーんとした言いようがない。

元の★サイトの説明の続きを読みます。
コマンドプロンプトで、nodeとnpmのバージョンを確認しています。
「node --version」と「npm --version」。
真似して打ってみて、ほーほー確かに。それぞれ、v12.13.1と6.12.1だそうです。

★サイトにはGitHub Started云々とあり、本来はそちらを参照するのが本筋のようです。
続きを実行する前に、そっちを見にいきました。




URLは、こっちみたい。
https://facebook.github.io/react-native/docs/getting-started
(英語かよ。Chromeさんの翻訳に頼ります。)

上記のサイトによると、React Nativeには、「Expo CLI」というツールセット?があって、それが至って初心者向きだとお薦めです。
一瞬、「じゃあそれで」となりかけたが、読み進むとExpo CLIの制限事項のページにリンクされていたので、それを読んでみた。
機械翻訳の文章なので、若干ヘンチクリンな日本語と知らない単語(日本語訳)で半分も理解できなかったが、ともかくたくさんの制限事項があることは伝わった。

最もネックなのがbluetooth制御を行えないような記述があった。
今回使いたいので、その時点で試作の本チャンには不向き。
まずは、書いたコードが動くところが見たいという衝動もあったが、Expo CLI固有の仕様理解が必要だとするとそれが無駄になるので、まずは断念。

React Native本チャン環境の構築に進みます。

★サイトの説明は、npm install -g create-react-native-appをやってみたところで説明が終わってた。
なので、GitHub Startedの方をもう一度確認します。

「React Native CLI」というのが本チャン環境らしい。
でも、Xcode、Android Studioというものが必要だそうです。
翻訳したGitHub StartedのページもExpo CLIの説明メインで終わってて続きがよくわからない。

なので、★2のサイトを参照。
Node.jpとPythonは済みなので、読み飛ばして以下から。

●React Native CLIのインストール
CLIはコマンドラインインタフェースの略みたい。
以下のコマンドをコマンドプロンプトから実行
-----------------------------------------------
>npm install -g react-native-cli
C:\Users\sarumosunaru\AppData\Roaming\npm\react-native
-> C:\Users\sarumosunaru\AppData\Roaming\npm\node_modules\react-native-cli\index.js
+ react-native-cli@2.0.1
updated 1 package in 9.394s

>
-----------------------------------------------

問題なさそうです。

以降、図の表示が小さくて見えない場合は、クリックすると文字が見える程度の画像で表示すると思います。
●Andoroid Studioのインストール
まずは、ダウンロードです。
以下のサイトの[DOWNLOAD ANDROID STUDIO]ボタンがありました。
https://developer.android.com/studio/index.html
ボタン下の表記で「3.5.2 for Windows 64-bit (718 MB)」となってます。
ボタンをクリックすると、利用規約が表示されて、その合意チェックをしてダウンロードを開始します。
利用規約は、日本語でした。助かります。
でも斜めに読みました。特に気になる部分は無かった。無償・無保証・無責任?ってことですよね。

android-studio-ide-191.5977832-windows.exeがダウンロードされました。
実行します。
ウィンドウが出るまで少し時間が掛かります。
インストールメニューが表示されます。
20191222_1.jpg

両方チェック状態で[Next]をクリック。

その後、インストール先のフォルダと、タスクバー上のスタートメニュー/ショートカット作成有無等の選択画面があって、インストール開始になります。
Complete画面が出て、[detail]をクリックすると以下の内容が表示されました。
20191222_2.jpg

成功した感じです。
[Next]をクリックして、finish画面が出たので、AndoroidStudioは起動せずに終了しました。


●JDK8のインストール
JDKは、Java Platform, Standard Edition Development Kitの略のようです。
その内のJava8仕様の開発キットということなんでしょう。
ダウンロードは、
https://www.oracle.com/technetwork/java/javase/downloads/index.html#JDK8
から、「Java SE 8u231」と括られてるところの「JDK」の下の[DOWNLOAD]ボタンをクリックします。
※JDK(Java)11とか13も公開されていますが、JDK8じゃないとだめだと別サイトに書いてありました。

以下のページに飛びます。
https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

ページの先頭にライセンスが更新されたとある。
予想でしかありませんが、以前含まれていた利用規約から、無償での個人使用、開発用使用以外は無くなったようなことが書いてある。
商用ソフトの開発だとどうなるんだろう?
FAQを見に行って翻訳を読んでみたが、沢山書いてあって読むのがいやになってやめた。
かなり気になるが、面倒くさいことは後回し。(よく理解した方がよいよ!)

上記のURLのページを下にスクロールさせると、
「Java SE Development Kit 8u231」括られているところがある。

そこの、「〇Accept・・・」にチェックして前の規約に合意したことにして、
その下の「Windows x64 210.18 MB」の右側「jdk-8u231-windows-x64.exe」をクリックします。

そうすると、Oracleプロファイルにサインインしろと出ます。
なんのこっちゃ?と思いましたが、いずれユーザー登録しないとダウンロードさせないということだと思います。

さるの場合、Oracle DBサーバを別WebサーバからアクセスするためのOracle Clientなんとか一式をダウンロードしたときにユーザ登録してあったので、そのときのメアドとパスでサインインしたら、ダウンロードが開始された。

やれやれ。

jdk-8u231-windows-x64.exeを実行します。
最初、利用規約に関する説明ページへのリンク・ウィンドウが表示されます。念入りですね。

続行していくとインストールのメニュー選択が出ます。
20191222_3.jpg

デフォルトで全部入れるようになってました。JREというのも含まれています。
その後、インストール先フォルダを変更するか聞いてきたので、デフォルトのまま続行しました。

しばらくすると、インストールが完了したらしく、以下のウィンドウが出ました。
20191222_4.jpg

ちなみに、[次のステップ]ボタンをクリックすると以下のURLのページが表示されます。
https://docs.oracle.com/javase/8/docs/
念のため、お気に入りにしときました。


●AVDとHAXMのインストール
★2のページの説明に従います。
AndroidStudioの初回起動時の設定で行うらしい。

スタートメニューから「Android Studio」を起動します。
以下のウィンドウが表示されました。
20191222_5.jpg

何か個別のフォルダを設定等の記録先にするか?と聞いているようなので、[Do not・・・]を選んで進めました。
次に
20191222_6.jpg
と出た。

設定とか使い方?とかの情報をGoogleで収集するよ。と言っている感じ。
Andoroid Studioの改善のために使うし、プライバシーは守る?的なことを言ってるので、[Send・・・]で次へ。

Welcomeウィンドウが出た。選択項目はなかったので次へ。
以下の内容が出た。
20191222_7.jpg

★2ページの説明で「Custom」と言っているのはこのことかと思って、選んで次へ。

エディタ等メインのウィンドウの配色(黒基調/白基調)を選んで次へ。
以下のウィンドウが出た。
20191222_8.jpg

ここに来て、HAXMとAVDが何のことか初めて認識。
ADV:Android Virtual Device。エミュレーターですね。
HAXM:Hardware Accelerated Execution Manager。おそらく、IntelのCPU上でAndroid OS(ハイパーバイザー環境)を高速に動作させるための仕掛け。

全部チェックして、SDKのインストール先もデフォルトのまま次へ。
続けて出たウィンドウでは、
このPCでHAXMが使えるよ。ついてはCPUのパフォーマンスのどれくらいをHAXMに使わせるか?
と聞いている感じ。
ここもデフォルトのまま次へ。

最後に選択してきた構成で、(新たなDownLoadで)どれくらいのディスク容量を消費するか表示された。
1.5GB強でした。
ここで、改めてC:ドライブの空きを確認すると、13GB弱。
そんなに消費されてなかった。
ウィンドウ上の[Finish]ボタンをクリック。

ダウンロードが始まりました。
容量が大きいだけに結構な時間が掛かります。

途中、Windowsの環境を更新しようとしているが、いいか?のいつものメッセージが出ます。
HAXMのインストールの最中でした。
OKと答えます。

しばらくして、インストールが完了すると、AndroidStudioが起動されて以下のウィンドウが出ます。
20191222_9.jpg


ここにきて、React Native環境では、プロジェクト作成やコードを編集するときは何を使う?、ビルドをどうやって?、テストはどんな? に関して、さるはまだ全く分かってません。
なので、このウィンドウはしばし放置して、★2のページの続きを読み進めます。


●Android 6.0 SDKのインストール
★2のページの説明によると、6.0がReact-Nativeの前提なんだそうです。
・・・・ん?
他のAndroidバージョンでも動作するアプリが作れるんですよねぇ。ちょっと不安。

ともかく手順では、AndroidStudioを起動して、ウィンドウ右下にある[Configure]をクリックしろとある。
放置したウィンドウの右下にありますね。

クリックして表示されたプルダウンメニューから「SDK Manager」を選択すると以下のウィンドウが表示されました。
20191222_10.jpg

以下★2の記述通りに進めます。
1)「SDK Platforms」タブが選ばれています
2)すでに選択されている最新のAndroidバージョンのチェックは放置して、「Android 6.0 (Marshmallow)」をチェック
3)右下の「Show Package Detail」をチェック
4)「Android 6.0 (Marshmallow)」の下に表示されている項目から
 -Google APIs
 -Intel x86 Atom System Image
 -Intel x86 Atom_64 System Image
 -Google APIs Intel x86 Atom_64 System Image
に新たにチェックを入れる。
すでにチェックされている「Android SDK Platform xx」と「Source for Android xx」を含めて6項目になる。
20191222_11.jpg

5)上部にある「SDK Tools」タブを選択
6)右下の「Show Package Detail」をチェック
7)「Android SDK Build-Tools」の下に表示されている「23.0.1」をチェック
20191222_12.jpg

8)ウィンドウ右下の[Apply]ボタンをクリック

しばらくすると以下のウィンドウが表示されました。
20191222_13.jpg
何やら恐ろしげなことが書いてあります。
ディスク使用量が・・・単純に合計すると13.6GB?ということになりますが、それぞれの項目の表現が異なります。
最後の7GBがインストール後の全体容量だったらなんとかセーフなんですが。

ここで中止してももう手遅れなので、[OK]して先に進めます。

何とか無事終わったようです。
元の画面を確認すると、チェックしたものはinstalledになってます。
20191222_14.jpg

Andoroid Studioを一旦停止して、ディスク容量の空きを確認しました。
!!1.3GBしか残ってません。
とほほ。

始める前には18GB以上ありましたから、ここまでで17GBくらい消費したということですね。
最初にこの情報が欲しかったのですが、あまり書いていてくれなくて。

慌ててダウンロードファイルとか、ごみ箱のファイルを削除して、何とか空き4.6GBまで増やしましたが、これだと常にディスク容量不足の不安がついて回るでしょうね。

●環境変数にANDROID_HOMEを設定
★2の説明の続きを実行します。
1)「スタートメニュー田」右側の入力欄に”システムの詳細設定”と打ち込み、
 プルアップされたメニューの一番上にたぶん表示される「システムの詳細設定の表示」をクリックします。
 「システムのプロパティ」ウィンドウが表示されます。

2)ウィンドウしたの[環境変数]ボタンをクリックします。
 「環境変数」ダイアログが表示されます。

3)「xxxxxのユーザー環境変数」欄下の[新規]ボタンをクリックし、
 表示される「新しいユーザ変数」ダイアログの変数名に”ANDROID_HOME”と入力して、
 変数値には、SDKのインストール先のパスを指定します。
 パスは、前のSDKインストール時のウィンドウの上部に表示されてもいましたが、通常は「C:\Users\(ユーザー名)\AppData\Local\Android\sdk」だそうです。

4)[OK]して、「環境変数」ダイアログで入力されたのを確認して[OK]ボタンをクリックします。


●Android Virtual Deviceのスタート
★2のページの説明通りだと、ここでエミュレータの起動なんですね。
でも、どうやって?は詳しいサイトに任せますとのこと。放置されました。
プロジェクトを作成して、コードを書く前にエミュレータ?とも思いましたが、まずは指示に従うべく、新たな説明サイトをググります。

https://developer.android.com/studio/run/managing-avds?hl=ja
AndroidStudioから起動するようです。

ただし、実は「●AVDとHAXMのインストール」の実行後にすぐAndroidStudioを起動したら、Android10 SDKが無いとかでエラーになったんだよねー。別にアンインストールしたつもりはないけどそうなった???

その場は言われている手順から逸れるので放置しておいた。
でも、ここでもう一回起動してみます。

チョーー長くなったので、ここで一旦話を切ります。

React Native CLIの前提にあったXcodeとやらが、まだ登場してないような・・・
でも、そろそろインストールした開発環境を使う手順になりそうなので。

続きはまた。
では、消化不良のまま、この辺で。
m(__)m













スポンサーサイト





コメントの投稿

非公開コメント

カレンダー
01 | 2024/02 | 03
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 - -
プロフィール

さるもすなる

Author:さるもすなる
さるです。別HPサイト「さるもすなる」から侵食してきました。 山菜/きのこ、それとタイトルにしたPPバンド籠のことをメインに徒然に・・・・暇を持て余したさるの手仕事:男手芸のブログってことで。

最新記事
最新コメント
月別アーカイブ
カテゴリ
天気予報

-天気予報コム- -FC2-
本家のHPのトップ
山菜や茸の話です
PPバンドの籠作品と作り方です
投稿をお待ちしております



PVアクセスランキング にほんブログ村 にほんブログ村 ハンドメイドブログへ



マニュアルのお申し込み



検索フォーム
リンク
RSSリンクの表示
ブロとも申請フォーム

この人とブロともになる

QRコード
QR