Download as PDF, PPTX
![React Native Felica API
Android NfcF APIラッパー (2)
例) NFC-TypeFの生コマンドを送信する場合
import RNFelica from “react-native-felica”;
(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();
})();](https://image.slidesharecdn.com/reactnativefelica-180216165504/75/React-native-felica-19-2048.jpg)
![React Native Felica API
Felica コマンドに対応するメソッド
Felicaの仕様書で規定しているコマンドを関数化。
コマンドについてはFelicaカードユーザーズマニュアル (https://goo.gl/GxFbWN)参照
import RNFelica from “react-native-felica”;
// Felicaを検出するとイベント(FELICA_DISCOVER)が発生
RNFelica.on(RNFelica.EVENT.FELICA_DISCOVER, async () => {
await RNFelica.connect();
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]);
await RNFelica.close();
});](https://image.slidesharecdn.com/reactnativefelica-180216165504/75/React-native-felica-22-2048.jpg)
![5 React Native Felicaでデータを読み出す
import RNFelica from “react-native-felica”;
RNFelica.on(RNFelica.EVENT.FELICA_DISCOVER, async (event) => {
await RNFelica.connect();
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)
}
await RNFelica.close();
});](https://image.slidesharecdn.com/reactnativefelica-180216165504/75/React-native-felica-29-2048.jpg)
React native felicaの紹介
- 1.
- 2.
- 3.
- 4. React Native Felicaとは React Native + Felica https://github.com/goroya/react-native-felica React NativeでFelicaを扱うライブラリ(自作)。 ※Androidのみサポート。 昨日リリース。現在も開発中。 何ができる？ Felica(ICカード)の読み書き
- 5. React Native Felicaをなぜ作った？ ・ReactNativeでKururu解析しようと思った時、 Felicaを扱えるライブラリがなかったから ・JavaScriptでFelicaの解析ロジックを書きたかったから ・Githubスターほしい。とても欲しい。 https://github.com/goroya/react-native-felica
- 6.
- 7.
- 8.
- 9. React Nativeとは ・React.jsでAndroid, iOSのアプリを作れるフレームワーク ・UIがネイティブ(WebViewじゃない)実装 =>パフォーマンスがいい ・ロジックはJavaScript、ネイティブ依存処理はプラットフォーム毎の言語 (Java/Kotlin/Swift/Object-C)で書ける。
- 10. React Nativeと類似するフレームワーク ・Cordova, Ionic-- WebViewベース ・NativeScript -- Angular & Nativeベース ・Weex -- Vue.js & Nativeベース ・Flutter -- Dart & Nativeベース (最近話題) <私見> React NativeはNativeとの連携コードが上記より書きやすい気がする。
- 11.
- 12.
- 13. 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) } }
- 14. JSからNative(Android)関数を呼び出す方法(2) JavaScript側 JavaScript側 const { RNFelica} = NativeModules; (async () => { RNFelica.connect(); })();
- 15.
- 16. React Native Felicaのインストール方法 ・インストール npmi -save react-native-felica or yarn add react-native-felica ・Native コードの取り込み react-native link react-native-felica
- 17. React Native Felicaが提供するAPI ・AndroidのNfcFクラスのAPIのラッパー ・React Nativeが捕捉可能な Androidのライフサイクルイベント ・Felica コマンドに対応するメソッド ・SuicaとKururuの解析メソッド
- 18. React Native FelicaAPI 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(); })();
- 19. React Native FelicaAPI Android NfcF APIラッパー (2) 例) NFC-TypeFの生コマンドを送信する場合 import RNFelica from “react-native-felica”; (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(); })();
- 20. React Native FelicaAPI 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
- 21. React Native FelicaAPI 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(); });
- 22. React Native FelicaAPI Felica コマンドに対応するメソッド Felicaの仕様書で規定しているコマンドを関数化。 コマンドについてはFelicaカードユーザーズマニュアル (https://goo.gl/GxFbWN)参照 import RNFelica from “react-native-felica”; // Felicaを検出するとイベント(FELICA_DISCOVER)が発生 RNFelica.on(RNFelica.EVENT.FELICA_DISCOVER, async () => { await RNFelica.connect(); 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]); await RNFelica.close(); });
- 23. React Native FelicaAPI FelicaとKururuの解析メソッド API使用方法のサンプル実装。 KururuとSuicaの解析ロジックを実装。 RNFelica.on(RNFelica.EVENT.FELICA_DISCOVER, async () => { await RNFelica.connect(); const result= await RNFelica.analyze(); await RNFelica.close(); });
- 24.
- 25.
- 26.
- 27.
- 28.
- 29. 5 React NativeFelicaでデータを読み出す import RNFelica from “react-native-felica”; RNFelica.on(RNFelica.EVENT.FELICA_DISCOVER, async (event) => { await RNFelica.connect(); 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) } await RNFelica.close(); });
- 30.
- 31.
- 32.
- 33.
- 34.
- 35. React Native Libraryを作るのに便利だったツール(3) RubyMine(IntelliJ) ・ReactNativeをサポートしてる ・JSdocによる補完が効く
- 36.
- 37.
- 38.
- 39.