プログラミングに関する情報を中心に、デザイン、ライフハックなどの記事を更新していくブログです。

ユウマのブログ

TECH::CAMP

テックキャンプのカリキュラムで開発した個人アプリを紹介!

techcamp64期_個人アプリ紹介
ユウマ
こんにちは、ユウマ(@yuuuma_11)です。

テックエキスパートではカリキュラム内の1つに、個人アプリ開発が含まれていました。

個人アプリ開発中はメンターさんへの質問が一切できないため、基本的に自分1人で最初から最後まで開発を進めることになります。

今回は、その個人アプリ開発で僕が実際に開発したものをご紹介していきたいと思います。

ユウマ
開発の中で使用したツールやサイトも合わせて紹介していくので、これから個人アプリを開発しようとしている方には、きっと参考になるかと思います。

スポット投稿型SNS「Spot Share」

早速ですが、以下が僕が開発した個人アプリの「Spot Share」になります。

URL→https://spot--share.herokuapp.com/

※Herokuを使用してデプロイしているため、初回アクセスに時間がかかる可能性があります。また、ユーザー登録時にプロフィール画像を選択することができますが、ストレージを使用していないため一定時間が経過すると消えてしまいます。

spot_share

内容は、Googleストリートビューを使って自分のお気に入りの場所や、人にオススメしたい場所をコメント付きで投稿できるサービスです。

投稿詳細画面↓

投稿詳細画面

ユウマ
投稿に対してコメントしたり、いいねをつけることも可能です。

「Spot Share」を制作した理由

このアプリを開発した理由は、テックエキスパートで学習した内容を復習しながら身につける為です。

そのため学習したRailsの基本的な機能は、大体盛り込みました。

以下が、具体的な機能の内容です。

実装した機能

  • ユーザー登録、編集、削除
  • 投稿
  • コメント
  • いいね

僕なりにこだわった部分ですが、バックエンドは基本的な部分のみを実装し、他の受講生と差別化を図るためにフロントに力を入れました。

例えば以下は投稿一覧の画面ですが、カルーセルスライダー、CSSアニメーションなどを使っています。

投稿一覧画面

ただ、CSSアニメーションを使ったり、Googleストリートビューからリアルタイムで情報を読み込めせる仕様にしたため、サイト全体がかなりもっさりしてしましました...。

ユウマ
ちなみに、全ページレスポンシブ対応です。

データベース設計

こちらがデータベース設計をする際に作成したER図です。

SpotShare_ER図

基本的な機能しか実装しなかった為、テーブル数はかなり少なく以下の4つになりました。

テーブル

  • Userテーブル
  • Areaテーブル
  • Commentテーブル
  • Likeテーブル

開発で使用したツールとサイト

開発で主に使用したツールやサイトは以下の5つです。

開発で使用したツール&サイト

  • Canva
  • Photoshop
  • O-DAN
  • Mixkit
  • TinyPNG

1つ1つ解説していきたいと思います。

Canva

Canvaは無料で使えるデザイン作成ツールです。(※一部有料)

Spot Shareのロゴ画像とファビコンを作る為に使いました。

Canvaについては、以前執筆したこちらの記事で詳しく解説してますので、良ければご覧下さい。

【Canva】 初心者でも簡単に作れるデザインツール
【Canva】初心者でも簡単にデザインを作成できる無料ツール!

ユウマこんにちは、ユウマ(@yuuuma_11)です。 「ブログで使うアイキャッチ画像を作ろう!」 「webサイトのロゴ ...

続きを見る

Photoshop

Photoshop画像編集ソフトウェアです。

Canvaで制作したロゴ、ファビコン画像の背景を透過したり、背景画像の彩度を調整するために使用しました。

Photoshopは使用するのに最低でも月額980円〜かかってしまいますが、作業の幅が広がるのでインストールすることをオススメします。

O-DAN

O-DAN商用利用可能な無料写真素材を様々なサイトから検索し、ダウンロードすることができるサイトです。

様々なサイトから入力したキーワードに関連する素材を検索してくれるので、数もとても多く大抵困ることはありません。

Spot Shareで使用している背景画像は全てO-DANからダウンロードしてきたものになります。

Mixkit

Mixkit商用利用可能な動画素材を無料ダウンロードできるサイトです。

Spot Shareのトップ画面で流れている動画が、このサイトでダウンロードしてきたものになります。

他のフリー動画サイトと比べて、無料会員登録などは一切せずにダウンロードすることができるので、今回このサイトを制作しました。

TinyPNG

TinyPNG無料で使える画像圧縮サイトです。

ダウンロードしてきた画像や、Canvaで制作した画像を圧縮し、画像サイズを小さくするために使用しました。

ユウマ
画像サイズを小さくする目的としては、ページの表示速度を上げるためです。

TinyPNGは他のサイトと比較して、圧縮率がとても高く便利なのですが、1だけ欠点があります。

それは画像サイズが5MBまでしか対応していないことです。

なので圧縮したい画像のサイズが5MB以上の場合は、他の画像圧縮サイトで画像サイズを5MB以下にすれば、TinyPNGで圧縮することが可能になります。

ユウマ
ちなみに、僕がTinyPNG以外でよく利用しているサイトはiLoveIMGです。

最後に

初めて個人アプリを開発してみて、まず何を作るかを考え、その他にもUI/UX、機能、構成などすべて自分自身で考えなければいけなかったため、とても大変でした。

今回記事にしたカリキュラム中に開発した個人アプリ以外にも、テックエキスパート卒業後に新しい個人アプリ開発しリリースし、Qiitaに投稿しているので興味があれば是非ご覧下さい。

「実務経験無しの僕がRailsで「アイデア投稿サービス」をリリースしてみた」

-TECH::CAMP

Copyright© ユウマのブログ , 2020 All Rights Reserved.