Javascript | memo-memo - Part 2 Skip to content

memo-memo

web制作に便利そうな情報をメモるブログ

Archive

Tag: javascript

ActionScriptを勉強していたら、便利そうなテクニックが書かれていたので、メモ。

例えば、2009年10月4日を、スラッシュで区切って、「2009/10/4」と表現する時に、出来れば、日にちを表す「4」を、「04」こんな感じに表現したい時の処理。

例えば、if文とかを使って、条件分岐で、1〜9の時は、頭に「0」を追加して、10以上の時は、そのまま表示。こんな感じでもいいけど、条件分岐をせずに処理する方法が下記の様な書き方。

ActionScript

var my_date:Date = new Date();
var nYear:Number = my_date.fullYear;
var nMonth:Number = my_date.month + 1;
var nDate:Number = my_date.date;
var year_str:String = String(nYear).substring(2);
var month_str:String = String(nMonth + 100).substring(1);
var date_str:String = String(nDate + 100).substring(1);
var today_str:String = year_str + "/" + month_str + "/" + date_str;
trace(today_str);

重要なのは、赤字の3行の処理。

まずは、var year_str:String = String(nYear).substring(2);は、単純に、取得された年(2009とか)の後ろの2文字を、substring();で抜き取っている。(09とか)

で、var month_str:String = String(nMonth + 100).substring(1);と、var date_str:String = String(nDate + 100).substring(1);は、数値は、月と日で違うけど、処理としては同じ。

まず、取得された日にち(もしくは月)の数値に100を足す。String(nDate + 100)は、この時点で、今日が4日の場合、「104」になる。その100を足した数値の後ろの2文字を年同様、substring();で抜き取れば、「04」になる。

このやり方だと、日にちや月が一桁でも二桁でも使える。

例その1)

13日の場合

13+100=113

後ろの2文字は、「13」

例その2)

3日の場合

3+100=103

後ろの2文字は、「03」

ちなみに、substring();は、今回は第二引数を省略した形で書いてます。

多分、javascriptでも、同様の考え方で同じ結果が出せるでしょう。(多分ね。)

前回の記事で書いた、Fancyzoomのちょっと便利な使い方ですが、若干うまくいかなかった部分があったので、ちょっとだけ修正です。

パラメーターで、imgDirを指定しても、動くことは動くんだけど、読み込み中のクルクルってやつが、ちゃんと表示されませんでした。

そこで、次に考えたのが、if文での振り分けです。

$(function(){
var bodyClass = $(“body”).attr(“class”);

if(bodyClass == “daiichi” || bodyClass == “daiichi_2″){///////////////第一階層の場合
$.fn.fancyzoom.defaultsOptions.imgDir = “../common/images/fancyzoom/”;
$(‘body.daiichi a.fancyzoom,body.daiichi_2 a.fancyzoom’).fancyzoom({
showoverlay : true,
overlay     : 0.3
});
}else if(bodyClass == “daini”){////////////////////////////////////第二階層の場合
$.fn.fancyzoom.defaultsOptions.imgDir = “../../common/images/fancyzoom/”;
$(‘body.daini a.fancyzoom’).fancyzoom({
showoverlay : true,
overlay     : 0.3
});
}
});

まず、赤文字の部分で、bodyタグのクラス属性を取得して、変数に格納します。

その変数が、どの値かによって、if文で振り分ければ、ひとつのファイルで、Fancyzoomを使えそう。

このやり方なら、パラメータで、imgDirを指定する必要がないので、各々の階層ごとに、$.fn.fancyzoom.defaultsOptions.imgDir =”パス”   このやり方で、imgがあるディレクトリを指定しています。

まぁ、ここまで記述するコードが多くなると、各々階層ごとにファイルを作ってもいいかも…

でも、ファイル管理が大変になるのがいやなので、とりあえずこのやり方で、今回は作業しよう。

……今度はエラーが起こりませんように。

Fancyzoomを使ってみた。

っていうか、以前も使ったことがあったんだけど、一人で組んだのは初。

で、若干忘れやすそうな項目をメモ。

まず、$.fn.fancyzoom.defaultsOptions.imgDir=”パス”で、使用するFancyzoomの画像のパスを指定するんだけど、このパスは、js側からじゃなくて、あくまでhtml側からのパスを書く。このせいで、暫く動かなかった…

で、パスを書くときは、必ず「/」で終わらすらしい。

$.fn.fancyzoom.defaultsOptions.imgDir=”common/image/fancyzoom/

こんな感じ。

さて、html側からのパスを書かなきゃならないって事は、同一階層の別ファイルならともかく、階層が違うとちゃんと動かなくなってしまう。

そこで考えたのが、オプションを使う方法。

まずはじめに、使いたいhtmlファイルのbodyタグに、固有のclassを付けておく。その上で、

$(“.kasou a.fancyzoom”).fancyzoom()

こう記述すれば、kasouというクラスの、fancyzoomというクラスの付いたaタグにFancyzoomを使用できる。

さらに、

$(“.kasou a.fancyzoom”).fancyzoom({

imgDir : "kasouクラスをbodyに付けたhtmlファイルからのパス"

})

こうすれば、どんだけ下層に行っても、上記の様なスクリプトを追記していけば、いい感じに使えそう。

$(function(){
$(‘.daiichi a.fancyzoom’).fancyzoom({//第一下層の場合
imgDir      : “common/images/fancyzoom/”,
showoverlay : true,
overlay     : 0.3
});

$(‘.daini a.fancyzoom’).fancyzoom({//第二下層の場合
imgDir      : “../common/images/fancyzoom/”,
showoverlay : true,
overlay     : 0.3
});
});

こんな感じで使うとよさそう。青文字のパスに注目!

因みに、その他のオプションの詳細は、本サイト(英語)か、以前書いた

http://gihyo.jp/design/serial/01/jquery-plugin/0002?page=3

に詳しく書いてあります。

最近、定期的に処理を行わせるjavascriptを書く事が多い。

で、色々グーグルで調べてみると、どうやら、setTimeout、もしくはsetIntervalを使う方法があるらしい。

二つの書き方は、

js(setTimeout使用)


var kurikaeshi = setTimeout(kansuu,1000);

function kansuu(){

document.write(“繰り返し”);

setTimeout(kansuu,1000);

};


こんな感じ、変数kurikaeshiに、setTimeout(kansuu,1000);を使用しているのは、いつか定期的な処理を止めるため。止める時には、clearTimeout(kurikaeshi);をしていすればよい。

で、基本的にはsetIntervalも似ているけど、若干違うところがある。

js(setInterval使用)


var kurikaeshi = setInterval(kansuu,1000);

function kansuu(){

document.write(“繰り返し”);

};


これでOK。関数kansuuの中には、setInterval(kansuu,1000);と書いちゃだめ。
なぜかというと。

setTImeoutは、それ自体の意味が、setTimeout(処理,1000)だったら、「処理を、1秒後に行う」という意味。

一方

setIntervalは、それ自体の意味が、setInterval(処理,1000)だったら、「処理を、毎秒1秒で繰り返す」という意味。

つまり、変数 kurikaeshiに、setInterval(kansuu,1000)を代入した時点で、定期的な処理がスタートしている。さらにその処理(この場合、関数kansuu)の中で、setIntervalを使ってしまうと、処理が二重、三重とダブってしまうから。…だと思う。

どちらを使っても、定期的処理は作れるっぽいけど、何となくsetIntervalの方が使いやすそう。

clearTimeoutもしくはclearIntervalを使って、定期的処理を止める際に、clearTimeoutの方は、いまいちちゃんと止まらない事があるらしい。っていうか、止まらなかった。おそらく、clearTimeoutが行われるタイミングと、setTImeoutの処理のタイミングが合わないのでは無かろうか?

setTimeout(処理,時間)の中の、「時間」の中のタイミング(1000だったら、処理を待っている1秒間の間)で、clearTimeoutが実行されないと、止まってくれないっぽい。…多分。

一方、clearIntervalは、「処理を毎秒1秒で繰り返せ」という命令自体を止めるので、実際の処理のタイミングは関係なくstopが出来るのでは無かろうか?

うーん、いまいちちゃんとした理由が解らないけど、上記の様に考えれば、何となく納得出来るきがする(笑)

いずれ、ちゃんと調べてみよう。

前回の記事の追加です。

http://blog.jokerstyle.org/archives/69

例えば、phpで取得したXMLの中で、

<type url=http://blog.jokerstyle.org>ブログ</type>

こんな感じの構造になっていた場合。

赤文字の、属性の値を取得したい場合は、

〜ここまでのパス〜.type["-url"]

こんな感じで、タグ名の後に["-属性名"]とすると取得出来る。

青文字の「ブログ」、という文字を取得したい時は、

〜ここまでのパス〜.type["#text"]

こんな感じで、属性名がある時は、タグ名を「.」で繋ぐんじゃなくて、タグ名の後に["#text"]としないと、取得出来ない。