JavaScript NFC入門！使い方・カスタマイズ方法10選

はじめに
●JavaScriptとNFCの基本
- ○NFCの仕組み
- ○JavaScriptでNFCを扱う方法
●使い方・カスタマイズ方法10選
●注意点と対処法
まとめ

はじめに

この記事を読めば、JavaScriptでNFCを使いこなせるようになります！

NFCはスマートフォンや電子決済でよく使われる技術ですが、JavaScriptを使ってNFCを操作することも可能です。

この記事では、JavaScriptでNFCを扱う基本から、実践的な使い方やカスタマイズ方法まで、初心者にも分かりやすく徹底解説しています。

各使い方にはサンプルコードも付いているので、すぐに試すことができます。

●JavaScriptとNFCの基本

○NFCの仕組み

NFC（Near Field Communication）は、近距離無線通信技術の一つで、通信距離が数センチメートル以内に限定されています。

スマートフォンやタブレット、NFCタグなどのデバイスで簡単にデータ交換ができるのが特徴です。

NFCは主に3つのモードがあります。

リーダー/ライターモードでは、NFCタグの読み取りや書き込みができます。

P2P（Peer-to-Peer）モードでは、2台のNFC対応デバイス間でデータをやり取りします。

カードエミュレーションモードでは、スマートフォンがNFCカードとして機能します。

○JavaScriptでNFCを扱う方法

Web NFC APIを使って、JavaScriptでNFCを扱うことができます。

Web NFC APIは、ウェブアプリケーションがNFCタグやデバイスと通信できるようにするAPIです。

ただし、Web NFC APIはまだ実験的な機能であり、すべてのブラウザやプラットフォームでサポートされているわけではありません。

現在、Google Chromeの一部バージョンでのみ利用可能です。

そのため、利用前にブラウザの対応状況を確認しましょう。

●使い方・カスタマイズ方法10選

ここでは、JavaScriptでNFCを使うための具体的な方法とサンプルコードを紹介します。

○サンプルコード1：NFCタグを読み取る

JavaScriptでNFCタグを読み取るには、下記のようなコードを書きます。

// NFCリーダーを準備する
if ('NDEFReader' in window) {
  const ndefReader = new NDEFReader();
  try {
    // NFCリーダーを開始する
    await ndefReader.scan();
    console.log("NFCリーダーが起動しました");

    // NFCタグが読み取られたときの処理
    ndefReader.onreading = (event) => {
      const message = event.message;
      for (const record of message.records) {
        console.log("NFCタグを読み取りました：", record);
      }
    };
  } catch (error) {
    console.error("NFCリーダーの起動に失敗しました：", error);
  }
} else {
  console.error("このブラウザではNFCをサポートしていません");
}

このコードでは、まずNDEFReaderオブジェクトを作成して、scan()メソッドでNFCリーダーを開始しています。

そして、読み取ったタグに対して、onreadingイベントリスナーを設定し、タグの読み取りが成功した際に実行される処理を記述しています。

タグが読み取られると、その内容がmessage.recordsに格納されます。

この例では、forループを使って、タグに含まれる各レコードをコンソールに出力しています。

○サンプルコード2：NFCタグにデータを書き込む

NFCタグにデータを書き込むには、下記のようなコードを記述します。

// データを書き込むNFCタグの準備
if ('NDEFWriter' in window) {
  const ndefWriter = new NDEFWriter();
  const message = {
    records: [{ recordType: "text", data: "こんにちは、NFC!" }]
  };

  try {
    // NFCタグにデータを書き込む
    await ndefWriter.write(message);
    console.log("NFCタグにデータを書き込みました");
  } catch (error) {
    console.error("NFCタグへのデータ書き込みに失敗しました：", error);
  }
} else {
  console.error("このブラウザではNFCをサポートしていません");
}

このコードでは、NDEFWriterオブジェクトを作成し、messageオブジェクトに書き込むデータを定義しています。

write()メソッドを使って、NFCタグにデータを書き込んでいます。

○サンプルコード3：NFCタグのロックとアンロック

NFCタグのロックやアンロックは、下記のように実行できます。

// NFCタグのロックとアンロックの処理
async function lockUnlockTag(ndefWriter, lock) {
  try {
    // NFCタグのロックまたはアンロック
    await ndefWriter.write({
      records: [{ recordType: "empty" }],
      overwrite: !lock
    });
    console.log(`NFCタグが${lock ? "ロック" : "アンロック"}されました`);
  } catch (error) {
    console.error(`NFCタグの${lock ? "ロック" : "アンロック"}に失敗しました：`, error);
  }
}

この関数では、ndefWriterオブジェクトを引数に受け取り、lockパラメータがtrueの場合はタグをロックし、falseの場合はタグをアンロックします。

タグのロックやアンロックは、write()メソッドのoverwriteオプションを使って制御されます。

○サンプルコード4：NFCタグの情報を取得する

NFCタグの情報を取得するには、下記のようなコードを記述します。

// NFCタグの情報を取得する
async function readTagInfo(ndefReader) {
  try {
    // NFCタグの読み取りを開始する
    await ndefReader.scan();

    // タグの情報を読み取った際の処理
    ndefReader.onreading = (event) => {
      console.log("タグ情報：", event.serialNumber);
      console.log("NDEFメッセージ：", event.message);
    };
  } catch (error) {
    console.error("NFCタグの情報取得に失敗しました：", error);
  }
}

この関数では、ndefReaderオブジェクトを引数に受け取り、scan()メソッドを使ってNFCタグの読み取りを開始します。

onreadingイベントリスナーを設定し、タグの情報が読み取られた際に実行される処理を記述しています。

タグの情報はevent.serialNumberで取得でき、NDEFメッセージはevent.messageで取得できます。

○サンプルコード5：ペアリングを実現する

NFCを使ってデバイス同士のペアリングを実現するには、下記のようなコードを記述します。

// デバイスペアリングを実現する
async function performPairing() {
  // ここでは、仮想的なデバイスペアリング情報を定義しています
  const pairingInfo = {
    records: [{ recordType: "text", data: "デバイスペアリング情報" }]
  };

  if ('NDEFWriter' in window) {
    const ndefWriter = new NDEFWriter();

    try {
      // NFCタグにペアリング情報を書き込む
      await ndefWriter.write(pairingInfo);
      console.log("デバイスペアリング情報が書き込まれました");
    } catch (error) {
      console.error("デバイスペアリング情報の書き込みに失敗しました：", error);
    }
  } else {
    console.error("このブラウザではNFCをサポートしていません");
  }

○サンプルコード6：NFCタグに特定のMIMEタイプのデータを書き込む

下記のサンプルコードは、NFCタグに特定のMIMEタイプ（この例では、テキストデータ）のデータを書き込む方法を示しています。

// MIMEタイプのデータを書き込む
async function writeMimeTypeData() {
  if ('NDEFWriter' in window) {
    const ndefWriter = new NDEFWriter();

    try {
      const mimeTypeData = {
        records: [
          {
            recordType: "mime",
            mediaType: "text/plain",
            data: "こんにちは、NFC！"
          }
        ]
      };
      
      // NFCタグにデータを書き込む
      await ndefWriter.write(mimeTypeData);
      console.log("NFCタグにMIMEタイプのデータを書き込みました");
    } catch (error) {
      console.error("NFCタグへの書き込みに失敗しました：", error);
    }
  } else {
    console.error("このブラウザではNFCをサポートしていません");
  }
}

○サンプルコード7：NFCタグから特定のMIMEタイプのデータを読み取る

下記のサンプルコードは、NFCタグから特定のMIMEタイプ（この例では、テキストデータ）のデータを読み取る方法を示しています。

// MIMEタイプのデータを読み取る
async function readMimeTypeData() {
  if ('NDEFReader' in window) {
    const ndefReader = new NDEFReader();

    try {
      // NFCタグの読み取りを開始する
      await ndefReader.scan();

      // タグの情報を読み取った際の処理
      ndefReader.onreading = (event) => {
        const mimeTypeRecord = event.message.records.find(record => record.recordType === 'mime');
        if (mimeTypeRecord) {
          console.log("NFCタグからMIMEタイプのデータを読み取りました：", mimeTypeRecord.data);
        } else {
          console.log("NFCタグにMIMEタイプのデータが見つかりませんでした");
        }
      };
    } catch (error) {
      console.error("NFCタグの読み取りに失敗しました：", error);
    }
  } else {
    console.error("このブラウザではNFCをサポートしていません");
  }
}

○サンプルコード8：NFCイベントの監視

下記のサンプルコードは、NFCタグが読み取られたときのイベントを監視する方法を示しています。

// NFCイベントの監視
async function monitorNFCEvents() {
  if ('NDEFReader' in window) {
    const ndefReader = new NDEFReader();

    try {
      // NFCタグの読み取りを開始する
      await ndefReader.scan();

      // タグが読み取られた際の処理
      ndefReader.onreading = (event) => {
        console.log("NFCタグが読み取られました", event);
        // ここでイベントに応じた処理を行う
      };

      // 読み取り中にエラーが発生した際の処理
      ndefReader.onerror = (error) => {
        console.error("NFCタグの読み取り中にエラーが発生しました：", error);
      };
    } catch (error) {
      console.error("NFCタグの読み取りに失敗しました：", error);
    }
  } else {
    console.error("このブラウザではNFCをサポートしていません");
  }
}

○サンプルコード9：NFCデバイスの利用可能／利用不可イベントの監視

下記のサンプルコードは、NFCデバイスが利用可能になったときや利用できなくなったときのイベントを監視する方法を示しています。

// NFCデバイスの利用可能／利用不可イベントを監視する
function monitorNFCDeviceAvailability() {
  if ('NDEFReader' in window) {
    const ndefReader = new NDEFReader();

    // NFCデバイスが利用可能になったときのイベントを監視
    ndefReader.onreading = () => {
      console.log("NFCデバイスが利用可能になりました");
      // ここでデバイス利用可能時の処理を行う
    };

    // NFCデバイスが利用できなくなったときのイベントを監視
    ndefReader.onerror = () => {
      console.log("NFCデバイスが利用できなくなりました");
      // ここでデバイス利用不可時の処理を行う
    };
  } else {
    console.error("このブラウザではNFCをサポートしていません");
  }
}

○サンプルコード10：NDEFメッセージのカスタマイズ

下記のサンプルコードは、NDEFメッセージに複数のレコードを含めてカスタマイズする方法を示しています。

// カスタマイズされたNDEFメッセージを書き込む
async function writeCustomNDEFMessage() {
  if ('NDEFWriter' in window) {
    const ndefWriter = new NDEFWriter();

    try {
      const customMessage = {
        records: [
          {
            recordType: "text",
            data: "こんにちは、NFC！"
          },
          {
            recordType: "url",
            data: "https://example.com"
          }
        ]
      };

      // NFCタグにカスタマイズされたNDEFメッセージを書き込む
      await ndefWriter.write(customMessage);
      console.log("NFCタグにカスタマイズされたNDEFメッセージを書き込みました");
    } catch (error) {
      console.error("NFCタグへの書き込みに失敗しました：", error);
    }
  } else {
    console.error("このブラウザではNFCをサポートしていません");
  }
}

●注意点と対処法

Web NFC APIは、現在Google Chromeの一部のバージョンでのみサポートされています。
そのため、異なるブラウザやバージョンでの互換性がない場合があります。
対処法として、ユーザーに適切なブラウザとバージョンを使用するよう案内することが重要です。
NFCタグの読み取りや書き込み時に、タグが十分に近づけられていない場合や、他の電子機器からの干渉がある場合があります。
対処法として、ユーザーにタグとデバイスを適切な距離に保つよう指示し、干渉の可能性がある他の電子機器から離れるよう案内することが重要です。
NFCタグによっては、一度書き込んだデータを上書きできないものや、特定のフォーマットでしかデータを保存できないものがあります。
対処法として、タグの仕様を事前に確認し、適切なタグを選択することが重要です。
Web NFC APIを使用するには、HTTPS接続が必要です。
HTTP接続では、Web NFC APIは利用できません。
対処法として、適切なSSL証明書を取得し、ウェブサイトをHTTPSに移行することが重要です。