React native felicaの紹介

React Native Felicaの紹介
@gogoroya

自己紹介
・Twitter @gogoroya
・所在長野市
・最近やってる事
Node.js、Golang、React、React Native、Kotlin

React Native Felica とは
React Native + Felica
https://github.com/goroya/react-native-felica
React NativeでFelicaを扱うライブラリ(自作)。
※Androidのみサポート。
昨日リリース。現在も開発中。
何ができる？
Felica(ICカード)の読み書き

React Native Felicaをなぜ作った？
・React NativeでKururu解析しようと思った時、
Felicaを扱えるライブラリがなかったから
・JavaScriptでFelicaの解析ロジックを書きたかったから
・Githubスターほしい。とても欲しい。

Felicaとは？
・ソニーが開発した非接触型ICカードの技術方式 (Wikipediaよ
り)
・Suica、ICOCA、KURURU等はFelica方式のICカード
・NFC type-F 通信方式

React Nativeとは
・React.jsでAndroid, iOSのアプリを作れるフレームワーク
・UIがネイティブ(WebViewじゃない)実装
=> パフォーマンスがいい
・ロジックはJavaScript、ネイティブ依存処理はプラットフォーム毎の言語
(Java/Kotlin/Swift/Object-C)で書ける。

React Nativeと類似するフレームワーク
・Cordova, Ionic -- WebViewベース
・NativeScript -- Angular & Nativeベース
・Weex -- Vue.js & Nativeベース
・Flutter -- Dart & Nativeベース (最近話題)
<私見>
React NativeはNativeとの連携コードが上記より書きやすい気がする。

なぜReact Nativeを選んだのか？
・React派だから
・サードのライブラリが豊富
・NativeとJavaScriptとの連携コードが書きやすかったから

React Nativeを使ってみた感想
・コードの変更が即反映(ライブリロード)されるので快適
(Android Studioみたいにビルドで待たされない)
・UIのコーディングが簡単
(AndroidのAPIを知らなくても大丈夫)
・NativeとJSの連携が書きやすい

JSからNative(Android)関数を呼び出す方法(1)
Android側 ※細かいところは省略
Native側(Kotlin)
@ReactMethod
fun connect(promise: Promise) {
try {
if(this.felicaLib != null){
this.felicaLib!!.connect()
promise.resolve(null)
}else{
promise.reject("connect()", Throwable(“Error”))
}
}catch (e: IOException){
promise.reject("connect()", e.message)
}
}

JSからNative(Android)関数を呼び出す方法(2)
JavaScript側
JavaScript側
const { RNFelica } = NativeModules;
(async () => {
RNFelica.connect();
})();

React Native
Felicaの使い方

React Native Felicaのインストール方法
・インストール
npm i -save react-native-felica or yarn add react-native-felica
・Native コードの取り込み
react-native link react-native-felica

React Native Felica が提供するAPI
・AndroidのNfcFクラスのAPIのラッパー
・React Nativeが捕捉可能な
Androidのライフサイクルイベント
・Felica コマンドに対応するメソッド
・SuicaとKururuの解析メソッド

React Native Felica API
Android NfcF APIラッパー (1)
import RNFelica from “react-native-felica”;
(async () => {
// 例) AndroidにNFCが搭載されているかを取得
const nfcHave =await RNFelica.haveNfc();
// 例) AndroidでNFCが有効になっている事を確認
const nfcEnable = await RNFelica.enableNfc();
})();

Android NfcF APIラッパー (2)
例) NFC-TypeFの生コマンドを送信する場合
(async () => {
await RNFelica.connect();
//データ長(先頭)以降の送信データを配列で渡す
const data = await RNFelica.tranceive([0x06, 0,1,2,3,4,5,6,7, 1,0x0f,0x09,0x80,0x01 ]);
await RNFelica.close();
})();

React Nativeが捕捉可能な
Androidのライフサイクルイベント (1)
コード例)
RNFelica.on(RNFelica.EVENT.ANDROID_ON_HOST_RESUME, async () => {
console.log(“Hello ANDROID_ON_HOST_RESUME”);
});
イベント一覧
ANDROID_ON_NEW_INTENT
ANDROID_ON_ACTIVITY_RESULT
ANDROID_ON_HOST_RESUME
ANDROID_ON_HOST_PAUSE
ANDROID_ON_HOST_DESTROY

React Nativeが捕捉可能な
Androidのライフサイクルイベント (2)
<APIの使いどころ>
RNFelica.on(RNFelica.EVENT.ANDROID_ON_HOST_RESUME, async () => {
// 動作中のアプリが優先してFelica検出のイベントを捕捉する処理
await RNFelica.enableForegroundDispatch();
});
RNFelica.on(RNFelica.EVENT.ANDROID_ON_HOST_PAUSE, async () => {
//上記処理による設定の解除
await RNFelica.disableForegroundDispatch();
});

Felica コマンドに対応するメソッド
Felicaの仕様書で規定しているコマンドを関数化。
コマンドについてはFelicaカードユーザーズマニュアル (https://goo.gl/GxFbWN)参照
// Felicaを検出するとイベント(FELICA_DISCOVER)が発生
RNFelica.on(RNFelica.EVENT.FELICA_DISCOVER, async () => {
const polling = await RNFelica.polling(0xFFFF, 0x00, 0);
const polling = await RNFelica.requestService(0xFFFF, [0x01]);
const polling = await RNFelica.requestResponse([0,1,2,3,4,5,6,7]);
const polling = await RNFelica.readWithoutEncryption([0,1,2,3,4,5,6,7], [0], [1]);
const polling = await RNFelica.writeWithoutEncryption([0,1,2,3,4,5,6,7], [0], [0], [0]);
const polling = await RNFelica.searchService([0,1,2,3,4,5,6,7], 0);
const polling = await RNFelica.requestSystemCode([0,1,2,3,4,5,6,7]);
});

FelicaとKururuの解析メソッド
API使用方法のサンプル実装。
KururuとSuicaの解析ロジックを実装。
RNFelica.on(RNFelica.EVENT.FELICA_DISCOVER, async () => {
const result= await RNFelica.analyze();
});

React Native
FelicaでKururuを
解析するために
やったこと

1.とりあえずKururuをダンプしてみる
FilicaAnalyzer(Windows用)を使ってみてKururuをダンプしてみる。
※http://buttaiya.com/Shop/felica/FelicaAnalyzer.htm

2.履歴らしきところにあたりをつける
ここ(ｻｰﾋﾞｽｺｰﾄﾞ0x000F)
に履歴が入っているっぽい

3.Kururuのデータフォーマットを調べる
解析してくれた人がいた
https://blog.atgw.jp/archives/2624

4.バス停留所コードを調べる
停留所コードを公開してくれている方がいた。
http://mackiee.cocolog-nifty.com/re_nagano/2017/12/kur
uru-b21f.html

5 React Native Felicaでデータを読み出す
RNFelica.on(RNFelica.EVENT.FELICA_DISCOVER, async (event) => {
for (let i = 0; i < 10; i++) {
const data= await RNFelica.readWithoutEncryption(
event.idm,
[ 0x000F ], // サービスコード
[RNFelica.makeBlockElement(0, 0, i)] // ブロック番号0～9を指定
);
console.log(data)
}
});

デモのコード
https://github.com/goroya/react-native-felic
a/tree/master/packages/RNFelicaExample

React Nativeライブラリ
を作るのに便利だった
ツール

React Native Libraryを作るのに便利だったツール(1)
react-native-create-library
ライブラリ作成の雛形を作ってくれる
https://github.com/frostney/react-native-cre
ate-library

Lerna
・monorepo用ツール
・babelで採用されてる
・単一のリポジトリで複数のパッケージ(NPM)を管理できる
・ライブラリとExampleを別々のパッケージで管理するため
に使ってる

RubyMine(IntelliJ)
・React Nativeをサポートしてる
・JSdocによる補完が効く

ESDoc
https://esdoc.org/
コード・ドキュメント生成ツール
ES6に対応している
RXJSとかに採用されてる

今後の計画
・ユニットテスト(Jest)書く
・API ドキュメント書く
・リファクタリング(主にJSの部分)
・型定義ファイル作成(TypeScript)
・Android Native処理の非同期化(Asynctask)
・iOS対応(iOSがFelica関連のAPIを開放したら)

最後に
開発のモチベーション維持の為、
Githubスター、issueください。
お願いします。

React native felicaの紹介

More Related Content

What's hot (20)

Similar to React native felicaの紹介 (18)

React native felicaの紹介