GWを使ってポートフォリオを実装したよ【70時間で本格的なアプリを作る】

こんにちは、けんぞうです。
GWの時間を使って取り組んでいたRailsアプリケーションの作成が、ひと段落したので公開します。

アプリを作った経緯

こちらのアプリを作った理由は3つあります。

 

  • 理由①:日頃から「アウトプットが大事だよ!」と発信しているので、それを体現するものを作りたかった。
  • 理由②:転職用ポートフォリオが寂しい気がしたので、もう少し機能をたくさん実装したものを作りたかった
  • 理由③:りょうたくさんという方が10日間でポートフォリオ実装をされていて、影響を受けた

 

そんな感じです。


何ができるのか?

DOYAでは、以下のことができます。

  • SNS連携で登録(Twitter/facebook/Google)
  • 記事の投稿/編集/削除
  • 記事にコメント(💬)する
  • 記事にいいね(👏)する
  • 記事をストック(📂)する
  • フォロー/アンフォロー機能

ページ内の絵文字がTwitterライクになっているのは、twemojiというライブラリを利用しているからです。


使用した技術

以下の技術を使用して開発を行いました。

  • Rails
  • Heroku
  • fastly
  • S3
  • CloudFront

その他、環境構築はDockerを使用して、フロントはBootstrapを使って実装を行いました。


工夫したポイント

 

  • ポイント①:レスポンス速度改善
  • ポイント②:参加する障壁を最小にする
  • ポイント③:見た目をポップにする

 

ポイント①:レスポンス速度改善

RailsアプリをHerokuでデプロイすると、驚くほどレスポンス速度が落ちてしまう問題を以下の方法で回避しました。

  • ①共通CSSはhead内に直書きする
  • ②CloudFrontでAssets on Cloud
  • ③Fontawesomeは使用せず、twemojiでカバーする
  • ④jQuery/BootstrapなどもCDNではなく、ファイルをassets下に配置して読み込む
  • ⑤その他必要のないCSSファイルなど全消去

結果的にPageSpeed Insightsを使った計測で、15⇒50くらいまで改善されました。

ポイント②:参加する障壁を最小にする

ルートパスから即ログインして、利用を開始できるようにしました。

もともとは右上にログインボタンがあり、そこからログインページに遷移して、、という流れにしていたのですが、煩雑な気がしてやめました。

ポイ ント③:見た目をポップにする

普通ならFontAwesomeとかを使うんだろうなあ」というボタンやアイコンなどを全て、twemojiでカバーしました。

👇この辺りのボタンのことです。

  • 記事にコメント(💬)する
  • 記事にいいね(👏)する
  • 記事をストック(📂)する

と言うわけで、良かったら遊んでみてくださーい

DOYA | ちょっとした自慢を発信できるサービス