2011/05/27

prototype.jsで要素を追加する

prototype.jsでは
$(要素).insert(追加要素);
で新しく要素を追加できる。


■新しい要素をどこに追加するかを指定する
$(elem).insert("top", 要素);
topと指定すると子要素の最初に追加される。

他には
$(elem).insert("bottom", 要素);
で最後に追加。位置をしていしない場合も最後の子要素として追加される。

子要素としてではなく、兄弟要素として指定の要素の前後に追加することもできる。
$(elem).insert("before", 要素);
$(elem).insert("after", 要素);

参考:
いまからはじめるPrototype.js (5) HTML要素とフォームに関するメソッド マイコミジャーナル


Action Script3でムービークリップのオンマウス時のカーソルをリンクと同じポインターにする

movieclip.buttonMode = true;

これで、ムービークリップがボタンモードになる。
オンマウス時にマウスカーソルが通常のリンクと同じポインターになる。

もし、クリックして別のページに移動する機能をつけたいって時は

//クリックイベントを登録
movieclip.addEventListener(MouseEvent.CLICK, onClick);

function onClick (event:MouseEvent):void {

var url:String = "http://www.example.com/";
var request:URLRequest = new URLRequest(url);

navigateToURL(request, "_self");
}

2011/05/24

firebugでJavaScriptの処理時間を計測する

firebugで、処理の時間を計るなら
console.time(name)
//処理
console.timeEnd(name)
と書くと処理の部分にかかった時間を測定出来ます。

計測できる一番小さい値が1msなので、1回の処理だとあまり違いがわからないこともあると思うので、そういう場合は1000回とか同じ処理を繰り返してみると、違いが分かりやすいと思います。


var name = 'test';
console.time(name)

//テストする処理
for(var i = 0; i < 1000; i++){

var div = $("");

}

console.timeEnd(name)

2011/05/23

jQuery親要素、子要素、兄弟要素取得のまとめ

※各メソッドにかいてある[条件]ってのは、タグ名やid、クラス名を指定するってことです。
条件を入れると、条件にあったものだけが取得されるようになります。
例:$(elem).parent("div.class-name, #id");
通常のJavaScriptでの要素取得方法は→[JavaScript] 親要素・子要素・兄弟要素の取得方法


■親要素の取得

parent([条件])
親要素の取得。
すぐ上の親要素のみ。さらに上の先祖要素にはさかのぼらない。
$(elem).parent("div");
親要素がdivだったら親要素が取得できる。divじゃなければ空。

parents([条件])
parent()と違い親より上の先祖要素までさかのぼる。
$(elem).parents(".class-name");
class-nameというクラス名がついた先祖要素のみ取得

closest([条件])
最も近い先祖要素を取得
$(elem).closest("div");
で一番近いdivを取得。間にpタグなんかあっても無視。


■子要素の取得

children([条件])
全ての子要素を取得。
対象は子要素のみ。孫要素以下は対象外。
$(elem).children("span");
子要素のspanだけ取得

contents()
テキストノードを含めた子要素を全部取得する。
条件をつけることはできない。

find([expr])
子要素だけじゃなく、全子孫要素が対象。
条件を入れた場合は、条件にあった子孫要素だけ取得
$(elem).find("div");
子孫要素のdivだけ取得。


■兄弟要素の取得

next([条件]);
すぐ次にある要素を取得する。
取得する要素は、すぐ次にある1つだけ。
当然、自分の前にあるものは取得しない

nextAll([条件])
次以降にある全要素を取得する

prev([条件])
next()の逆。
自分のすぐ前にある要素を1つだけ取得。

prevAll([条件])
前にある要素を全部取得。
もちろん条件も付けられる


MySQL レコードを更新する

レコードの値を更新するにはUPDATE

UPDATE テーブル名 SET カラム名=値 [WHERE 条件]

条件を入れ忘れるとそのテーブルの全レコードが更新されてしまうので要注意。

2011/05/19

JavaScript高速化 undefined型判定編

 JavaScript高速化 関数呼び出し地獄編に続いて、今回は型判定編。
今回もWeb+DB Press Vol.58の「JavaScriptの玉手箱」を参考にしてます。

■型判定高速化

★できるだけ===(トリプルイコール)を使う
==(ダブルイコール)だと型が一致しない場合に型変換して比較するので、遅くなる。

・==の場合、null, undefinedを判別する場合は便利
==だとnull, undefinedを同時に判別してくれる
valがundefinedの場合
val == null
で比較してもtrueが返ってくる




□undefinedの判別
変数がundefinedかどうかを判定する方法は4つ
1.ダミー変数と比較
2.typeofで文字列と比較
3.window.undefinedと比較
4.void演算子でundefinedを生成して比較

この中で処理が早くて著者もオススメしてるのが4番のvoid演算子でundefinedを生成して比較

if(val === void 0){}

※void演算子はその場でundefinedを作ってくれる

1番はChrome以外でほぼ最速。でもChromeだと遅い(といってもIE8の半分以下の時間しかかからないみたい)。
2番はChrome以外で遅い。特にOpera、FireFoxで遅い
3番はFireFox以外で遅め。


mootoolsでアニメーション開始時、終了時に処理をする

mootoolsのアニメーション、tweenやmorphのアニメーションの始まる直前やアニメーションが終わった直後になにか処理を動かしたりするにはonStart, onCompleteを使う。

var tw = new Fx.tween(id, {
  duration: 100,
  onStart: function(){
    //アニメーション開始直前の処理
  },
  onComplete: function(){
    //アニメーション終了直後時の処理
  }
});

参考
[mootools]スクロールに追随させる - mooFollow.js

2011/05/11

auでフォームを送信すると404になる

自分の場合、formの送信先を表示中のページにすることが多い。
同じページで送信されたデータを受け取って、そのデータによってリダイレクト先を変えたりするため。
formの送信先を設定するのにformタグのaction属性を「action=''」と空にしておくと、自ページに送信することができるんだけど、auの機種によっては送信ボタンを押すと404になってしまいで送信できなくなる。
なので携帯からアクセスされる可能性がある場合はformのactionは空にしないようにしてる。

スマートフォンは大丈夫だと思うけど…auのスマートフォンを持っていないため確認できてない。

2011/05/10

WordPressにflckrの画像をランダムに表示する。

WordPress内にflckrの画像を表示するには
俺はflickrRSSというプラグインを使ってます。
管理画面で「プラグイン」→「新規追加」→「flickrRSS」で検索すると出てきます。

これがRSSというだけあって、新しい順で画像を表示するんだけど、デフォルトではコレを変更できない。
なので、プラグインのファイルをちょこっと改造します。
flickrRSSのバージョンは5.1です。

■改造
・プラグインフォルダの中にある「flickrrss.php」ってファイルを開く。

・141行目に
$items = array_slice($rss->items, 0, $settings['num_items']);
ってコードがあります。
見つからない場合は、「array_slice」でファイル内を検索すると出てくると思う。
バージョン5.1ではarray_sliceは1箇所でしか使われてないけど、他のバージョンではどうなのかわからないので、注意して試してください。

このコードの意味は「$rss->items」っていう全画像データの0番目から$settings['num_items']番目までを抜き出すってことです。
$settings['num_items']ってのは管理画面から設定した表示枚数ね。

「$rss->items」ってのが画像のデータなんだけど、デフォルトではこれが新しい順に並んでる。
なので、これをランダムにしてしまいましょう。

shuffle($rss->items);

これだけ。
これを上に書いた141行目のコードの前に入れるだけ。

これでランダムになります。

プラグインの使い方なんかはこんなページを参考にどうぞ
WordPressにFlickrを読み込めるプラグイン「FlickrRSS」

2011/05/02

iPhone対応用にサイトの幅を設定する

スマートフォン用に幅を設定するには<head>内にmetaタグを追加する

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

contentの中身は

■width=***
ここで表示する横幅を指定する。
ここには数字を入れてpx幅を指定することもできるらしい。
機種によって幅が違ったり、端末を横にすると幅が変わったりしてもそれに合わせて表示したい場合は"device-width"と入れると、各端末の幅に合わせてくれる

■initial-scale=*
初期表示の倍率。1で通常表示。2にすると2倍。

■maximum-scale=*
拡大可能な倍率。画面を拡大する場合の最大の拡大率を設定する。

他にも
■user-scalable
ユーザーが拡大・縮小できるかどうか。yes/noで設定する。

■height
高さ設定。device-heightで端末の高さに合わせられる

■minimum-scale
縮小した場合の最小の倍率の設定

ちなみにWordPressでiPhoneで見た場合は、iPhone用のテンプレートに切り替えて表示したいって場合は「iphone theme switcher」ってプラグインがある。
詳しく説明してくれている方がおります。
iPhoneからアクセスした時のテーマを指定できるWordPressプラグイン「iPhone theme switcher」

iPhoneに限らず、いろんなブラウザや端末しだいで、それぞれテンプレを変更するためのプラグインもあったと思うけど、思い出せなかった。思い出せたら追記しよう。


参考サイト
iPhone 3G用のWebページを作る[AllAbout]
作って学ぶスマートフォン対応サイトの基本