Scrapboxのノート作成環境をチルなものにするChrome拡張、ScrapboxRelaxExtensionをリリースした

2023-11-22

どんな拡張か

Scrapboxのページ右に追加されるアイコンから、選択したBGMと背景画像でリラックスしたノート作成環境を提供するChrome拡張。現在選択できるBGMと画像は焚き火・雨・森の3種類となっている。

以下がデモ動画。

ストアはこちら。

UserScriptやUserCSSを使用している場合はうまく動作しない可能性があるので注意。

作成動機

しずかなインターネットのムード機能からインスパイアを受け、それをScrapbox上で実現できるChrome拡張を作成した。

もともと自分はScrapboxを使っていたので、しずかなインターネットにあるムード機能がScrapboxにあればScrapboxで完結できると思ってこの拡張を作り始めた。ただ、その間しずかなインターネットを使っていたが、そっちはそっちでScrapboxとは別に使い続けたいと思えるサービスだったので当初の動機はなくなった。ただ、自分のScrapboxのノート作成環境は良い感じにできたので結果ヨシ。

この拡張を作っている最中、Chrome拡張じゃなくてもUserScriptで足りるんじゃないかという思いが頭の中を何往復もしていたが、個人開発なんだから好きなものを作ればヨシ。

こだわったこと

名前

まず名前だが、Scrapbox上で動作するものなので分かりやすさのためにその単語は含める必要があり、造語系の名前は難しかった。ZenScrapboxやCalmScrapboxなどが候補としてあり、ChillinScrapboxという名前で開発を進めていたがどうしても遊びが欲しくなり再び名前を検討した。単語での遊びは難しかったが、韻を踏むのはできそうだということでxで韻を踏むScrapboxRelaxExtensionという名前に最終的に決定した。具体的で分かりやすく、その中に遊びもあって気に入っている。

体験

拡張の体験としてしずかなインターネットのムード機能と揃えるようにした。背景画像が差し代わった後にしばらくしてからブラーをかけたり、再生されるサウンドは切れ目がシームレスになるようにした(後述)。

動画

いつもはストアには画像だけを貼っていたが、今回の拡張の機能にはサウンド再生があるのでそれが伝わりやすいようにデモ動画を掲載した。

ストアに掲載できる動画はYouTubeのものだけだったので必要に迫られてチャンネルを開設して動画を投稿したが、動画という媒体自体はアプリケーションの機能を動きとともに分かりやすく伝えることができる有用なものなので今後ストアのプロモーション用素材として動画も利用していこうと思っている。

今回の学び

音楽の再生にはユーザーアクションが必要

元々はブラウザ上部に表示される拡張アイコンのタップで表示されるポップアップでBGMと背景画像の差し替え処理をしようと思ったが、ブラウザにおける音楽の再生はユーザーのアクションを必要とするためできなかった。

そこで、Chrome拡張のcontent_scriptsを利用して音楽再生用のボタンを設置し、それを押すことで音楽が流れるように対応した。

シームレスなループ再生

音楽の再生にはもう一つ苦労した。音楽はループ再生するのだが、ループの切れ目が発生するので調整に苦労した。最初は音楽の時間を流すことで切れ目自体の発生頻度を減らそうと考えたが、拡張のファイルサイズが大きくなるし結局切れ目は発生するしで方針を変えた。色々と調べて試してみた結果、AudioBufferSourceNodeを使うことでループの切れ目がないシームレスな再生を実現できた。この辺りは別の記事でまとめるかも。

また、今回の開発で音楽編集ソフトに触ったのも新しい経験で面白かった。自分が触ったのは表面だけだろうがサウンド処理には色々あることを知れたのは収穫だった。

Biome

いつもの個人開発ではコードのリント・フォーマッターとしてESLintとPrettierを使っていたが、今回はBiomeを使ってみた。BiomeはRust製のツールチェインでとにかく速い。まだ本番運用するには足りない感じはするものの、先日BiomeのPrettier互換割合が95%まで達したという発表もあり今後有望視できそうなライブラリだと思っている。