この記事は635文字約2分で読めます

Table of Contents

ペーパーレス時代に

これからの時代はペーパーレスです。名刺もきっとペーパーレスにするべきだと思います。(唐突)

直近オフライン系のイベントに参加する機会が多く、紙の名刺を供給するのが面倒なので電子名刺っぽいものを作ってみることにしました。

こんな感じ

こんな感じの構成にしてみました。

img

まず、デジタル名刺ページはAstroを使って作成をしております。ペライチのHTMLをビルドする形になります。

その後、pagecryptを使って、HTMLを暗号化します。

SubtleCrypto JavaScript APIをどうやら使っているらしく、AES256で暗号化されます。

pagecryptは大変優秀で、

  • そのままHTMLにアクセスするとパスワードの入力フォームが表示され、正しいパスワードを入力することでアクセス。
  • URLのアンカーにhttps://example.com/#password など、パスワードを設定することでパスワード画面を経由せずアクセス

ができます。

(ただし、後者のアクセスはGETリクエストのURLを中間経路でダッシュされる可能性があるので、機微情報を扱う際はおすすめしません。)

img

NFCタグにはパスワード付きURLを仕込んでおくことで、実質NFCタグ経由じゃないと名刺サイトにアクセスできなくする、という対応が可能となります。

ホスティングの基盤はrenderを使ってます。

デモ

この用にNFCタグにスマートフォンをかざすだけで、デジタル名刺サイトにアクセスができました!

img

tubone24にラーメンを食べさせよう!

ぽちっとな↓

Buy me a ramen

 Related Posts

hatena bookmark