デジタル名刺をDIYする
デジタル名刺とは
これ
アウトプット
プロフィールページ この公開ページURLをカードに書き込みます。
プロフィールページのリポジトリ
この記事で「つくる」もの
- プロフィールページを作成し、
- デプロイし、
- NFCタグが埋め込まれたカードにURL情報を書き込む
プロフィールページを作成する
究極何でもいいですが、ここでは Astro を使いました。 公式ドキュメントの手順に沿ってプロジェクトを作成。
プロフィールページの中身は自由。
今回は、claudecodeに指示してプロフィールページとしてそれっぽい体裁を整えさせました。
デプロイする
ここも、究極ページが公開できれば何でもいいです。
今回は Github Pages を使います。
公式ドキュメントの手順に従って、。
以降、変更をプッシュすると勝手にデプロイされます。
カードにURL情報を書き込む
NFCタグを購入します。
形や規格にいろいろ種類があるらしい。
自分は以下のものを購入。
カード型のほかに、コイン型、シールなどもあります。
規格はよく見ずに買いましたが、動きました。
人のスマホで読み込んでもらうことを考えると、広く使われてそうなものを選ぶのが丸いのかもしれません。
URL情報の書き込みにはNFCライターアプリを使用します。
自分は NFC Tools というスマホアプリを使いました。（iOS、android両対応）
PCから書き込みたい場合は、NFCライター端末が必要になります。
完成
URL情報を書き込んだら、動作確認をして完成です。
無地でさみしいので、ネットプリントでアイコンをシールにして貼りました。
このあたりは完全に好みで。
交流会で、NFC非対応のスマホを持つ方がいる可能性もあるので、QRコードなどを貼っておいてもいいかもしれません。
余談：技術選定について
Astro
軽くてプロフィールページや静的コンテンツを扱うのに向いている。
React と得意分野が真逆なので、2番目にさわる JavaScript フレームワークとして都合がよかった。
関連:
Astro の細かい特徴については、大岡さんのスライドがわかりやすい。
github pages
無料でお手軽✌️
Discussion