Skip to content

開発関連情報

Jump to bottom
ranmd9a edited this page Sep 19, 2022 · 23 revisions

最新版

2022年時点の beatlist 最新版ダウンロードはこちらから https://github.com/ranmd9a/beatlist/releases/latest

  • ●beatlist が使えない、という方は、オリジナル版(v1.2.4)を使っているのでしたら上記の最新版をお試しください。

  • Google で beatlist を検索すると gethub-wiki-see というサイト経由でこのページが表示されることがあるようです。なので上にリンクを貼っておきます。

    • github の Wiki ページは google 検索にひっかかりにくくなっているようなので github-wiki-see というサイトが代わりに拾ってくれているようです。
    • github-wiki-see 経由で表示されている場合、一番上の [VIEW ORIGINAL PAGE ON GITHUB]ボタンを押せばこのページに来ます。

  • ページ作成してみた https://ranmd9a.github.io/

開発関連情報

beatlist の挙動について

  • beatlist はすべての曲について beatsaver.com に情報を取りに行き、情報が取得できた場合はその内容を保存(キャッシュ)しています。
    -「Saved Beatmaps」画面の downvote, upvote, downloads はその保存した情報を表示しています。(常に最新が反映されているわけではない)
    ※「Beatmap Online via beatsaver」画面の downvote, upvote, downloads などは常に最新の情報です。
  • オリジナルの beatlist v1.2.4 では、beatsaver.com に情報を取りに行き情報が取得できなかった曲(すでに削除された、あるいはサーバーがダウンしている、etc) は表示されません。
    • ダウンロードしていない曲は曲名がわからず表示しようがないのでそれは仕様です。
    • すでにダウンロードしている曲が表示されないのは不便なので v1.2.6-beta2 以降で修正しています。
      「Saved Beatmaps」画面では beatsaver.com から消されていてもローカルにある曲は表示できるようにしたつもりです。
      「My Playlists」画面から開く各 playlist 編集画面も同様に対応したつもりです。
      ただし 制限事項 も参照のこと。
  • 「Settings」画面にある「UPDATE LIBRARY」ボタンを押すと、CustomLevelsディレクトリのディレクトリ追加/削除、Playlistsディレクトリのファイル追加/削除を探して反映します。
  • beatlist 起動時、beatsaver.com の譜面情報(約50,000件)をキャッシュとして読み込むようにしています。
    • v1.2.6-beta4 以降: 2021年8月初旬のデータ
    • v1.2.8 以降: 2021年9月中旬のデータ
    • v1.3.1 以降: 2021年11月初旬のデータ
  • 「Settings」画面の「CLEAR CACHE」を行うと前述の beatsaver.com に取りに行った情報を削除します。
    • そのあと「UPDATE LIBRARY」を行うと以下の処理を行います。
      1. CustomLevelsディレクトリにある曲を読み込む
      2. Playlistsディレクトリにある playlist の読み込み(あわせて playlist 内の曲情報を beatsaver.com に問い合わせる)
    • 上記 b. の playlist内の曲情報を beatsaver.com に問い合わせる処理を v1.2.6-beta 以降、少し修正しています。
      v1.2.5 までは 3並列で曲情報を取りに行っていたのですが、beatsaver.com から帯域制限エラーが返されたときのエラー処理がうまくいっておらず playlist 内の曲が次々にエラーとマークされて表示されなくなるため。
      また、取得できたデータも1件ずつ短時間に連続して書き込んでいたせいで内部の処理が滞留しメモリ使用量が急増するようなので。
      具体的には 150ms休止を挟んで1件ずつ曲情報を取りに行くようにしています。そのため少し時間がかかります。

処理速度について

  • beatsaver.com のキャッシュは vuex store に格納されていますが、vuex store からの取得をループの中で行うと処理速度が遅くなります。
    • vuex store から取得したデータは、変更検知の対象となるため。
    • 何度も取得する場合は、事前にループの外側で取得しておいて、それを参照する形にできないか検討する必要があります。
      ※常に vuex store の最新を取得する必要がない場合、あるいは少し前のデータでも問題ない場合は、ループの外側で取得しておいたほうが効率がいい。
    • vuex store のデータは vuex persist を使ってディスクに保存され、次回起動時も参照できるようになっています。
    • (個人の感想) beatsaver.com のキャッシュは beatlist を再起動しても維持すべきではありますが、リアクティブである必要はあまりない気もします。
      • vuex store の件数が少ないうちは大したことありませんが、データが増えるにつれて beatlist 起動時にディスクから vuex store にデータを戻す時とか、データを更新する時とかが遅くなるので、速度低下のデメリットが無視できなくなるため。

アイコンについて

通信内容などの確認

  • beatlist 起動中に「Ctrl + Shift + i」を押すと開発者ツールが開く。
    [Console]タブに何かエラーが出ていないか確認できる。

単体テスト

  • すべてのテストを実行

npm run test

  • 特定のテストのみ実行

npm run test PlaylistLoader.test.ts

デバッグ実行

TBD

バージョンアップについて

Electron/Node.js/Vue.js

  • beatlist は vue-cli ベースで作成されているが、vue-cli-plugin-electron-builder の対応が Electron16 までで止まっているので、2022/09時点では Electron 16 までしかアップデートできない。
    • 無理やり 18 とか 20 に上げることもできるのかもですが。
    • ただ Node.js v14.x は 2023/04 でサポート終了するので Node.js v16.x を使用する Electron 16 にする意味はある。
      • Node.js v16.x も 2023/09 でサポート終了ではあるが。
  • Vue.js は version 3.x が現行バージョンになっているが、以下の理由からバージョンアップは難しい。
    • v2.x から v3.x へは変更点が多い。
    • vuetify も v2.x から v3.x へバージョンアップが必要だが、2022/09時点で v3.0 はまだ beta 版。
    • Vue.js の公式は vue-cli より vite を推奨しているが、Vue.js & TypeScript & Electron 公式のテンプレートがない。
      • 非公式のものはある。
  • Vue.js 2.7.x で v3.x 系の Composition API などがバックポートされたが、beatlist で使用している各種ライブラリが古いので v2.6.x 系で止めている。

Jest

  • Jest 27 にアップデートしたら以下のような warning が出るがひとまず無視。

    ● Validation Warning:

  Unknown option "jestWebpackResolver" with value {"silent": true, "webpackConfig": "./node_modules/@vue/cli-service/webpack.config.js"} was found.
  This is probably a typing mistake. Fixing it will remove this message.

  Configuration Documentation:
  https://jestjs.io/docs/configuration

    以下の記述を jest.config.js から package.json に移動すれば解消するらしいが warning なので保留。

    jestWebpackResolver: {
  silent: true,
  webpackConfig: "./node_modules/@vue/cli-service/webpack.config.js",
},

    参考) https://github.com/mkg0/jest-webpack-resolver/issues/17

Clone this wiki locally