めじなてっく

出先で読みたいがためにナレッジを書き溜めるブログ

ReactNativeで釣りに使えるアプリを作ってみる

普段jQueryでゴリゴリ書かされている書いている僕がReactNativeに挑戦してみました。

環境

手順

まずは開発環境を作っていきます。

スマートフォンにExpoアプリをインストール

ExpoはReact Nativeの開発支援アプリ。
XcodeAndroid Studioを使わずとも開発が出来るとの事。WindowsでもiOSアプリが作れるって事なんですね〜

node.jsをインストール

$ brew install node
$ npm -version
5.5.1

create-react-native-appをnpmでインストールする。

$ npm install -g create-react-native-app
$ create-react-native-app --version
create-react-native-app version: 1.0.0

プロジェクト作成

$ create-react-native-app sample

*******************************************************************************
ERROR: npm 5 is not supported yet
*******************************************************************************

It looks like you're using npm 5 which was recently released.

Create React Native App doesn't work with npm 5 yet, unfortunately. We
recommend using npm 4 or yarn until some bugs are resolved.

You can follow the known issues with npm 5 at:
https://github.com/npm/npm/issues/16991

*******************************************************************************

がっびーん、npm5系に対応してない模様。ということで4系にダウングレードします。

$ npm install -g npm@4
$ npm -version
4.6.1

出来たディレクトリを一旦消して、再トライ

$ rm -rf sample
$ create-react-native-app sample

とりあえずプロジェクトのディレクトリに移動して、アプリを起動してみる。

$ cd sample
$ npm start
18:39:43: 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

うーん、なかなかすんなりいかないぜ。
示されたコマンド叩くか、watchmanを入れると良いらしい。
watchmanはファイルの変更を検知するツールとの事。

$ brew install watchman
$ watchman -version
4.9.0

今度こそ・・・

$ npm start

18:47:00: Starting packager...
Packager started!

To view your app with live reloading, point the Expo app to this QR code.
You'll find the QR scanner on the Projects tab of the app.

# ここにQRコードが表示されている

Or enter this address in the Expo app's search bar:

  exp://192.168.11.5:19000

出てきたQRコードをExpoアプリで読み込むとsampleアプリが立ち上がります。
アプリからiPhone画面に戻すには端末をシェイクしてやればいいようです。

なるほど。これでコードをガリガリ書いたらExpo立ち上げてドヤ顔すればいいってわけですね〜
これで開発出来る土台が出来たので、次回はアプリを作ります。

考えてるのは、魚が釣れた時に写真撮ってついでに気温とか潮位とかも記録してくれるアプリ。
釣りブログ書く時に後々その時の潮位とか調べるのめんどくさいのでw