メールのプレビュー画面を作るのに悩んでる

CtoCサービスの開発をしてて、どちらかがサービス内で相手にメールメッセージを送信する場合、メッセージを登録後に実際に送られるメールをプレビュー出来たらいいなと思うのです。 他のサービスのメッセージ機能を調査して思ったのが、メッセージ登録に文面だけをチェックすることが多い。だけど、CtoCサービスだとシステムで自動生成された部分も含めて、その人が送ったと考えるユーザもいる、ということを前提に、自動生成される文面も含めて送る側は知っておきたいというニーズはあると思うのです。

そこで、実際にお送りするHTMLメール(受信しない設定の人にはtextめーるだけれども)を、送信前にプレビューするとういう方向性で、何がベストなのか考える。

メール作成者にだけにテストメールを送信する機能を追加

最初に考えたことです。 実際にどんなメールが来るか?実際に送ってしまえばいいじゃないの!な発想です。 ↓実際に運用で使っている画面です。

f:id:meikotan:20190103124729j:plain
自分にテストメールを送信する

これを考えたときは、おお!いいアイディアと思ったのですが・・。今振り返ってみるとなんと手間のかかるやり方をユーザに敷いてたんだろうと思います。 文面を変えることは一回だけじゃないと思うし、変えるたびにメールを送信してメーラーから確認するを繰り返すことになり、非常に手間が増えます。ユーザによってはプレビューをしなくなる人もいるのでは?と思うと、プレビュー機能を付けた意味がなくなってくるなと思うのです。

別タブにプレビュー画面を追加

ブラウザ内でどうにか完結出来ないかなと思って別タブに表示するな設計を考えました。 これはメーラーを使わなくてよくなった分、手間は減ったかなと思うのですが、毎回編集後にプレビューページを別タブに確認しに行くこともワンクッション入ってることに気づき、編集後、何も操作せずにプレビューが確認できるのが理想形だなと思いました。

iframeでプレビュー画面をメッセージ詳細画面で表示する

現段階では、理想案だと思って実装した画面です。先ほど別タブで表示させていたプレビュー画面を、メッセージを登録後の詳細画面内にiframeで表示するようにしました。こうすれば、編集登録後にすぐにプレビューを確認できます。

f:id:meikotan:20190103130904j:plain
iframeのpreview機能


書いているとあたり前だと思うかもしれないのですね。最初は別のサービスを踏襲しながら作っていたので、そのサービスに作りたい機能がないときに、こんな感じいいや!と結構おざなりに作ってしまっていた部分がありました・・。もう考えることをしないコピペ人間化してたと思います。すぐ正解を求めに行っちゃたりとか。そうなってくると、後から振り返った時に別のサービスを踏襲してない機能は、とても使いづらいものなっていってしまい、、でも一人なんだからしょうがないじゃん!のように甘える癖も出て。。最悪な状態だったなと思います。

これからはそんな自分と戦いつつ、一つ一つ使いやすさをシッカリ考えながら良いサービスを開発を目指します。