デジタル名刺（受け手が保存形式を選べる版）

受け取る人はアプリもアカウントも不要です。QRを読み取って開いたページで、名刺を次のどれで保存するかを選べます。

形式	保存先	特徴
PNG	写真アプリ	見返しやすい。画像内のQRから受け取りページを再度開ける
PDF	ファイルアプリ	メール/URLのリンクをタップできる。vCardを添付ファイルとして同梱
vCard	連絡先	登録したい人だけが選ぶ

構成

index.html        送り手画面（PWA）：「名刺を渡す」「名刺を編集」の2タブと、横向きで名刺を見せる画面
card.html         受け手画面：URLの # 以降から名刺を復元し、保存形式を選ばせる
js/config.js      設定（Web版は空。アプリ版はビルド時に生成する）
js/meishi.js      共通ロジック（エンコード、Canvas描画、PNG/PDF/vCard生成、共有）
js/sender.js      送り手画面の処理
js/receiver.js    受け手画面の処理
sw.js             オフライン用 Service Worker
vendor/           pdf-lib 1.17.1, qrcode-generator 1.4.4（MIT）

設計上のポイント

• サーバーに個人情報を置かない：名刺データはJSONをUTF-8→Base64URLにしてURLフラグメント（#以降）に入れています。フラグメントはHTTPリクエストに含まれないため、静的ホスティングだけで動き、サーバーはデータを受け取りません。
• ファイル名は「会社名_氏名_日付」：例 〇〇株式会社_山田花子_20261024.pdf。日付は受け手が保存した日です。PNG・PDF・vCardとも同じ形式です。
• 掲載項目は送り手が選ぶ：会社・組織名、部署、役職、氏名、フリガナ、電話2件（「代表」「直通」などの名前を付けられる）、メール、URL、郵便番号、住所。住所は長ければ名刺上で2行に折り返し、PDFではタップすると地図検索が開きます。初期値は空で、入力欄には一般的な入力例を薄く表示します。姓だけ必須で、チェックを外した項目は名刺画像にもURLにも入りません。
• PDFは日本語フォントを埋め込まない：名刺をPNGとして描画し1ページに貼り、その上にリンク注釈を重ねています。フォントのサブセット化が不要で、ファイルは約40KBです。
• 保存はWeb Share API優先：navigator.share({ files }) が使える端末では共有シート（「画像を保存」「“ファイル”に保存」、AirDropなど）を開き、使えなければダウンロードに切り替えます。
• 顔写真・ロゴ：URLに入らないため、QR経由では送りません。写真付きで渡すときは送り手画面の「ファイルを直接送信」を使います。
• 名刺を見せる画面は横向き：左に名刺、右にQRを並べます。iPhoneのSafariは画面の向きを固定できないため、縦持ちのときは表示全体をCSSで90°回し、端末の回転ロックに関係なくスマホを横にするだけで正しい向きになるようにしています。Androidでは全画面表示にして横向きに固定します。机に置いて相手へ向けるときのために「180°回転」ボタンがあり、表示中は画面が消えないようにしています（Screen Wake Lock API）。
• 左ラインの色と書体：色は紺・緑・えんじ・ローズ・藤の5色、書体はゴシック（Noto Sans JP）・明朝（Noto Serif JP）・丸ゴシック（Zen Maru Gothic）・UDゴシック（BIZ UDPGothic）・UD明朝（BIZ UDPMincho）の5書体。どちらもURLに入るので、受け手側の名刺も同じ見た目になります。
• 書体はGoogle Fontsから読み込む：端末に無い書体でも同じ見た目で描くためです。このとき書体ファイルの取得でGoogleのサーバーに接続しますが、送るのは書体の要求だけで、名刺データ（URLの # 以降）は含まれません。受け取りページは Referrer-Policy: no-referrer にしています。読み込めないときは端末の書体で描きます。一度読み込んだ書体はService Workerが保存するので、次回からはオフラインでも使えます。
• バックアップ：編集画面の「バックアップ」で、入力内容（写真・色・書体を含む）をJSONファイルに書き出し、別の端末で復元できます。ファイルは端末の共有シートやダウンロードで渡すだけで、サーバーには送りません。
• デザイン：Figmaのカンプ「デジタル名刺 デザインカンプ」の色・余白・文字スタイルに合わせています。

アプリ版（iOS / Android）

送り手用のアプリは別リポジトリ digital-meishi-app で管理しています（Capacitor）。このリポジトリをサブモジュールとして取り込み、名刺の描画処理などを共有します。そのため js/ のコードには、アプリの中で動くときだけ使う処理（横向き固定、画面の明るさ、共有シートなど）も含まれています。

動かし方

Service WorkerとWeb Share APIはHTTPS（またはlocalhost）でのみ動きます。

cd digital-meishi
python3 -m http.server 8000
# http://localhost:8000/ を開く

公開するときはGitHub Pagesなどの静的ホスティングに置いてください。別の場所にcard.htmlを置く場合は、送り手画面の「受け取りページのURL設定」にそのURLを入れます。

ライセンス

MIT License（LICENSE）。同梱ライブラリ pdf-lib（MIT）と qrcode-generator（MIT, Kazuhiko Arase）はそれぞれのライセンスに従います。