中国語を読むのに、まだまだピンインがないと困ってしまうんですよね。
いつも中国語のテキストを「どんと来い、中国語」や「中国語よめ～る君」を使わせていただいて、ピンイン変換しています。(このページの右下にあります「無料!中国語学習お役立ちサイト」でリンクを貼ってあります)
今日突然思ったんですけど・・・テキストを全部ピンイン変換しないで、単語にマウスを重ねるだけでピンインが表示されないものか・・・。
ピンインがあるとどうしてもピンインばかりを見てしまう。これではいけない、甘えてはいけない。
Googleの「マウスオーバー辞書」というのを使っていて便利だなあ～といつも思うんですよね。
英語のテキストを読んでいて、ちょっと分からない単語があればその単語にマウスを重ねてみる。すると日本語の意味が表示される。
辞書をわざわざひく手間も省けて、とても便利!
中国語の単語にマウスを重ねたら、ピンインがひょっこり出てきたらいいのになあ・・・。
なにかいい方法はないものかと思案した結果、自分で作ってみようかと思ったのでした。
今からコンピューター言語を一から習得するなど無謀なので、ここは簡単手軽にプログラムが組める「JavaScript」を使います。
今やりたいことはただ1つ・・・マウスオーバーしたらピンインが表示される!
こちらのサイト「JavaScript例文辞典(www.openspc2.org/reibun/javascript/)」で、そのヒントとなるものを発見!
「マウス／イベント編」をクリックしてもらって、次に「[22]マウスが重なったらチップヘルプを表示する」をクリック!
「ポイント」のところに表示されている・・・
<a href="next.html" title="こんな具合だけど？">
・・・の要素を使えば、ピンインを表示させることができるに違いない!
ここで中国語のテキストを用意します。NHK WORLDの中国語版(www.nhk.or.jp/nhkworld/chinese/top/index.html)から、ワンフレーズ使わせていただきます。
サンプルテキスト
第34届八国集团首脑峰会今天（7日）在日本北海道洞爷湖开幕。
うえのサンプルテキストを「どんと来い、中国語」を使いまして、今回は「ピンインフォント形式(日/rì)」ではなく「簡易表示形式(日/ri4)」でピンイン変換してみました。
完成したプログラムはこちら・・・
<html>
<head>
<title>マウスを重ねるとピンインが表示される</title>
</head>
<body>
<a href="pingying.html" title="di4">第</a>
<a href="pingying.html" title="sa1n・shi2・si4">34</a>
<a href="pingying.html" title="jie4">届</a>
<a href="pingying.html" title="ba1・guo2">八国</a>
<a href="pingying.html" title="ji2・tua2n">集团</a>
<a href="pingying.html" title="sho3u・na3o">首脑</a>
<a href="pingying.html" title="fe1ng・hui4">峰会</a>
<a href="pingying.html" title="ji1n・tia1n">今天</a>
<a href="pingying.html" title="qi1・ri4">7日</a>
<a href="pingying.html" title="za4i">在</a>
<a href="pingying.html" title="ri4・be3n">日本</a>
<a href="pingying.html" title="be3i・ha3i・da4o">北海道</a>
<a href="pingying.html" title="do4ng・ye2・hu2">洞爷湖</a>
<a href="pingying.html" title="ka1i・mu4">开幕</a>
</body>
</html>
単語単位でピンインが表示されるように、ちょっとアレンジしてみました。
雛形となるプログラムはこちら・・・
<html>
<head>
<title>○○○○</title>
</head>
<body>
<a href="○○○○.html" title="○○○○">○○○○</a>
<body>
<html>
単語にマウスを重ねると、ピンインが出てきましたよ・・・。
メモ帳にコピペして、どうぞ試しに使ってみてくださいね。