1時間でウェブサイトを作ってみた - 馬ッスル技術系ブログ

普段は既にできているサイトやアプリの中身をいじることが多いので、実際自分のアウトプットのスピードというのがどれくらいか測るためにRailsを使って1時間でどこまで実装できるのかやってみました。

もしかしたら次の1時間でどこまでできるかとかもやっていくかもなので、とりあえず最初の1時間だけ。

Github 複数アカウント運用もできるっぽいですが、使ったことなかったのでgitlabを使ってみました。今後アップデートすることも考えて1時間ごとに作業ブランチ切っていこうかなと思います。

サイトも一応ホスティングしていますが、もし今後アップデートしたら1時間でできたものではなくなるのでそれだけご注意お願いします（一応現時点でのキャプチャ画像貼っておきます）。

f:id:umuscle_irisohyaman:20201010120722p:plain

環境構築とか一からするとそれだけで時間なくなっちゃうので、プロジェクトの準備までは一応行いました。

詳細はREADMEにも記載しましたが、こんな感じです。

slimとかbootstrapとか導入したので、それが本番で動くかだけHerokuにデプロイして確認するところまではやりました。

1からプロジェクト作るのが久しぶりだったのでどこまでできるか分かりませんが、とりあえず下記を目標としました。

Bootstrapを使って一応設置はできたんですが、ナビゲーションのタイトル以外のアイテム（新規登録とかログインのリンク）がうまく右寄せにできなかったですね。

なんかうまく右寄せにできなくてここで無駄に時間を使ってしまいました。

あとは、一応テキトーなロゴを作成しといたのですが、あまりにもダサかったので実装したんですが、結局普通のテキストのタイトルにしちゃいました。

トップ画像とタイトルは一応思った通りに設置できたかなと思います。

ここも一応思った通りに設置できたかな。ただ、ちょっと要素全体の中央揃えがうまくいかなかったので、ここは残念

これもgemいれるだけだったのですんなり実装できました。

ログインページとかのスタイルは何もしてないのでとても簡素なものです。

本当はユーザー名も入れてもらって、ログインしたらユーザー名の表示までできれば良かったなぁって感じです。

これはbootstrapで簡単に実装できました。ただ、ハンバーガーメニューが背景色と同じで見えなくなっちゃうので、それだけ修正できれば良かったかな。

目標に対しての達成率は8割くらいですかね。

最近htmlをあまり触らなくて、slimとかbootstrapの使い方結構忘れちゃってたんですが、やってるうちになんとなく思い出せたのは良かったです。

CSS変更するたびにwebpackerのビルドが走ってるせいか反映までに少し時間がかかってたので、その設定だけしておけば良かったかなぁって感じです（この辺はよく分かってないので勉強せねば）。

あとは1時間っていうものの、herokuにデプロイしたら表示されなくて、少しだけ1時間超えちゃったのは内緒。（理由はただのmigration忘れ）

あと、環境構築とかに1時間ちょいくらいかかってます。

タイムアタック的な感じで結構面白かったので、1時間ごとに区切ってサイト更新していこうかなと思います。

ただ、ほとんどフロントに時間を割いてて、本当はバックエンドとかの方が好きなので、できればバックエンド側の機能の充実化を図りたいなぁ。