はじめに

プログラミングの学習のアウトプットとして、webアプリのポートフォリオを作成しました。
作成したwebアプリ名は『Share-read』です。
「shareして本の知識を自分のものにしよう」というコンセプトを掲げています。

本記事では、制作背景から今後の課題まで本ポートフォリオの全てを記載します。
よかったら最後までご覧ください！

制作背景

社会人になってから、ビジネス本や自己啓発本を読むようになりました。
しかし、読んだらそれっきりになり、せっかく読んだ本の内容もあまり覚えておりませんでした。

ある時アウトプット大全という本を読み、本のアウトプットの重要性を考えさせられました。
そこで、本の内容をアウトプットするために、読書会に参加することにしました。
読んだ本をまとめて人に共有するという工程を踏むだけでも、これまでの読書と打って変わり、本の知識が頭に深く残っていました。
さらに、業務中も本の知識を活かせるようになってきました。

以前の私のように本を読んで終わってしまっている方は、少なからずいるのではないかと考えました。
読書というのは読んで終わりではなく、本の知識を自分の知識として使える状態にすることがゴールであると私は考えております。
そのような考えから本の内容をアウトプットするwebアプリ『Share-read』を開発しようと思いました。

コンセプト

『shareして本の知識を自分のものに』
本の内容をアウトプットして、知識を自分のものとして使える状態にすることを目的としています。

ターゲット

『20代〜30代前半の若手ビジネスマン』
ビジネス書を読もうとするビジネスマン、特に経験が浅い若手ビジネスマンをターゲットに設定しました。

ペルソナ

実際の開発では、ターゲット層からさらにペルソナを設定して担当者間の認識を合わせると思ったため、今回のアプリ開発でもペルソナを設定しました（ほぼ僕のプロフィールですが笑）。

年齢：26歳
職業：メーカーの研究開発部に所属
住居：都内
家族：独身
趣味：筋トレ、散歩、カラオケ

休日は筋トレや散歩をしつつ、空いた時間に読書をする。
読書に関しては、本を読むだけで、特にアウトプットもしていない。
SNSはTwitterとFacebookを使っている。
Twitterはほぼ毎日利用するが、Facebookの利用頻度は低い。
YouTubeを見ることが好きで、最近はSASUKEに出演されている方が取り組まれているチャンネルを見ている。

ポジショニング

本に関するwebアプリはいくつかありますが、マップ化することで、違いを明確化しました。
ビジネス本に特化したアウトプットの領域は既存サービスにはなく、しっかりと差別化できていることがわかりました。

webアプリの使用イメージ

• 本の検索
  

• 本のレビュー
  

機能

• ユーザー関連

• 新規登録機能 / 登録情報編集機能（画像登録可能）

• ログイン機能 / ゲストログイン機能（登録なしでログイン可能）

• フォロー機能（ajaxの利用）

• 通知機能

• 本関連

• 本の検索機能（楽天APIの利用）

• 本棚登録機能（ajaxの利用）

• 楽天の購入ページへのリンク追加

• レビュー関連

• レビュー投稿機能/レビュー編集機能

• レビューの下書き機能

• お気に入り機能(ajaxの利用)

• コメント投稿・削除機能(ajaxの利用)

• コメント編集機能

技術・環境

フロントエンド

• Bootstarp 4.50
• HTML/CSS
• JavaScript、jQuery

バックエンド

• Ruby 2.7.2
• Rails 6.0.3.4

開発環境

• Docker/Docker-compose
• MySQL 5.7

本番環境

• AWS(VPC、EC2、RDS for MySQL、S3、ALB、 IAM、Route53）
• MySQL 5.7
• Nginx、puma
• Capistrano

ER図

インフラ構成図

工夫した点

UI/UX

• サイトのデザイン（配色や配置）は同じようなターゲット層と想定されるサイトを参考にしました。
• 投稿のしやすさを意識し、レビューの投稿画面はmodalで表示しました。
• 内容の吟味をしながらレビューできるように下書き機能をつけました。

環境・技術

• チーム開発を意識し、Gitにpushする際は必ずプルリクを出し、Github上でマージするよう心掛けました。
• 実際の開発を想定し、Rspecでテストコードを記載いたしました。

苦労した点

特に苦労した以下の2点を記載いたします。

楽天APIの利用

外部APIとして楽天APIを利用したのですが、テーブルへの格納等の部分で非常に苦労しました。
楽天APIのサイトやweb上の記事を参考にしながら、実装することができました。
アウトプットとしてQiitaにも記事にしました。
https://qiita.com/Hiroaki_jr/items/983b11a45e2b42c8f3dc

Dockerの使用

今回開発環境にDockerを用いましたが、必要なツールのインストールができていなかったり、データベースの不具合が起きたりと様々なエラーに苦しめられました。
エラー文の読み込んだり、調べたりしながらなぜエラーが起きてしまったのか考えながら進めました。
アウトプットとしてQiitaにも記事にしました。
https://qiita.com/Hiroaki_jr/items/b447cc055bc8a4e882c1
https://qiita.com/Hiroaki_jr/items/05d19d97ebdb38e41527

現アプリの課題

一通り使える状態であるため、アプリをデプロイしておりますが、以下のような点は課題と考えており、現在解決中です。

機能面

• レスポンシブの完全対応
  レスポンシブ対応が不十分なところがあるため、実装した方が良いと考えています。
  ⇨2021/01/14 対応完了しました。

• Twitterログイン
  ターゲットが若手のビジネスパーソンであり、Twitterの利用をしている方は非常に多いです。
  そのため、実際の利用を考えるとTwitterのログインはあるとより良いと考えています。

技術・環境面

• circle CIによる自動デプロイの実装
  現在はCapistranoを用いたデプロイを実装しています。
  実際の開発現場においては、CircleCIが主流かと思いますので、こちらも課題であると考えています。

• 本番環境のブラッシュアップ
  今後はECS等を用いて本番環境でもコンテナ技術を用いていく必要があると考えています。

• リファクタリング
  現在、rubocop等のコード解析ツールを用いてリファクタリングを実施中です。
  ⇨2021/01/16 対応完了しました。

• 結合テスト、統合テストコードの記載
  今回のポートフォリオでは、モデルの単体テストのみとなっているため、今後はRspecの学習に継続して取り組み、結合テストや統合テストも記載していく予定です。

• vue.jsやreactの利用
  現在jQueryを用いていますが、モダンな技術であるvue.jsもしくはreactも今後学習していく予定です。

感想

ここまで読んでいただきありがとうございました！
アプリを開発してみて思ったのは「やっぱり新しい価値を考えて、具現化していくのは楽しい！」ということでした。
実際アプリをデプロイした時は、ガッツポーズしながら、ニヤニヤしていました（at ガスト）。
とはいえ、現在のwebアプリにもまだ課題はあります。
実際のサービスにおいても常にブラッシュアップをしていくと思います。
そのため、本アプリでも現在の課題を改善し、webアプリのブラッシュアップをしていきます！