Flutterで作った柔術大会用スコアボード - オープンソース
(github.com)クロスプラットフォーム開発フレームワークであるFlutterで作った、柔術大会向けのスコアボードを公開します :)
-
GitHub Pagesで動作するWeb版があります。
-
Flutterで作っているため、各種環境(PC、Android、iOS)で動作可能なバージョンとしてビルドできます。
動作する機能一覧は次のとおりです。
-
タイマー: 開始/一時停止/時間変更/6分に戻す
-
音: タイマー開始時、終了時、リセット後の再開始時にピッ!という音を出力
-
選手名の入力
-
各選手ごとに4点/3点/2点単位での得点の加算/減算
-
各選手ごとにAdvantage/Penaltyを付与
-
総得点の計算
-
スコアボードのリセット
これを作った理由は次のとおりです。
-
いろいろな理由で…! Flutterに興味を持って学習し、とても簡単なアプリを作ってみたことがありました。
-
柔術を1年ほど習っていたのですが、私が通っていた道場で大会を開くことになりました。
-
大会で使うスコアボードはモバイルアプリにはあるものの、便利に使えるデスクトップアプリがないという話になり(=選手や関係者が点数を確認できず、審判の案内負担もある)
-
私が開発をしていることを知っていた方々から、半分冗談で「え、これ作れるんじゃないですか!?」と。
-
でもこの言葉を聞いて、ふとFlutterが本当に効用を発揮する題材だと思い…!
-
週末に作って大会で使うことになり、今でも使われています。
既存のスコアボードとの違いは
-
機能的にはほぼ同じです。
-
ただしブラウザで確認でき、ブラウザサイズに応じて上下左右の大きさがすべて変わります。
-
つまりモバイルを含め、どこでも使えるスコアボードです。
-
画面の高さの値に応じて文字サイズが動的に変わります。
Flutterで使われるGetXというライブラリを使って状態管理を行い、
開発構成の複雑さはそれほど高くないため、コンポーネントベースでMVCパターンを使ってUI/Logic/Dataを分離してコードを書きました。
Flutterの基盤言語であるDartで作られており、ぜひ一度ご覧いただき、さまざまなご意見やフィードバック、そしてどのような関心でもお寄せいただけると大変ありがたいです!!
7件のコメント
FlutterでのWeb開発は話では聞いていましたが、実際に見るのは初めてです。
開発者ツールで見てみると、Webを開発するというよりは、
ブラウザ上で動くアプリを作ったように見えますね。
すごいです。~~ 本当にすごい方ですね!!
@misolab そのとおりです。キャンバスに描画する方式なので、完全にただアプリを載せているようなものですね……
実は私も Flutter Web 開発は話に聞いただけの後で、Flutter でブログを作ってみよう!と思ったのですが、この考えは大事にしまっておきました……
基本的に検索エンジンに引っかからなさそうだったんですよね……;
たぶん Google の検索エンジンならやってくれるのではないでしょうか? 変な検索ボットは内容を持っていけないでしょうし、むしろもっとクリーンな領域になるかもしれませんね... ^^;
そうかもしれませんね…!? haha 私も関心を持って引き続き見ていますが、急速に発展しているので期待できそうです haha
Googlebot は Chrome ベースなので、ある程度は可能だとは言われています。
ただ、SEO をきちんとやるなら、ボット向けの HTML バージョンを別途用意しろという話が大半のようです。
あいにく柔術のことはまったく分からないのですが..
ただ、大会で使うとのことでしたので、リーダーボード形式で既存のスコア記録を保存できると良いのではないかと思いました。
選手ごとにログインするなどして、選手別の履歴もできそうです。
それから、私がよく使うアプリの中に、ボードゲームのプレイ記録アプリで
BG Statsというアプリがあるのですが、特定の相手と対戦したときに、何回/何点差で勝ったかなど、相手別の勝率統計を見せてくれるのを思い出しました。
https://www.bgstatsapp.com/
@xguru
わあ、選手の履歴管理までできるプラットフォームへと進化できそうですね…! 洞察に満ちたご意見、ありがとうございます!!
BG Stats、ボードゲームのプレイ記録アプリとは…! 私もいくつかに限ってですがボードゲームがかなり好きなほうなので、ものすごいアプリですね…!
柔術にも得点があるだけに、本当に参考になるコンテンツが多い気がします。
参考リソースまで本当にありがとうございます!!