matthew as a q.

競技プログラミングメイン

How to solve the failure with react-native run-android

react-native android

Error Message

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:preparePocketsecReactNativeVectorIconsUnspecifiedLibrary'.
> Could not expand ZIP '${your_application_path}\node_modules\react-native-vector-icons\android\build\outputs\aar\react-native-vector-icons-release.aar'.

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED

Total time: 14.768 secs
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/android-setup.html

Assumption

Spec

State

  • Android Emulator has beed executed.

How to solve

  • execute following:
adb devices

This command finds and shows a list of android devices. In addition, if daemon is not running, this command make it running. The error I experienced is caused by not running daemon. Therefore, this command helps me.

React Nativeをブラウザでデバッグする

react-native debug 環境構築

前提

手順

  • Chromeで以下にアクセス

http://localhost:8081/debugger-ui/

  • Android Emulator上で「Ctrl + m」→ 「Debug JS Remotely」

参考情報

debugger-ui not shown console.log · Issue #15972 · facebook/react-native · GitHub

Debugging · React Native

.jsファイルにJSXを書いても怒られないようにする

JSX react-native eslint

なぜやるか

  • React Nativeでは、.jsxを扱えないため、.jsファイルにJSX記法を書く必要がある（2018/1/3現在）

前提

  • 既に、.eslintrc.jsが存在するものとする（つまり、eslint --initは実行済みであること）

手順

  • .eslintrc.jsを以下のように修正
module.exports = {
    "extends": "airbnb",
    "rules": {
      "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
    }
};

参考記事

eslint-plugin-react/jsx-filename-extension.md at master · yannickcr/eslint-plugin-react · GitHub

Network response timed out.

開発環境 React Native

何の記事？

下記の記事の通り「create-react-native-app」を用いて、React Nativeの開発環境を作成していたところ、タイトルのエラーが発生し、Android端末からアプリの動作確認ができなかったため、その解決策を記載しておくもの。

mae.chab.in

動作環境

- Node: v8.2.1
- NPM: 4.6.1（2017/12/17現在、NPMv5はReact Nativeのサポート対象外で、NPMv5だとcreate-react-native-appコマンドが完了できない）

  • アプリ動作環境：Android 7.0 Galaxy S8
  • 開発環境とアプリ動作環境であるAndroid端末は同じLAN（今回は同一のmobile wifiネットワーク）に繋がっている前提

エラーの発生状況

再現手順

  • 開発環境で以下コマンドを実行(すでにcreate-react-native-appはインストール済みとする。)
  create-react-native-app sample-app
  cd sample-app
  npm start

- 事前にExpoアプリインストール済み
Expo - Google Play の Android アプリ

- エラー画面
f:id:takeknock:20171217181802p:plain

原因と解決策

原因

解決策

  • mobile wifiネットワークで割り振られているローカルipアドレスで起動されるように設定する。
  • 具体的な設定コマンド
set REACT_NATIVE_PACKAGER_HOSTNAME=xxx.xxx.xxx.xxx
  • xxx.xxx.xxx.xxxには、ipconfigコマンドを実行した際に表示される「Wireless LAN adapter Wifi」の「IPv4 アドレス」に表示されているIPアドレスを記載する。

12/2学んだこと

kaggle

Porto Seguroコンペ終了。

calc列の特徴をすべて排除してxgb（discussionに出てたらしい）, one hot encodingをして必要な特徴のみ組み入れるようにする、denoising auto encoderを用いたnormalizeののちにneural netに入力(？。ここはより具体的な処理はわかっていない)といった取り組みを上位陣は行っていたよう。

  • 1st place

https://www.kaggle.com/c/porto-seguro-safe-driver-prediction/discussion/44629

  • 2nd place

https://www.kaggle.com/c/porto-seguro-safe-driver-prediction/discussion/44558

  • 3rd place

https://www.kaggle.com/c/porto-seguro-safe-driver-prediction/discussion/44608

javascript

  • eslint

.jsの静的解析を行える。
npmもしくはyarnでeslintとそれに関連するパッケージを入れる。このままだと「node_modules\.bin\eslint {source.js}」としなければ解析ができないが、Atomで書きながら解析実行するためには以下のパッケージを入れる。

apm install intentions busy-signal linter-ui-default linter linter-eslint

  • webpack, es2015

es2015で記述されたjavascriptをwebpackを用いて現在多くのブラウザで使用できるe5形式に変換する、といった使い方。
package.jsonのscriptsにbuildコマンドとして「node_modules\\.bin\\webpack.cmd」を、startコマンドとして「node_modules\\.bin\\webpack-dev-server.cmd」を追加しておくと便利。

  • editorconfig

プロジェクトフォルダに「.editorconfig」ファイルを用意しておくだけで、対応したeditorに設定を加えられる。
どのエディタを使うにしても設定を共有したいといった場合に便利。
Atomでは、packageとして「editorconfig」を追加すると使用可能。