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 変更した差分のみを転送するため反映されるのが速い。

f:id:saneeeatsu:20180504183853p:plain






これで開発のスタートラインに立った!!

React Nativeの実行環境を整える

インストールするものざっくり一覧

・Node.js
・React Native
Xcode(for iOS)
・Genymotion(for Android)
・Expo


React Nativeをインストール

公式サイト:Getting Started · React Native

$ npm install -g create-react-native-app
$ create-react-native-app AwesomeProject
$ cd AwesomeProject

-gオプションをつけると、グローバルにインストールされる。つまりこのコマンドがどこからでも使えるようになる。
公式ページにはこの後「npm start」と書いてあるが、実行する環境がないので、まず実行環境を整える。
やろうと思えばExpoのアプリをiPhoneAndroidにダウンロードすることも出来るが、実行結果をブラウザで確認出来たりもしてこっちのほうがデバッグは楽。


Xcodeをダウンロード

iOSシュミレータ起動のため。
普通にAppStoreでダウンロードすれば良い。あとは他のWebサイトを参考されたし。


Genymotionをダウンロード

Androidエミュレータ起動のため。

アカウントを作りMac/WindowsのGenymotionをダウンロード
https://www.genymotion.com/download/:title:w500


Applicationフォルダに入れ「Genymotion」をクリック(Genymotion Shellではない丸いアイコンの方)。
実行しようとするとこんなエラーが。Virtual Boxは既に入っているんだけどなぁ…。
f:id:saneeeatsu:20180503200627p:plain:w400
f:id:saneeeatsu:20180503200652p:plain:w400


VirtualBoxを以下から再インストール。
Oracle VM VirtualBox - Downloads | Oracle Technology Network | Oracle

一応Genymotionも1度消して再インストールしてみると無事インストールが出来た!


プラスマークの「Add」ボタンを押してNexus5の最新OSのものをインストール。
Virtual Device NameはデフォルトのままでFinish。
f:id:saneeeatsu:20180503204032p:plain:w700
f:id:saneeeatsu:20180503203549p:plain:w700
選択して「Start」ボタンを押して起動を確認。
f:id:saneeeatsu:20180503204521p:plain:w400


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のアプリから作成したアプリケーションを操作出来るようになる。

f:id:saneeeatsu:20180503210608p:plain:w700


iOSシミュレーターを起動

右の「Device」アイコンを押すか、⌘+iを押してiOSシミュレーターを起動させる。
するとこんなエラーが出て起動出来ない。



f:id:saneeeatsu:20180503232225p:plain:w700

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アプリを削除して一旦シミュレーターを終了。再度立ち上げると、、、

f:id:saneeeatsu:20180503233127p:plain:w700
一度削除すると自動的にExpoアプリを再ダウンロードするので、今までに無かった「Downloading latest version of Expo」というメッセージが流れている。


f:id:saneeeatsu:20180503232708p:plain:w400
正しく立ち上げることが出来たので、Expoアプリが自動的に立ち上がっていることが確認出来る。

f:id:saneeeatsu:20180503233253p:plain:w400

ひゃっほーーーーー!!!
エラー文でぐぐってなんか色々入れちゃったけどこんな単純な方法でなおるんかい!!!!


Androidシミュレーターを起動

f:id:saneeeatsu:20180504172115p:plain:w700

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」をクリック。


f:id:saneeeatsu:20180504172547p:plain:w700

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してもう一度エミュレータを立ち上げる。


Expoを使う上での注意点

Expoは便利だが、使用する上でいくつか注意したい点がある。

・バックグラウンドで位置情報を取得したり、音を鳴らすといったことは出来ない。
Bluetoothを使うことも出来ない(APIについては今後増えていく予定)。
・Expoがプッシュ通知を提供しているが、それ以外を使う場合デタッチをしなくてはいけない。
・同じアプリで開発用、本番用を分けることも出来なくはないが、向いてはいない。

参考:Why not Expo? - Expo Documentation

mkdirとその後のcdを同時に

とあるサイトを見ているときにmkdirとcdを同時に行っていたのでメモ。

方法1

$ mkdir mydir && cd $_

$_bashの特殊変数。ひとつ前に実行したコマンドラインの最後の引数を参照する。


方法2

~/ $ mkdir hoge
~/ $ cd !!$
cd hoge
~/ hoge $ 

!!:直前に実行したコマンドラインを再実行する。
そして、$をつけて最後の引数(hoge)のみを取り出している。


調べてみたら最後は「!$」でも良いらしい。

!!$のかわりに!$でも可能です。
本来 ! と $ のあいだには何か文字(イベント指示子)が必要になるのですが、
「$(ワード指示子)の前にイベント指示子が省略された場合は、直前に実行されたコマンドラインを参照する」
という暗黙の動作があるからです。

引用元:[小ネタ] mkdir したディレクトリに cd する方法 9 選 +1 (BASH) ※追記あり | Developers.IO

MacにOpenCVをインストール

opencv-pythonは使わない

非公式らしいのでなんかこわいので使わない。
qiita.com

※ 2018年6月28日追記
Windowsopencv-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
>>> 

contribパッケージもインストール

OpenCV(Python)で物体認識、特徴抽出(SIFT、SURF、A-KAZEの使い方)
文字の大きさが変わるし、値段の数字が隣の数字と被ってしまうことを考えたらテンプレートマッチングは適切ではないかと思ったので特徴点抽出を調べたら、そのためのライブラリはライセンスフリーではないものを使うらしい。
が、個人利用の場合はお金はとられないので安心。

opencv-pythonは非公式だから、公式の入れ方をしたのに、contribはopencv-contrib-pythonばっか出てくる。。


macのhomebrewでOpenCV 3のopencv_contribをインストールする。 - そこそこ日記

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.

forums.expo.io

他の人もこの問題ではまってるっぽい。
解決策の一つとしてとして、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
よくわからん。

結論:watchmanとflowをインストールしろ

github.com

watchmanが必要っぽい。
以下のQiitaを参考にする。そもそもインストールが推奨されているらしい。
qiita.com

$ brew install watchman
$ brew install flow
$ create-react-native-app my-react-native-app
$ npm start

今までのアプリだとエラーが出るでプロジェクトを再作成する。
無事iOSアプリの方でも立ち上がった。


UdemyではExpoでプロジェクトを作成してたけど、コマンドで作成する方で行こう。

【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とかを選択すると和暦になるのはわかるんだけど。 f:id:saneeeatsu:20180427102714p:plain

ん~しょうがないから形式の国のところを英語(米国)に変更して解決。 f:id:saneeeatsu:20180427102731p:plain

そしてこの後もう一度日本にしたら普通に西暦になってるし、ドロップダウンからggが無くなってる!! なんで????

f:id:saneeeatsu:20180427102738p:plain

あと、そもそもコントロールパネルなんか開いてないのになんで今まで西暦だった表示形式が和暦に変わったんだ?? Win7だから?

ん~よくわからん。

MacにNode.jsをダウンロードする際に「Warning: Failed to create the file ... curl: (23) Failed writing body (0 != 847)」というエラー

qiita.com

上記サイトを参考にしながら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                                     // これはターミナルを再起動した後に実行