inFablic | Fablic, inc. Developer's Blog.

フリマアプリ フリル (FRIL) を運営する Fablic の公式開発者ブログです。Fablic のデザイナー・エンジニア・ディレクターが情報発信していきます。

mail_viewの一覧表示をハックして使いやすくする@スタートアップRails勉強会

こんにちは。kaeponです。

先日、第6回スタートアップRails勉強会にLT枠で登壇させて頂きました。

「mail_viewの一覧表示をハックして使いやすくする」というタイトルで発表致しましたので、
本日は発表内容について紹介させて頂きます。

概要

サービスからユーザーへ配信しているメールのプレビュー画面の一覧表示機能を改良した話です。
その為の仕組みとして元々『mail_view』というgemを利用しているのですが、
これをより使いやすくする為の実装に挑戦しました。

この対応により、フリルから配信しているメール一覧を一目で確認できるようになり、
カスタマーサポート部署のメール確認作業が効率化されました!

発表スライド

mail_viewとは?

mail_viewはその名前の通りメールのプレビュー用gemです。
フリルの管理画面では過去から利用されていて、
ユーザーへ自動送信されるメールのプレビューが見れる様になっていました。

github.com

実現したいこと

弊社カスタマーサポート部署から「顧客に自動送信されるメールの確認がしたい」というリクエストを頂きました。

今まではエンジニアがサーバー上のメールファイルを見つけて都度共有していたのですが、
細かい条件によってテンプレートが大量にあるので大変でした。

対応策としてカスタマーサポート担当の方が直接サーバー上のメールを確認できる仕組みがあれば
効率よく確認作業ができる様になると考えました。

ユーザーに出す画面ではなく社内用なので作り込んだUIは不要でしたから、
もともと使っていたmail_viewをそのまま見せる事で実現できそうでした。

課題

しかし、実際にやってみると難しいことがわかりました。
原因は「mail_viewの一覧表示が非常にわかりにくい」という事です。

画像の様にメールを表示するためのメソッド名が一覧で並ぶので
ノンプログラマには直感的では無いですし、大量に並ぶと探すのが難しくなります。

f:id:kaede911002:20170724153542p:plain

作り込んだUIが不要とはいえ、そのまま出しても使いにくいので
標準の一覧表示をやめて分かりやすい表示にすることにしました。

一覧表示を改善する

まずは一覧表示を行うindexファイルを探しました。
調査したらmail_viewのgemの中にあることがわかりましたが、
既存のgemの中身を変更して使うのは避けたかったので別な方法がないか模索しました。

mail_viewの仕組み

次にmail_viewの動作を調べました。

プレビューを表示するシステムの全体像としては、オレンジ枠線内のmail_view gemの中に
mail_viewのclass本体とテンプレート用のファイルが存在していて、
開発者は青色のMailPreviewクラスを作成してMailViewクラスを継承して機能を利用します。

f:id:kaede911002:20170724153638p:plain

まずブラウザからMailViewを継承したMailPreviewクラスにアクセスすると、
MailPreviewクラスは自身に予め定義された各メールの表示用のメソッドの名前を集めます。

その後MailViewクラスのメソッドがindexテンプレートに
メソッドの名前とリンクを貼り付けて表示させるという仕組みでした。

一覧表示を書き換えるには?

f:id:kaede911002:20170724153653p:plain

一覧表示の部分を書き換えるには、MailPreviewからIndexテンプレートを呼び出すメソッドをオーバーライドして、
別なカスタムテンプレートを呼び出すようにすれば良さそうです。

ただし、オーバーライドしてしまうとgemの内部構造に依存してしまい、
将来的にgemのバージョンアップなどで内部構造が変わると
機能しなくなる懸念があったので、この方法は断念しました。

色々と方法を模索する中で、mail_viewは通常のテキストメールだけでは無く
「HTMLメール」のプレビュー機能がある事を思い出し、その機能を利用する事にしました。

機能を組み込む

mail_viewはメールをプレビューする機能があります。
実際に表示されるメールのプレビュー画面は、表題と本文が表示されるだけのシンプルなものです。

このメール本文に、プレビュー用のメールを一覧で表示させてaタグでリンクを設置することで
カスタマイズされた一覧画面として使いました。

f:id:kaede911002:20170724153735p:plain

単純にHTMLにリンクを出力するだけなら簡単に出来ますが、
この様にハッシュの中に項目を追加することで、
カテゴライズ化して出力する機能や日本語による補助説明を利用できる様になり、
リンクも自動出力できる様になったので、更新作業などはMailPreviewクラスのみで完結する様になりました。

f:id:kaede911002:20170724153750p:plain

表示される画面はこの様になり、単純なメソッド名の一覧より分かりやすいです。
これでカスタマーサポート部署の方にも見て頂ける様になりました。

f:id:kaede911002:20170724153811p:plain

まとめ

今回はmail_viewのgemをご利用の方向けの知見になってしまいましたが
実は、mail_viewはRails4.1からはActionMailerに組み込まれましたので、
mail_viewを使っていない方でもActionMailerのプレビューで同じハックが可能です。

プレビューの一覧表示にお困りの方はお試しくださいませ。