Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

大会運営サービス「SCORERA(スコアラ)」を作ってみた

394 views

Published on

SCORERA(verβ)https://app.scorera.net

先日、某イベントでLTをしたときの資料です。「SCORERA」という新しいWEBサービスを作ったので、サービスの紹介とその立ち上げで得た経験について発表しました。
技術者の方が多く出席するイベントだったので、技術よりの話が多いです。

章立ては次のようになっています。
1.SCORERAって何?
2.Angular4×Firebase
3.技術の選定と構築
4.一人でサービスを作る

Published in: Business
  • Be the first to comment

大会運営サービス「SCORERA(スコアラ)」を作ってみた

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

×