しゃべしゃべ

これはシャドーイングをするためのウェブアプリで、任意の文章を読み上げることができます。これは、 ウェブ音声 APIを使ったネイティブ環境での読み上げを使用し、高速にかつプライバシー配慮して動作が可能です。

• HTMLのペーストに対応 — HTMLをペーストした時、スタイルを消して書式そのままにペーストが可能。
• 部分的な読み上げ — 文章を選択した時、その選択した部分だけ読み上げ可能。
• シンプルなUI — ブラウザ標準のデザインを踏襲し、基本配色も二色で明瞭。
• ダークモード対応 — システムに合わせる自動機能付き。

技術スタック

• Bun
• SolidJS
• Tailwind CSS （Preflightが無効化されています。 開発時にはこれを留意してください。）
• GitHub Pages

開発

用語

• Voice: ウェブ音声 APIのSpeechSynthesisVoiceのことで、音声の種類を表す。
• Paper: シャドーイング対象の文章を配置する場所、文章を操作したりするためのクラスが存在する。
• TTS: 読み上げをするためのクラスのこと。
• MainController: 画面上部にある操作パネルのこと。
• QuickController: 大きい画面の場合でかつ、文章選択時にポップアップ形式で表示される小さい操作パネルのこと。

起動方法

1. Bunが必要なのでまずBunをインストール
2. bun iで依存関係をインストール
3. bun devで起動

その他情報

• ライセンス
• ウェブサイト