「ブログでこのリフのTAB譜を見せたい」 「レッスン用サイトに、今日のコード進行をそのまま載せたい」 「自分のサイトで、譜面を貼り付けながら解説したい」
譜面をWebページに載せようとすると、たいていはスクリーンショットを撮って画像で貼ることになります。でも画像は、解像度によってはTABの数字がぼやけて読みにくかったり、譜面が横に長いと小さく潰れてしまったり——「読ませる」にはもうひと工夫ほしいところです。
notave の 埋め込み を使えば、作った譜面を 画像ではなく「本物の譜面そのもの」 としてブログやWebサイトに貼り付けられます。読者はページを開くだけで、クリアな五線譜・TAB・コードをそのまま見られます。この記事では、埋め込みコードの取得から貼り付け方、注意点までを紹介します。
notaveの「埋め込み」とは？
埋め込みは、作った譜面をWebページの中に そのまま表示できる 機能です。下が実際に埋め込んだ例です。画像ではなく、本物のnotaveの譜面がこのページ上に表示されています。
この譜面は、この記事のページに実際に埋め込んだものです。再生はもちろん、カポの移動やインターバル（度数）表示の切り替えも、その場で試せます。
ポイントは、共有リンクと同じ仕組みで、譜面のデータが URL自体に埋め込まれている ことです。どこかのサーバーに譜面を保存しているわけではありません。だから——
- 読者は ログイン不要・インストール不要 でそのまま見られる
- 画像と違い、読者がその場で 操作できる（再生、カポの移動、インターバル表示のON/OFF）
- 画像のように潰れず、譜面が くっきり鮮明 に表示される
- データはURLに埋め込まれているので、リンク切れの心配が少なく、表示も軽い
スクショやPDFと違い、「本物の譜面」をページ上にそのまま見せられる、というのが埋め込みの一番の特徴です。
埋め込みコードの取得（3ステップ）
① 譜面を作る／開く
埋め込みたい譜面を notave で作るか、開きます。コード進行だけのシンプルなものでも、作り込んだTAB譜でもかまいません。
② 共有ダイアログの「埋め込み」タブを開く
「譜面を共有」ダイアログを開き、「リンク」から「埋め込み」タブに切り替えます。その譜面をページに表示するための 埋め込みコード（<iframe ...> で始まるHTML）が表示されます。
③ 埋め込みコードをコピーして貼り付ける
「コピー」ボタンで埋め込みコードをコピーして、ブログやWebサイトのHTMLに貼り付けるだけです。高さは自動で調整されるので、サイズの細かい指定はいりません。貼り付けた場所に、上の例のような譜面がそのまま表示されます。
どんなサイトに貼れる？
埋め込みコードは <iframe> タグのHTMLです。iframe の埋め込みを許可しているサイトで動作します。たとえば——
- 自前（セルフホスト）の WordPress：「カスタムHTML」ブロックにコードを貼り付けます。
- Ghost：HTML カードにコードを貼り付けます。
- 自分の Web サイト：HTML の好きな位置に、そのまま貼り付けます。
note や、iframe を許可していないサービスでは？ note をはじめ、任意の iframe 埋め込みを許可していないサービスもあります（レンタル型のブログサービスなどに多い）。その場合は、埋め込みコードはそのままでは使えません。代わりに、共有リンクのURLを本文に貼って、「リンクから譜面を開いてもらう」形がおすすめです。
共有リンクとの使い分け
notave には、譜面を渡す手段が2つあります。目的で使い分けると便利です。
- 共有リンク：譜面を 人に渡して見てもらう ためのURL。相手は閲覧・印刷・日英切替ができ、「コピーして編集」で自分の譜面として続きを作れます。レッスンの個別配布やバンド・SNSでのやり取りに向いています。
- 埋め込み：譜面を Webページの中に表示する ための機能。ブログ記事やレッスンサイトなど、「多くの読者にそのまま見せる」場面に向いています。
ざっくり言うと、「人に渡す」なら共有リンク、「ページに載せる」なら埋め込みです。
まとめ
notave の埋め込みは、作った譜面を画像ではなく「本物の譜面」としてWebページに表示できる機能です。
- 「譜面を共有」ダイアログの「埋め込み」タブから 埋め込みコードをコピー
- 自前の WordPress・Ghost・自分のサイトなど、iframe を許可しているサイトに貼り付け
- 読者は ログイン不要・インストール不要 で、クリアな譜面を閲覧でき、再生・カポ移動・インターバル表示まで操作できる
まずは譜面を作って、埋め込みコードを貼ってみてください。notave.zelva.dev なら、登録もインストールも不要で今すぐ始められます。
譜面を1対1で渡したいときは、共有リンクの使い方もあわせてご覧ください。
