💳
WebNFCでNFC読み書きWebアプリを作った話
はじめに
ブラウザのAPI WebNFC を使ってNFCを読み書きできるアプリを作った話の記事です。
NFCとは？
NFC（Near Field Communication）とは「近距離無線通信」を意味する技術・規格で、非接触ICチップを使ってかざすだけで通信できる通信規格です。
おサイフ機能付きのスマートフォンや、Suica、PASMOなどの交通系IC、家電、交通機関で使用する IC カードなど、幅広い機器で活用されています。
それの読み書きをブラウザでする技術がWebNFCです。
開発したアプリについて
リンクは以下になります。
アプリ：https://illionillion.github.io/react-read-nfc-app/read
リポジトリ：https://github.com/illionillion/react-read-nfc-app
書き込み機能
読み込み機能
- テキスト
- URL
- JSON
でのデータの読み書きが可能ですが、Android端末での一部のブラウザでしか動作しません。
使用技術
- React
- TypeScript
- Chakra UI
- GitHub Actions
- PWA
実装のメイン部分
Reactで書いているので見た目は大分違いますが、読み書きの部分はここなどを参考にしました。
まとめ
- ブラウザでNFCの読み書きができる（テキスト・URL・JSONなど）
- 画像などのバイナリはbase64に変換してもNFCの容量的に書き込み不可
- 使える端末やブラウザに制限がある
- 交通系ICなどは対応しておらず、あくまで市販のNFCのみ対応
- 開発環境で
https://が使える環境でないといけない（今回はViteでSSL化） - 実際にNFCを操作するならネイティブアプリで実装した方が良い
Discussion