今日の目標

スマホをNFCタグにかざしたら「LINE通知が行く」をやってみたの動画 pic.twitter.com/dQU98S0xvB
— ようかん (Yosuke Inoue) (@inoue2002) May 4, 2020

NFCとは

Near Field Communicationの略で、近距離無線通信を意味します。非接触ICチップを使って、かざすだけで通信できる通信規格のことです

きっかけ

あるオフラインの勉強会に参加した時のこと、NFCタグを製造しておられる方から、開発をしてみてとタグを大量にいただいたのが最初。
シールタイプとカードタイプをめちゃくちゃ送ってくださったのに手をつけられていなかったので何かしたかった。
ちなみにAmazonでも買えます。こちら。

構成

NFCタグにかざす→webページのリンクに飛ぶ→ページが読み込まれるとhttpリクエスト→IFTTT→LINE通知

ページが読み込まれた時に処理されるwindow.onloadを利用しました参考ページ

IFTTTの設定

IFFFのcreateページにいきます。
Thisをクリック

検索欄にwebhooksと入力、webhoosをクリック

Receive ~ のウィジェットをクリック

EventName にlineNotifyを記入　Create triggerをクリック

Then にはlineウィジェットを選択

SendMessageをクリック

LineNotifyの公式アカウントが入っているグループを選択する（1:1トークでも可）
通知するメッセージを入力する。
Create action をクリック

完成したらwebhooksのページに行く

右上のドキュメントをクリック

https://maker.ifttt.com/trigger/lineNotify/with/key/xxxxxxxxxをコピーする

htmlファイルを作成し、以下のコードをコピー、完成

ソースコード

index.html


<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <p id="memo"></p>
  </body>
</html>
<script>
  window.onload = function () {
    var memo = document.getElementById("memo");
    var xhr = new XMLHttpRequest();
    xhr.open(
      "GET",
//ここの変更を忘れずに！！
      "<IFTTTのWebhookURLを入れる>"
    );
    xhr.send("");

    memo.textContent = "送信しました！";
  };
</script>
<style>
  p {
    color: blue;
    font-size: 100px;
    text-align: center;
  }
</style>

POSTを利用し、様々なメッセージを反映することも可能みたいなのでこれからも色々やってみます！

iphone勢の皆さんへ

最新のiphoneは標準で搭載されているようですが、過去作には標準機能として使用できないので、サードパーティ製のアプリを起動→NFCタグを読み取るという流れで成功します。

IPhone8でも対応を確認
(サードパーティーのアプリ必要 pic.twitter.com/iU0rNyra2q
— ようかん (Yosuke Inoue) (@inoue2002) May 4, 2020

NFCタグにスマホをかざしてLINE通知してみた