Home > イヌでもわかるJavaScript講座 お品書き
イヌでもわかるJavaScript講座 お品書き へ戻ります
イヌでもわかるJavaScript講座


Step.63 - 子ウィンドウで曲を流す その3


プルダウンメニューより任意の曲を選んで子ウィンドウで曲を流します。


Step テーマ
● escape エンコード
● unescape デコード
● location.search 問い合わせ文字列

実行例





リスト


<script type="text/javascript"><!--
myHTML = "bgmwin2.htm"; // 子ウィンドウのURL
function myGo(){
     mySelect = document.myForm.myMenu.selectedIndex;
     if (mySelect == 0) return;
     myTitle = document.myForm.myMenu.options[mySelect].text;
     myFile = document.myForm.myMenu.options[mySelect].value;
     myURL = myHTML + "?title=" + escape(myTitle) + "&file=" + escape(myFile);
     window.open( myURL , "bgmwin" , "resizable=yes,width=300,height=200" );
}
// --></SCRIPT>

<FORM name="myForm">
<SELECT name="myMenu" onchange="myGo()">
<OPTION value="">☆☆ お好きな曲を選んでください ☆☆ </OPTION>
<OPTION value="sunday.mid">日曜画家</OPTION>
<OPTION value="../nagisar.mid">渚のヒロイン</OPTION>
</SELECT>
</FORM>



【リスト】BGMウィンドウ の HTML


<HTML>
<HEAD>
<TITLE>BGM WINDOW</TITLE>
<SCRIPT type="text/javascript"><!--
// 問い合わせ文字列を取り込む汎用関数
// 書式 : myGetQuery(キーワード)
// 戻り値 : 値(string) null:該当なし
function myGetQuery(myKeyWord){
     myKeyWord = "&" + myKeyWord + "=";
     myValue = null;
     myStr = location.search;
     myLen = myStr.length;
     myStr = "&" + myStr.substring(1,myLen) + "&";
     myOfst = myStr.indexOf(myKeyWord);
     if (myOfst != -1){
         myStart = myOfst + myKeyWord.length;
         myEnd = myStr.indexOf("&" , myStart);
         myValue = myStr.substring(myStart,myEnd);
         myValue = unescape(myValue);
     }
     return myValue;
}
myTitle = myGetQuery("title");
myFile = myGetQuery("file");
// --></SCRIPT>
</HEAD>
<BODY bgcolor="#FFC0CB">
<p align="center">
Tatsuya's Home Page<br>
イヌでもわかるJavaScript講座<br>
<br>
♪ BGM ♪<br>
<SCRIPT type="text/javascript"><!--
document.write(myTitle);
// --></SCRIPT>」<br>
</p>
<form><p align="center">
<input type="button" value="閉じる" onclick="window.close()">
</p></form>
<p align="center">
<SCRIPT type="text/javascript"><!--
document.write("<EMBED src='");
document.write(myFile);
document.write("' loop='true' autostart='true'>");
// --></SCRIPT>
</p>
</BODY>
</HTML>


サンプルだけの HTMLは こちらへ

使い方


(1) まず、BGMを流す ポップアップウィンドウの ページを作成します。
     自分の好みに作成します。スクリプト内は変更する必要はありません。

       <SCRIPT type="text/javascript"><!--
       document.write(myTitle);
       // --></SCRIPT>
     が、BGMの曲名を表示するスクリプトです。任意の場所に埋め込んでください。

       <SCRIPT type="text/javascript"><!--
       document.write("<EMBED src='");
       document.write(myFile);
       document.write("' loop='true' autostart='true'>");
       // --></SCRIPT>
     が、BGMを流すプレーヤーです。任意の場所に必須で埋め込んでください。


(2) つぎにプルダウンメニューをつけるページの編集です。

     BGMを流すポップアップウィンドウのファイル名(URL)を指定します。
       myHTML = "bgmwin2.htm"; // 子ウィンドウのURL

     ポップアップウィンドウのサイズを自分の好みに調整します。
       window.open(myURL , "bgmwin" , "resizable=yes,width=300,height=200");

     メニューである <OPTION>タグ の 1行目は「曲を選んでね」といったタイトルにします。
     2行目から曲名とそのファイル名(URL)をセットしていきます。
       <OPTION value="">☆☆ お好きな曲を選んでください ☆☆ </OPTION>
       <OPTION value="sunday.mid">日曜画家</OPTION>
       <OPTION value="../nagisar.mid">渚のヒロイン</OPTION>

以上で完成です。


説明


プルダウンメニューで複数の曲リストから好きな曲を選んでもらって、ポップアップウィンドウで演奏させます。

簡単に作ってしまおうと思えば、曲の数だけそれぞれのポップアップページを作って、選択されたページを window.open すれば良いわけですが、ただ、曲のタイトル名とファイル名が違うだけで、ほかのタグは全部同じ、そして曲の数も多いとなれば、それぞれのポップアップページを作っていくのは肉体労働になってきます。

ならば、ひとつのポップアップページにタイトル名とファイル名をパラメータで渡して、表示/演奏させるようにしてみましょう。


まず、プルダウンメニュー側の説明をします。

プルダウンメニューから曲が選択されて、myGo() が呼ばれます。

myHTML = "bgmwin2.htm"; // 子ウィンドウのURL
function myGo(){
     mySelect = document.myForm.myMenu.selectedIndex;
     if (mySelect == 0) return;
     myTitle = document.myForm.myMenu.options[mySelect].text;
     myFile = document.myForm.myMenu.options[mySelect].value;
     myURL = myHTML + "?title=" + escape(myTitle) + "&file=" + escape(myFile);
     window.open( myURL , "bgmwin" , "resizable=yes,width=300,height=200" );
}
mySelect に何番目のメニューが選択されたかを取得します。※ Step.25 参照
0 番目は 見出しなので 関数から抜けます。
myTitle には、メニューに表示した曲名をセットします。
myFile には、そのファイル名(URL) をセットします。
myURL は、ポップアップウィンドウのページファイル名(URL)ですが、このURLの後ろに曲名とMIDIファイル名をパラメータとしてくっつけてやります。

検索エンジンサイトや規模のでかいサイトを巡回しているときに見かける 長〜いURLは このパラメータがくっついているわけです。

書式は
http://www.….jp/index.html?KEYWORD1=DATA1&KEYWORD2=DATA2&…
です。

今回のサンプルでは、
bgmwin2.htm?title=日曜画家&file=sunday.mid
のようになります。
URLの後ろにまず「?」マークをつけて、KEYWORD=DATA をセットします。
受け渡すパラメータが複数あれば、次からは「&」マーク区切りでセットしていきます。
セットしていく順番は気にする必要はありません。

当ステップの規則として、KEYWORD は半角英数字のみ使えます。
DATA 部分はさすがに全角文字が渡せないと困るので使えますが、文字列を escape() にて Unicode に変換(エンコード)する必要があります。
myURL = "bgmwin2.htm?" + "title=" + escape(myTitle) + "&file=" + escape(myFile);

さて、URLが完成したので、window.open して呼び出し側は終わりです。


次に呼ばれた ポップアップウィンドウを説明します。
ポップアップウィンドウの作業ですが、まずパラメータをもらわないといけません。

パラメータは、location.search プロパティに入っています。
上記の例では、
?title=%u65E5%u66DC%u753B%u5BB6&file=sunday.mid
が入っています。『日曜画家』は見事 Unicode になっていますね。

この中からキーワード「title」の曲名と、「file」の音楽ファイル名を取り出します。
取り出したら、unescape() にて パソコン上の文字コードへ変換(デコード)します。

「むむ、このページ間データ転送はいろいろ使えそうだ!」
と思った方のためにキーワードからデータを取り出す汎用関数 myGetQuery() を作りました。

【書式】 myStr = myGetQuery ( キーワード )
【例】 myTitle = myGetQuery ( "title" ) ;
です。
もし、指定のキーワードがパラメータになかったらヌルストリング ( "" ) を返します。

こいつを使えば、
myTitle = myGetQuery("title");
myFile = myGetQuery("file");
と簡単に 曲名と 音楽ファイル名が取り出せました。ああ便利。

最後に、<EMBED>タグですが document.write() で力ずくで書いています。
<SCRIPT type="text/javascript"><!--
document.write("<EMBED src='");
document.write(myFile);
document.write("' loop='true' autostart='true'>");
// --></SCRIPT>


参考ステップ
Step.13 リンク先を新しいウィンドウで表示してみましょう ※ window.open
Step.25 プルダウンメニューを使って目次を作りましょう その1 
Step.26 プルダウンメニューを使って目次を作りましょう その2 
Step.31 ポップアップウィンドウを開いて BGMを流してみましょう その1 
Step.32 ポップアップウィンドウを開いて BGMを流してみましょう その2 
Step.81 アクセス毎にBGMを変えてみましょう 



"日曜画家" Copyright (C) K.K. All rights reserved.
Intermezzo http://www1.linkclub.or.jp/~medaka34/

"渚のヒロイン" Copyright (C) MIDIBOX All rights reserved.
MIDIBOX http://www32.ocn.ne.jp/~midibox/

おまけ


● escape() URLエンコード(ユニコード)

エンコードします (あいう → %u3042%u3044%u3046)




おまけ


● unescape() URLデコード(ユニコード)

デコードします (%u3042%u3044%u3046 → あいう)




おまけ


● encodeURI() URLエンコード(UTF-8) (IE5.5(Win)〜, NS6〜)

エンコードします (あいう → %E3%81%82%E3%81%84%E3%81%86)




おまけ


● decodeURI() URLデコード(UTF-8) (IE5.5(Win)〜, NS6〜)

デコードします (%E3%81%82%E3%81%84%E3%81%86 → あいう)




おまけ


● encodeURIComponent() URLエンコード(UTF-8) (IE5.5(Win)〜, NS6〜)

エンコードします (あいう → %E3%81%82%E3%81%84%E3%81%86)




おまけ


● decodeURIComponent() URLデコード(UTF-8) (IE5.5(Win)〜, NS6〜)

デコードします (%E3%81%82%E3%81%84%E3%81%86 → あいう)





 
イヌでもわかるJavaScript講座 お品書き へ戻ります