オリアプのREADMEを書いてみた

はじめに

転職活動に向けて作成したポートフォリオサイトに関して、なかなか他の人のオリアプのREADMEを見る機会はないと思い、Qiitaに投稿してみました。他にも書き方は色々あると思うので、一つの案として見てください。尚、いたずら防止のために、アプリのURLは載せていませんので、ご了承ください。

アプリケーション名

CYCLE NOTE

開発環境

• フロントエンド：HTML&CSS / JavaScript / Bootstrap
  
• バックエンド：Ruby / Ruby on Rails
  
• 単体テスト・結合テスト：RSpec
  
• インフラ：AWS（EC2 / S3）
  
• テキストエディタ：Visual Studio Code

ログイン方法

ヘッダー右側のゲストログインボタンから、ゲストユーザーとしてログインすることで、アプリを使用することができます
また、新規登録ボタンからユーザー登録してアプリを使用することもできます

アプリケーション概要

サイクリングの体験を投稿し、共有できるアプリです
アプリの主要機能は以下の通りです

1. 記事の投稿

ヘッダーの新規投稿ボタンから記事投稿画面に移動します
タイトル、都道府県、走行距離、できごと、画像タイトル(任意)、画像(任意)を入力することで、記事の投稿ができます

2. 記事の表示

投稿した記事は、トップページに表示されます

3. いいね機能

投稿された記事に対して、いいねを押すことができます

4. 記事の検索

投稿された記事を、キーワード・走行距離・都道府県の項目で検索することができます

5. 記事へのコメント

記事のタイトルまたは画像をクリックして、記事詳細ページに移動して、記事へのコメントを送ることができます
自分が送ったコメントは記事詳細ページに表示されます

6. 記事の編集・削除

自分が投稿した記事には、記事の右上にプルダウンボタンが表示されます
このプルダウンボタンをクリックして表示されるメニューから、記事の編集・削除ができます

制作背景

• 自分の趣味であるサイクリングに関するアプリを考案しました
• その背景として、インターネット上で、サイクルスポットなどの情報は、淡路島やしまなみ海道といったメジャースポットに関する旅行サイトの記事などに限られており、実際の体験談やマイナーなスポットなどの情報が得にくいと感じていました
• その反面、友人の体験談などから、自分も同じスポットに興味を持つことがあり、サイクリングの体験談は、同じ趣味を持つ人に需要があるのではないかと考えました
• 以上の経験から、誰でも気軽にサイクリングの体験を共有しあえるサービスを考案し、本アプリを作成しました

目的のターゲット層

サイクリングが趣味の人

どんなニーズ&課題に

・他の人のサイクリングの体験を知りたい
・サイクルスポットの情報が知りたい
・おおよそのサイクリング距離が知りたい

実装機能一覧

ユーザー管理機能（新規登録・ログイン）/ 記事投稿機能 / 記事一覧表示機能 / マイページ記事一覧表示機能 /
ユーザー登録情報編集機能 / 記事詳細表示機能 / コメント機能 / 記事編集・削除機能 / 画像投稿機能 /
記事検索機能 / いいね機能 / 記事並び替え機能 / ゲストログイン機能 / ページネーション機能 / レスポンシブデザイン

DB設計

工夫したポイント

• 記事の表示方法に関して、次の2点を工夫しました
  1点目は、サイクリングの用途に合わせた投稿検索が行えるよう、走行距離や都道府県の検索フォームを作成しました（アプリケーションの概要4参照）
  2点目は、自分が見たい投稿が上位に来るよう、投稿日時順やいいね順での並び替え機能を作成しました（下図）
  
  
  

• 異なるデバイスの画面幅に対応できるよう、レスポンシブデザインを実装しました（1枚目：PC画面、2枚目：スマホ画面）
  

今後実装したい機能

• Dockerの導入
• キーワードのタグ付け機能
• ユーザーフォロー機能
• SNSアカウントとの連携
• いいねされた時の通知機能

おわりに

オリアプを作成してみて、いいね機能やレスポンシブデザインなどスクールであまりやっていないような機能も実装したので結構苦戦した部分も大きかったのですが、その分実装できた時はすごく嬉しくて、全体的に楽しみながらできたのがよかったです。

参考

READMEを書くにあたって、画像を数多く使用しましたが、その配置について、下記記事を参照させていただきました。