gotoshin

主に学んだ事の自分メモ用です。記事に書くまでも無いような事はhttps://scrapbox.io/study-diary/に書いてます。

【ミニ個人開発】本の栞代わりになるサービスを作ってみた

どんなサービス?

サービス名

(1円で購入したドメインなのでドメイン名は目をつむってくださいw)

解決できること

個人的に本を読むのが好きで同時に複数冊を読むのですが、以下の課題がありました。

  • 何と何の本を同時に読んでいたか分からなくなってしまう

    • 本棚に収納すると、どれが読んでる本でどれが読み終えてる本なのか、ぱっと見で把握出来ません。
  • どこまで読んでたか分からなくなってしまう

    • 紙の栞でも良いのですが、頻繁になくしたり挟んでいたページから落ちたりします。

これらが解決出来るサービスです。

(ざっくりこんな雰囲気です)

f:id:hatehate-nazenaze:20200819122602p:plain

f:id:hatehate-nazenaze:20200819122642p:plain

なぜ作ったか

  • インフラ周りをやってみたかった。

    • 一番はこれです。アプリケーションの機能はある程度なら実装出来るのですが、ドメイン取ったりサーバ立てたりする等インフラ周りの知識が不足しており、仕事中に困った事もあったので手を動かしてやってみようと思いました。
  • 1つ形になるものを作ってみたかった

    • 今の自分のスペックで、何でも良いので一つアプリケーションを完成させてみたかったです。どうせやるなら日頃自分が感じている課題を解決出来るものの方がモチベーションが続くだろうと思い、本の栞代わりになるサービスにしました。

どう作ったか

アプリケーション

フロントエンド = Nuxt.js×Bootstrap-vue
  • Nuxt.jsは学習コストの低さで選定しました。
  • Bootstrap-vueスマホでも使いたかったため、レスポンシブデザインが簡単に作れるため選定しました。
  • 特にdocker等は使わず、ローカル環境でそのまま開発しました。
バックエンド = Rails
  • Railsは学習コストの低さで選定しました。

  • docker環境を構築し開発しました。

dockerでRails×mysqlのAPI用環境構築 手順 - gotoshin

docker-compose.yml備忘録 - gotoshin

認証 = firebase Authentication
  • ユーザーに紐づく情報(名前、生年月日など)を使用しないシステムだったため、簡単に実装出来てかつ不便はありませんでした。
  • googleアカウントでのログインも簡単に実装出来ました。

nuxtの環境でFirebaseを使用出来るようにする - gotoshin

インフラ

f:id:hatehate-nazenaze:20200819121727p:plain

ホスティング = Firebase Hosting
  • 認証で使用するために、Firebaseプロジェクトが作成済みだったこともあり、簡単にhosting出来ました。
DNS サーバ = Cloud DNS
  • GCPメインで使用していたため、これも合わせてCloud DNSを使用しました。
アプリケーションサーバ = puma、Webサーバ = Nginx
  • Railsでよくある構成で作りました。

Railsアプリケーションをcapistrano × GCE(nginx × puma)× CloudSQL(MySQL)× でデプロイ【Nginx & SSL設定編】 - gotoshin

ファイルストレージ = Cloud Storage
  • 画像等のファイルデータはCloud Storageに保管しています。

ActiveStorage×GCSで画像アップロード - gotoshin

デプロイ = Capistrano

関連記事

その他このアプリケーションを作成する中でまとめた記事です。

inputタグ×JS×axiosで画像データの取得からバックエンドへ送信まで - gotoshin

Nuxt × quaggaJSでバーコードの読み込み - gotoshin

nuxt×axiosでローディング処理の共通化 - gotoshin

RSpecを使ってコントローラで簡単にテストやってみた - gotoshin

nuxtでvee-validate3を使ってみる - gotoshin

RuboCopを導入してみる - gotoshin

どうだったか

当初の目的

インフラ周りをやってみたかった。

  • 正直かなり苦戦しました。コードを書いていくのとは違い、エラーの詳細を追うのが難しいので、これ解決するのか?と思う事が何度もありました。スマートなインフラ構築とは程遠い、粘り勝ちでのインフラ構築だったなという感覚です。(笑)
  • ただ、実際に手を動かしてみてこれまで点と点だったものがしっかり繋がったのでやって良かったです!

1つ形になるものを作ってみたかった

  • 世の中にある個人開発のプロダクトを見て自分にも作れるかも!と思ってましたが、いざ自分で作るとなると思いの外大変で、特にどこまでやるかの線引が難しかったです。やろうと思えばいくらでも機能もりもりに出来る中で、取捨選択して「完成」に到達するのはそれはそれで一つのスキルかもしれないと思いました。
  • とはいえ、まだまだ手持ちの知識が少ないので今後もどんどん手持ちの知識を増やして出来る幅を広げていきたいと思いました。
  • 機能はかなり少ないwebサービスですが、今後も実際に使いながら機能改修していきたいと思いました。

その他

  • 普段の業務とは違いじっくり時間を掛けて開発出来たため、手持ちの知識の理解がより深まりました。
  • 今回デザインはそんなに力を入れるつもりはありませんでしたが、少し色味を調整するだけで一気に完成度が高くなったりしたので、デザインの力は重要だなと改めて思いました。(出来ているとは言ってない)
  • 何よりも自分で考えてそれを形にしていくのってやっぱり楽しいなと思いました。