FC2ブログ

スマフォのアプリを作りたい(3):続React Native環境構築

   プログラミング [2019/12/23]
前々回、前回と開発環境作りの話をしてきましたが、その続きになります。

ここまで、参考サイトの説明のまま盲目的にインストール作業をしてきましたが、
インストールしたものが、何なのかも知らないのは、さる極まりないので、

説明してくれてるサイト:入門説明のサイトを探しました。

やっぱ、Qiitaでした。
★4:https://qiita.com/EBIHARA_kenji/items/2f6938c4fda7cecbeb19


◆これまでインストールした環境のおさらい
まずは、これまでインストールしたものと必要な環境それぞれの概要です。
上記ページの丸写し+※さる環境の現況です。

・Node.js:React Nativeアプリのビルドやデバッグに必要。
・nvm:Node.jsのバージョン管理ツール。
 複数のバージョンをインストールして使い分けすることもできるそうです。
※意識してインストールしたつもりはない。入っているのか不明。
 インストールしたNode.jsのフォルダをまさぐって見たがそこにはない。
・yarn(or npm):Node.js のパッケージ・マネージャ。npm の改良版で、置き換えが可能。
 npm でも代替は可能。ただしメリットはない。
※前の参考サイトではあえて入れろとはなかったので、npmのみ入っている。
・Chocolatey:Windowsのみ。Windowsでのパッケージマネージャ。
 Linuxでのaptや、macOSでのHomeBrew みたいなもの。
※これもNode.jsを入れたときに一緒に入った模様。

・JDK8:Javaの開発キット。Oracle JDK8は2019/1でサポート終了だそうだ。
 上記ページではOpen系JDK(AdoptOpenJDK)を利用する説明になっている。
※Oracle JDK8の利用規約を斜め読みでインストールしたので、ちょっと心配。
 AdoptOpenJDKでは環境変数(JAVA-HOME)の設定が必要だと書いていたので念の為見てみたが、現状の環境ではそのような環境変数はない。まあ当たり前か。

・Visual Studio Code:無償のコーディング用テキストエディタ。
※VisualStudio2017が入っていたので、特に意識せず。
・PowerShell:Windowsのみ。CLI:コマンドラインインタフェース。
 コマンドプロンプトでもいいですが、遥かに高機能でこれになれると開発効率あがるのでオススメ。
 Linux や macOS は、普通にそれぞれのターミナルを利用します。
※Windows10なので、特に意識せず。
・Python:React Nativeのビルド時に使われるそうです。
※VisualStudio2017+Pythonの環境を別件で作っていたので、特に意識せず。

・Android Studio:Android アプリのビルドに必須。AndroidアプリのIDE。
※インストール済み。Android10 SDKが入ってないと怒られている状況。
・Xcode:iOS アプリのビルドに必須。iOS や macOS アプリ の IDE
※前参考にしたページ★2はAndroid用開発だったのでこれに触れてなかったんですね。


★4ページを参考にしたら、また紆余曲折ありました。


◆新たな選択肢VisualStudioCode
★4のページの説明では、環境を構成するものの説明に加えて、Visual Studio Codeをメインに使用する環境の説明になっていた。
それ用のツール(react native tool/tslint)の追加の説明もある。

でも、VisualStudioが既に組み込まれている環境で、重複?してVisual Studio Codeを新たにインストールする必要があるのか良くわからない。

VisualStudio2017を起動して[ツール]-[拡張機能と更新プログラム]を選択するとウィンドウが表示される。

右側のメニューから「オンライン」を選択して"react native tool"や"tslint"を検索してみると、tslintは見つかるものの、"react・・・"は見つからない。
VisualStudio-Marketplaceにはない模様。VisualStudioCode-Marketplaceにはある。

VisualStudioCodeを新たにインストールして、この★4サイトの説明に準ずるか、あるいは別の解説サイトを探すかちょっと悩む。

ディスクの空きが潤沢にあるのであれば、あまり迷いもしないで進めるのだが。
VisualStudioCodeだと4GBくらいのディスクスペースが必要だそうだ。・・・現在使用しているタブレットでは、もう限界です。

VisualStudio2017をアンインストールしてしまえば、余裕で入るかと思う。でもそうなると、以前遊んでいたPythonのプログラムを動かせる環境がなくなってしまう。

まずは、「VisualStudioCodeは導入しない方向で。」
★4ページとはここでさようならです。

以前の★2のページ(以下URL)に戻って、エミュレータを起動するところに戻ります。

以降、図の表示が小さくて見えない場合は、クリックすると文字が見える程度の画像で表示すると思います。
◆AndroidVirtualDeviceの設定と起動
エミュレータをどうデバッグに繋げるかも全く不知なのですが、いずれデバッグに着手する際には前もって起動するものらしいので、まずはやってみます。

スタートメニューからAndroidStudioを起動します。(「Android 10 SDKが足りない!」的なメッセージは出ませんでした。)
20191223_1.jpg

この画面の右下にある[Configure]ボタンをクリックして表示されるプルダウンから「ADV Manager」を選択します。
以下の画面が表示されました。
20191223_2.jpg

既にリストされている内容を見ると、Name:Nexus・・・API:29と出てます。
AndroidStudio関係のセットアップでインストールしたのはAPI:23です。
なので、リストされている設定だと作ったアプリはAPIのバージョン違いで動かないのでは?

新しい設定を作ってみます。
ウィンドウの下にある[+Create Virtual・・]ボタンをクリックします。

以下の画面が出ました。
20191223_3.jpg

デフォルトで Phone:Pixel2 が選択されているのでそのまま[Next]ボタンをクリックすると、
次のウィンドウ(以下)が出ます。
20191223_4.jpg

ただし、そこに API Level:23 というのが選択肢の中にありません。
なので、[Previous]ボタンで前のウィンドウに戻して、別のPhoneを選び直してみました。

Nexus6を選んだら、Marshmallow(API Level:23)が出てきたので、よく考えずにその行をクリックすると、
20191223_5.jpg
何やらダウンロードを開始しました。

・・・?入っているハズでは?

しばらくして終わったみたいだったので[Finish]をクリックすると以下のウィンドウに戻りました。

選択内容が入力されていたのでADV名を編集して、再度[finish]。

以下の画面。
20191223_6.jpg

Nameを変更して[finish]ボタンをクリックすると、「Creating Android Virtual Device」と出てしばらく待たされました。

結局エラーメッセージが表示されて失敗した模様。
20191223_7.jpg

一旦、ADV Managerを終了させて、AndroidStudio(Welcome)のウィンドウを見ると、[Events]と書かれたボタンが増えてます。
クリックすると、エラー内容が部分的ではありますが見えます。
20191223_8.jpg

結局、ディスクの空きが足らないと出てます。

心配したことが、起きました。
空きは2GBありました。でも足らないのね。

悪あがきで、またもやしばらく使ってないファイルの削除、WindowsUpdateの残骸の破棄を行って、2.5G弱まで空きを増やして
[+Create Virtual・・]からやり直した。

今度は、エラーが出ずに終了した。
20191223_9.jpg

ディスクの空きを見たら400MBちょっとしか空いてませんでした。

ADV Managerのウィンドウは以下の内容になってたので、ダメもとで追加した2段目の「Action」欄のPlayっぽいアイコンをクリックしてみました。

何も起きません。

AndroidStudio(Welcome)ウィンドウの[Events]を確認すると、やっぱりディスク・スペースが足りないそうです。

はぁ~~~

最後の選択肢、VisualStudio2017&Python3(Python3の環境も入っている。)をアンインストール?

・・・悩みます。
(世にさらしてないVS+Python環境で作った機械学習のサンプルがあるから。
かつ、その環境つくりにも結構難儀した記憶があって、かつ環境作りの詳細をメモしてなかった。)

追加のディスクを購入する方向にしようっかなー。
もっと早くにそうすればよかった。とほほ。

ともかく、
React Nativeの開発環境を仕立てるのにディスク容量は、
22GB以上必要(Xcore等iOS関連含まず。)
ということです。(SDK23が14GBくらいありました。)


再度、この話は一旦切ります。
だって、アンインストールして、ほかのディスクかPCに環境を作り直しですもの。

では、この辺で。
(; ;)w
スポンサーサイト





コメントの投稿

非公開コメント

カレンダー
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