React NativeでNFCタグの書き込みにチャレンジ 【やってみた】

みなさん、こんにちは！先日、テレビ朝日の夕方のニュース番組「スーパーJチャンネル」で弊社の「U-motion」が紹介されました。仕事を中断してテレビの前にスタンバイして放送をみましたが、畜産農家の方が牛を見守る負担を減らすツールとして紹介をしていただき、嬉しいような身が引き締まるような思いをしました。

牛にタグつけAIが体調管理　人工授精にも活用可能

React NativeでNFCタグにサービスのURLを書き込む

さて今回は、U-motion開発部で開発しているスマホ向けアプリケーション「UM Utils」とNFCタグを使ってちょっとした実験をしてみました。

U-motionはブラウザから利用するウェブ・サービスですが、プッシュ通知を使ったアラート・サービスやBluetoothを介したU-motionセンサーの管理のためにiOS/Android向けネイティブ・アプリケーション「UM Utils」を提供しています。

UM UtilsはReact Nativeで開発しているのですが、今回はReact Native向けライブラリ(react-native-nfc-manager)を使ってNFCタグの書き込みにチャレンジしてみました(この記事ではiOSでの開発のみを扱います)。

書き込む内容は、U-motionでお客様が管理する牛さん達の一覧を表示する「牛群リスト」画面のURLです。

U-motionを使うことで1頭1頭の牛の活動履歴や健康の状態をチェックできるのですが、牛が飼われている牛舎は作業のためのトラクターが走っていたりしてなかなか忙しい現場です。いちいちスマホをタップしてブラウザーで画面を開くのは面倒ですね。そこで例えば「牛舎１」の牛のリストを表示するURLをNFCタグに書き込んで牛舎の柱に貼っておけば、スマホをタッチするだけで今いる牛舎にいる牛の情報の一覧画面を開くことができます。

ウェブ・サービスと農業の現場をNFCタグで接続する試み、早速見ていきましょう！

はじめてこのブログを読む方へ: U-motionとは？

U-motionは牛の首につけたセンサーを使って活動内容を記録、AIの力で健康状態を解析して畜産農家さんをサポートするモニタリング・システムです。

U-motion（ユーモーション）| デザミス株式会社 desamis Co.,Ltd.

NFCタグってなに？何ができるの？

NFCはNear Field Communicationの略称ということで、主に近距離での無線通信を行うための国際規格です。

「NFC」とは - スマホに必須の非接触技術、Felicaとの関係も解説

様々な規格やそれによるサービス(Felica、クレジットカード決済など)がありますが、今回はAmazonなどで簡単に入手できる「NFCタグ」を対象にしたデータの書き込みと読み取りを扱っています。

NFCタグには、URL、電話番号、SNSアカウントを保存する定形のフォーマットがあり、端末が対応していればタッチすることで情報に紐付けられたアクションを実行できます。例えば、URLを書き込んだNFCタグにiPhoneやAndroid端末をタッチすると、ブラウザでそのURLを開くことができます。

[スタパ齋藤のApple野郎] iPhoneからNFCタグに何か書き込んで遊ぼう!!!　役立てよう!!!

また最近のiPhoneではNFCタグにiOSの「ショートカット」を連動することで、特定のアプリケーションを起動することもできます。

iPhoneでNFCタグを読み取り、アプリを自動で動かす設定方法（オートメーション）

NFCタグを用意する

今回はサンワサプライの10枚入りNFCタグセットを購入しました。10枚入りで2000円程度します。検索すると、キーホルダー・タイプや安価のものなどいろいろ出てくるので、ご自分の用途にあったものを選ぶと良いでしょう。

MM-NFCT【NFCタグ（10枚入り・ホワイト）】小さなシールが生活を変える。スマートフォンをかざすだけで情報取得できるNFCタグ。小型サイズ、10枚入り。

React Native NFC Managerを導入

ここでようやく開発の話に突入します。今回は、こちらのライブラリを利用しました。

whitedogg13/react-native-nfc-manager

npmパッケージが用意されているので、yarn add と pod installだけでインストールできます(今回はiOSの手順のみの解説です)。

$ yarn add react-native-nfc-manager
$ cd ios
$ pod install

Apple DeveloperサイトとXcodeでNFC ReadingのCapabilitiesを追加

デバイスにアクセスする機能を利用するため、Capabilitiesを変更します。Apple Developerサイトの「Certificates, Identifiers & Profiles」で開発用アプリケーションのBundle Identifierを選択、NFC Tag ReadingをONにします。

XcodeでもCapabilitiesを変更

XcodeでアプリケーションのSigining & Capabilitiesのタブから「Near Field Communication Tag Reading」を追加

Info.plistには「Privacy - NFC Scan Usage Description」を追加して、NFCの利用目的を記載しました。

Reactコンポーネントを追加してURLを書き込み

NFC Managerのコードはほぼサンプルそのままですが、今回はURIを書き込むのでNdef.uriRecordを指定してエンコードしています。

async function initNfc() {
 const supported = await NfcManager.isSupported();
   if (supported) {
     await NfcManager.start();
   }
   return supported;
}

async function writeNdef({type, value}) {
 let result = false;

 try {
   await NfcManager.requestTechnology(NfcTech.Ndef, {
     alertMessage: 'NFCタグにタッチしてください',
   });

   const bytes = Ndef.encodeMessage([Ndef.uriRecord(value)]);

   if (bytes) {
     await NfcManager.ndefHandler
       .writeNdefMessage(bytes);

     if (Platform.OS === 'ios') {
       await NfcManager.setAlertMessageIOS('牛群リストURLをNFCタグに書き込みました');
     }
   }

   result = true;
 } catch (ex) {
   console.warn('NFC writing error', ex);
 }

 NfcManager.cancelTechnologyRequest().catch(() => 0);
 return result;
}

NFC書き込み画面のコード

UM UtilsではUI開発に react-native-paper を使っています。牛群リストの情報を取得するAPIなどは useCowGroups という React Hook でラップされているので、今回のように機能を思いついたらパーツを組み合わせてすぐ実装することができます。

callstack/react-native-paper

//
// 一部コードを簡略化しています
//

import { List } from 'react-native-paper';

export const NFCWriterScreen = () => {
 const { cowGroups } = useCowGroups();
 
 useEffect(() => {
   initNfc();
 }, []);

 const onPressGroup = (id) => {
   writeNdef({
     type: Ndef.RTD_BYTES_URI,
     value: `https://xxxxxxxxxxx/${id}`
   })
 };

 const renderItem = ({item}) => {
   return <List.Item
     title={item.cowGroupName}
     onPress={() => onPressGroup(item.id)}
   />
 }

 return (
   <>
   <FlatList
     data={cowGroups}
     renderItem={renderItem}
     keyExtractor={(item) => String(item.id)}
   />
   </>
 );
};

useCowGroups から牛群(牛を管理するためのグループ)の情報を取得、FlatList を使って牛群の名前を表示しています。それぞれの行は react-native-paper の List.Item コンポーネントでレンダリングされ、タップすると react-native-nfc-manager を使ってNFCタグに牛群のIDを含む、サービスのURLが書き込まれます。

さっそくテスト

牛群一覧から牛群を選択するとNFC書き込みモードが開始、NFCタグにタッチすることで書き込みが完了しました。
ちなみにこのモーダルは、React Native NFC Managerが提供しているものです。少ないコードで一般的なスキャンのUXを構築できて便利ですね。

NFCタグにタッチして書き込んだURLをブラウザで開く

こんどはNFCタグにタッチして書き込んだURLを開いてみます。

iOSがNFCタグのURLフィールドを認識してダイアログを出してきました。このダイアログをタップするとSafariがURLを開きます。

無事、指定した牛群の牛一覧画面が表示されました！

NFCタグにタッチ＆タップだけでURLを開けるのは便利ですね。

まとめ

React Native NFC Managerを使ってNFCタグにURL情報を書き込んでみました。NFCタグを使ってスマホの操作することで、ちょっとした一手間を減らせることが分かりました。今回作ってみた機能は需要を測るためのプロトタイプですが、評判が良ければサービスへの組み込みも検討したいですね。

おまけ: U-motion開発部はテクノロジーで農家さんに貢献したいエンジニアを募集中です！！

この記事を読んでU-motionに興味を持った方は、ぜひこちらからお気軽に問い合わせてください。面接は無しでまずはカジュアル面談から、という方も大歓迎です。

フロントエンド
・React + TypeScriptを使った大規模なアプリケーション開発
・React Nativeを使ったネイティブ・アプリケーション開発

バックエンド
・大量のデータを扱うバックエンド開発(Rails、Python、AWS)

採用情報| デザミス株式会社 desamis Co.,Ltd.