Named Log

とあるエンジニアの歩み

ブログサイトのプロトタイプをRailsで作ってみた

はじめに

内定先の研修の一貫として、入社までの数ヶ月に目標を課して達成するというものがあり、その目標の一つとしてブログサイトを作ってみようという目標を立て、そのプロトタイプを作ったのでその開発記を一旦つけたいと思います。

特に面白いものはないですが、一応見れます。

https://namedpython-mysite.herokuapp.com/

卒研等々でWeb開発自体が久しぶりで、「あれこれどう書くんだっけ」とかRuby自体の文法とか結構抜け落ちてしまっていてすごくショックでした。思い出しながら開発しています...。

環境

途中で友達が静的サイトジェネレータ(e.g. Hugo)などで作っているのを見かけて、そっちの方がスマートだよなあとは思いつつも、Railsでの開発を思い出すためにこれで開発しました。

Markdownをブラウザで投稿して、表示する際にHTMLで表示するようにしたかったので、gemとしてcommonmarkerを導入しました。レイアウトやデザインは、お気に入りのMaterializeCSSを使いました。gemはmaterialize-sassです。

Sassのコンパイラがdeprecatedか何かされていたので、sassc-railsを導入しました。

道のり

設計

まずは軽く設計だ!と意気込んで機能リストなんか作ってみましたが、記事自体はArticleモデルがあればいいし、投稿ユーザも一人なのでわざわざUserモデル作る必要もありませんでした。 なので、開発の順番としては以下のようになりました。

  1. 開発およびデプロイ環境の構築
  2. ArticleをCRUDを整える
  3. CRUDが最低限できるViewをレイアウトする
  4. CRUDのうち、Rのみを公開
  5. AdminDashboardを作り、ArticleのCUDを管理する
  6. ルーティングと認証実装
  7. Materializeによる装飾

環境構築

個人開発なのでそこまでガチガチに整える必要はないのですが、実用的な手の動かし方を復習したかったので、最低限CircleCIのビルドが通ってからHerokuにデプロイするという環境を構築。

f:id:namedpython:20190328110416p:plain
CircleCI

f:id:namedpython:20190328110538p:plain
Heroku

この手順ですらきっちりつまずいているので、先行きが不安でした。

Scaffoldは使わずに

自動生成は生産性を上げてくれるので大賛成ですが、思い出すためにもコントローラのアクションは一つ一つ書きました。

f:id:namedpython:20190328111045p:plain
開発中

かなりシンプルな感じですが、こういうところからじんわり作っていくの大事だよな〜って思ってやってました。

認証は少し雑

そもそもブログ記事執筆と閲覧が同じアプリケーションに乗ってるのがどうなんだって感じなので、もはや設計からやり直しレベルなのですが、AdminDashboard的なものを作って、before_actionでDigest Authを呼ぶような形にしました。デフォルト値はuser:passwordですが、ENVをfetchしてセキュア(?)な感じにしました。

f:id:namedpython:20190328111614p:plain
digest auth

もうMaterializeで装飾されていることがわかると思います。あらかたViewが固まったあたりからレイアウトしました。たくさん使っただけあって結構覚えていました。

ひとまず終わり

ここまで作っておいてアレですが、実際に運用するならもう少し設計を考え直さなきゃだよなと思ったので、これはプロトタイプとして捉えて、きちんとした形で(ドメインもとって)公開できたらいいなと思っています。

クォリティはすごくお察しですが、ひとまず開発のフローは追えた気がしているので満足しています。

おわりに

Webエンジニアとして就職するのに、めちゃくちゃ先行き不安な形になったかな...と思いますが、開発の勘はどこかで寝坊していると思っているので、社会人生活の中で早めに取り返していきたいと思います。

ではまた。