NextJSをPWA化しました

「草野球放送局」という草野球のライブ配信補助ツールを作ったのですが、ブラウザにカメラ映像を映してスコアボードと合成する手法だと、どうしても動画の表示部分が狭くなってしまう問題点がありました。

草野球放送局

• 草野球のライブ配信を補助するツールを作った話

ReactJSをPWA化する方法

• PWA対応

NextJSをPWA化するには

next-pwa

• next-pwa

詳しくはREADMEを読んでいただければと思うのですが、

1. next.config.jsを書き換える
2. serviceWorker.jsを設置する(SW.jsにリネーム)

NextJSをcreate-next-appで作るとserviceWorker.jsがないのでCRAから拝借しました。

PWAでカメラを使うには

あれ、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は(ほぼ)全画面使えますが。

「キャップ野球情報局」というサイトを作っています。

アップデート履歴

• 2019年12月
  • 初版(v1.0)リリース
• 2020年1月
  • マイナーアップデート(ver1.1)

ちまちまとマイナーアップデートを重ねていましたが、
5/17からNextJSへ移植するのと同時に、次のメジャーアップデート(v2.0)を7月リリースを目標に作っています。

次バージョン新機能

twitterアカウントを持っていれば誰でもログインできます。

マイページ

ユーザページ編集

別サービス「みんなのSCORE」のデータに対応する形で選手ページを持っています。

選手へのコメント機能

選手間で「この選手はどういう選手です」という他己紹介をする機能です。

チームページ編集

別サービス「みんなのSCORE」のデータに対応する形でチームページを持っています。
チームの紹介のほか、チームのテーマカラーが設定できます。

イベント登録・編集

キャップ野球には、主なイベントとして

• 大会
• リーグ
• 練習会

がありますが、それらの情報を登録・編集することができます。

次バージョンに採用している技術

• フロント
  • NextJS
  • ReactJS
  • Netlify
  • TypeScript
• サーバサイド
  • NodeJS
  • MySQL
  • Docker(-compose)
  • TypeScript
• ミドルウェアなど
  • slack
  • firebase
  • cloudinary

imgurではなくcloudinaryを採用した理由

運営者ギルドでは画像ストレージとしてimgurを薦められていたのですが、imgurとcloudinary両方を実装して、使いやすさの観点からcloudinaryを採用することにしました。

ログイン

imgurはOAuth認証すればログイン状態でアップロードできるのですが、ブラウザでPINが必要など使い勝手と実装に難がある印象です。

匿名アップロード

比較的実装が簡単ですが、imgurでは匿名アップロードした画像をGUIでは管理できません。

工数的にはcloudinaryのログイン状態アップロード≒imgurの匿名アップロードという印象だったので、GUIで全体管理ができるcloudinaryを選びました。用途としては無料枠で足りると思います。