はじめに
こんにちは、ssakitaです！
先日、勉強会やイベントで名刺代わりに使える 電子名刺 を作りました。
スマホをNFCタグにかざすと、自分のプロフィールページがパッと開くやつです。
「作りたいけど大がかりなのはちょっと…」と思っていたのですが、
中身は 静的なHTML 1ファイル で、公開は S3 + CloudFront だけ。想像よりずっと手軽にできました。
せっかくなので、作り方と工夫したところをまとめてみます。
同じように「イベントで配れる電子名刺がほしい」という方の参考になれば嬉しいです！
目次
やること
- スマホで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の静的サイト配信の練習にもちょうど良かったです。
イベントで「これ名刺です」ってスマホをかざしてもらうの、地味に楽しいのでおすすめです！
同じように電子名刺を作ってみたい人の参考になれば嬉しいです。
ここまで読んでいただき、ありがとうございました！