記事概要
個人開発でボートレースのタブレットアプリを開発しました。
アプリの機能紹介と、使用技術を記します。
アプリ概要
ボートレースの予想を楽しくするためのタブレットアプリです。
アプリリンク
アプリ名
「舟板(ふないた)」 としました。
開発中はアプリ名なかったのですが、公開するには名前を付けなくてはと思い、小一時間くらい考えました。
ボートレースを投票するときに買うものは舟券、舟券、舟券、舟...舟...舟
タブレットアプリなので、タブレット、タブレット...タブレット...タブレットを日本語で板
八代亜紀さんの歌で「舟唄」...「舟板(ふないた)」 となりました。
VSCodeのdrawioの拡張で作ったロゴはこんなのです。
...壊滅的にダサいことは十二分に心得ております。が！、機能は頑張りました、紹介させてください。
機能
1マークの展開予想
私は(皆さんもそうかと思いますが)舟券を予想するとき、1マークの展開がどうなるかを予想します。本場で予想するときは出走表に赤ペンで1マークで各艇がどうなるかを書いたりします。それをタブレット上でできたらいいなと思い、実装しました。手動でボートを配置することができます。
Fabric.jsを活用して実装しました。
進入予想、スリット予想
進入予想、スリット予想をする画面です。ドラッグアンドドロップでボートの進入コースを設定することができます。スタートタイミングは、事前に入力したスタート展示、選手手帳データの平均スタートタイミング、コース別平均スタートタイミングのいずれかをもとに描画できます。
ドラッグアンドドロップはAngular MaerialのCDKのDrag and Dropを使用しました。
ここで入力したスリット予想を、先述の展開予想のスタートポジションに貼り付けます。
ボートはimgタグで描画し、位置はmargin-leftで表現しました。
GIF動画でサンプルにしているレースの6枠は西島義則選手です。現在の多くのレースが枠なりの中、西島選手が6コースから進入なんて絶対あり得ませんよね!!
出走表作成
予想するレースの出走表を作成する画面です。ボートレーサーのデータは、ボートレースの公式サイトで提供されているファン手帳データを活用させていただいています。ホスティングサービスはDetaを使用しております。Detaが提供するDetaBaseというNoSQLデータベースがあります。そこにファン手帳データから抽出したデータを配置しました。そしてGIF動画のように、レーサー選択ダイアログで出走するレーサーの登録番号を入力すると、サーバーからそのレーサーの情報を取得します。
本当は、開催日前日にボートレース公式に掲載される出走表情報をスクレイピングして、出走レーサーを手入力しなくてもよいようにしたいな、と考えています。
使用技術
フロントサイド
サーバーサイド
ホスティングサービス
残課題
アプリのリンクを貼りましたが、私の独りよがりな操作方法になっているため、初めて見ていただく方には
どう操作してよいかわかりにくいと思います。操作方法のヘルプを作らなくてはいけない思っています。
選定理由
Angular
フロントサイドフレームワークは他にReact、Vue.jsがありますが、私は今のところAngularしか触ったことがないです。なぜAngularにしたかというと、名前の響きが一番好きだったからです。
tailwindcss
もともとcssの作法とかが分かっていなかった自分にはぴったり合いました。
tailwindcssのことは雑誌WEB+DB PRESSで知りました。とても頼りにしていた雑誌なのに、廃刊は残念でした。
GraphQL
ひとつのエンドポイントでデータが取得できるなんて楽ちんだと思い、取り入れることにしました。
NestJS公式のGRAPHQLのドキュメントを参考にしました。実装はいろいろ試行錯誤しましたが、試行錯誤の末、期待した挙動が得られたときはとても達成感がありました。
GraphQLについてもWEB+DB PRESSの記事で知りました。廃刊は...
Deta.space
ホスティングサービスはDeta.spaceを使わさせていただきました。
なんといっても無料だったからです。もともとHerokuにデータベースはPostgresでデプロイしようとしていましたが、うかうかしていたら有料化になってしまいました。かっこよく!?「AWSを使用しています」といえるようになりたいところなのですが、気がついたら結構な請求が来たとか、クラウド破産というような記事をみかけると及び腰になってしまいました。
とは言えDeta.spaceはとても素晴らしいサービスだと思います。プロユースには向かないかもしれませんが個人がサービスを公開するにはもってこいだと思います。公式サイトのそこはかとなく漂うB級感がとても好きですj
Detaについては以下の記事で知ることができました。感謝です。
以下は手前味噌ですが、DetaにNestJS+Angularの成果物をデプロイする記事を書いておりますのでリンクをはらせていただきます。
その他
作業期間、作業スタイル
本職はサラリーマンエンジニアです。帰ってきて夕飯を食べて片づけて、寝る前の1時間前後と、週末の数時間に作業していました。ストイックに毎晩、毎週末作業していたかというと、決してそんなことはなく、疲れたから今日は寝てしまう日や、やらなきゃと思いつつもやらなかった週末なんて数えきれないほどあります。
また、知識を吸収しながら行っておりましたので、「このやり方より、このやり方のほうが良い。このライブラリを使おう...」などとしていて2回、まっさらから作り直しました。今回アップロードしたのは3回目の物になります。3回目のこれは2023年の暮れから作り始めました。実は、まだリリースするにはこの機能つけたいなとか、認識しているバグもあるのですが、
こちらの記事
に書かれていた内容と、そこで知ったDone is better than perfect. という言葉にとても感銘を受け、なんだか背中を押された気がし、公開を決断しました。
コード
コードはGitHubで公開しています。2024/07/25現在、READMEをかいていません。近々書きます。
感想
自分の技術的な名刺代わりとなるアプリを作ろう、好きなボートレースに関するアプリを作ろうと思い立って、コツコツと作り続けて、いや、途中少々嫌になったり諦めかけて全然触らない時期もあったりでしたが、なんとか公開できました。不思議なもので、もうだめかなと思いながらやっててもある日突然ガーッと進んだ日もあったりしました。いつだったかとりあえずどんな形であれ、7月中に公開しようと(本当は6月にと思っていましたが...)決め、少々無理矢理ですが公開しました。少し気分は晴れ晴れです。