コピペで簡単！ブログにインドネシア語の音声読み上げボタンを追加する方法【初心者向け】
こんにちは！インドネシア語の学習ブログを運営している皆さん、お疲れ様です。
「単語や例文に音声も付けられたら、もっと読者の学習がはかどるのに…」と考えたことはありませんか？
実はそれ、外部のサービスや難しいソフトを使わずに、簡単なコードをコピペするだけで実現できるんです！
この記事では、あなたのブログの
この2つのパターンに「🔊 読み上げボタン」を設置する方法を、誰でもできるように丁寧に解説します。完成版コードをコピーして、テキストを自分のものに書き換えるだけですぐに使えますよ！
💡 まずは仕組みを簡単解説
今回使うのは、Web Speech API という技術です。
難しく考える必要はありません。これは「ブラウザ自体に標準で備わっている多言語ナレーター機能」だと思ってください。このナレーターに、簡単な命令文（JavaScript）を使って「この文章をインドネシア語で読んで！」とお願いするだけ。だから、音声ファイルを自分で用意する必要が一切ないんです。
それでは、さっそく実践してみましょう！
実践①：文章を丸ごと読み上げるボタンの作り方
日記や長文の例文など、段落全体を読み上げさせたい場合のコードです。
ステップ1：HTMLで文章とボタンを用意する
まず、ブログの記事作成画面で「HTML編集モード」に切り替えて、以下のように記述します。
- 読み上げたいインドネシア語の文章を
<p class="indonesian">で囲みます。 - そのすぐ下に
<button class="speak-button">を置きます。 - この2つをセットで
<div class="indonesian-block">という箱に入れます。
<!-- ↓↓↓ このセットを使いたい文章の数だけコピーして使います ↓↓↓ -->
<div class="indonesian-block">
<p class="indonesian">Selamat pagi. Hari ini benar-benar indah harinya mulai.</p>
<button class="speak-button">🔊 読み上げる</button>
</div>
<!-- ↑↑↑ ここまでが1セット ↑↑↑ -->
<div class="indonesian-block">
<p class="indonesian">Aku suka membeli buku, karena seperti investasi untuk masa depan diriku.</p>
<button class="speak-button">🔊 読み上げる</button>
</div>
ステップ2：魔法の呪文（JavaScript）を貼り付ける
次に、このボタンを機能させるための「魔法の呪文」であるJavaScriptコードをコピペします。このコードは1ページに1回だけ、記事の一番下に貼り付ければOKです。ページ内にある全ての「読み上げボタン」を自動で見つけて、賢く動いてくれます。
<script>
document.addEventListener('DOMContentLoaded', () => {
if ('speechSynthesis' in window) {
let indonesianVoice = null;
function loadVoices() {
const voices = window.speechSynthesis.getVoices();
indonesianVoice = voices.find(voice => voice.lang === 'id-ID');
}
loadVoices();
if (window.speechSynthesis.onvoiceschanged !== undefined) {
window.speechSynthesis.onvoiceschanged = loadVoices;
}
const speakButtons = document.querySelectorAll('.speak-button');
speakButtons.forEach(button => {
button.addEventListener('click', (event) => {
let textToSpeak = event.currentTarget.previousElementSibling.textContent;
textToSpeak = textToSpeak.replace(/\s*（[^）]+）\s*/g, '').trim();
const utterance = new SpeechSynthesisUtterance(textToSpeak);
utterance.lang = 'id-ID';
if (indonesianVoice) {
utterance.voice = indonesianVoice;
}
window.speechSynthesis.cancel();
window.speechSynthesis.speak(utterance);
});
});
}
});
</script>
※このコードは、日本語のカッコ書き（例：(日記)）を自動で削除してから読み上げる機能も入っています。
✨ 文章読み上げの完成コード（全体像）
下のコードを丸ごとコピーして、<p class="indonesian">の中身をあなたの文章に入れ替えれば、すぐに動作を確認できます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>文章読み上げサンプル</title>
<!-- ボタンの見た目を整えるCSS -->
<style>
.indonesian-block { margin-bottom: 1em; }
.indonesian { font-style: italic; background-color: #ecf0f1; padding: 15px; border-radius: 5px 5px 0 0; border: 1px solid #ddd; margin: 0; }
.speak-button { background-color: #3498db; color: white; border: none; padding: 8px 12px; border-radius: 0 0 5px 5px; cursor: pointer; width: 100%; border: 1px solid #2980b9; border-top: none; }
.speak-button:hover { background-color: #2980b9; }
</style>
</head>
<body>
<h3>例文の読み上げ</h3>
<div class="indonesian-block">
<p class="indonesian">Selamat pagi. Hari ini (今日) benar-benar indah harinya mulai.</p>
<button class="speak-button">🔊 読み上げる</button>
</div>
<div class="indonesian-block">
<p class="indonesian">Restoran tempat aku bertemu Sri berada di lantai sepuluh sebuah gedung, dan pemandangannya sangat bagus.</p>
<button class="speak-button">🔊 読み上げる</button>
</div>
<!-- ページの一番下に1回だけ貼り付ける -->
<script>
document.addEventListener('DOMContentLoaded', () => {
if ('speechSynthesis' in window) {
/* ... JavaScriptコード ... */
}
});
</script>
</body>
</html>
実践②：単語表の単語を読み上げるボタンの作り方
単語リストの一つ一つの単語を読み上げさせたい場合のコードです。
ステップ1：HTMLで表とボタンを用意する
表の中の「発音」列に、<button class="speak-btn-table">🔊</button>を設置します。
<table>
<thead>
<tr>
<td><strong>インドネシア語</strong></td>
<td><strong>発音</strong></td>
<td><strong>日本語訳</strong></td>
</tr>
</thead>
<tbody>
<tr>
<td>air</td>
<td><button class="speak-btn-table">🔊</button></td>
<td>水</td>
</tr>
<tr>
<td>apel</td>
<td><button class="speak-btn-table">🔊</button></td>
<td>リンゴ</td>
</tr>
</tbody>
</table>
ステップ2：単語表用の魔法の呪文（JavaScript）を貼り付ける
こちらも1ページに1回だけ、記事の一番下に貼り付ければOKです。文章読み上げのコードとは少しだけロジックが違う（同じ行の最初の単語を読むように命令している）ので、専用のコードを使います。
<script>
document.addEventListener('DOMContentLoaded', () => {
if ('speechSynthesis' in window) {
let indonesianVoice = null;
function loadVoices() {
const voices = window.speechSynthesis.getVoices();
indonesianVoice = voices.find(voice => voice.lang === 'id-ID');
}
loadVoices();
if (window.speechSynthesis.onvoiceschanged !== undefined) {
window.speechSynthesis.onvoiceschanged = loadVoices;
}
const speakButtons = document.querySelectorAll('.speak-btn-table');
speakButtons.forEach(button => {
button.addEventListener('click', (event) => {
const row = event.currentTarget.closest('tr');
const textToSpeak = row.querySelector('td:first-child').textContent.trim();
if (textToSpeak) {
const utterance = new SpeechSynthesisUtterance(textToSpeak);
utterance.lang = 'id-ID';
if (indonesianVoice) {
utterance.voice = indonesianVoice;
}
window.speechSynthesis.cancel();
window.speechSynthesis.speak(utterance);
}
});
});
}
});
</script>
【重要】iPhoneでの注意点とコードの設置場所
iPhoneでの再生について
このコードはiPhoneでも動作しますが、最高のパフォーマンスを発揮させるには、iPhone側にインドネシア語の音声データがインストールされている必要があります。もし発音が不自然な場合は、読者さんに以下の設定を案内してあげると親切です。
コードの設置場所
- HTML: ブログ記事エディタの「テキストモード」や「HTMLモード」で、記事の本文として貼り付けます。
- CSS (
<style>タグ): 基本的にはブログ全体のCSS設定に記述するのが望ましいですが、よく分からなければ、HTMLコードの<head>タグの中にそのまま貼り付けてもOKです。 - JavaScript (
<script>タグ): 必ず記事の最後、</body>タグの直前に貼り付けてください。
まとめ
いかがでしたか？思ったより簡単だったのではないでしょうか。
この機能をブログに追加すれば、読者の満足度が格段に上がり、より価値のある学習コンテンツを提供できます。ぜひ、あなたのブログにも導入して、インドネシア語学習をサポートしてあげてくださいね！🚀
