はじめに

こんにちは、ssakitaです！

先日、勉強会やイベントで名刺代わりに使える 電子名刺 を作りました。
スマホをNFCタグにかざすと、自分のプロフィールページがパッと開くやつです。

「作りたいけど大がかりなのはちょっと…」と思っていたのですが、
中身は 静的なHTML 1ファイル で、公開は S3 + CloudFront だけ。想像よりずっと手軽にできました。
せっかくなので、作り方と工夫したところをまとめてみます。

同じように「イベントで配れる電子名刺がほしい」という方の参考になれば嬉しいです！

目次

やること
完成イメージ
用語のおさらい（NFC / 静的サイト / OAC）
構成
構築手順
工夫したところ
コストの話
おわりに

やること

スマホでNFCタグにかざすと開く、自分専用のプロフィールページを作る
ページはHTML/CSS/JSの静的サイト（サーバーレス）
AWS（S3 + CloudFront）でHTTPS公開する
発行したURLをNFCタグに書き込む

ポイントは、NFCタグに入れるのは「URL」だけ ということです。
名刺データそのものをタグに入れるわけではなく、タグはあくまで「ページを開くための入口」になります。

完成イメージ

初期画面

深海モード（ブラックモード）

トップに自分のアイコン（今回はイカ🦑）
所属コミュニティ（JAWS-UG富山）や肩書きのタグ
会社名・部署
取得したAWS認定バッジをずらっと表示
X / Qiita / Zenn などへのリンク
深海モード（ブラックモード）への切り替えを出来るように

用語のおさらい

技術記事なので、念のため用語を軽くおさらいします。知ってる方は読み飛ばしてください！

NFCとは？

NFC（Near Field Communication） は、数cmの近距離で通信する仕組みです。
交通系ICカードやスマホのタッチ決済でおなじみですね。
今回はNFCタグ（シールやカード型のもの）に URLを1件だけ書き込み、
スマホをかざすとそのURLがブラウザで開くようにします。

静的サイトとは？

中身が固定のHTML/CSS/JSだけで完結し、サーバー側の処理が不要 なサイトのことです。
今回の電子名刺は表示するだけなので、まさに静的サイト向き。
サーバーを立てないので、低コスト・低運用で公開できます。

OAC（Origin Access Control）とは？

S3バケットを公開せず、CloudFrontからのアクセスだけを許可する仕組みです。
昔よく使われていたOAIの後継で、今はこちらが推奨。
「バケットは非公開のまま、配信はCloudFront経由だけ」という安全な構成にできます。

構成

シンプルにこれだけです。

[スマホ] --かざす--> [NFCタグ(URL)]
                         |
                         v
                   [CloudFront] --(HTTPS/CDN)--> [S3バケット(非公開)]
                         ^                            ^
                         |----------- OAC ------------|

S3：HTMLファイルの置き場（オリジン）。OACで非公開のまま。
CloudFront：HTTPS化＋CDN配信。NFCから開くのでHTTPSにしておきたい。
NFCタグ：CloudFrontのURLを書き込むだけ。

構築手順

① 電子名刺のHTMLを作る

まずは表示するページを作ります。今回は 1ファイル完結 にこだわりました。
アイコンやAWS認定バッジの画像は、外部ファイルにせず Base64でHTMLに埋め込み。
こうすると「このファイル1つをアップするだけ」で公開できて、管理がとても楽です。

やったことのメモ：

レイアウトはスマホ最優先（NFCから開くのはほぼスマホなので）
アイコン・名前・タグ・所属・AWS認定バッジ・SNSリンクを縦に配置
画像はすべてBase64でインライン化

作りたい画面の概要をAIに伝えるだけで、大枠は完成しました。

② S3バケットにアップロードする

HTMLができたら、S3バケットを作ってファイルを置きます。
CloudFront経由で配信するので、index.html にしておくと入口として扱いやすいです。

このあとCloudFront + OACをつなぐので、バケットは公開しなくてOK です。

③ CloudFront + OAC でHTTPS配信する

S3単体の「静的ウェブサイトホスティング」でも公開はできますが、
その場合エンドポイントが HTTP になります。
スマホでNFCから開くページなので、前段にCloudFrontを置いて HTTPS化 しました。

オリジン：さっきのS3バケット
Origin access：OAC を作成してアタッチ
デフォルトルートオブジェクト：index.html

④ NFCタグにURLを書き込む

最後に、発行されたCloudFrontのURLをNFCタグに書き込みます。
今回はこの「NFC Tools」というアプリを使いました。
URLレコード（URI）としてHTTPSのURLを書き込むだけなので、数タップで完了です。
URL1件ならどんなNFCタグでも容量は十分でした。

これで、タグにスマホをかざすと電子名刺が開くようになります！

工夫したところ

せっかく富山のエンジニアなので、ちょっとだけ遊びを入れました。

アイコンはイカ🦑：富山といえばホタルイカ、ということで。背景にも薄くイカを散らしています
深海モード：画面のボタンを押すと背景が深海っぽく暗くなり、背景のイカがホタルイカのように光ります✨
AWS認定バッジを一覧表示：取得済みの認定バッジを並べました。「AWSお勉強中」の可視化です
リンクはサービス別カラー：X・Qiita・Zennなどのアイコンを各サービスの色にして、パッと見で分かるように
QRコード表示ボタン：NFC非対応の相手にも、画面のQRを見せて読んでもらえるようにしました（ページ自身のURLから自動生成）

コストの話

静的な1ファイル＋名刺用途くらいのアクセスなら、ほぼ無料 の範囲でした。

S3：数百KBのファイル1つなので、保管・リクエストとも誤差レベル
CloudFront：毎月1TB＋1,000万リクエストの無料枠があるので、まず収まる
S3 → CloudFront間の転送は無料

「個人で遊ぶには厳しい」みたいな心配はいらず、気軽に試せるのが良かったです。

おわりに

今回は、NFCでピッと渡せる電子名刺を HTML1ファイル + S3 + CloudFront で作ってみました。

中身は静的サイトなので低コスト・低運用
CloudFront + OACで安全にHTTPS配信
NFCタグにはURLを書き込むだけ

思っていたよりずっと手軽にできて、AWSの静的サイト配信の練習にもちょうど良かったです。
イベントで「これ名刺です」ってスマホをかざしてもらうの、地味に楽しいのでおすすめです！

同じように電子名刺を作ってみたい人の参考になれば嬉しいです。
ここまで読んでいただき、ありがとうございました！