Rails, Docker, Heroku, AWS(S3)で作った架空のカフェサイト

機能を付け足していくけど記録用に。

大まかな制作期間は約1ヶ月半ぐらいで、1日平均4時間前後ぐらいの時間を費やしていました。

このカフェサイトでは、画像を添付した記事の投稿機能、管理人のみ編集できる機能、検索フォーム機能などをつけた、架空のwebサイトとなっています。

管理人としてログインに成功した場合には、記事投稿機能を運用できるようになっており、一般ユーザーの方は、コンテンツの閲覧のみ可能となっています。

こちらがその架空のカフェサイトです。

期間限定/新メニューのページで記事が紹介できていない時があるかもしれません。なぜなら、クラウドストレージなどと結びつけていないからです。

AWS Amazon S3などのクラウドストレージに画像を保存するには課金が必要です。今回のwebサイトでは、実際にこのサイトを運用していくわけではないので、クラウドストレージは省かせていただきました。

※4月1日にamazon AWS S3をサイトと結びつけました。

投稿機能を体験でいるように後にGitHubにてソースコードを公開したいと考えております。

※gitHubにアップしました!こちらから

製作背景

新型コロナウイルスによって、大学での講義がすべて遠隔授業になり、家にいる時間を有効的に活用したいという思いと、元々パソコンを触って何かするということが好きだったので、プログラミングを独学で学習し始めました。

今まで、HTML, CSS, Javascriptのみを用いたインプット・アウトプットしかしておらず、ログイン機能や検索フォーム、製作したものをどのように本番環境にデプロイするのかなど、全く知らない状態でした。

私はカフェに行くことが好きなのですが、新型コロナウイルスの影響によって、外出する機会が激減し、おしゃれなカフェサイトを眺めるというのが日課になっていきました。そこで、プログラミング初心者ながら制作する架空のカフェサイトで「実践的に使うことができる機能」を付与することができないかと考えました。

また、近所のカフェでアルバイトをしている友人がいたので、どのような機能があると良いのか、アドバイスをもらいました。

  • 季節や流行りに応じて新商品を販売するので、新メニューや期間限定メニューを告知できるwebページが欲しい。
  • そのwebページをお店の人のみ、管理人としてログインし、画像付きの記事の投稿や編集、記事検索をできるようにしたい。
  • お店がどの場所にあるのか、Googlemap等でわかるようにして欲しい。

上記のことを踏まえ、

新規記事投稿、記事投稿フォーム、編集や削除などの管理機能、管理人とユーザーを分けるログイン機能Googlemapの埋め込みを備えたwebサイトを作成することにしました。

目的

  • RubyやRailsなどの言語やフレームワークを駆使してwebアプリケーションの開発を経験すること
  • 簡易的なものではあるが、インフラ構築を経験することによって、運用する力も身につける
  • エンジニアとして働けるような技術を身につける
  • ヒアリングなどを通じて小さい規模のプロジェクトをマネジメントする
  • 完成したものを家族や友人に利用してもらい、不具合や改善点を見つけ、バージョンアップする力を身につけいる

スペック

  • 言語・・・Ruby 3.0.0 / Rails 6.1.1
  • フレームワーク・・・Rails 6.1.1
  • 開発環境・・・Docker 20.10.2 / docker-compose 1.27.4
  • データベース・・・ PostgreSQL 13.2
  • webサーバー・・・Heroku7.47.13 AWS(S3)
  • バージョン管理・・・Git 2.30.1
  • テストフレームワーク・・・RSpec 3.1.0
  • デザインカンプ、イラスト作成・・・Photoshop 2021

詳しい制作過程や、実装した機能、参考になった記事などは別の記事で紹介していこうと考えています。

改善点

  • フロントエンド部分で、レスポンシブ対応をもう少し丁寧にすべきだった。
  • アクセスした時、ロード時間が長い時があるので、その対策とおしゃれなローディング画面を作って相手に退屈な時間を与えないようにする。
  • コンテンツデータの紛失を防ぐための、定期的なバックアップができる仕組みを導入しておらず、インフラ環境対策が甘かった。

参考文献

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

Railsチュートリアル

【Rails】7つのアクションとそれぞれの役割

Ruby on Rails + MySQLのアプリケーションをHerokuにデプロイする手順(Heroku.yml)

キタミ式イラストIT塾 基本情報技術者 令和03年 

ノンデザイナーズ・デザインブックRailsチュートリアル

【超簡単】JavaScriptプラグインaos.jsの使い方を解説!スクロールアニメーションを実装しよう!

Animate On Scroll Library

Herokuでデプロイしたアプリで投稿画像の保存先をS3に設定してみた。

ポートフォリオに関する一部解説記事

Railsで取得した値を並び替える方法

Railsアプリケーションで(git push heroku master)を実行したらエラーになる時の対処方法メモ

S3にCarrierWaveを使ってローカル環境・本番環境(heroku)で画像をアップロードする

railsアプリケーションで検索フォームを実装する方法

TOP