2006年09月17日

何をしようか?

「ポップアップ連続再生ウインドウ<ysfactory WMP window/yf-wmp-wnd>」をバージョンアップしなくてはいけない。
(別ブログ「わいずふぁくとりいのショールーム」http://ysfactory-showroom.seesaa.net/参 照)
ミッションは、設定された「曲リストをクッキーに保存」し、次回起動時されたときにそれを再現する、である。
このカテゴリーをその準備に使う。

[下調べ]
クッキーの利用は、下記で簡単に調べられそうである。
    navigator.cookieEnabled

●有効期限をいちいち指定しなくてはいけない
 クッキーに保存するには有効期限をいちいち指定しなくてはならないようだ。
 永遠にとか、できるだけ長くだとかいうオプションは無いようだ。
 指定する有効期限として、どのくらいが適当だろうか?
 30日じゃ短すぎる?1年くらいあればいいか。
 どうせ有効期限がこなくても、事情があれば、古いものから消されていくんだろうから・・

●クッキーを好まない人もいる
 クッキーを好まない人もいるだろうから、保存は、終了時自動的にではなくて、保存ボタンをつけ、ユーザが意図したときにしよう。

●有効期限は読み出しただけでは更新されない
 クッキーを読み出しただけでは、有効期限は更新されないだろう。
 これでは一度保存した設定を、毎日利用したとしても、最初に設定した日から、1年後には消えてしまう。
 これではまずいので、設定を読み出すたびに、有効期限をその日から1年にし、上書きするようにする。

この手の情報は、私がいちいちブロぐるまでもなく、世間に豊富に流れている。
[参考にしたURL]
とほほのCookie入門
    http://www.tohoho-web.com/wwwcook.htm
Cookieの利用
    http://www.fromdfj.net/javascript/cookie.html
JavaScript例文辞典
    http://www.openspc2.org/reibun/javascript/#4
smart:Cookie でセッション管理機能を実現しよう
    http://www.rfs.jp/sb/perl/03/04.html
JavaScript小技集
    http://www.shurey.com/Soft/JavaScript/samples/sample5.html

エンコード・デコード

クッキーに保存できるのは、コンテンツに対し、20項目しか許されていない。
曲リストに許されているのは30曲までであるので、1曲を1項目に割り当てていたのでは、当然足りない。
何らかの方法で、曲リストの全てのデータを、1項目か、2項目に押し込める必要がある。

クッキー全体の容量は、4KByteらしいので、1曲100Byteと考えると、3KByteである。
1曲100Byteが適切なのか分からないし、3KByteも使うと他のクッキーを押しのけてしまうかも知れない。
が、このくらいの仕様でいいのではないだろうか。
実は<ysfactory WMP window/yf-wmp-wnd>の、最大30曲と言うのもこのあたりから出た仕様である。

曲の、ファイル名(URL)リストと、曲名(表示名)リストを、カンマで区切り、つぎのように別々に保存する方式をとる。
SongFileList=<songFile00>,<songFile01>,...;
SongNameList=<songName00>,<songName01>,...;
読み出す際はファイルリストを中心に考え、ファイルリストにあって、曲名リストにない曲は存在すると認め、曲名リストにあるが、ファイルリストにない曲 は、存在しないと扱う。

さて、区切りのために、イコール(=)や、カンマ(,)、セミコロン(;)を使うため、ファイル名や、曲名にそれらの文字を含むことが出来ない・・。
私は最初この克服のために、自前でエンコードと、デコードをしなくてはならないと考えていたが、結果的にそうではなかった。
そもそも、クッキーには、漢字などの特殊コードをそのままでは保存できない。JavaScriptではそのために、escape( )と、unescape( )が用意されている。
escape( )と、unescape( )は、カンマ(,)の面倒もちゃんと見てくれる。
escape( )と、unescape( )は、互換性の点で少々問題があるようである。JavaScriptのバージョンによって仕様が違ったり、他の処理系との親和性が悪かったりするようであ るが、今回の、同じスクリプトから読み書きする目的なら、大きな問題ではないと思う。

イコール(,)や、セミコロン(;)は、クッキーに保存するときの一般的な仕様である。
残る問題はカンマ(,)が、クッキーに保存するのにふさわしいかどうかである。
escape( )と、unescape( )の目的は、通信プロトコルを上手く通すためにもあるようである。
今回はローカルマシーンで実行されているJavaScriptから、ローカルマシーン上のクッキーに読み書きする訳だから、私の認識では通信プロトコルを 通らない。
基本的に文字列を保存するクッキーが、カンマ(,)を保存しないことも考えにくいので、これも特に問題は無いと思う。

2006年09月18日

保存する

クッキーに保存するコードはつぎの通りである。
クッキーへの読み書きは、document.cookieをアクセスするだけである。
保存のときは、「SongFileList=<songFile00>,<songFile01>,...;」の項目ごとに、何度も書き込んでよいが、読み出しは全項目の内容が読み出される。
<songFile00>、<songFile01>などはescapeされている。


function yf_wmp_cookie_save(){
    var i, flist ="SongFileList=", nlist ="SongNameList=";
    if(!navigator.cookieEnabled){
        alert("クッキーが許可されていないと出来ません!");
        return;
    }
    for(i=0; i<yf_wmp_file_list.length; i++){
        if(i>0){
            flist += ",";
            nlist += ",";
        }
        flist += escape(yf_wmp_file_list[i]);
        if(i<document.form.yf_wmp_name_list.length){
            nlist += escape(document.form.yf_wmp_name_list[i].text);
        }
    }
    flist += ";";
    nlist += ";";
    //expires
    var xDay = new Date;
    xDay.setFullYear(xDay.getFullYear() + 1);
    xDay = xDay.toGMTString();
    document.cookie = flist + "expires=" + xDay +";";
    document.cookie = nlist + "expires=" + xDay +";";
}

読み込んでデコードする

読み込んでデコードするコードはつぎの通りである。


function yf_wmp_cookie_load(){
    var i, source, keyword, value, flist, nlist;
    if(!navigator.cookieEnabled){
        return;
    }
    source = document.cookie + ";";
    while( keyword = source.match(/SongFileList=|SongNameList=/) ){
        keyword = keyword[0];
        i = source.indexOf(keyword);
        source = source.substring(i+keyword.length);
        i = source.indexOf(";");
        value = source.substring(0,i);
        source = source.substring(i+1);
        switch(keyword){
        case "SongFileList=":
            flist = value.split(",");
            break;
        case "SongNameList=":
            nlist = value.split(",");
            break;
        }
    }
    for( i=0; flist && i<flist.length; i++ ){
        if(!flist[i]) continue;
        yf_wmp_file_list.push(unescape(flist[i]));
        if(i<nlist.length){
            document.form.yf_wmp_name_list[i]
             = new Option(unescape(nlist[i]));
        }
    }
    yf_wmp_cookie_save();
}

2006年10月06日

保存する(デバッグ後)

いくつかの問題点をデバッグしたあとのコードは、つぎのようになった。
yf_wmp_file_listに格納されているファイルリストと、yf_wmp_name_listに格納されている曲名リストを、クッキーに保存す る処理である。
黄 色が追加・修正部分である。ファイルリストが空の場合、過去の日時を指定して、クッキーを消去している。


function yf_wmp_cookie_save(){
    var i, flist ="SongFileList=", nlist ="SongNameList=";
    if(!navigator.cookieEnabled){
        alert("クッキーが許可されていないと出来ません!");
        return;
    }
    for(i=0; i<yf_wmp_file_list.length; i++){
        if(i>0){
            flist += ",";
            nlist += ",";
        }
        flist += escape(yf_wmp_file_list[i]);
        if(i<document.form.yf_wmp_name_list.length){
            nlist += escape(document.form.yf_wmp_name_list[i].text);
        }
    }
    flist += ";";
    nlist += ";";
    //expires
    var xDay = new Date;
    if(yf_wmp_file_list.length>0){
        xDay.setFullYear( xDay.getFullYear() + 1 );
    }else{
        xDay.setTime( xDay.getTime() - 1 );
    }
    xDay = xDay.toGMTString();
    document.cookie = flist + "expires=" + xDay +";";
    document.cookie = nlist + "expires=" + xDay +";";
}

タグ:javascript Cookie

2006年10月07日

読み込んでデコードする(デバック後)

デバッグ後のコードは、結局つぎのようになった。
split( )は空の要素を返す場合があるので、それを読み飛ばす処理を入れていたつもりだったが、それはどうも不要だったようである。
保存側がきちんと出来たら、そのようなことはなくなったようだ。おまけにその処理にバグもあったので、削除する。
赤色部分を削除 した。


function yf_wmp_cookie_load(){
    var i, source, keyword, value, flist, nlist;
    if(!navigator.cookieEnabled){
        return;
    }
    source = document.cookie + ";";
    while( keyword = source.match(/SongFileList=|SongNameList=/) ){
        keyword = keyword[0];
        i = source.indexOf(keyword);
        source = source.substring(i+keyword.length);
        i = source.indexOf(";");
        value = source.substring(0,i);
        source = source.substring(i+1);
        switch(keyword){
        case "SongFileList=":
            flist = value.split(",");
            break;
        case "SongNameList=":
            nlist = value.split(",");
            break;
        }
    }
    for( i=0; flist && i<flist.length; i++ ){
        //if(!flist[i]) continue;
        yf_wmp_file_list.push(unescape(flist[i]));
        if(i<nlist.length){
            document.form.yf_wmp_name_list[i] = new Option(unescape(nlist[i]));
        }
    }
    yf_wmp_cookie_save();
}

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。