# [オープンソース] Tauri クロスプラットフォームの B站クライアント BBHouse、Vite + Vue 3 + Rust 製

> 状況 1. UP主を2000人以上フォローしており、動態と動画を素早く効率的に見終えることができません 2. B站のWeb版はリソースを消費しすぎて、動画タブを20〜30個開くと新しいEdgeがそのままクラッシュします 3. 最近ランダムに現れるPCDNに、大会員の私はとても苛立っています 4. CMD経由でBBDownを使うのはやや面倒です 目標 …

- 公開日: 2022-08-14
- タグ: Rust, Vue, Web, tauri, フロントエンド
- HTML版を見る: https://bilibili.cat/ja/posts/bbhouse
- 中文からAI翻訳: https://bilibili.cat/posts/bbhouse

---

[![endcloud/bbhouse-tauri](https://opengraph.githubassets.com/e99b6d5fccc2c9ee0d3a4d515f8b337bd98f88bbb64bf7cb3102d0ec121f84f5/endcloud/bbhouse-tauri)](https://github.com/endcloud/bbhouse-tauri)

### 状況

1.  UP主を2000人以上フォローしており、動態と動画を素早く効率的に見終えることができません
2.  B站のWeb版はリソースを消費しすぎて、動画タブを20〜30個開くと新しいEdgeがそのままクラッシュします
3.  最近ランダムに現れるPCDNに、大会員の私はとても苛立っています
4.  CMD経由でBBDownを使うのはやや面倒です

### 目標

1.  購読した動態をカテゴリ別に閲覧できることです
2.  Native Clientで、できればクロスプラットフォームであることです
3.  PCDNを置き換えることです
4.  BBDownのコマンドをラップすることです

### 行動

1.  .NETの経験が少しあり（前職の主要な技術スタックは`ASP.NET Core`）、以前にSwiftUIやAndroid ComposeのようなMVVMフレームワークも実践したことがあったので、いくつかの有名なサードパーティ製B站クライアント（BiliLite、哔哩）のソースコードを読んでみました。しかし、すぐにXAMLの冗長な構文に心が折れました。特にRiderのXAMLサポートもあまり充実しておらず、かなり参りました。
2.  ゼロからC++とQTを1週間学んでみましたが、進捗は非常に芳しくなく、一時的に諦めました。
3.  以前使ったAndroid ComposeにDesktop版のcompose-jbがあることを思い出し、1週間試行錯誤しました。いくつか成果はありましたが、ツールチェーンが原始的すぎて、多くのパッケージはdev-dailyでないと動作せず、バグも比較的多く、Swingをベースにラップした一部のコンポーネントの出来もかなり悪かったため、諦めました。
4.  compose-jbのチュートリアルを見ているとき、コメント欄でTauriを知りました。紹介を読むとElectronの代替を目指しているとのことでした（最初からNativeを追求していたため、Electronは即座に除外していました）。詳しく見ると、バックエンドでnodeをRustに置き換えて、OSとやり取りするbridgeにしているようです。Rustの名前はここ数年よく耳にしており、高性能というイメージが付きまとうため、試してみることにしました。
5.  Tauriを学ぶ中でVue3とViteを知り、実際に触れてその速度に感服しました。Vue 3を学ぶという副次的な目標もあって、開発プラットフォームを決めました。

### 結果

1.  目標はすべて実現しました。
2.  Github Actionsを利用して、複数プラットフォーム向けのReleaseを自動構築しています。
3.  TauriのShell部分には中国語サポートが欠けていましたが、開発版ではすでに更新されており、上流の更新を待っています。

---

# Readme

## TauriクロスプラットフォームのB站クライアント プレーヤー

クライアントと言いつつ、実際には再生と動態関連の機能しか実装していません…ほかの機能はほとんど使わないからです。個人的に推薦フィードには抗えず、スマホ版やWebのホームページもこれまで見ていません。

まず、いくつかの有名なサードパーティ製B站クライアント（BiliLite、哔哩）のソースコードを読んでみましたが、XAMLのあの構文はあまりに辛く、しかもクロスプラットフォームではありませんでした。個人的には半分弱の時間をMacで過ごしています。

紆余曲折を経てTauriを知りました。  
Tauri + Vite + Vue 3で構築しており、Vue 3を学ぶための練習プロジェクトでもあります

-   コアの再生機能と弾幕サポートは[DPlayer.js](https://dplayer.js.org/zh/guide.html#%E5%AE%89%E8%A3%85)によるものです
-   APIはGithubの公開リポジトリ[bilibili-API-collect](https://github.com/SocialSisterYi/bilibili-API-collect/)によるものです
-   Rustでローカルプロキシを起動してストリームを取得します

## 機能

-   極めてシンプルで、動画の動態と再生機能のみです。おすすめフィードはなく、B博もありません
-   動画の動態を、分区 | タイトル | UP主によってフィルタリングできます
-   シングルページプレーヤーで、プレイリストに対応しています
-   ランダムに現れるPCDNを置き換えました
-   BBDownを簡単にラップしています
-   性能は優秀で、リソースの占有も非常に小さいです。実測ではWIN 11での起動速度はネイティブUWPと同等です
-   クロスプラットフォームで、macOS、Ubuntu、WinのインストールパッケージをすでにReleaseしています
-   ライト/ダークテーマに対応しています

## 問題

-   dplayerは混流に対応していないため、そのイベント機構とネイティブaudioを組み合わせて簡単に混流を実現しています。音声と映像が同期しない場合があり（動画を切り替えるときによく起こります）、一時停止してから再再生すると緩和されます
-   コメント欄と弾幕の屏蔽（ブロック）には高度な機能がなく、簡単な閲覧のみを満たしています

## TODO

-   Rust + WASMで再生時の混流を解決し、DPlayerの弾幕エンジンを改善します
-   コメント欄を充実させ、特色ある機能–成分チェック、コメント内容の重複チェックを追加します
-   B站の字幕に対応します
-   マルチウィンドウ再生モード
-   カスタムプラグインのサポート
-   その他の機能モジュールを実装する可能性があります

## リポジトリのURL

Github: [bbhouse-tauri](https://github.com/endcloud/bbhouse-tauri)