More than 5 years have passed since last update.

エンジニアと人生コミュニティ

[アプリ開発TIPs]新人エンジニアがFirebase使ってソーシャルアプリをつくった話

Posted at 2018-04-15

#はじめに

##書いた人
どもども、アプリエンジニアをしてるyokiと申します。24才です😆
2017卒で都内のit企業にエンジニアとして就職し、ちょうど一年が経ちました😏

もう２年目ですよ、、はやい、。

プログラミング歴は1年半ぐらいでまだまだエンジニアとして未熟者な小生です😋

##この記事の目的
🔼そんな僕ですが、プライベートでエンジニアのためのソーシャルアプリ（iOS）を開発しました！

iOS、Swiftが好きでエンジニアになった訳ですが、アプリエンジニアとして「これつくったよ！！」と言えるものが欲しいなとずっと思ってたので、作成してみました。　　
作ったもの： Time To Hack

🔽アプリ概要

この記事では、その際に開発をどういう風に進めて行ったのかや、　どんなことを考えながら開発していったかのTIPsをまとめました😊

これからオリジナルアプリを作ろうと思っている人の参考になればと思います😁

ではでは、以下本題になります📝

#開発フロー
今回開発するにあたって以下のようなフローで開発していきました👀

1.　アイデアを考える
2.　機能書き出し
3.　FirebaseのDB設計
4.　（UI）アプリ画面書き出し
5.　（UI）画面遷移考える
6.　機能開発
7.　必要な画像用意
8.　デザイン当て込み
9.　申請準備

##アイデア出し
アプリ、サービスをつくる時のアイデアの作り方ですが、どうせ個人で作るならやっぱり作ってて楽しいものがいいですよね？✨
でも、じゃあ楽しく作れたらそれで良いやって訳でもなくてやっぱりみんなに使って欲しいわけですよ

そんなわけで自分は　

①「開発していて楽しいもの」
→ 好きな分野のもの、興味があるもの、はまっているものとかに関係がある、ものをつくる

かつ

②「需要があるもの」
→ ニーズがあることがわかっている、めんどくささを解決している、ものをつくる

という視点でアイデアを探していきました

で、具体的なアイデアの出し方については「受動的な」アイデア発想と「能動的な」アイデア発想の２パターンで考えていきました

発想法
「受動的」アイデア発想
いわゆるこういうのあったらいいなあ、めんどくさいなあと日常思っていること（課題）をアプリによって解決していこうとするパターンです⚡️
日頃から「めんどくさい」、「だるい」、「またか」といったことを感じたらメモをとっておいて、この課題を解決するアプリ作れないかなーと考える感じですね
例）
課題：今日て何のゴミの日だっけ、確認するのめんどくせ、、
解決：ゴミの日を設定しておくとプッシュ通知がくるアプリ

- ***「能動的」アイデア発想*** アイデア出しの方法を利用してどんどんアイデアを出していくパターンですよく使っていたのは「組み合わせ法」です〇〇　×　〇〇に単語を当てはめて、「お、いいじゃんこれ」と思ったものをピックアップしていきます　

で今回作成したアプリに関しては後者の「能動的」アイデア発想法で生まれたアイデアを採用しました

エンジニア　× Twitter（ソーシャルアプリ）
という組み合わせが出てきて、

①エンジニア向けのソーシャルアプリ面白そう
→ 「エンジニア」という職業が好き、自分が作ったアプリでエンジニア界隈が盛り上がると嬉しい
→ 「開発していて楽しいもの」の条件を満たす

②プログラミングや開発に関するツイート
→ twitterでProgateやAidemyなどを使ってプログラミング勉強してる関連のツイートや、技術関係のツイートはよく見る
→ twitterの「エンジニア」コミュニティの部分に焦点を当ててアプリ作ったら需要あるかも
→ あと、自分の開発データとか見れたら嬉しいかも
gitやQiitaでも、自分の活動を可視化できるけど、gitで草生やすのはスマホだけではむりだし、Qiitaは投稿しないといけない
そこそこハードル高いなと（課題）
→ twitterみたいに投稿して、その中に含まれる開発データが可視化されると良いよね（解決）

という風に、自分が作りたいもので上げていた2つのポイントに当てはまることと、エンジニアの課題を解決出来そうなイメージがついたので、

エンジニア × ソーシャル
＝『エンジニアのためのソーシャルアプリ』
というアイデアで進めていくことに決めました

##機能書き出し

アイデアが決まったので、
次は、実装が必要な機能を書き出していきます

で、まずソーシャルアプリなので、
・投稿機能
・タイムライン
・プロフィール
・投稿へのアクション機能
・フォロー機能

が必要

でもって、これだと
エンジニア × ソーシャル
のソーシャル部分しか満たせてないので、エンジニア要素入れたいなと

そこで、上であげてたようにエンジニアのデータ可視化て以外とハードル高くなってるという課題を解決するために

・投稿データのグラフ化機能

を追加しました。
エンジニア要素これだけでは少ないなと思ったので、デザイン面でもエンジニア要素を取り入れました（後述）

機能としては、あと「検索機能」とか「タグ機能」とか欲しかったんですが、とりあえずリリースしたかったので、最低限の機能のみを考えました。🔽

アプリに限らずですが、「なにか作って公開する」ということをするときは「カンペキなものを」目指してしまいがちです。ユーザーからのフィードバックを早く受けたいときは「とりあえず終わらせる」思考は大事です。

そんな訳で、機能書き出しについてまとめると、

・アイデアを要素分解してそれぞれの要素を満たせる機能、もしくはデザインがあるか（必ずしも個々の要素を機能に落とし込む必要はなくて、デザインに落とし込んでいってもいい）

・課題を解決する機能があるか

という点がポイントかと思います

##FirebaseのDB設計
今回のアプリのバックエンドには「Firebase」を使用しました🔥

機能が確定したので、Firebaseでどんなツリー構造をとるか考えていきました

今回のアプリでは、全体として「投稿」「ユーザー」「お気に入り（フォロー）」の３つのツリーがあります
具体的にはこんな感じになりました〜

・🔽投稿

action:　他のユーザーからのアクション（いいね機能）
caption:　投稿内容
date:　投稿日時
develop:　作業項目
programmingLanguage:　使用言語
uid:　投稿者の固有ID

・🔽ユーザー

action:　どんなアクションをどの投稿にしているか
develop:　作業項目の累計
getActions:　獲得アクション数累計
git:　gitアカウントのユーザー名
name: 名前
posts:　自分の投稿の固有ID
profile:　プロフィール
programmingLanguage:　使用言語累計
provider:　何でログインしたか（今回はtwitterのみなのでなくてもよかったかも）
twitter:　ツイッターアカウント名

・🔽お気に入り

誰が、誰をお気に入り（フォロー）しているかをユーザーの固有IDとBool値で管理しています。

##（UI）アプリ画面書き出しと（UI）画面遷移考える

紙に書き出して実装のイメージをより具現化させます
ここはテーブルビューだなとか、ここはボタンじゃなくてイメージだなとか、、etc

意外とフリーハンドでババーーーと書いてしまいがちですが、
スマホので型どったものの中に書いていくと良かったりします
というのも実際のサイズでデザインできるので、あとで「思ったより空白めっちゃあるやん、、」とか「これだと全部のアイテム入らないべ、、、」みたいなことが起きないです

ツール使うのもいいですね！
Prottとか有名です💍
アプリもあります📱

色とかまでイメージできてると尚良いかとおもいます
→ 自分の場合はエンジニア感を出すデザイン要素がほしかったので、
musicForProgrammingというサイトのデザインを参考にして色とか、雰囲気を参考にしました。

自分は非デザイナーな訳で、デザイン考えるにしても引き出しが限られてくるな、と思ったのでや「Pinterest」でUIやデザインを検索して🔼のような参考になるものを探してました。
「Pinterest」はストック機能、関連検索が非常に優秀なのでUI探すときにおすすめです⭐️