Recommandé
Contenu connexe
Similaire à 大会運営サービス「SCORERA（スコアラ）」を作ってみた
Similaire à 大会運営サービス「SCORERA（スコアラ）」を作ってみた (20)
大会運営サービス「SCORERA（スコアラ）」を作ってみた
- 1. 大会運営支援サービス SCORERA - スコアラ – あなたの大会をスマートに - MAKE SMART FOR YOUR COMPETITION - を作ってみた
- 2. 名前：山本 真也（ Shinya Yamamoto ） 肩書：株式会社ShareDan 代表取締役社長 NPO法人日本合気道協会 理事 経歴 2009年～2015年 社会保障関連の出版社で6年間、WEBディレクターとして活動。 2015年～ 2017年 日本合気道協会の理事に就任。フリーランスのフロントエンドエンジニアとして独立。 2017年～現在 株式会社ShareDan（https://www.sharedan.co.jp/）を設立。 SCORERAを作っている人 自己紹介 2
- 9. ２．エントリ管理１．集客 ３．結果管理 9 要項と連絡 受付と管理 リアルタイム共有 SCORERA って何？ SCORERAなら大会がスマートになる！
- 10. 10 • 2017年9月1日リリース （秋田国際合気道大会で初利用） • WEBブラウザに対応 （デスクトップ、スマホで利用可） • 現在は紹介案件のみ対応 • https://aps.scorera.net SCORERA って何？ SCORERAの情報
- 12. Angular4×Firebase Angularって？ • Google謹製のJavaScriptフレームワーク • 2016年9月にver2、2017年3月にver4が リリースされた • コンポーネント志向、リアクティブプログ ラミング、SSR、TypeScript標準対応など、 モダンなWEB技術がてんこもり • https://angular.io/ 12
- 13. Angular4×Firebase Angular-cliで簡単環境構築 13 1. ターミナルを開く 2. npm install -g @angular/cli 3. ng new PROJECT-NAME 4. ng serve
- 14. Angular4×Firebase Angular-cliで簡単環境構築 14 1. ターミナルを開く 2. npm install -g @angular/cli 3. ng new PROJECT-NAME 4. ng serve これだけで動作確認ができる！
- 15. Angular4×Firebase Firebaseとは？ • 2014年後半にGoogleに買収されたｍBaaS • WEBアプリ、ネイティブアプリに必要な機 能が揃っている • 開発期間は無料で使用可能 • Androidのpush通知には必須 • https://firebase.google.com/ 15
- 16. Angular4×Firebase SCORERAで使っている機能 Realtime Database アプリデータを瞬時に保存および同期 認証 ユーザーを簡単かつ安全に認証 Cloud Storage Google と同じ規模でファイルを保存、配信 Cloud Functions サーバーを管理せずに、モバイルのバックエンド コードを実行 Hosting ウェブアプリ資産をすばやく安全に配信 16 バックエンドエンジニアが いなくても、 アプリが作れる！
- 17. Angular4×Firebase SCORERAで使っている機能 Realtime Database アプリデータを瞬時に保存および同期 認証 ユーザーを簡単かつ安全に認証 Cloud Storage Google と同じ規模でファイルを保存、配信 Cloud Functions サーバーを管理せずに、モバイルのバックエンド コードを実行 Hosting ウェブアプリ資産をすばやく安全に配信 17 バックエンドエンジニアが いなくても、 アプリが作れる！ （知識はあったほう方がいいけど）
- 18. 18 様々や！
- 19. 19 様々や！ にも訳があって。
- 21. • 開発者が一人なので、開発工数は少しでも少なくしたい。 • 少しでも多くの人をユーザーにする必要があるため、WEBアプリを 前提とする。（ネイティブアプリは工数が大きくなるので、導入す るなら将来的に） • できるだけライブラリ依存の不具合は避けたい。 • すぐに廃れてしまいそうなライブラリは避けたい。 21 技術の選定と構築 技術選定の方針
- 22. • 開発者が一人なので、開発工数は少しでも少なくしたい。 • 少しでも多くの人をユーザーにする必要があるため、WEBアプリを 前提とする。（ネイティブアプリは工数が大きくなるので、導入す るなら将来的に） • できるだけライブラリ依存の不具合は避けたい。 • すぐに廃れてしまいそうなライブラリは避けたい。 • お金はかけたくない。←重要 22 技術の選定と構築 技術選定の方針
- 23. 技術の選定と構築 今はフロントエンド戦国時代 • ここ数年、WEB技術に関連する ライブラリの進化が激しい • 去年流行っていたライブラリが、 今年使えなくなることもありうる。 • ライブラリの選定は、 慎重に行う必要がある 23
- 24. 技術の選定と構築 今はフロントエンド戦国時代 24 2016年くらいまで使われてた 2015年くらいまで使われてた • ここ数年、WEB技術に関連する ライブラリの進化が激しい • 去年流行っていたライブラリが、 今年使えなくなることもありうる。 • ライブラリの選定は、 慎重に行う必要がある
- 26. • npmでライブラリを管理している。 • 第三者が作成したライブラリを入れ るたびに、不具合が発生するリスク が高まる。 • 採用するライブラリはなるべく少な く、互換性が保証されているものだ けにしたい。 26 技術の選定と構築 SCORERAで使っているライブラリ
- 27. • npmでライブラリを管理している。 • 第三者が作成したライブラリを入れ るたびに、不具合が発生するリスク が高まる。 • 採用するライブラリはなるべく少な く、互換性が保証されているものだ けにしたい。 27 技術の選定と構築 SCORERAで使っているライブラリ に乗ってみよう！
- 28. 28 技術の選定と構築 開発にかかった期間 項目 内訳 所要期間 企画 要件定義 技術選定 技術検証含む 開発 モック作成 Firebase構築 統合 テスト 統合テスト 公開作業 公開から最終テスト 合計
- 29. 29 技術の選定と構築 開発にかかった期間 項目 内訳 所要期間 企画 要件定義 ２か月（2016年9月～11月） 技術選定 技術検証含む ２か月（2016年12月～翌2月） 開発 モック作成 3か月（2017年2月～5月） Firebase構築 3か月（2017年5月～7月） 統合 4か月（2017年5月～8月） テスト 統合テスト 10日くらい（2017年8月） 公開作業 公開から最終テスト 2日くらい（2017年8月） 合計 12か月（2016年9月～2017年8月）
- 30. 30 技術の選定と構築 開発にかかった費用 項目 内訳 費用 ドメイン費用 お名前.com サーバー費用 Firebase 開発工数 バックエンド フロントエンド デザイン テスト 友人に依頼 雑費 githubとか諸々 合計
- 31. 31 技術の選定と構築 開発にかかった費用 項目 内訳 費用 ドメイン費用 お名前.com 1,000円 サーバー費用 Firebase 5,000円（設定上手くやれば0でいけた…） 開発工数 バックエンド 0円 フロントエンド 0円 デザイン 15,000円（素材代） テスト 友人に依頼 8,000円 雑費 githubとか諸々 40,000円くらい 合計 70,000円くらい
- 32. 32 技術の選定と構築 開発にかかった費用 項目 内訳 費用 ドメイン費用 お名前.com 1,000円 サーバー費用 Firebase 5,000円（設定上手くやれば0でいけた…） 開発工数 バックエンド 0円 フロントエンド 0円 デザイン 15,000円（素材代） テスト 友人に依頼 8,000円 雑費 githubとか諸々 40,000円くらい 合計 70,000円くらい 開発費用は10万円以内！…だけど
- 33. 33 技術の選定と構築 サービス構築にかかった費用 項目 内訳 費用 賞状用紙 100枚 利用規約作成 弁護士にスクラッチで依頼 会社設立費用 登記費用 行政書士 税理士 ドメイン費用（co.jp） お名前.com 人件費 自分が動いた分 合計
- 34. 34 技術の選定と構築 サービス構築にかかった費用 項目 内訳 費用 賞状用紙 100枚 3,000円 利用規約作成 弁護士にスクラッチで依頼 300,000円 会社設立費用 登記費用 200,000円 行政書士 50,000円 税理士 30,000円 ドメイン費用（co.jp） お名前.com 3,000円 人件費 自分が動いた分 やる気12か月分 合計 586,000円＋やる気
- 36. • 開発現場は家→カフェ→コワーキングの ループ（ずっと家は無理でした…） • 週５回常駐の受託案件＋夜と週末に開発 →最後の３か月は週３回常駐に変更 • 基本寝不足。 • 常駐している間も、隙あらば勉強する。 36 一人でサービスを作る サービスを作っていた環境
- 37. • 開発現場は家→カフェ→コワーキングの ループ（ずっと家は無理でした…） • 週５回常駐の受託案件＋夜と週末に開発 →最後の３か月は週３回常駐に変更 • 基本寝不足。 • 常駐している間も、隙あらば勉強する。 • とにかく時間が足りない。 37 一人でサービスを作る サービスを作っていた環境
- 38. • 常駐の受託案件だけで、十分生活はできる。 →このままでいいかとなる。 • やる気が継続したのは顧客がいたから。 →途中で投げ出すわけにはいかなかった。 • 大会の開催日が決まっているので、 「間に合いませんでした」は通用しない。 38 一人でサービスを作る 顧客をつけて自分を追い込む
- 39. • 常駐の受託案件だけで、十分生活はできる。 →このままでいいかとなる。 • やる気が継続したのは顧客がいたから。 →途中で投げ出すわけにはいかなかった。 • 大会の開催日が決まっているので、 「間に合いませんでした」は通用しない。 →最後の3か月は超必死。一気に進んだ。 39 一人でサービスを作る 顧客をつけて自分を追い込む
- 40. • サービスの質を上げることに注力。 →営業は二の次。テストをひたすら書く。 • PWAの機能を実装していく。 →今、波が来ているので先に実装しておく。 • 早く一人雇えるくらいの収益を確保する →ずっと一人で作り続けるのはつらい。 40 一人でサービスを作る これからの課題