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

この記事は下記の [#GWアドベントカレンダー](https://gw-advent.9wick.com/calendars/2020/87) の 6日目の記事になります。

すごくなりたいがくせいぐるーぷ( @inoue2002  ） | GWアドベントカレンダー

#今日の目標

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">スマホをNFCタグにかざしたら「LINE通知が行く」をやってみたの動画 <a href="https://t.co/dQU98S0xvB">pic.twitter.com/dQU98S0xvB</a></p>&mdash; ようかん (Yosuke Inoue) (@inoue2002) <a href="https://twitter.com/inoue2002/status/1257225373550473222?ref_src=twsrc%5Etfw">May 4, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


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

#きっかけ
あるオフラインの勉強会に参加した時のこと、NFCタグを製造しておられる方から、開発をしてみてとタグを大量にいただいたのが最初。
シールタイプとカードタイプをめちゃくちゃ送ってくださったのに手をつけられていなかったので何かしたかった。
ちなみにAmazonでも買えます。[こちら](https://www.amazon.co.jp/s?k=nfc&__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&ref=nb_sb_noss_2)。

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

ページが読み込まれた時に処理される`window.onload`を利用しました[参考ページ](https://developer.mozilla.org/ja/docs/Web/API/GlobalEventHandlers/onload)


#IFTTTの設定
[IFFFのcreateページ](https://ifttt.com/create)にいきます。
Thisをクリック
![スクリーンショット 2020-05-04 19.54.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/cc55b3b9-1262-6821-1558-915e2a2cd7d6.png)
検索欄に`webhooks`と入力、webhoosをクリック

![スクリーンショット 2020-05-04 19.54.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/1fc9108a-f643-c259-eac7-58c25e3f72d5.png)
Receive ~ のウィジェットをクリック

![スクリーンショット 2020-05-04 19.54.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/984e5162-de2e-45e8-80e4-1c99158c404a.png)
EventName に`lineNotify`を記入　Create triggerをクリック

![スクリーンショット 2020-05-04 19.55.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/e086d8f7-9640-4f49-cd3c-486cedda59c3.png)

Then にはlineウィジェットを選択
![スクリーンショット 2020-05-04 19.55.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/3ca83192-2999-f285-661b-80d64ceee70b.png)
SendMessageをクリック

![スクリーンショット 2020-05-04 19.55.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/e9970128-bced-4915-e8a7-90d10c37da8c.png)
LineNotifyの公式アカウントが入っているグループを選択する（1:1トークでも可）
通知するメッセージを入力する。
Create action をクリック

![スクリーンショット 2020-05-04 19.55.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/c9e2ce9e-4ed4-46ec-9f0a-aee80146bc7a.png)
完成したら[webhooksのページ](https://ifttt.com/maker_webhooks)に行く
![スクリーンショット 2020-05-04 19.56.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/93936904-d959-865e-7c66-f458ab5b5552.png)

右上のドキュメントをクリック
![スクリーンショット 2020-05-04 19.56.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/49a16bc9-2a9e-828e-b18b-f8c69d136e2b.png)

`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タグを読み取るという流れで成功します。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">IPhone8でも対応を確認<br>(サードパーティーのアプリ必要 <a href="https://t.co/iU0rNyra2q">pic.twitter.com/iU0rNyra2q</a></p>&mdash; ようかん (Yosuke Inoue) (@inoue2002) <a href="https://twitter.com/inoue2002/status/1257227138727477248?ref_src=twsrc%5Etfw">May 4, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>