「Expo」からAndroidエミュレータを使う
前回、「React Native」でスマホ側ネイティブのWebVewを使うことについて書いた。
この時、Androidのエミュレータを使って確認したので、その部分について書く。
「Expo」プロジェクトで下記のコマンドを実行するとローカル環境で「Metro Bundler」が19001番ポートで上がる。
yarn start
内部では、「expo start」コマンドがオプション無しで実行される。
（Expoプロジェクトの「package.json」より）
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
...
ただ立ち上げただけの状態で「Run on Android device/emulator」を実行すると、「Android Device」が無い旨のエラーになる。
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.
今回はエミュレータを使うことにする。
「Android Studio」をダウンロード。
https://developer.android.com/studio/
「3.5.3 for Linux 64-bit」を選択 (ダウンロードサイズは738 MB)
エミュレータはデフォルトで１つ入っている。
% $ANDROID_HOME/emulator/emulator -list-avds Nexus_5X_API_29_x86
エミュレータを立ち上げる。
% $ANDROID_HOME/emulator/emulator -avd Nexus_5X_API_29_x86
これで、ExpoプロジェクトからAndroidエミュレータ経由でアプリケーションの動作確認ができる。
同様に、iOSで確認するには、実機か開発環境が必要。
iOS実機は無いので、エミュレータということになるが、Linuxマシンなので断念。
前回も書いたが、ブラウザで済むなら、あえてネイティブ化する必要もない気がする。
ネイティブでないと実現できないこと・・・センサーや細かい制御部分（性能含む）だろうか。
将来的に、モバイルでもセンサーコントロールがブラウザ経由で出来るようになって、性能も出るようになったら（CPUやメモリの進化）、一層ネイティブの優位性は失われ、「ブラウザでいいじゃん」ということになる。
[Web API（センサー）]
https://developer.mozilla.org/ja/docs/Web/API/Detecting_device_orientation#Browser_compatibility
「React Native」も学習コストはかかるし、Airbnbが「React Native」をやめてネイティブに戻った話もある。
ネイティブをやろうとしても、言語や環境に対する学習コストもかかるし、どれに踏み込むか・・・迷う。
| OS | 開発環境 | 開発言語 |
|---|---|---|
| iOS | XCode | Swift、Objective-C |
| Xamarin | C# | |
| Android | Android Studio | Kotlin、Java、C、Ruby |
「React Native」でWebVewを使う
「React」で作ったWEBサービスをスマホアプリ化してみる。
手書きのカタカナを認識するWEBサービス「カタカナ道場」
「React」のバージョン
react@^16.12.0: version "16.12.0"
Getting Startedの手順にならい、「React Native」をインストールする。
npm install -g expo-cli
「React Native」のバージョンは「0.61.4」
（yarn.lockより）
"react-native@https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz": version "0.61.4"
(package.jsonより)
"dependencies": {
"expo": "~36.0.0",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
},スマホ側のネイティブの「WebView」を呼び出せる「react-native-webview」コンポーネントがあるので、まず、これを使ってみる。
react-native-webview provides a WebView component that renders web content in a native view.
Expoプロジェクトを作り、
expo init AwesomeProject
パッケージを追加する。
expo install react-native-webview
「App.js」を以下のとおり変更。
import * as React from 'react'; import { WebView } from 'react-native-webview'; export default class App extends React.Component { render() { return <WebView source={{ uri: 'https://katakanadojo.tokyo' }} style={{ marginTop: 20 }} />; } }
「Android Emulator」を起動し、expoを実行。
yarn start
シミュレータ上で、WEBページが表示された。
下の画面で、白枠のところはHTMLのcanvasを使っており、マウスイベントとタッチイベントを拾うようにしているのだが、反応しなかった。
ここまで確認していて、「ネイティブ化する必要があるのか？」という疑問が生じたので、一旦はここまでにする。
「stylelint」の基本の使い方
CSS版のLintである「stylelint」を使ってみる。
まず、環境の準備から。
最小限の構成で、試しに使ってみることを想定している。
npmパッケージの準備。
% yarn init -y % yarn add -D stylelint % yarn add -D stylelint-config-standard
「stylelint-config-standard」は基本のルール。
この時点のディレクトリ構成
. ├── node_modules ├── package.json ├── yarn-error.log └── yarn.lock
「.stylelintrc」を作成する。
touch .stylelintrc
「.stylelintrc」に以下の内容を入力する。
{
"extends": "stylelint-config-standard"
}チェックしたいCSSファイル「hello.css」を用意する。
.hello { font-size: 20px; color: #000; padding: 5px; }
ルール違反として引っかかるよう、以下のとおり変更する。
.hello { font-size: 20p; color: #00000; padding: 5px; }
「test_css」ディレクトリを作り、配下に「hello.css」を置く。
ここまでの操作でのディレクトリ構成。
. ├── .stylelintrc ├── node_modules ├── package.json ├── test_css │ └── hello.css ├── yarn-error.log └── yarn.lock
「stylelint」を実行する。
方法1
npx stylelint test_css/*css
出力結果
test_css/hello.css 2:14 ✖ Unexpected unknown unit "p" unit-no-unknown 3:10 ✖ Unexpected invalid hex color "#00000" color-no-invalid-hex 4:5 ✖ Expected indentation of 2 spaces indentation
方法2
「package.json」を編集し、"scripts"のエントリを加える。
{
"name": "stylelint",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"devDependencies": {
"stylelint": "^13.0.0",
"stylelint-config-standard": "^19.0.0"
},
"scripts":{
"stylelint": "stylelint test_css/*css"
}
}実行する。
npm run stylelint
出力結果。
test_css/hello.css 2:14 ✖ Unexpected unknown unit "p" unit-no-unknown 3:10 ✖ Unexpected invalid hex color "#00000" color-no-invalid-hex 4:5 ✖ Expected indentation of 2 spaces indentation npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! stylelint@1.0.0 stylelint: `stylelint test_css/*css` npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the stylelint@1.0.0 stylelint 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! /home/theatermask/.npm/_logs/2020-01-31T12_18_52_918Z-debug.log
"npm ERR!"が出る。
"Exit status 2"の意味は以下のとおり。
2: At least one rule with an "error"-level severity triggered at least one violations.
https://stylelint.io/user-guide/cli#exit-codes
ルール違反があったことを示す。
気になるようなら、「package.json」を以下のとおり変更すればよい。
"scripts":{
"stylelint": "stylelint test_css/*css || echo 'return code: '$?"
}出力はこうなる。
test_css/hello.css 2:14 ✖ Unexpected unknown unit "p" unit-no-unknown 3:10 ✖ Unexpected invalid hex color "#00000" color-no-invalid-hex 4:5 ✖ Expected indentation of 2 spaces indentation return code: 2
