野球しかしてこなかった男がWebサービスを作った話
何を作ったの？
スポーツ選手向けのデジタルスポーツノートを開発しました👍
これまでのスポーツ選手たちはノートブックに文字で記録をつけて
自分のプレーを振り返っていましたが
私の作ったスポーツノートでは
動画を使用して体の動きやプレーを詳細に記録できます😀
動画による分析は文字だけの記録では捉えられない
細かな動作や技術の改善点を明確に示し
選手の技術向上に大きく貢献する事ができます！
このデジタルツールにより選手たちは自分のプレーをより深く理解し
パフォーマンスの向上を図ることが可能です！
実際作ったもの
公式アカウント（全く伸びない...💀フォローしてくれたら泣くほど嬉しいです）
写真
スポーツ選手向けの記録アプリ
ここで自己紹介
こんにちわ🤡
情報技術について学んでいる21歳の学生エンジニアです
今までは小・中・高の約１０年間野球をやっていました！
ポジションは小学校の時はキャッチャーで、中高はファースト、サードを守っていました！
打順では主にクリーンアップとして４番か5番を打っていました！
大学でも野球する道がありましたが高校で野球が嫌いになったのでやめました😤
そこで将来どうやって飯を食っていくか考えた時に昔からよくパソコンをよく触ってた事や
VineやTwitterなどの面白いアプリを使っていて自分もみんなを楽しませる
アプリやサービスを作りたいと思い情報技術を学ぶことになりました🫡
エンジニア歴3年目でまだまだ未熟ですが頑張っています💪
そして現在はWeb開発を中心にPython,Typescript,PHP
フレームワークはDjango,Reactをよく使っており
モバイル開発ではSwiftUIでアプリも開発しています
学生時代からの目標は何か意味のあるサービスやアプリを作ることでした
その目標を達成するために、この新しいサービスを開発しました！😎
Twitterもよければフォローお願いします🥺
何で作ったの？？
「野球ノート書くのだっる！！」
「文字だけで記録してこれで何がわかるんだ？」
「前撮った調子の良かったスイング動画ってどれだっけ？」
私の野球少年時代このような事が多々ありました
よく野球ノートをとっているチームは多くあります
身体の使い方などを文字だけで書く場合が多くあります
しかし次の日にノートを見て
「これって、こんな感じの身体の使い方だったよね？」
「文字を見る限りこんな感じ何だけどなあ...」
など文字だけでは伝わらない部分が多々ありました
そして身体をどのように使うのがスポーツにとって重要な点であり
身体の動かし方、力の入れ方を一つ変えるだけで
球速も打球の飛距離も大きく変わっています
上記で書いた通り文字だけではなかなか伝わりません
だからこそ、文字だけでは不十分で、動画での記録が必要だと感じました
動画ならその日の良かった動きを視覚的に見直すことができます。
メモと動画を組み合わせることでさらなる理解と技術的な成長が期待できると思い
このような経験から、従来の文字だけのノートブックではなく
動画とメモを組み合わせた新しい形のスポーツノートの開発に至りました😘
使用している技術やリソース
・Python (DjangoRESTFramework) ・・・ バックエンド データの処理やAPIの構築
・Typescript (React) ・・・ フロントエンド
・Preline UI ・・・ フロントのデザインUI
見栄えの良いデザインとユーザー体験を実現
・Render ・・・ テスト環境と本番環境
・Netlifly ・・・ フロント本番環境
・Google Cloud Drive ・・・ 動画のストレージ
使用理由
Python (DjangoRESTFramework)
私は今回開発する時にバックエンドでPythonのフレームワークである
DjangoのDjangoRESTFrameworkを使用し開発に至りました
以前からDjangoを使用して開発していることもあり
初めてサービスを作るので慣れている言語、フレームワークがいいと思い
このDjangoを使用しました
Typescript (React)
フロントにはTypescriptのReactを使用しました
もともとDjangoにはちゃんとHTMLで表示できる機能があるので
特にTypescriptを使わなくても大丈夫なのですが
これも以前からTypescriptのReactで開発経験があるのと
Reactで作りたい！！っていう気持ちが大きかったので
非効率だと思いますがTypescriptを使用しました。
PrelineUI
Preline UIは、Bootstrapのようなフレームワークで
コピペするだけで簡単に美しいデザインが実現できます。
Preline UIの特徴はそのシンプルさと洗練されたデザインにあり
多様なデザインオプションを提供しています。
デザイン作業に多くの時間を割くことが難しい場合でも
Preline UIを利用することで、手軽に高品質なデザインを実装できます。
この使いやすさと美しさが、Preline UIを特におすすめする理由です！
こちらからどうぞ🤘
Render
テスト環境と本番環境でRenderを使用しました
Renderは、GitHubとの直接接続を通じて、デプロイを簡単かつ迅速に行うことができる
レンタルサーバーサービスです
特にテスト環境ではフロントエンド、バックエンド、データベースの全てを無料で利用できます。
この点は、特に予算が限られている場合や、個人的なプロジェクトでの使用に最適です。
Renderの使いやすさとコスト効率の良さは、開発者にとって大きなメリットとなります🤗
こちらからどうぞ🤘
Netlifly
こちらは本番環境のフロントエンドサーバーで使用しました
NetliflyもRenderとほぼほぼ同じなのですが
こちらの利点はドメインを取得したときにすぐに反映されることです
Renderなら一日？ぐらいかかります
Netliflyは１０分ぐらいで反映されます
あとNetliflyも無料なので適当にポートフォリオを乗せるだけなら
別にNetliflyでいいと思います！
こちらからどうぞ🤘
開発をしていて感じたこと
一人はとても楽しいけど、とてもしんどい👻
この開発は全て一人で開発しました。
全て自分が決めて自分の世界が作れるのでとても楽しいですが
正直とてもしんどいです😭
良かった事
一人で開発するので自分のペース、全て自分のやりたい事ができるのでとても楽しい😀
企画やデザインを考えてる時がとても楽しい(文化祭の準備期間が楽しい現象)
あとは自分の好きな言語やフレームワークが使える事です😘
悪かった事
一人でやっているので正直孤独です😱
全て自分でやらなくちゃいけないのでとても時間がかかります
フロントエンドができても次バックエンドを一からやらなきゃいけない
バックエンドを作ったら今度はインフラ構築...
チームでやればすぐ終わることも全て一人でやります
めっちゃめんどくさいことも苦手なことも🤢
チームで開発する時では主にバックエンドを担当しており
インフラやフロントエンドやデザインは他人任せだったので
今回はそれが裏目に出ました...
まだフロントエンドは手伝っていたりしたのでまだ大丈夫でしたが
インフラは超重要なのに苦手というか全く興味がない分野だったので
完成してからもどうやって構築するか大変悩みました
最初は全てAWSを使って構築しようと思っており
「お金もかかるし、構築むずそうだしやばいなあ...」
と思っていましたが調べていくうちに先ほど紹介した
RenderやNetflilyがあったのでそこはとても助かりました
開発期間
開発期間は約３ヶ月で開発しました
企画立案: : 約１週間
一度テストで作ってみたので: 約３週間
デザインを考えるので: 約２週間
大まかな機能を作って: 約1.5ヶ月
テスト環境動かして: 約１週間
そこから完璧にするための追加の機能: 約２週間
本番環境へのデプロイ: 約1週間
ってな感じです🤓
多分４、５人のチーム開発でやってれば１ヶ月で終わったと思います...
予想より大幅に時間がかかってしまいました😱
つよつよエンジニアへの道はまだまだ遠いですね
この開発期間で良かったことは
「一番大事な機能を先に作る」「完璧ではなく先に終わらせる」「６割作ればOK」
ってことを意識したことです。
もっと機能を盛り込みたかったのですが
まずこのアプリが流行るかもわからないし
この機能でも公開してから改善点や変更点があるのではないか？
って事を思っていたので先に公開してから改善・機能追加をしていこうと
思い開発しました。
全ての機能を盛り込んだら半年以上かかってたと思います...
開発を終えて
作った！！でもどうやってユーザー集めるんじゃあああ！！
「よっしゃああああ！！終わったぞおおおおおお！！」
世間はクリスマス前で彼女を必死で探している12月
約３ヶ月の死闘を制し
ついにWebサービスが完成しました
作ったサービスを公開し自分の学生時代の目標である
「何か意味のあるサービスやアプリを作ること」を達成することができました🧐
ん？？？？？？？？？？？？？？？？？？？？？？？？？
待てよ？？？？？？？？？？？？？？？？？？？？？？？
自分でこれは「意味のあるWebサービス」だと思うけどこれって自己満足じゃね？
ユーザーに使ってもらわなきゃ「意味のあるWebサービス」ってわからなくね？
つまりユーザーに使ってもらわなきゃ「意味のあるWebサービス」かわからないのである
「サービスを公開しました！！」だけではただの自己満足で終了
「どれだけ良い物を作っても使ってもらわなきゃ意味がない」
のである。
人の役に立ってこそ職人なのである🤘
「よし！！じゃあユーザーを集めてみよう！！」
ってなっても全く集まらないのである...(優しい友人は登録してくれました❤️)
SNSでもまず全くフォロワーや知名度がないので伸びない...
悲しいなあ...
次の目標は「ユーザーを集める」ことに重点をおきます👀
PS.個人開発でユーザーの集め方を知っている方は何かアドバイスをくれると嬉しいです😍
自分の夢に一歩前進
初めてサービスを公開することによって
自分の夢である
「自分の作った物でみんなを楽しませる」
ことに一歩前進したのではないかと思います。
今回作ったものは「楽しませる」方向ではないですが
まずは学生時代の目標では「意味のあるWebサービス」を作ることだったので
自分の学生時代の野球をやっていた経験から
このようなサービスがあればもっと楽にもっと良くなるんじゃないか
と思い開発しました
自分が作ったこのサービスが皆さんの役に立てれば
エンジニアとしてこれ以上ない幸せです
これからのサービス運営
まずはユーザーを集めることに重視したいと思います
また自分が作ったサービスを運営してみる事もやってみたいので
まず半年はサービスを運営していきたいと思います
とても難しいと思いますが自分の夢のためにも頑張りたいと思います！
まあこのサービスが伸びなかっても
自分の夢の始めの一歩を踏み出せただけで
このプロジェクトは成功してるので
そこまで重くみていません！
終わりに
ここまで読んでいただいてありがとうございました！
もしよければ自分の作ったサービスに
「これいいね！！」「この機能はもっとこうしたほうがいいんじゃない？」
「この機能つけたら役に立ちそうじゃない？」 など
アドバイスやご指導いただけると嬉しいです！！
作った事がない人はなんでもいいので作ってみよう！
初めてWebサービスを作ろうと思っている方は是非作ってみることをおすすめします！
特に私みたいに学生の方は特におすすめします！
ただ自分のローカル環境で遊びで作るのと
Webサービスを公開するために作るのでは
考え方や、設計方法、やる気が大きく違います！
初めてサービスを公開することはとても大変で難しいです
初めてやることばかりで最初は全くわからないし
ローカル環境とは違って本番環境でやる時は
設定やコードの書き方が大きく違ってきます（セキュリティとか考えなきゃならないから）
何回も躓いて落ち込むこともあります
ですがそこを乗り越えるのが大きな成長になると思います
Webサービスを作った事がいつか大きな経験になると思います
私でもできたので皆さんもできるはずです！！
頑張ってください👍
以上でこの記事を終えようと思います
最後まで拝見いただき、ありがとうございました！！
Discussion