Boards - （5/18～5/24）１週間でWebサービスを作るイベント - お題「Like」

稲荷寿司

2020-05-23に投稿

Like Mail ~好きを伝える手紙アプリ~

Like Mailリリースしました

このアプリを利用すると、以下のような手紙っぽいWebページが作れます（内容は僕が考えました()）。

Webアプリリンク↓
Like Mail
※初回アクセスには10秒ほどかかる場合があります。

送る人の名前、自分の名前、伝えたいメッセージを入力して「手紙を作成する」をクリックすると、書いた内容の手紙URLが生成されます。そのURLに相手がアクセスすると、あらかじめ入力されていた内容が上記写真のように表示されるようになっています。

伝えたいことをちょっと特別な感じに伝えられる、そんなアプリを目指しました。

発想

好き　→　告白　→　手紙　→　好きが少しだけ特別に伝えられるアプリ
というふうに発想しました。

お題が発表されてからすぐに色々考えたのですが、これを思いついたときにめっちゃいいやんと思ったので、即開発することに決定。

こだわりポイント

手紙表示ページを、手紙っぽくしたところです。
CSSわからんマンですけど、「好きが少しだけ特別に伝えられる」がコンセプトなので、ここの手をぬくわけには行かないと思って頑張りました。

本当はもっとかわいい絵とかを付け加えれたりすればもっと需要も見込めるとは思うんですが、なんにせよ時間と技術がないので、最低限のことをして終わった。

個人開発erになるためには、デザインもできるようにならないとなぁと思いました。

技術周りの話

使用技術

・Ruby on Rails6
・Bootstrap4
・haml

idではなく、digest(hash値)を手紙の識別に利用する

生成されたURLのリソース識別子はハッシュ値にしています。idでルーティングすると、他のユーザがURLを推測して、n番目に登録された手紙の内容を盗み見る、ということが発生しえるからです。

リソース識別子を:idから:digest（手紙固有のハッシュ値）に変更するために、config/routes.rbでは以下のように設定しました。

resources :mails, only: :show, param: :digest

param: :digestがミソです。これでshow/:idではなく、show/:digestをルーティングできるようになりました。

モデルのto_paramメソッドをオーバーライドするのも忘れてはいけません。

to_paramメソッドをそのままにしておくと、model_url(@model)で生成されるURL がデフォルトのshow/:idのものになってしまうからです。

to_paramメソッドをオーバーライドして、生成されるURLを適切なものにしましょう。

def to_param
  digest
end

これで適切なURLが生成されるようになりました。

OGP(Open Graph Protocol)

あなたは、OGPを知ってますか？

OGPは、リンクを貼り付けた時に表示されるサムネやタイトルなどを設定するためのプロトコルです。

僕は本アプリを作成するまでOGPを知りませんでした。作られた手紙のURLを送ったときに、メールが届いたことを知らせるサムネイルになっていたらとてもいいな、と思いついて実装し始めたのですが、なかなか情報に行きつけなくて大変でした。

OGPを設定するためには、htmlの<head>部分に以下のような書き込みを加えなければなりません(haml記法を使っています)。

%meta{property: 'og:title', content: 'Like Mail'}
%meta{property: 'og:type', content: 'website'}
%meta{property: 'og:url', content: root_url}
%meta{property: 'og:image', content: "#{root_url}like-mail-icon.jpeg"}
%meta{property: 'og:site_name', content: "Like Mail"}
%meta{property: 'og:description', content: '〜あなたの好意をすこしだけ特別に伝えられるWebサービス〜'}

propertyとしてog:titleや、og:urlを書き込み、属性を決定します。
そして、それら属性の内容として、contentに内容を書き込むようになっています。

これだけでもいいのですが、TwitterやFacebookなどのSNSには独自のOGPを設定しないといけないらしいです。

今回はTwitterだけ対応しました。

%meta{name: 'twitter:card', content: 'summary'}

name: 'twitter:card' のcontentは、表示形式を指定するものです。
今回はsummaryを指定。

Twitterのものは、通常のOGPと組み合わせることができるらしく、今回はこの記述を付け足すだけで対応できました。

OGPの結果を確認できるサービスがあったので、確認してみることに。

いい感じに表示できています。

しかし、一方で、端末が変わると画像が見切れてしまいました。

表示する画像も媒体によって変えなければならないとなると、なかなか大変です……。
ターゲットユーザに合わせて対処するのがいいかもしれない、と思いました。

感想

一週間でWebアプリを作るのは大変でしたが、周りの方との技術力の差が感じれたり、知らない技術をしれたり、いい発想に刺激をもらえることもあり、最高です。また参加したいです。

ちなみに、好意を伝える手紙、ということで、likeなのですが、紙みたいなメールという意味でもlikeと掛かってます。褒めてもくれてもいいですよ？（は？）

おわりに

ここまで読んでくださりありがとうございます。

「ここはセキュリティ的にまずいのでは？」など技術的な話や、アプリについてここが使いにくかった、わかりにくかったなど指摘してもらえるとありがたいです。

あと、いいと思ったらいいねください！
励みになりますので。

~END~