非エンジニアがサッカー関連のWebアプリを作成してリリースした話

Jリーグの選手の採点を行えるアプリケーションALEGOALを2020年のJリーグの開幕に合わせて作成し、2月ぐらいにリリースして公開しました。

サイトURL: https://alegoal.jp/

これからどんどん認知していただいて、ユーザーの獲得を目指そうと思っていたところでコロナウイルスによりJリーグが中断期間に入ってしまい、少し時間的に余裕ができたのでアプリケーションから作成開始からリリースまでの話を書きたいと思います。

簡単に自己紹介

簡単に私の自己紹介をすると、現在都内のIT企業に勤務していますが仕事でプログラミングをすることはありません。プログラミングに関してはズブの素人でした。しかしまわりにエンジニアはたくさんいて、仲の良い親切な人もいるのでわからないことがあった時に質問すると大体教えてくれます。

今回のアプリケーション作成に使ったPHPのフレームワークのLaravelはまわりのエンジニアが業務中に使っているもので、もしわからないことがあったら教えてもらえるからという理由でチョイスしました。あとVue.jsも使っていますがこれはまわりのエンジニアが業務中に使っているものではなく、なんとなくモダンないい感じの技術だということをどこかで聞いたのでなんとなくチョイスしました。ある程度自分のやりたいことをVue.jsを使うことによって実現できたので導入して良かったと思っています。

サッカー関連のアプリケーションにしようと思ったのは、単純にサッカーを見るのもプレーするのも好きだからという理由で、小学校、中学校、高校とプレーしていて高校はそれなりの強豪校にいたので最高成績は全国大会の準優勝です 。現在30歳なのでもう昔のように体は動きませんがサッカーを見る目には自信を持っています。

プログラミングを学ぶには何かを作ってみるしかない

アプリケーション作成の話に入っていきますが、このアプリケーションの作成において、私はプログラミングを学ぶということをあまり重要視していませんでした。一番重要視していることは「自分の頭で考えたものが思った通りに動く」ということであり、プロのエンジニアに言わせるとなぜそんな書き方をしているんだと思うところが多々あると思います。ただコードを書いて自分が作りたかった機能が動いているとか自分のイメージ通りのデザインになっているといったことはプログラミングを覚える過程で最も重要なことだと思います。

私はこのアプリケーションを作る過程で本を読んだりとか、チュートリアル的なものをやったりとか、動画の講座をやったりということを一切していません。とにかく作りたい機能が先にあってその機能を作る方法をググってググってググりまくるだけです。だいたいのことはググれば出てきます。知り合いのエンジニアに質問すればだいたいどういう風にやればいいかの概要は教えてくれますが、細かいコードの書きかたを教えてくれるほど暇な人はいません。だいたいどこかのサイトのリンクを送ってくれてこれを見れば多分わかりますよといった具合です。

アイディアを考える

まずアプリケーション作成において最初にして最大の難関と言えるのが「アイディアを出す」ところだと思います。私がこのアプリケーションのアイディアを思いついたのは、よく友人と「昨日のあの選手は良かった、あの選手は良くなかった」みたいな会話をしたり、サッカー関連の記事で選手の採点をしているものがありますがそういったことをユーザーが自分でできるようになれば面白いのではないかという考えがなんとなく思いついたからです。

今の時代世の中にエンジニアの人はたくさんいてプログラミングができる人はたくさんいますが、自分で考えたアプリケーションをリリースして公開している人はそんなに多くはないと思います。それは最初の何を作るかを考えることがとても難しいからであり、ある程度自分が気に入るアイディアを思いつかない限りはリリースする前に飽きてしまうのではないかと思います。そういった意味では飽きることなく制作を続けられるテーマを思いつけたことに関しては私は幸運だったかなと思います。

開発期間の話

リリースまでの制作にかかった時間はだいたい毎日2時間ぐらいずつ作業して3ヶ月ほどです。なんとなく試行錯誤しながらやっていたことは以下のような感じです。技術的な突っ込んだ話ではなく概要を簡単に書きたいと思います。

・Dockerで開発環境構築
こちらがまず最初の難関でした。phpとMySQLとnginxの３つのコンテナを立ち上げていますがMySQLのコンテナとの連携がうまくいかずに永遠にMigrationができなかったので丸二日ぐらいエラーと闘っていた気がします。
ただ参考にするサイトを変えた瞬間一瞬でうまくいきました。

・選手の採点投稿フォーム作成
LaravelのBladeにVue.jsのコンポーネントを読み込んで作成。Middlewareでユーザーがログインしていないとログインページへ遷移するようにしている。いろいろ試行錯誤した結果コンポーネント内で親子関係を作って作成している。フォームが2ページに渡っているのでdisplay: noneとdisplay: blockをボタンで切り替えて作成。ある程度フロント側でバリデーションをかけている。選手の人数分だけ採点欄があるので配列にしてpost。基本必須項目だが選手のコメントは全員分書かなければいけないとけっこう大変なので任意項目にしている。

・トップページ
Vue.jsのaxiosでapi経由で試合データを取ってくる。Vue.jsのcomputedで監視してセレクトボックスで選択した試合(J1第1節とか)が表示されるようにようにしている。試合を押すと試合の詳細ページに遷移してその試合のユーザーが投稿したユーザーの採点が見られる。v-calendarを使ってカレンダーを作成。試合がある日に下線がつき日付にホバーするとその日の試合が表示される。ちょっとお気に入りの機能。

開発に関してはその他諸々のページ作成とスマートフォン対応をしました。
これらの機能を作っている間はLaravelのServiceやRepositoryというものの存在を知らずほとんどの処理をコントローラーに書いてしまっているので、今後作る機能に関してはうまく役割ごとにServiceやRepositoryを使いながら、テストコードとかも書いていきたいなと思っています。

本番リリース

本番サーバーはHerokuでドメインはお名前ドットコムで取得しています。HerokuではデータベースはClearDBのMySQLを使っていてdynoは月7ドルのhobbyです。無料のやつだと流石にちょっと遅かったのと、SSLが発行できなかったので。ローカルでちゃんと動いていたものが本番でちゃんと動いていたものがちゃんと動くかヒヤヒヤしながらリリースしましたが、案の定最初はいろいろ起こりました。cssが反映されていなかったり、npmコマンドの走らせ方がわからなかったり、artisanコマンドが動かなかったり。でも出てきたエラーをググりまくって解決していけば丸一日ぐらいで正常にローカルと同じように動いていたと思います。
簡単な個人開発のアプリケーションをデプロイするにはHerokuはとても良いと思います。各種設定とかも簡単ですし、リリースするのもgitでaddしてcommitしてgit push heroku masterと叩くだけでできるので楽チンです。

本番リリース後はGoogle analyticsの設定、集客用のTwitterアカウントの作成を行いました。Google Adsenseで広告を貼りたいなと考えていますが、まだそちらの導入には至っていません。

まとめ

ここまで読んでいただきありがとうございます。私が作成したアプリケーションALEGOALはこれからというタイミングでJリーグが中断期間に入ってしまい、まだ多くの人に利用していただくまでに至っていませんがこれから再開に向けて機能のブラッシュアップ、宣伝強化などをしながら多くの方に使っていただけるように頑張って行きたいなと思っております。

繰り返しになりますが私は非エンジニアであり、仕事でプログラミングをしたことは一切ありませんが、一からアプリケーションを作成しリリースして公開するところまでたどり着くことができました。専門じゃない人がWebで動くものを作って「これ俺が作ったんだよ」なんて言えちゃうのは凄い時代だなと思います。
私の印象としては「調べまくればなんとかなる」というところでしょうか。かかった費用もここまでおそらく数千円ぐらいでしょうか。私が今後エンジニアを目指すかどうかは未定なのですがとりあえず「作れる人」ではなく「創れる人」でありたいなと思います。

最後になりますが、現在コロナウイルスが猛威を振るっており、Jリーグ含む多くのスポーツイベントが中止もしくは延期を迫られてしまっていますが、やはりスポーツのない生活は寂しいですね。１日でも早くコロナウイルスが収束しJリーグのある週末が戻ってくることを願っております。
また再開した暁にはALEGOALを使っていただけると幸いです。