プレーリーカードというデジタル名刺を作ってみたいなと思いつつ、デザインが決められなくてぐずぐずしていたら役立ちそうなイベントに間に合わなくなってしまったので、プロフィールページ作成サービスの QR コードをスマホのロック画面にするアイデアを思いついた。こういう感じになる。
まず Lit.Link という SNS リンクまとめサービスを使ってプロフィールページを作った。
このプロフィールをシェアするページに QR コードが表示されるので、SVG をコピーしてファイルに保存し、PNG に変換して、その QR コード画像をプロフィールページに追加した。これで、プロフィールページを見せながら QR コードスキャンしてもらえる。
しかしブラウザでプロフィールページを表示しっぱなしだと誤操作で画面が変わったり、ロック解除でもたつくかもしれないので、ロック画面に表示したい。このページのスクリーンショットを撮ってロック画面の壁紙にしてみたが、iOS は時計ウィジェットを削除できず、文字色を背景色と同じにしてもプロフィールページの画像内の文字などにかぶってみづらくなるのでボツ。もっとシンプルな、アイコン画像と QR コードと URL だけのロック画面を作ることにした。
素材はあるので適当なペラ一枚の HTML ページを作ってスクリーンショットを撮り、それをロック画面の背景画像にすればいい。HTML ページは CodePen で作った。
https://codepen.io/kyanny/full/RwvvBMa
上側が時計ウィジェットとかぶらないように、かつ下側がフラッシュライトとカメラのアイコンともかぶらないように、CSS で余白を多めにとり、mac の Chrome の開発者ツールで iPhone エミュレートモードで表示した縦長の画面全体のスクリーンショットを（mac の Chrome で）撮って iPhone に AirDrop で転送し、ロック画面の背景に設定した。ちょうどいい余白を持たせるのが難しくて何度かやり直した。ロック画面の背景画像設定時に拡大縮小とかできるので、最後はそこで目視でいい感じに見えるサイズに調整した。最初は普通の天地で設定してたが、相手に見せるときいちいち逆向きに持ち替えるのは大変そうなので最初から天地を逆にした画像を表示しておくことにした。
Lit.Link の前に、これ系で有名な Linktree も試したが、無料アカウントだと全然自由度が低くてイマイチだった。少し調べた感じだと handshake というサービスもシンプルで良さそうだったが、Lit.Link はプレーリーカードと同じように NFC 通信用のデジタル名刺カード（物理）も発行できるなどリッチな感じだったのでこっちにしてみた。ただ、アカウント作成時に「このアカウントを一言で表すと？」という意味深な項目があって、なんと書けばいいか悩んで脱落しかけた。実際にプロフィールページを編集し始めたら、名前の漢字表記を書く欄として使うアイデアを思いついて有効活用できた。
