まえっち開発日誌

この週末に「ド変プレイヤー」を作成していました。

「ド変」とは？
Inagiさんのボカロ楽曲で、VTuberの「けいた」さんが毎回リクエストに応えて歌っています。
けいたさんの声量で、その歌の鼓膜の破壊力が半端ではありません！

朝の出勤時の車の運転中に眠気が抑えられず危険を感じた時に、この曲を聴くことで目を覚まして無事に会社に辿り着けました。この経験からアプリ化して、いつでも「ド変」を聴けるようにしたいと思ったのが作成のきっかけです！

この「ド変プレイヤー」、実はRBPFA(RiotBlue Player For All)として作成を考えてたものがベースとなっています。
Ver0.0ではGoogleスプレッドシートのデータを読み込んで再生するようになっていました。
これは、RBPFAの仕様検討で実現していたものです。
Googleスプレッドシートを読み込むためにGoogleのAPIキーを使わなくてなならず、htmlに埋め込んでありました。
WEB上にAPIキーを公開するにはリスクがあるため、Ver0.1からGoogleスプレッドシートを使わずJavascriptの配列に埋め込む仕様に変更しました。

RBPFAのユーザーインターフェースは、「ド変プレイヤー」がベースとなります。
ユーザーが個人で取得したGoogleのAPIキーと、GoogleスプレッドシートIDをテキストボックスから入力して使えるように改造しようと考えています。
ユーザーが再生したい楽曲データをGoogleスプレッドシートに入力すれば、RiotBlue Playerの特徴である配信で歌った曲をランダムにずーっと再生することができます。

停滞していたRBPFAの制作ですが、「ド変プレイヤー」によって確実に前進しました。

ド変プレイヤー

RiotBlue Playerの初期バージョンと最新バージョンの見た目を比較してみました。

最初のリリースは、2022/9/21 でした。

WEBアプリのプログラムを全く知らない状態で開発を始めましたが、情熱だけはありましたw

RiotBlue Playerを一般公開するためだけに、mahover18.comのドメインを取得しました。

懐かしいなぁ

省電力機能を追加したVer3.2.0をリリースしました。

画面の🪫をタップすると画面表示が消されて、曲名をスクロールするだけの画面になります。
復帰するには曲名をタップします。

RiotBlue PlayerはPWAとなりましたが、基本はWebアプリなのでバックグラウンドになると音声が止まってしまうという欠点があります。
それを克服するためにフォアグラウンドで動作し続けるようにしたのですが、画面表示したままになるので消費電力が大きくなる欠点があります。

この問題を解決するために、省電力モードを追加しました。
この省電力モードが有効なのは有機ELのディスプレイを搭載したスマホだけになります。
有機ELは画面が点灯している部分だけ電力を消費するという特徴があるので、曲名を表示するだけの黒い画面にしてバッテーリーの消費を抑えています。

ピンチイン、ピンチアウトで表示サイズを調整できるのは便利なのですが、RiotBlue Playerとしては表示位置がずれる方が嫌なので、ピンチイン、ピンチアウトで画面の拡大縮小を禁止しました。

結果として検索文字入力する時にテキスト入力が拡大されなくなりました。

RiotBlue playerのPWA化ですが、これでネイティブアプリと変わらない見た目に出来たと思います。

RiotBlue Playerはスマホの縦型表示でデザインされています。

PWA化する時に、縦型表示となる設定を入れているのですが、iPhoneでは横にすると横型表示なってしまうようです。Androidは縦型表示を保持するようです。

自分はiPhone12 miniを使っているのですが、スマホを縦横に回転させると、リサイズがうまく動作しない時がありました。

この対策として、スマホを回転した時にリサイズする処理を追加してVer3.1.2をリリースしました。

Ver3.1をリリース後も検証作業を続けていたのですが、iPhoneでRiotBlue Playerを起動した場合、時間が経つと画面が消えて（スリープ）再生が停止してしまうことがわかりました。

対策としてスリープを抑制する処理を追加したVer3.1.1をリリースしました。

RiotBlue PlayerはWebアプリでしたが、Ver3.1からPWA(Progressive Web App)となりました。

PWAにすることにより、

1. 通常のアプリ同様にインストールしてデスクトップにアイコンを配置できます。
2. 見た目がネイティブアプリのようにブラウザのタイトルやステータスが表示されないので画面全体を有効に使えます。
3. 一時的に電波が悪い状態になっても再生を継続できる可能性があります。

というメリットが生まれました。

Ver3.1では下記の変更実施しています。

1. 表示スタイル調整
2. Webフォント利用による機種間の文字デザインの統一
3. 使用する端末に合わせて横幅がピッタリになるように自動でスケーリング
4. あまり使われていないと思われるリピート機能を１曲リピート機能に変更

同接数＆高評価数カウンターの開発は、もうネタがありません。
RBPV(RiotBlue Player for VTuber)の開発をそろそろ開始しようと思います。
以前に開発方針を書きましたが、運用は無料で使えることを目指します！

このサイトはGoogle Adsenseで広告を表示しているのですが、「世界の不思議UFO」みたいなクリックを誘う内容で、実際にクリックすると「ウィルスに感染しています」という表示をする詐欺サイトに誘導されていました。

Googleには詐欺サイトの広告が表示されると報告したので表示されなくなりましたが、今後もそのような表示が出てもウィルスに感染していることは無いので、詐欺サイトのウィンドウを閉じてください。

Googleで審査した後に表示内容を変更するといった手口なんですかね。

同接数＆高評価数カウンターの虹表示をゲーミングPCみたいにもっと滑らかにスクロールさせたい！

見た目の改善をしました。

これまでは事前に用意した虹の背景をJavascriptのプログラムで2秒周期で切り替えて横スクロールを実現していましたが、CSSのアニメーション機能で実現するようにしました。

プログラムすること無くアニメーションできるのは本当にありがたいです。