Chord Dictionary

コードの構成音をその場で確認できる Chrome 拡張機能

アイコンをクリックして起動、ページ上に表示されているコードにカーソルを合わせるとコードの構成音を表示します。 また、クリックやキー操作でコードを再生して音を確認することができます。

ダウンロード

Chrome ウェブストア

開発者向け情報

使用ライブラリ

• Vite
• Vue 3
• VueUse
• Vue i18n
• pinia
• tailwindcss
• daisyUI
• Storybook

音楽系ライブラリ

• Vex Flow
• Tone.js

インストール

pnpm

ローカルサーバの起動

pnpm dev

Storybook 起動

pnpm storybook

Chrome 拡張機能としての動作確認

1. Chrome でchrome://extensions/を開く

2. 右上のデベロッパー モードがオンになっていることを確認

3. 「パッケージ化されていない拡張機能を読み込む」をクリック

4. distディレクトリをブラウザ画面にドラッグ&ドロップ

5. 任意のサイト上で右上の拡張機能のアイコンをクリック

アップロード用の zip の作成

pnpm build
pnpm build-zip

タグ付け（リリース用の zip ファイルの生成）

Note

先にmanifest.jsonとpackage.jsonに記載されているバージョンを変更する

git tag v*.*.*
git push origin v*.*.*

Releaseにファイルがアップロードされる