野球リーグスコア管理システムとキャップ野球情報局に関する進捗です。
旧システムについてはこちらの記事をご覧ください。
「草野球放送局」という草野球のライブ配信補助ツールを作ったのですが、ブラウザにカメラ映像を映してスコアボードと合成する手法だと、どうしても動画の表示部分が狭くなってしまう問題点がありました。
詳しくはREADMEを読んでいただければと思うのですが、
NextJSをcreate-next-appで作るとserviceWorker.jsがないのでCRAから拝借しました。
あれ、iOSでカメラ起動しないな...と思ってたのですが、iOS13以前ではPWAの表示モードが"browser"でしかカメラを起動できません。
PWAでカメラを使うためiOSとAndroidで異なるmanifestを読み込む
なので、react-device-detect
を使ってmanifest.jsonへのリンクをユーザエージェント別に書き換えます。
import * as rdd from 'react-device-detect';
...中略
{rdd.isAndroid && rdd.isChrome
? <link rel="manifest" href="/manifest.json" />
:''
}
{rdd.isIOS && rdd.isSafari
? <link rel="manifest" href="/manifest.ios.json" />
:''
}
iOSは"browser"モードだから表示領域増えないじゃん!!!
androidは(ほぼ)全画面使えますが。
「キャップ野球情報局」というサイトを作っています。
ちまちまとマイナーアップデートを重ねていましたが、
5/17からNextJSへ移植するのと同時に、次のメジャーアップデート(v2.0)を7月リリースを目標に作っています。
twitterアカウントを持っていれば誰でもログインできます。
別サービス「みんなのSCORE」のデータに対応する形で選手ページを持っています。
選手間で「この選手はどういう選手です」という他己紹介をする機能です。
別サービス「みんなのSCORE」のデータに対応する形でチームページを持っています。
チームの紹介のほか、チームのテーマカラーが設定できます。
キャップ野球には、主なイベントとして
がありますが、それらの情報を登録・編集することができます。
運営者ギルドでは画像ストレージとしてimgurを薦められていたのですが、imgurとcloudinary両方を実装して、使いやすさの観点からcloudinaryを採用することにしました。
imgurはOAuth認証すればログイン状態でアップロードできるのですが、ブラウザでPINが必要など使い勝手と実装に難がある印象です。
比較的実装が簡単ですが、imgurでは匿名アップロードした画像をGUIでは管理できません。
工数的にはcloudinaryのログイン状態アップロード≒imgurの匿名アップロードという印象だったので、GUIで全体管理ができるcloudinaryを選びました。用途としては無料枠で足りると思います。