ぼくのメッセージカード を公開しました。短い文章を書いて QR コードとパスワードの画像を作り、相手に渡すと、パスワードで開いて読書ビューワーで読める、小さな Web アプリです。
「ぼくの。」のアプリ一覧にも載せています。会員登録はなく、チャット履歴も残りません。届けたい一文を、いまこの場で渡すための道具です。派手な機能より、作る・渡す・読むの三手だけが軽いことを優先しました。招待制ではなく、誰でも開ける公開アプリとして出しています。検索に載ることより、渡したい相手に確実に届くことを先に考えました。
なぜつくったか
メッセージを届けたい場面は多いのに、いつも同じ道具で足りるとは限りません。チャットは便利ですが、通知や既読、長い履歴が付きまといます。メールは改まった感じが強く、短文には重いこともあります。紙のカードは気持ちが伝わりやすい一方で、遠方やオンラインだと届けるコストが上がります。誕生日の一言、お礼、ちょっとした連絡。長く残さなくてよいのに、残る前提の道具しか手元にない、という感覚がありました。
欲しかったのは、「短い文章を、いま渡せて、しばらくしたら消える」形でした。相手の端末にアプリを入れてもらう必要もなく、QR を読めばブラウザで開ける。パスワードがあるので、QR だけ写メされてもすぐ中身は見えない。開いてから一定時間だけ読めるなら、貼りっぱなしのリスクも下げられます。消えることが欠点ではなく、短文の届け方としての設計になる、と考えました。
もうひとつは、個人開発の題材としてちょうどよかったことです。フォーム、プレビュー、画像生成、API、データベース、期限切れの掃除、スマホでの閲覧体験まで、ひと通りつながります。「ぼくのTools」の読書ビューワーと同じ紙の質感で読ませたい、という画面の欲求もありました。つくって公開して、自分で使いながら直す。そのループが回しやすい題材でした。
できること
使い方はシンプルです。
- card.bokuapp.com を開く
- タイトルとメッセージを書く
- 縦書きか横書きかを選ぶ
- プレビューで見え方を確認する
- 問題なければ QR コードを作成する
- できた画像をコピーするか保存して、相手に渡す
- 相手は QR を読み、パスワードを入れて読む
作成側では、届いた人にどう見えるかを先に確認できます。確定してからはじめてサーバーに保存し、QR とパスワードの画像を出します。プレビューの段階ではまだ永続化しないので、「書いてみたけどやめたい」がしやすいです。保存した画像のファイル名には日時が入り、コピーや保存の結果は画面上のポップアップで分かるようにしています。
閲覧側は、パスワード入力のあとに読書ビューワーが開きます。tools.bokuapp.com の小説ビューワーに寄せた紙色と明朝体で、縦書き・横書きの両方に対応しています。文字サイズの調整やページ送りも、そちらと同じ感覚で使えます。画面には「いつまで確認できるか」も出します。読むことだけに集中できるように、余分な導線は置いていません。
チャット、いいね、返信、スタンプ、友だち追加はありません。添付ファイルもありません。文章を書いて渡して読んでもらうまでが範囲です。便利さの境界を狭く保つことで、何をするアプリかがぶれないようにしました。
届け方の考え方
中心にあるのは「画像一枚で渡せる」ことです。QR とパスワードが同じ絵に入っているので、チャットに貼る、画面を見せる、印刷する、どれでも同じ情報が揃います。URL だけ渡してパスワードを別送する運用もできますが、いちばん手軽なのは画像ごと渡すことです。受け取る側の手順が少ないほど、短文の温度は保ちやすいです。
パスワードは推測しにくい短い形にしています。QR を拾われても、パスワードがなければ本文は出ません。ただしパスワード付き画像をそのまま渡すと、受け取った人はそのまま読めます。当然といえば当然ですが、「見せたい相手に、見せたい形で渡す」前提の道具です。拾われたときの耐性と、渡したあとの読みやすさのバランスを取りました。完璧な秘匿通信ではなく、日常の一言を少し丁寧に渡すための鍵、という位置づけです。
閲覧期限は、作成時刻からではなく、開封（正しいパスワードでの解除）から数えます。作ってすぐ渡せずに置いておくこともあるので、作った瞬間から砂時計が減るより、相手が開いたときからカウントする方が実感に近いと判断しました。開封から1時間を過ぎると読めなくなります。保存データ自体は、作成から7日以内に自動削除されます。読むための窓と、サーバー上に残る寿命を分けています。
データの流れ
構成は次のとおりです。
ブラウザ → card.bokuapp.com（Cloudflare Workers + D1）メッセージ本文は作成確定時に Worker 経由で D1 に保存します。パスワードは平文では持たず、ハッシュして照合します。解除 API が成功したときだけ本文が返り、フロントはその場のメモリ上でビューワーを開きます。ブラウザのストレージに本文を残さない前提です。端末をまたいで下書きを同期する、といった機能はありません。下書きはブラウザの入力欄にあるあいだだけ、という割り切りです。
リクエストにはレート制限をかけています。むやみに作成や解除を試される余地を減らすためです。HTTPS を強制し、セキュリティヘッダも付けています。個人開発の小さなアプリでも、公開する以上は最低限の守りは置く、という方針です。QR をカメラで読む場面が多いので、http で開いてしまわないよう、リダイレクトやページ側の補正も入れています。
期限切れの掃除は Cron で定期実行します。閲覧期限が切れたあとも、削除期限まではレコードが残る設計です。ただし API からは読めないので、ユーザーから見ると「もう読めない」状態になります。残す必要のないデータを、いつか必ず消す道筋を先に決めておきたかったためです。
つくってみて考えたこと
プレビューを先に置く
最初は入力したらすぐ QR 生成、でも動けました。ただ、縦書き・横書きや改行の見え方は、書いてみないと分からないことがあります。確定前に本番と同じビューワーで確認できると、渡してから「改行が変だった」が減ります。サーバーに書くタイミングを後ろにずらしたことで、試し書きの心理的ハードルも下がりました。
読む体験を軽く見ない
短文でも、画面が白い箱のままでは届き方が変わります。紙色、明朝、余白、ページ送り。tools の読書ビューワーに寄せたのは、見た目の統一というより、「読むための姿勢」を借りたかったからです。メッセージカードと呼ぶなら、読む瞬間だけはカードらしくあってほしい、という感覚です。タイトルは太字で置き、本文との階層が分かるようにしています。
やらないことを決める
ログイン、履歴、編集、再送、既読、リアクション、グループ、テンプレ商店。欲しくなりそうなものを並べると切りがありません。今回の範囲は「一通を、短時間だけ、QR で渡す」です。足りないと感じたら、そのときに足せばよい。最初から何でも屋にすると、何のためのアプリかが薄まります。個人開発では、機能を足すより「これはやらない」と書く方が難しいことがあります。今回はそれが比較的はっきりしていました。
期限の言葉を正確に
「1時間で消える」は分かりやすい一方で、起算点が曖昧だと誤解が生まれます。作成からか、開封からか。UI の注意文も、閲覧画面の期限表示も、開封起点に揃えました。短いアプリほど、一文の精度が体験の信頼に直結します。作る人向けの説明と、読む人向けの説明を、同じ定義で揃えることを意識しました。
自分用と共有用のあいだ
完全に自分だけなら、メモアプリに書いて画面を見せれば足ります。一方で、相手の手元で読んでもらう形にしておくと、渡したあとも文章の姿勢が残ります。公開アプリとして出したのは、その場で URL や画像を渡せることを優先したからです。広く宣伝するより、必要なときに見つかる場所に置いておく、という出し方にしています。
技術のメモ
フロントエンドは Vite + TypeScript で、React は使っていません。HTML / CSS / 素の TypeScript で画面を組み立てています。QR 画像はブラウザ側で描画し、コピーと保存に回します。ビューワーの組版は、tools の読書用ロジックを流用しつつ、メッセージカード向けのタイトル表示や期限表示を足しています。
API は Cloudflare Workers、保存は D1 です。デプロイは既存の deploy.sh から Worker + 静的アセットをまとめて出しています。Cron で削除期限を過ぎたレコードを掃除します。定数やマイグレーションの扱いはアプリ側の README に残し、あとから自分で追えるようにしています。ブログではパスワード生成やハッシュの細部には深入りしません。使う人にとって重要なのは、「平文で持たない」「開封から1時間」「自動削除がある」という約束の方だからです。
これから
当面は、安定して作れて、渡せて、読めることを優先します。ほしい機能が出てきたら、プレビューの分かりやすさや画像の渡しやすさ、縦書き時の余白といった「作る・読む」寄りの改善を先に考えたいです。チャットや SNS を置き換える方向には広げないつもりです。必要なら、もう少し長い文章向けの調整や、保存画像の見た目の磨き込みくらいが次の候補です。
うまくいった点は、スコープを狭く保てたことと、読む画面の質感を最初から重視できたことです。公開後に自分で触って直した点もあります。DNS の浸透待ちや、スマホでのコピー、http で開いてしまう経路など、机上では足りない確認が現場にはありました。最初から完璧な体験を目指すより、日常で使える最小構成を先に出す方が、この題材には合っていました。
公開初日から、自分で QR を作ってスマホで読み、コピーや保存、期限表示まで一通り触りました。机の上の設計と、手元のカメラ越しの体験は、まだ違うことが残っているはずです。その差分を拾いながら、小さく直していきたいです。
おわりに
ぼくのメッセージカードは、大きなプラットフォームの代替ではありません。短い文章を、いま渡して、しばらくしたら読めなくする。その一点のためにあります。
使ってみて、余白や期限やプレビューの感触が合わなければ直していきます。個人開発のよさは、小さく出して、使いながら形を変えられることです。QR 一枚で届く小さなメッセージが、誰かの一日のどこかで役に立てばうれしいです。
アプリの入口は ぼくのメッセージカード です。一覧は アプリ からも辿れます。「ぼくの。」本体は bokuapp.com です。関連する読みものは、これからも個人開発のメモとして残していきます。気になる点があれば、お問い合わせ からどうぞ。