React Nativeでアプリを作る - 0
今回はプロジェクトを作成し、開発ツールを導入するというコードを書いていく手前までやっていく。
Expoで作ったアプリのファイル構成
プロジェクトを作成
$ exp init project-name $ npm install
Expoで作ったものは通常React Nativeで作るものとは若干異なる。主なものは以下。
App.js | このアプリのルートになるファイル。最終的にReact Nativeでビルドされる。 |
app.json | Expoのファイル。アプリの名前やアイコンの場所を指定している。 |
package.json | React Nativeのプロジェクトの依存関係を指定。実際の依存関係はnode_modulesフォルダ内に入っている。 |
node_module | npm installやpackage.jsonを修正してnpm installするとnode_moduleフォルダに自動的にファイルがダウンロードされる。 |
ディレクトリの構成の変更
プロジェクト直下にsrcというフォルダ、更にその下に、components、elements、screensというフォルダを作成。
大きさは小さい順に以下のようになる。
elements | 画面を構成する最小単位 |
components | elementsの集合体 |
screens | 1つの画面のcomponents |
開発用ツールの導入
eslint |
babel-eslint |
eslint-config-airbnb |
eslint-plugin-impot |
eslint-plugin-jsx-a11y |
eslint-plugin-react |
Terminalからコマンドを実行し、package.jsonに入れていく。
package.jsonはパッケージとそのバージョンの指定をしているだけで、実態はnode_moduleフォルダにある。
npm install --save-dev eslint babel-eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react
-
- save-dev:開発環境にダウンロード
また、eslintを使うためにはフォルダ直下に「.eslintrc.json」を作成し、今回の場合は以下のような内容にする。
「rules」には出されたエラーの中で無視したいものを入れていく(0にする)。
{ "extends": "airbnb", "plugins": [ "react", "jsx-a11y", "import" ], "rules": { "no-use-before-define": 0, "react/prefer-stateless-function": 0, "react/jsx-filename-extension": 0 }, "parser": "babel-eslint" }
高速に開発するために
--offlineオプションを付ける
$ exp start --offline $ exp ios --offline $ exp android --offline
上記3つのコマンドは通常「--offline」というオプションをつけずに使用出来るが、
これをつけるとネットワーク経由でJavascriptが経由されるので速い。
シミュレーターでエラーが出たらこっちの記事を参照。
React Nativeの実行環境を整える - 機械音痴な情報系
Hot Reloadを使用する
アプリを立ち上げている状態から、⌘+Dを押すとアプリの設定画面に戻れる。
Live Reloadではなく、Hot Reloadを使えるようにする。
Live Reload | コードを変更すると自動でリビルドする。 |
Hot Reload | 変更した差分のみを転送するため反映されるのが速い。 |
これで開発のスタートラインに立った!!
React Nativeの実行環境を整える
React Nativeをインストール
公式サイト:Getting Started · React Native
$ npm install -g create-react-native-app $ create-react-native-app AwesomeProject $ cd AwesomeProject
-gオプションをつけると、グローバルにインストールされる。つまりこのコマンドがどこからでも使えるようになる。
公式ページにはこの後「npm start」と書いてあるが、実行する環境がないので、まず実行環境を整える。
やろうと思えばExpoのアプリをiPhone、Androidにダウンロードすることも出来るが、実行結果をブラウザで確認出来たりもしてこっちのほうがデバッグは楽。
Genymotionをダウンロード
アカウントを作りMac/WindowsのGenymotionをダウンロード
https://www.genymotion.com/download/:title:w500
Applicationフォルダに入れ「Genymotion」をクリック(Genymotion Shellではない丸いアイコンの方)。
実行しようとするとこんなエラーが。Virtual Boxは既に入っているんだけどなぁ…。
VirtualBoxを以下から再インストール。
Oracle VM VirtualBox - Downloads | Oracle Technology Network | Oracle
一応Genymotionも1度消して再インストールしてみると無事インストールが出来た!
プラスマークの「Add」ボタンを押してNexus5の最新OSのものをインストール。
Virtual Device NameはデフォルトのままでFinish。
選択して「Start」ボタンを押して起動を確認。
Expoのインストール
公式サイト:https://docs.expo.io/versions/latest/introduction/installation:title:w400
最新のExpoをダウンロード。
Releases · expo/xde · GitHub
コマンドラインにしかないコマンドもあるのでダウンロード。
$ npm install exp --global $ exp --version 45.0.2
プロジェクを作る方法は以下の3つがある。全てReact Nativeのアプリケーションが作成される。
ただし、1.のプロジェクトはそのままExpoで使うことは出来ない。
1. 「create-react-native-app myproject」コマンドを使用
2. 「exp init myproject」コマンドを使用
3. Expoアプリケーションを起動し、GUIで作成
「Create new project...」を押し、デフォルトの「Bank」を選択したままプロジェクトを作成。
画面Shareボタンを押しQRコードを読み込むと、スマホにExpoのアプリから作成したアプリケーションを操作出来るようになる。
iOSシミュレーターを起動
右の「Device」アイコンを押すか、⌘+iを押してiOSシミュレーターを起動させる。
するとこんなエラーが出て起動出来ない。
9:10:22 PM Error running `xcrun simctl openurl booted exp://localhost:19002`: An error was encountered processing the command (domain=NSPOSIXErrorDomain, code=60): The operation couldn’t be completed. Operation timed out Operation timed out 9:10:22 PM Error installing or running app. Error: Process exited with non-zero code: 60
解決方法としては、iOSシミュレーターの中のExpoアプリを削除して一旦シミュレーターを終了。再度立ち上げると、、、
一度削除すると自動的にExpoアプリを再ダウンロードするので、今までに無かった「Downloading latest version of Expo」というメッセージが流れている。
正しく立ち上げることが出来たので、Expoアプリが自動的に立ち上がっていることが確認出来る。
ひゃっほーーーーー!!!
エラー文でぐぐってなんか色々入れちゃったけどこんな単純な方法でなおるんかい!!!!
Androidシミュレーターを起動
Couldn't start project on Android: Error running adb: No Android device found. Please connect a device and follow the instructions here to enable USB debugging: https://developer.android.com/studio/run/device.html#developer-device-options. If you are using Genymotion go to Settings -> ADB, select "Use custom Android SDK tools", and point it at your Android SDK directory.
Genymotionを起動しないまましないままでは上のようなエラーが出てしまう。
先程と同じく、Genymotionを立ち上げてデバイスを選択し、「Start」ボタンを押してNexus5Xが立ち上がってから
Expoアプリの右側の「Device」から「Opne on Android」をクリック。
Couldn't start project on Android: could not install *smartsocket* listener: Address already in use ADB server didn't ACK * failed to start daemon * error: cannot connect to daemon
はい、エラー\(^o^)/
どうやらandroid-sdkのインストールは不要で以下のように、GenymotionのtoolsがPATHに含まれる必要があるのだそう。
参考:Genymotion - Expo Documentation
$ export PATH=/Applications/Genymotion.app/Contents/MacOS/tools:$PATH >> ~/.bash_profile $ source ~/.bash_profile $ which adb /Applications/Genymotion.app/Contents/MacOS/tools/adb
GenymotionのSettingsのAccountタブで一度Sign outしてから再度Log inする。
ExpoをRestartしてもう一度エミュレータを立ち上げる。
mkdirとその後のcdを同時に
とあるサイトを見ているときにmkdirとcdを同時に行っていたのでメモ。
方法2
~/ $ mkdir hoge ~/ $ cd !!$ cd hoge ~/ hoge $
!!:直前に実行したコマンドラインを再実行する。
そして、$をつけて最後の引数(hoge)のみを取り出している。
調べてみたら最後は「!$」でも良いらしい。
!!$のかわりに!$でも可能です。
本来 ! と $ のあいだには何か文字(イベント指示子)が必要になるのですが、
「$(ワード指示子)の前にイベント指示子が省略された場合は、直前に実行されたコマンドラインを参照する」
という暗黙の動作があるからです。
引用元:[小ネタ] mkdir したディレクトリに cd する方法 9 選 +1 (BASH) ※追記あり | Developers.IO
MacにOpenCVをインストール
opencv-pythonは使わない
非公式らしいのでなんかこわいので使わない。
qiita.com
※ 2018年6月28日追記
Windowsはopencv-pythonでインストールしたんだけど
最初から楽してこっち使えばよかった...。
Macもconda使ってたら以下で一発です…(涙
$ conda install -c conda-forge opencv
OpenCVのダウンロード(Mac)
以下のサイトを参考にしながらインストールしていく。
MacユーザーのためのPythonでOpenCVを使うための開発環境 - IMACEL Academy -人工知能・画像解析の技術応用に向けて-|LPixel(エルピクセル)
$ brew update $ brew install pyenv $ pyenv versions # pyenvが入っていることを確認 $ echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.bash_profile $ echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.bash_profile $ echo 'eval "$(pyenv init -)"' >> ~/.bash_profile $ conda list # Anacondaが既にインストールされていたことを確認 $ python Python 3.6.4 |Anaconda, Inc.| (default, Jan 16 2018, 12:04:33) [GCC 4.2.1 Compatible Clang 4.0.1 (tags/RELEASE_401/final)] on darwin Type "help", "copyright", "credits" or "license" for more information. >>> $ conda install -c menpo opencv3 Solving environment: failed UnsatisfiableError: The following specifications were found to be in conflict: - opencv3 - xlwings Use "conda info <package>" to see the dependencies for each package.
\(^o^)/
ぐぐってみると他の人はPythonの3.6系が非対応とかで、2017/8/11段階では以下のようなエラー文が出ているけどそういうわけではない。2018/5/1現在は対応されたのかな?
- opencv -> python 2.7* - python 3.6*
てことで解決策は以下を参考にした。
https://github.com/conda/conda/issues/2448
$ conda install -c conda-forge opencv $ python Python 3.6.4 |Anaconda, Inc.| (default, Jan 16 2018, 12:04:33) [GCC 4.2.1 Compatible Clang 4.0.1 (tags/RELEASE_401/final)] on darwin Type "help", "copyright", "credits" or "license" for more information. >>> import cv2 Traceback (most recent call last): File "<stdin>", line 1, in <module> ImportError: dlopen(/Users/sane/anaconda3/lib/python3.6/site-packages/cv2.cpython-36m-darwin.so, 2): Library not loaded: @rpath/libfreetype.6.dylib Referenced from: /Users/sane/anaconda3/lib/libopencv_freetype.3.4.dylib Reason: Incompatible library version: libopencv_freetype.3.4.dylib requires version 22.0.0 or later, but libfreetype.6.dylib provides version 21.0.0 >>>
んあああ\(^o^)/\(^o^)/
以下を参考にして解決!谢谢!
记录一次使用conda 安装opencv3 - 简书
$ conda uninstall freetype $ conda install -y -c conda-forge opencv $ python Python 3.6.4 |Anaconda, Inc.| (default, Jan 16 2018, 12:04:33) [GCC 4.2.1 Compatible Clang 4.0.1 (tags/RELEASE_401/final)] on darwin Type "help", "copyright", "credits" or "license" for more information. >>> import cv2 >>>
Expoで初めてシュミレータを立ち上げる際に既にWarningが出ている→npm startで大量ERR
ゴールデンウィーク。
キャンプの予定が消え、
ディズニーに行く予定も消え、
暇になってしまった。
ReactNativeやんぞ!
ってことで2400円で買ったった。
www.udemy.com
セクション7の25で詰まった\(^o^)/
iOSアプリの画面が真っ赤っ赤。
結論から言うと、watchmanとflowをHomebrewでインストールしてプロジェクトを再作成すれば解決した(一番下にコマンド有ります。)。
Warningを解決する
よく見たらExpoをインストールしてiOSシュミレーターを立ち上げようと思ったら左下にオレンジ色でissueも出てる。
Warning: You are using npm version 5.6.0. There may be bugs in this version, use it at your own risk. We recommend version latest.
他の人もこの問題ではまってるっぽい。
解決策の一つとしてとして、expをダウングレードする方法があるっぽい。
npm install exp@45.0.2 -g
うまくいかない…。
npm startのエラーを解決する
npm startしてねと言われるのでしてみる(Udemyのチュートリアルではしてなかった)。
$ npm start npm ERR! path /Users/sane/Code/ReactNative/package.json npm ERR! code ENOENT npm ERR! errno -2 npm ERR! syscall open npm ERR! enoent ENOENT: no such file or directory, open '/Users/sane/Code/ReactNative/package.json' npm ERR! enoent This is related to npm not being able to find a file. npm ERR! enoent npm ERR! A complete log of this run can be found in: npm ERR! /Users/sane/.npm/_logs/2018-04-28T14_13_35_297Z-debug.log
取り敢えずぐぐる。
stackoverflow.com
$ npm install -d $ npm start npm ERR! missing script: start npm ERR! A complete log of this run can be found in: npm ERR! /Users/sane/.npm/_logs/2018-04-28T14_18_44_105Z-debug.log
お、jsonは作られたっぽいけど、、、
$ create-react-native-app my-app
のあとcdでmy-appに入ってないわ。。。
はいはい、cdして解決〜と思ったら全然解決してなかった。
そもそもサーバ動いてないってどういうこっちゃ。
$ npm start > Udemy@0.1.0 start /Users/sane/Code/ReactNative/Udemy > react-native-scripts start 23:24:45: Unable to start server See https://git.io/v5vcn for more information, either install watchman or run the following snippet: sudo sysctl -w kern.maxfiles=5242880 sudo sysctl -w kern.maxfilesperproc=524288 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! Udemy@0.1.0 start: `react-native-scripts start` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the Udemy@0.1.0 start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /Users/sane/.npm/_logs/2018-04-28T14_24_46_033Z-debug.log
はぁ…。
取り敢えず言われたとおり以下のサイトに行ってみる。
https://git.io/v5vcn
よくわからん。
【VB.NET】DateTimeで取得した日時が和暦になってファイルが作成されてしまう
DateTimeが和暦を取得している?
エラーログのファイルを「ErrorLog_yyyyMMdd_HHmmss.txt」という形式で出力していたが、急に「ErrorLog_300427_HHmmss.txt」になってしまった。
どうやら2018が和暦の30に変換されたファイルが作成されているっぽい。
以下のようにして、現在日時を取得してファイルを作成している。
Dim dtNow As DateTime = DateTime.Now Dim stNow As String = dtNow.ToString("yyyyMMdd_HHmmss") errorLog = "ErrorLog_" & stNow & ".txt"
解決策
結論からいうとエクスプローラー側の問題。 「更新日時」の列が和暦で表示されているので、ここを西暦に直す。
スタートボタン(Windowsボタン) →コントロールパネル →時計、言語、および地域 →地域と言語 →形式タブ
日本だとyyyyにしているのに和暦で表示されているのは謎。 因みにドロップダウンでggとかを選択すると和暦になるのはわかるんだけど。
ん~しょうがないから形式の国のところを英語(米国)に変更して解決。
そしてこの後もう一度日本にしたら普通に西暦になってるし、ドロップダウンからggが無くなってる!! なんで????
あと、そもそもコントロールパネルなんか開いてないのになんで今まで西暦だった表示形式が和暦に変わったんだ?? Win7だから?
ん~よくわからん。
MacにNode.jsをダウンロードする際に「Warning: Failed to create the file ... curl: (23) Failed writing body (0 != 847)」というエラー
上記サイトを参考にしながらNode.jsをインストールする際にエラー。
$ nodebrew install-binary latest Fetching: https://nodejs.org/dist/v10.0.0/node-v10.0.0-darwin-x64.tar.gz Warning: Failed to create the file Warning: /Users/sane/.nodebrew/src/v10.0.0/node-v10.0.0-darwin-x64.tar.gz: No Warning: such file or directory curl: (23) Failed writing body (0 != 847) download failed: https://nodejs.org/dist/v10.0.0/node-v10.0.0-darwin-x64.tar.gz
ファイルが作れない?
$ mkdir -p ~/.nodebrew/src
ファイルを作ってあげて解決。
インストールの全コマンド。
$ brew install nodebrew $ nodebrew -v // インストールされたかチェック $ mkdir -p ~/.nodebrew/src // 上のエラーを回避 $ nodebrew install-binary latest // 最新版のnode.jsをインストール $ nodebrew list // インストールされているnode.jsを表示 $ nodebrew ls-remote // インストール可能なバージョンを表示 $ nodebrew install-binary 9.6.1 // バージョンを指定してインストールする $ nodebrew use v10.0.0 // 使用するバージョンを設定 $ echo 'export PATH=$PATH:/Users/sane/.nodebrew/current/bin' >> ~/.bashrc // saneのところは各自変更 $ node -v // これはターミナルを再起動した後に実行