前回、taikiito.com というドメインを確保し、自分のパソコンからブラウザ経由で自分のMulmoClaudeにアクセスできるところまで整えた。せっかくドメインの下にサブドメインを作れる状態になったので、その日のうちにもう一つ別のものを作ることにした。デジタル名刺だ。
サブドメインを1つ切って、静的ページだけを置く
card.taikiito.com というサブドメインを新しく作り、Lightsailの同じサーバー上にnginxのserver blockをもう1つ追加する形で対応した。ポイントは、MulmoClaude本体のNode.jsアプリとは完全に切り離したこと。proxy_pass は使わず、ただの静的HTMLファイル1枚を配信するだけの設定にしたので、名刺ページのアクセスがMulmoClaude本体の負荷に影響することはない。
中身は実際に普段使っている名刺の情報をそのまま移した。ボタンは2つだけに絞った。
- 「連絡先に保存」— クリックするとJSのBlobで
.vcfファイルをその場で生成し、スマホの連絡先追加シートを開く - 「WhatsApp」—
wa.meのクリック・トゥ・チャットのディープリンクを踏むだけ
最初はメール送信ボタンも用意していたが、後で削って情報行(mailto:リンク)だけに縮小した。ボタンは絞れるだけ絞った方が結局使いやすい。
色で少し迷った
配色は最初からネイビーで作っていたが、比較のために白黒版も一度作ってみた。並べて見て、結局ネイビーの方が良いという結論に落ち着き、白黒版は削除した。
地味なハマりどころ
公開直後、このアプリ自体に埋め込んだプレビュー用のiframe内でカードを確認したところ、メールアドレスの表示が記号だけの謎の文字列になっていた。最初は自分のミスかと疑ったが、正体はCloudflareの「メールアドレス難読化」機能(Scrape Shield)だった。ページ内のメールアドレスをスパム避けのため自動でエンコードして表示する仕組みで、通常のブラウザではJSが実際のアドレスに戻して表示するが、このアプリのプレビュー用iframe内ではそのデコード用スクリプトが動かなかった、というだけの話だった。ゾーン全体の設定なので個別にOFFにはせず、実際のブラウザでは問題なく表示されることを確認して終わりにした。
名前のドメインは、こう転がっていく
自分の名前をドメインにした瞬間から、こういう小さいサブドメインを次々に切れるようになった。この後もいくつか同じパターンで増やしていくことになる。
つづく。