好きな人に好きって伝えるのが恥ずかしい人のためにレターアプリを作った話

# 概要

今回はタイトルの通り、好きな人に好きって伝えるのが恥ずかしい人のために、レターアプリを作ったという題名の通りの内容です。

このアプリを作った経緯だったりとか、どうやってこのアプリが動いているかなどをご紹介できたらなと思います。

# 何を作りましたか

僕が作った「Snapletter」というアプリは、手紙を受け取った相手が一度でも開封してしまったら、投函者以外はもう２度と読むことができなくなるレターアプリです。

**Snapletter**

https://snapletter.net/

## 使い方を教えてください

以下では、手紙を投函する人の使い方と、手紙を受け取る人の使い方を紹介します。

手紙を投函したい方はTwitterアカウントでのログインが必要となりますので、あらかじめご準備ください。

### 手紙を投函する側

※手紙を投函する側のユーザーはTwitterアカウントでのログインが必要になります。

#### 1. 手紙の表紙に表示されるタイトルと手紙を通して伝えたい内容を書きます。

![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577119/31f89f7d-0e5b-cb62-d04c-b9ba7006feea.png)

#### 2. プレビューボタンを押して、表示された画像に問題がなければ投函ボタンをクリックします。

![名称未設定のデザイン (5).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577119/404ea278-96f1-30d0-c025-f1911ae5afab.png)


#### 3. 作成された手紙の共有リンクをコピーして、手紙を読んでもらいたい相手にメールやLINEを通して送ってあげます。

![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577119/1d3a8c17-4854-5329-412f-f8f488ea24ce.png)


### 手紙を受け取る側

※手紙を受け取る側のユーザーはTwitterアカウントでのログインは必要ありません。

#### 1. 受け取ったリンクを開いて、開封するボタンをクリックします。この瞬間に、他の人がこの手紙を読むことは一切できなくなります。 

![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577119/8c375989-e5bf-c8d6-34dd-aba44cce6acc.png)



#### 2. 内容を読んだ後、スタンプで返信するかテキストで返信するかを選択することで、手紙を書いた人物に気持ちを返すことができる様になっています。

![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577119/5b41074c-9425-1c41-a0b4-b5087069afc7.png)


#### 3. スタンプで返信する場合は、受け取った人の名前（ニックネームでも可）と送りたいスタンプを選んで「返信する」をクリックします。

![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577119/b5556514-530a-7460-b7e8-bb540754b126.png)



#### 4, メッセージで返信する場合は、受け取った人の名前（ニックネームでも可）とメッセージを入力して「返信する」をクリックします。

![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577119/8f8a205e-9df4-ef56-877a-49fc30bcc49e.png)


# どうしてこのアプリを作ったのでしょうか？

僕はたまに恋愛の映画やドラマを見て胸キュンを補充するのですが、その度に若い頃を思い出してはなんであのとき告白できなかったんだろうと、ふと後悔してしまうことが多々ありました。

そして今も、好きな人を含む周りの人たちに対して、面と向かって自分の気持ちを文面で伝えるのがなんだか気恥ずかしくなってしまうこともしばしば。
だからと言ってLINEで直接伝えるのも重いし、直筆で手紙を書くのも結構ハードルが高い。
そこには多分、ずっと読み返せる形で残ってしまう怖さというものが邪魔をしているのではないかと感じました。

だから、一度でも読まれたらもうそれは揮発性の高い瞬間的なものとして心の中には残るけど、形としては残らない。
そういった気持ちがのった声のようなものを気軽にテキストで表現できないかなという個人的な動機で、このサービスの開発に着手しました。

# どういう技術を使って作りましたか？

主に使用しているフレームワークやサービスは次の通りです。

- Remix
    - 具体的にいうとRemix Blues Stackを利用してプロジェクトを生成しました。
    - 最初からユニットテストやe2eテスト、CI/CDの設定ファイル等が用意されているので初学者の方にもとてもオススメです。
- DaisyUI + TailwindCSS
    - デザインはすべてTailwindCSSとDaisyUIの組み合わせで行いました。
    - 多くのCSSフレームワーク特有の「ぽさ」みたいなものを感じさせないUIを直感的に組み立てることができます。
- Planetscale
    - データベースとしては、MySQLと互換性のあるサーバレスデータベースを提供するPlanetScaleを採用しました。
    - Remix Blues Satckの初期設定がPostgresSQLなので、当初は素直にGCPのCloudSQLでデータベースを準備しようとしたのですが、個人開発なのでコスト面で断念しました。
    - そんな時に[catnoseさんのツイート](https://twitter.com/catnose99/status/1508276200917315586)を拝見して、試しにPlanetscaleを使ってみたらとても使いやすかったので、採用するに至りました。
- Fly.io
    - Remixのチュートリアルをなぞっていた時からお世話になっているFly.ioを使ってアプリを運用しています。
- Cloudinary
    - 投函された手紙をシェアするときに表示されるOGP画像や、テキストを選択したテンプレートの上に載せて画像を生成する処理を行うためにCloudinaryを使用しています。
    - 開発中はcatnoseさんの[こちらの記事](https://catnose.me/notes/cloudinary-dynamic-ogp-image)にとても助けられました。本当にありがとうございます。

# どのようにデザインをしていきましたか？

最初はワイヤーフレームで各画面を書き起こすことに専念しました。

![名称未設定のデザイン (6).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577119/e56aa81f-d50c-c4f9-2bd3-0a962a02ee3c.png)

作成したワイヤーフレームをもとに、必要なルートモジュールの設計と開発を行なっていきました。
次に、Daisy UIのデザインを活かしながら各画面のデザインを作っていくのですが、最初にワイヤーフレームでおおまかなイメージができているため、色味こそ違えどそこまでおおきなズレがなく画面に落とし込むことができました。

![ワイヤーフレームの再現.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577119/1d6c2695-874d-22e1-4270-a493fd88ad31.png)

特に一貫して意識していたのは、iモードです。
好きな人とメールをしているときの中高生時代をイメージしながら、あの時代の空気感や感情みたいなものを、現代の技術や世界観で表現したいなと思いながら最終的なデザインを紡いでいきました。

![名称未設定のデザイン (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577119/7d58a831-1d54-698b-3ba4-df77fe80b86f.png)

# 開発で大変だったところはどのようなところですか？

## ロゴを何度も作り直してしまった

最初にロゴを適当に作って、それをずっとテンプレート画像に乗っけるロゴとして使っていました。
ところが途中からテンプレート画像を作成するためにCanvaを導入したことによって、色々と欲がでてしまいロゴを新しく作り直してしまいました。

その際に、それまでに作成していたテンプレート画像に貼られていたロゴを取り替えて、もう一度Cloudinaryにアップロードし直さないといけないという作業が地味に大変でした。

![新しいロゴ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577119/67085436-e976-9c63-05fe-39195c224eee.png)



# 時差による問題によって投函した日付と1日ずれた日付のカレンダーに手紙が表示されてしまった

作成された手紙の投函日時はデータベースの中ではUTCで保存されています。
そのため、僕が作ったカレンダーのコンポーネントで投函された日付順にセルを埋めようとすると、例えば本日の夜中の00:00に手紙を投函した場合、内部では1日前の15:00に投函された扱いになるので何も処理せずに表示させようとすると期待されているセルの１個前のセルに手紙が表示されてしまうという問題がありました。

なので、時差を考慮した日付を返す`utcToJst`というヘルパー関数を作成して、その日付をもとにキーを作成するという処理を関連する場所に追加し、投函日時を返すすべてのloader関数でも時差を考慮した日付に変換させるという処理を挟むことで問題の解決を図りました。

ローカルの開発環境だと、UTCを意識せずに開発していたため、実際にステージング環境にデプロイした際に初めて気づくことになりました。ステージング環境を用意しておいてよかったと改めて気付かされました。

# こだわりのある場所はどこですか？

## 便箋の背景画像を好みに合わせて選択できる様にしたところ

元々は固定されたひとつの便箋の画像にテキストを載せることしか考えていませんでした。
けれども、手紙の内容だけじゃなくて、その手紙が書かれた便箋のデザインからも書き手の気持ちやその時の雰囲気が伝えられるのではないかと思い至りました。
なので、まずは９種類のテンプレート画像を用意して、その中からその時の気持ちにあわえせて便箋の画像を選べる機能を実装しました。

![名称未設定のデザイン (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577119/f795589e-7acc-be49-9eec-c1b065b3a63d.png)


## 手紙や返信をカレンダーで検索できる様にしたところ

たとえば「先週の水曜日、俺あの人にこんな手紙書いたな」とか、「去年の年末、好きな子にこんな恥ずかしい手紙書いてたんだ！」みたいな日付と記憶と感情をリンクさせる検索方法としてカレンダー検索を実装しました。

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577119/597e1b78-0b99-d617-879b-b2f163043018.png)

もちろんタイムラインの様に投函した日付ごとに降順で手紙を表示するという方法も実装しているのですが、それとは別に、記憶をたどりながら過去に投函した手紙を思い出すことで、思っても見なかった過去の気持ちに出会える検索方法なんじゃないかなと思いこの方法を採用しました。

元々は個人で開発していたReact NativeのカレンダーのコンポーネントをReactで書き直してWebでも動く様に実装し直しました。結構お気に入りのコンポーネントなのでぜひ体感してもらいたいです。

# 振り返り

新海誠さんがインタビューで語った言葉の中で一番好きものが、「完成しなかった名作よりも傷があるけど完成した作品のほうがやっぱりはるかに価値は大きいと思います」という言葉です。

実は先月のはじめのほうで、Snapletter自体はリリースされていました。
ただ、みなさんに知られてしまう怖さだったり、もしつまらないと思われたらどうしようという恐怖感から、あえて大々的な投稿などはしてきませんでした。

けれども、せっかくいろいろな思いを込めて作った作品なのに、だれの目にもとまらずに自分の中だけで昇華させてしまうのは、それすなわち完成しなかったということなのではないかと思いました。

正直僕が作ったアプリは細かいところを見ると荒削りだし、多くの開発者さんが成し遂げられていることのほとんどが達成できていないかもしれません。
けれども、そんな荒削りのアプリを楽しんでくれる人がいたり、気持ちを伝える後押しになってくれたと感じてくれる人が一人でもいるなら、とても嬉しいです。

# まとめ

ここまで読んでいただき本当にありがとうございます。

Snapletterは、自分が使いたいという動機だけで開発をしているアプリです。
知り合いの方に実際に送ったら、一回だけしか読めないというところにとても特別感を感じるという感想をいただきました。

いま気持ちを伝えるのを躊躇っている方にこそ、ぜひSnapletterを通して想いをその人に伝えてあげてほしいです。
受け取った方もきっと喜んでくれると思います！

[Snapletter](https://snapletter.net/)

[Twitter](https://twitter.com/takagimeow)もやっています。フォローやいいね等をいただけると今後の励みになりますので、よろしくお願いします。