pluri.tools
🇯🇵
🇬🇧 English 🇧🇷 Português 🇪🇸 Español 🇫🇷 Français 🇩🇪 Deutsch 🇮🇹 Italiano 🇯🇵 日本語 🇳🇱 Nederlands 🇵🇱 Polski 🇹🇷 Türkçe 🇸🇪 Svenska 🇳🇴 Norsk 🇩🇰 Dansk
音楽

無料メトロノームを自分のサイトに埋め込む方法

1 分で読了

音楽ブログ、個人レッスンのサイト、コード譜がたくさん載っているページを運営しているなら、自分で作らなくても動くメトロノームを追加できます。小さなコードスニペットをコピーしてページに貼り付けるだけで、20〜300 BPMのテンポ調整、タップテンポ、拍子選択、3種類のクリック音を備えたメトロノームが表示されます。すべて訪問者のブラウザ内で動くので、インストールもアカウント登録も不要です。

これがそのコードです。

<div style="max-width:440px;margin:0 auto;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden">
  <iframe src="https://pluri.tools/embed/ja/metronomu" title="メトロノーム — pluri.tools" width="100%" height="600" style="border:0;display:block;width:100%" loading="lazy"></iframe>
  <a href="https://pluri.tools/ja/metronomu/" target="_blank" rel="noopener" style="display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 8px;border-top:1px solid #e2e8f0;font:500 12px system-ui,sans-serif;color:#64748b;text-decoration:none">
    <img src="https://pluri.tools/favicon.svg" alt="" width="16" height="16" style="display:block" />
    Powered by pluri.tools
  </a>
</div>

これで統合は完了です。このガイドの残りでは、デザインへの合わせ方、WordPressやWix、Notionへの貼り付け方、そしてiframeにスクロールバーを絶対に出さないコツを説明します。

ページにメトロノームを置く理由

メトロノームは、読者がまさにあなたのコンテンツを読んでいるその瞬間に探す道具のひとつです。前でも後でもなく、そのときです。埋め込みウィジェットが読者を別のページに送るリンクより優れているケースをいくつか挙げます。

  • レッスンページ。 「このスケールを80 BPMで練習しましょう」と説明する先生は、練習内容のすぐ下にメトロノームを置けます。生徒がそこまでスクロールしたときにはもう準備万端です。
  • コード譜や楽譜。 楽譜の隣に曲のテンポを表示しておけば、演奏者は最初から正しいテンポで入れます。
  • 練習メニュー。 スピードアップをテーマにした記事なら、各ステップにその練習に必要な道具を添えられます。
  • バンドやスタジオのサイト。 訪問者をページに長く留め、また訪れる理由になる小さなツールです。

ウィジェットはiframeの中で動くので、ページの他の部分には一切干渉しません。あなたのコンテンツを読み取ることも、サイトのURLを書き換えることもなく、単独で読み込まれます。

ここで実際に試せます

これは上のコードとまったく同じスニペットで、このページ上でライブに読み込まれています。ボタンでライトとダークを切り替えられ、下のコードもそれに合わせて更新されます。スタートを押す、テンポをドラッグする、曲のリズムに合わせてタップテンポを叩いてみてください。

上に表示されているものすべて、あの小さな提供リンクも含めて、あなたがこのコードを貼り付けた瞬間にサイトの訪問者が目にするものとまったく同じです。

サイトの色に合わせる

デフォルトでは、ウィジェットは訪問者のシステムテーマ（ライトまたはダーク）に従います。ページのデザインが固定されている場合は、URLのthemeパラメータでテーマを強制できます。

<!-- 常にダーク -->
<iframe src="https://pluri.tools/embed/ja/metronomu?theme=dark" ...></iframe>

<!-- 常にライト -->
<iframe src="https://pluri.tools/embed/ja/metronomu?theme=light" ...></iframe>

幅については、コンテナがmax-width:440pxで制限し、iframeがwidth="100%"でそれを埋めるので、モバイルでは狭いカラムいっぱいに広がり、デスクトップでは不自然に広がりすぎません。レイアウトがより狭い場合はコンテナのmax-widthを、他のカードに合わせたい場合はそのborder-radiusを調整してください。

ウィジェットは13言語すべてで利用できます。パス中のjaを希望の言語に置き換えてください。英語なら/embed/en/metronome、ドイツ語なら/embed/de/metronomです。各言語はURL内に独自のスラッグを持つので、対応するものを使ってください。

スクロールバーとはお別れ：iframeを自動で高さ調整する

どんなiframeでも一番厄介なのは高さの固定です。低すぎるとコントロールが切れ、高すぎると空白が残ります。この埋め込みは、高さが変わるたびに実際の高さを親ページに知らせることでこの問題を解決します。そのメッセージを受け取って、フレームのサイズを合わせるだけでOKです。

iframeにidを付け、ページ内のどこかにこの短いスクリプトを一度だけ追加してください。

<iframe
  id="metronomu-embed"
  src="https://pluri.tools/embed/ja/metronomu"
  title="メトロノーム — pluri.tools"
  width="100%"
  height="600"
  style="border:0;max-width:440px;border-radius:12px"
  loading="lazy"
></iframe>

<script>
  window.addEventListener('message', function (event) {
    if (event.data && event.data.type === 'pluri-embed-height') {
      var frame = document.getElementById('metronomu-embed')
      if (frame) frame.style.height = event.data.height + 'px'
    }
  })
</script>

これでフレームはコンテンツに合わせて自動的に大きくなったり小さくなったりし、スクロールバーが出ることは二度とありません。スクリプトを追加しなくても、固定のheight="600"はウィジェット全体を収める安全な既定値です。

プラットフォーム別の注意点

ほとんどのサイトビルダーは<iframe>コードを通常のテキストとは別扱いします。ルールはシンプルです。HTMLブロックか埋め込みブロックに貼り付け、iframeを削除しがちなビジュアルエディタには絶対に貼り付けないでください。

プラットフォームコードの貼り付け先
WordPress（ブロックエディタ）カスタムHTMLブロックを追加してiframeを貼り付ける。ビジュアル段落エディタは削除してしまう。
WixHTMLを埋め込む要素（ウィジェットを埋め込む）を追加してコードを貼り付ける。
WebflowEmbed要素をドラッグしてiframeを貼り付ける。
Notion単純なURL https://pluri.tools/embed/ja/metronomu を貼り付けて埋め込みを作成を選ぶ。
はてなブログ編集画面をHTML編集に切り替え、iframeをコードに直接貼り付ける。
素のHTML<body>内の任意の場所に貼り付ける。

よくある間違い

  • リッチテキストエディタに貼り付ける。 保存するとウィジェットが消える場合は、ブロックを間違えています。カスタムHTMLまたはコードブロックに切り替えてください。
  • ボタンが切れる高さ設定。 スタートやタップテンポのコントロールは下側にあります。高さは600以上を保つか、上記の自動リサイズスクリプトを使ってください。
  • 別のライブラリが必要だと思い込む。 ウィジェット自体を動かすのに追加のスクリプトは不要です。任意で使えるのは高さを監視するスクリプトだけです。
  • httpとhttpsを混在させる。 埋め込みは常にhttpsで行ってください。このガイドのコードはすでにそうなっています。

埋め込みに含まれるもの

スニペットには、ウィジェットのすぐ下に、ツールへのリンクとなる小さな「Powered by pluri.tools」の表示が含まれています。この埋め込みが見返りに求めるのはこのリンクだけで、これによってメトロノームは無料のまま提供され続けます。13言語すべてと共有可能なテンポURLを備えたフルページを見たい人は、そのリンクをたどれます。

よくある質問

本当に無料ですか？

はい。アカウントもAPIキーも利用制限も必要ありません。スニペットに含まれるのは表示用リンクだけです。

サイトが遅くなりませんか？

iframeはloading="lazy"を使っているので、画面に入るまでブラウザは読み込みません。ウィジェット自体も軽量で、音はWeb Audio APIで生成するため、ダウンロードする音声ファイルはありません。

訪問者はテンポを変更できますか？固定ですか？

完全にインタラクティブです。ページを見る誰でも20〜300の範囲でBPMを設定でき、拍子の変更、音の選択、タップテンポの使用もできます。埋め込みは120 BPMで開きます。

スマートフォンでも動きますか？

はい。ウィジェットはレスポンシブで、音声はiOSでもAndroidでも動作します。iOSではマナーモードがオンでも、スタートを押した瞬間からスピーカーで音が鳴ります。

言語を変更できますか？

はい。URL内のjaを対応する13言語のいずれかに置き換えてください。それぞれの言語のスラッグを使います。たとえばフランス語なら/embed/fr/metronome、ポルトガル語なら/embed/pt/metronomoです。

メトロノーム埋め込みウィジェット音楽教育
オンラインメトロノーム
今すぐフルツールで試してみましょう。
今すぐ試す