はじめに
こんにちは！
しばた（@shibata0406）と申します！
地元の食品メーカーにて営業をやっておりましたが、現在はYouTube活動をしながら転職活動中！
興味のある方はぜひ見ていってください〜
→YouTubeチャンネル「ポントイズ」
今回は、ポートフォリオとして作成した「ラーメンサイト」をご紹介いたします。
ポートフォリオ「俺のラーメン」
ラーメン好きの(僕の)ラーメン好きによる(僕による)ラーメン好きの為の(僕のための)ラーメンサイトです。
URL : https://myramen.herokuapp.com/
GitHub : https://github.com/shibata0406/myramen.git
なぜ作ったのか
ラーメンが大好きだからです。w
今まで学んだ技術のアウトプットとして、自分でワクワクしながら作れるサイトを目指しました。
ラーメン好きの方はぜひ見てやってください。
※深夜に閲覧する際はご注意ください(飯テロ)。
制作日数
最初にデプロイするまでおよそ30日、
その後修正や機能追加を経て現在の形に至るまでおよそ30日、
計60日でした。
こだわり
非ログイン時にどこまでアプリを使用できるか、
→トップページのラーメンや、ユーザーページの閲覧は可。投稿や検索、フォロー、お気に入り等はログイン必須にしました。
また、どんなサイトなのかパッと見で分かりやすいよう、トップページにはラーメンの一覧を表示。
ユーザー層を考え、サイトのお洒落さよりも、わかりやすさを重視しました。
機能一覧
バックエンド
●Ruby 2.5.1
●Rails 5.2.4.1
・投稿機能
・スクレイピング
・検索
・ログイン、ログアウト(devise)
・ランキング
・ページネーション(kaminari)
・画像アップロード(Active Storage、Mini Magick)
・コメント・評価
・フラッシュメッセージ
・Faker(faker 2.8)
フロントエンド
・お気に入り機能(jQuery,Ajax)
・フォロー機能(jQuery,Ajax)
・タブメニュー(jQuery)
・ドロップメニューで削除、編集(jQuery)
※CSSのフレームワークBootstrapは使用せず、一から組み立て実装しました。
インフラ
・Amazon S3
・heroku
・MySQL(管理ソフト Sequel Pro)
※今回、初のデプロイはHerokuで行いました。AWSに挑戦できるよう学習中でございます。。
使い方・デモ
①トップページ
こちらがログイン後のトップページです。
左右で「ラーメン一覧表示」「評価数ランキング」を表示しています。
②ラーメン詳細
気になるラーメンをクリックすると、この画面に移行します。
③コメント評価の投稿
ラーメン詳細ページから「このラーメンを評価する」で評価画面へ移行。
④ラーメン検索画面
検索窓にキーワードを打ち込み、当てはまるラーメンを表示します。
⑤ユーザー画面
ユーザーの過去のレビューやお気に入り、フォロー・フォロワー、ユーザー情報の編集画面です。
反省点
・DockerやCircleCI等の技術が活用できていない。
・テストが十分に書けていない。
・レスポンシブ対応が不十分。
・趣味のサイトのため、日常に役立つものではない。
など多くの反省点や課題が残っています。
次のポートフォリオで課題を解決していきます！
最後に
今回初めて一からwebサービスを作りデプロイしましたが、
あーだこーだ考えながらコードを書くのが最高に楽しかったです！
もっと設計段階に時間を割くべきだったと反省点はありますが、何より自分の考えたサービスが形になっていくという事に、ワクワクが止まりませんでした。
今回はラーメンサイトよりスクレイピングで情報を取得し、お気に入りやラーメン検索、投稿機能を実装するなど、今の技術を表現するポートフォリオとなりました。
今後はより日常生活で活用できたり、友達や家族で実際に使える便利なサービスを作りたいと考えています。
(お笑いが大好きなので、お笑い好きが集まるマッチングサイトなど作りたい。。。)
今回無事にデプロイできたのも、もくもく会で出会った方やTwitter、Qiitaや友人エンジニアなど多くの方にアドバイスを頂いたおかげです。大変感謝しております。
今後もプログラミングの学習を続けながら転職活動を頑張りたいと思います。
Qiitaも不定期で投稿しておりますので、もしよければフォローのほどよろしくお願いいたします。