[mootools] cssでのアニメーションtransitionEndがイベント登録できない

mootoolsだとcssのtransition終了時のイベントが登録できなかった。

view plainprint?

1. //イベントを登録できない  
2. $(id).addEvent('webkitTransitionEnd', function(){  
3.  //-webtkit-transition終了時のイベント  
4. });  
5.   
6. //対処法addEventListnerで登録する  
7. $(id).addEventListner('webkitTransitionEnd', function(){  
8.  //-webtkit-transition終了時のイベント  
9. });  

//イベントを登録できない
$(id).addEvent('webkitTransitionEnd', function(){
 //-webtkit-transition終了時のイベント
});

//対処法addEventListnerで登録する
$(id).addEventListner('webkitTransitionEnd', function(){
 //-webtkit-transition終了時のイベント
});

うーん、なんでだろう。


--add [2012/8/8]

登録方法わかった！
Element.NativeEventsに登録すると使えるようになる！

Element.NativeEvents.webkitTransitionEnd= 2;

参考：
[MooTools] カスタムイベントを実装する方法
公式ドキュメント

iPhone, iPad の safariでアニメーションがちらつく

前に「CSSアニメーションがちらつく場合」で書いたけど、iPhoneのcssアニメーションでtranslate3dを使うとちらつかなくなるってのがあった。
今回は別の理由。

■問題
幅2000pxくらいのデカい画像を左から右まで素早く移動させたり、「ページトップへ」なんてボタンをクリックして、ページの最上部まで素早く移動させたりする時にちらつきがおきる。

これは、iPhoneの場合スクリーンを中心とした「1024px × 1024px」*は画面の外だったとしても描画されていて、その範囲外の部分は再描画しないといけないからみたい。
そして、この再描画には少し時間がかかる。

なので、再描画される前にその範囲外だった部分まで移動すると、画像やその要素がまだ表示されていない状態で画面内に入ってきてしまう。

■対処法
・iPhone自体のデフォルトのスクロールスピードの範囲内だったら、再描画される前に画面内まで来てしまうことはないようなので、スクロールのスピードを調整する。
・再描画される前に画面内まで来ないように、スクロールのスピードを調整する。
・でかい画像や要素をスクロールしているのなら、それを1024px以内になるように分割して順番にスクロールさせる。
とかかな

*iPadの描画範囲はいくつだろう？iPhoneの比率から考えると画面の縦横2倍ずつくらいかな。

参考：
Fast animation with iOS WebKit（英語）

[cakePHP] 基本機能

cakephp2を触ってるんだけど、色々と書き方なんかが変わってきているのでメモ

--------------------------

★コントローラー

■モデルの使用

view plainprint?

1. $this->loadModel(モデル名);  

$this->loadModel(モデル名);

■とりあえず追加・更新・削除機能を動かしたい場合

view plainprint?

1. class UnkoController extends AppController{  
2.     //↓$scaffoldを記述  
3.     public $scaffold;  
4. }  

class UnkoController extends AppController{
    //↓$scaffoldを記述
    public $scaffold;
}

テスト用に自動で基本的な機能を使えるようにする機能であって、実際の運用には使わないほうがいいよって言われてます。

--------------------------
★モデル

■デフォルトの並び順を設定する

view plainprint?

1. //モデルクラスに$orderという変数を作成する。値はSQLのORDER文  
2. public $order = 'ModelName.created ASC';  

//モデルクラスに$orderという変数を作成する。値はSQLのORDER文
public $order = 'ModelName.created ASC';

--------------------------

★ヘルパー

◎Formヘルパー
■formの閉じタグとsubmitボタンを表示する

view plainprint?

1. //Form->end()の引数に文字列を渡すとその文字列がvalueになったsubmitボタンが自動で作られる  
2. $this->Form->end('submit');  

//Form->end()の引数に文字列を渡すとその文字列がvalueになったsubmitボタンが自動で作られる
$this->Form->end('submit');

--------------------------

随時追記していく予定

[JavaScript] CSSアニメーションの開始・終了イベント

最近iPad向けにcssアニメーションを頻繁に使う仕事をやった。
-webkit-transitionじゃなくて-webkit-keyframesで動かすタイプ。
アニメーションを開始するタイミング、終了するタイミング、ループするタイミングでイベントを登録できることを知ったのでメモ。便利。

view plainprint?

1. //アニメーション開始時  
2. //delayを指定していた場合は、遅れて開始するタイミングで発生するらしい  
3. elem.addEventListener('webkitAnimationStart', function(){  
4.  //開始時の処理  
5. });  
6. //jQueryなら  
7. $(elem).bind('webkitAnimationStart', function(){  
8.  //開始時の処理  
9. });  
10.   
11.   
12. //終了時  
13. elem.addEventListener('webkitAnimationEnd', function(){  
14.  //終了時の処理  
15. });  
16.   
17. //ループ時。animation-iteration-countが1より大きい時に発生する  
18. elem.addEventListener('webkitAnimationIteration', function(){  
19.  //ループ時の処理  
20. });  

//アニメーション開始時
//delayを指定していた場合は、遅れて開始するタイミングで発生するらしい
elem.addEventListener('webkitAnimationStart', function(){
 //開始時の処理
});
//jQueryなら
$(elem).bind('webkitAnimationStart', function(){
 //開始時の処理
});


//終了時
elem.addEventListener('webkitAnimationEnd', function(){
 //終了時の処理
});

//ループ時。animation-iteration-countが1より大きい時に発生する
elem.addEventListener('webkitAnimationIteration', function(){
 //ループ時の処理
});

今回はiPad向けだったので、webkitのみを対象にしたけど、FireFoxだとanimationstart, animationendとプレフィックスなしの全部小文字になるらしいので注意。

参考
CSS アニメーションの基礎

[Smarty] テンプレでメソッドに変数を渡す

Smarty3で、テンプレート内でメソッドの引数に変数を渡す方法
いっつも忘れてしまうのでメモ

view plainprint?

1. //クォーテーションで囲って{}波カッコを使う  
2. {$var->getItem("{$id}")}  
3.   
4. //文字列と連結しつつ渡すこともできる  
5. {$obj->getItem(id_"{$id}")}  

//クォーテーションで囲って{}波カッコを使う
{$var->getItem("{$id}")}

//文字列と連結しつつ渡すこともできる
{$obj->getItem(id_"{$id}")}

[JavaScript] ブラウザの「-webkit-」などのベンダープレフィックスを取得する

JavaScriptでスタイルを指定する際に、「-webkit-」などのベンダープレフィックスをつけないといけないことがあるんだけど、主要ブラウザそれぞれに対応したスタイルを設定するのも馬鹿らしいので、JavaScriptで自動でつけたい。iScrollで使われていたコード。

view plainprint?

1. //↓こんなのは面倒なので…  
2. elem.style.WebkitTransaction = 'all 100ms linear';  
3. elem.style.MozTransaction = 'all 100ms linear';  
4. elem.style.OTransaction = 'all 100ms linear';  
5.   
6. //自動でプレフィックスを取得する  
7. var vendor = (/webkit/i).test(navigator.appVersion) ? 'webkit' : (/firefox/i).test(navigator.userAgent) ? 'Moz' : 'opera' in window ? 'O' : '';  
8.   
9. //↓こういうふうに使う  
10. elem.style[vendor + 'Transaction'] = 'all 100ms linear';  

//↓こんなのは面倒なので…
elem.style.WebkitTransaction = 'all 100ms linear';
elem.style.MozTransaction = 'all 100ms linear';
elem.style.OTransaction = 'all 100ms linear';

//自動でプレフィックスを取得する
var vendor = (/webkit/i).test(navigator.appVersion) ? 'webkit' : (/firefox/i).test(navigator.userAgent) ? 'Moz' : 'opera' in window ? 'O' : '';

//↓こういうふうに使う
elem.style[vendor + 'Transaction'] = 'all 100ms linear';

アニメーションが終わるタイミングで起きるイベント「transitionEnd」はfirefoxだけプレフィックスつかないので注意。なんでそんなことすんの…

chrome, safari -> webkitTransitionEnd
oper -> otransitionEnd
firefox -> transitionend(※全部小文字)

参考：
iScroll
CSS transitions

SASSで主要なブラウザのプリフィックスをつけるmixin

SASSで主要なブラウザ用にプリフィックスを付けるmixinを作ったのでメモ。

view plainprint?

1. $prefixes: -webkit- -moz- -ms- -o- '';  
2. @mixin vendorCss($key, $val){  
3.  @each $prefix in $prefixes{  
4.   #{$prefix}#{$key}: $val;  
5.  }  
6. }  
7.   
8. div {  
9.  @include vendorCss(transition, all 200ms ease-in-out);  
10. }  
11.   
12. ↓こうなる  
13. -webkit-transition: all 200ms ease-in-out;  
14. -moz-transition: all 200ms ease-in-out;  
15. -ms-transition: all 200ms ease-in-out;  
16. -o-transition: all 200ms ease-in-out;  
17. transition: all 200ms ease-in-out;  

$prefixes: -webkit- -moz- -ms- -o- '';
@mixin vendorCss($key, $val){
 @each $prefix in $prefixes{
  #{$prefix}#{$key}: $val;
 }
}

div {
 @include vendorCss(transition, all 200ms ease-in-out);
}

↓こうなる
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-ms-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;

[iPhone] JavaScriptの処理にかかった時間を取得する

iPhoneのSafariだとデバッグコンソールを出して、console.logでデータを出すこともある程度できる。
だけど、JavaScriptの処理時間を計測するためにconsole.time(), console.timeEnd()を使ってみても表示されない。
なので、自分で計測する関数を作った。

view plainprint?

1. var times = {};  
2. function consoleTime(name){  
3.  //指定がなかったらstart  
4.   
5.  var d = new Date();  
6.   
7.  if(typeof times[name] === 'undefined'){  
8.   //スタート時のタイムスタンプを保存  
9.   times[name] = d.getTime();  
10.   return;  
11.  }else{  
12.   console.log(d.getTime() - times[name] + 'ms');  
13.  }  
14. }  
15.   
16. consoleTime('timeCheck');  
17. //何か処理して  
18. consoleTime('timeCheck');  
19. //***ms  

var times = {};
function consoleTime(name){
 //指定がなかったらstart

 var d = new Date();

 if(typeof times[name] === 'undefined'){
  //スタート時のタイムスタンプを保存
  times[name] = d.getTime();
  return;
 }else{
  console.log(d.getTime() - times[name] + 'ms');
 }
}

consoleTime('timeCheck');
//何か処理して
consoleTime('timeCheck');
//***ms

Androidでは試してないけど、console.logのとこをalertに変えれば表示されるんじゃなかろうか。

[JavaScript] jQueryをローカルストレージに保存して高速化

サイトに来る度にjQueryを読み込み直すんじゃなくて、ローカルストレージに登録したほうが早いんじゃないかって思ったのでやってみた。

■Chromeの場合
読み込む場合にかかった時間 125ms～200ms
ローカルストレージから読み込む場合 25ms～40ms

■iPhoneの場合
読み込み
Wi-Fi 280ms～400ms
電話回線 800ms～1200ms
ローカルストレージ
130ms～200ms

通信環境によって、色々変わりそうだけど、iPhoneだと大きく違う！
早いぜっ！

アプリケーションキャッシュにすればもしかして全部解決なのかも…

--add [2012/8/24]
スマートフォン向けのサイトなら、jQueryをよみこむのはXMLHttpRequestじゃなくて、scriptタグを生成する方がよさそう。その場合はscript要素のonLoadイベントで読み込み後の処理を開始するといいはず。(試してない)
参考：[JavaScript] [高速化] JSファイルの非同期読み込み。遅延ロードっていうのか？

view plainprint?

1. //jQueryを読み込んだ後に最初に呼ぶ関数  
2. function start(){  
3.  //jQuery読み込み後の処理  
4. }  
5.   
6. //ローカルストレージからjQueryを読み込む  
7. var jQ = window.localStorage.getItem('jQuery');  
8.   
9. if(jQ === null){  
10.  //ローカルストレージにない場合  
11.  //jQueryファイルを読み込む  
12.  loadJQuery();  
13. }else{  
14.  //ローカルストレージにある場合  
15.   
16.  try{  
17.   //ローカルストレージに保存してある文字列をJavaScriptとして処理  
18.   eval(jQ);  
19.   
20.   if(typeof jQuery === 'undefined'){  
21.    //ローカルストレージのjQueryがうまく動かなかった場合は読み込み直し  
22.    throw new Exception();  
23.   }  
24.     
25.   start();  
26.  }catch (e){  
27.   //evalでエラーが出た場合は読み込み直し  
28.   loadJQuery();  
29.  }  
30. }  
31.   
32. //jQueryを読み込んでstart関数を呼ぶ  
33. function loadJQuery(){  
34.  var xmlhttp = new XMLHttpRequest();  
35.   
36.  xmlhttp.open("GET", 'jQueryファイルへのパス', true);  
37.  xmlhttp.onreadystatechange = function(){  
38.     
39.   if(xmlhttp.readyState === 4 && xmlhttp.status === 200){  
40.      
41.    //読み込み成功時  
42.    var str =  xmlhttp.responseText;  
43.      
44.    //文字列として読み込んでローカルストレージに保存  
45.    window.localStorage.setItem('jQuery', str);  
46.    //JavaScriptとして処理  
47.    eval(str);  
48.    start();  
49.      
50.   }else if(xmlhttp.readyState === 4 && xmlhttp.status !== 200){  
51.    //読み込み失敗時  
52.   }  
53.  };  
54.    
55.  xmlhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest");  
56.  xmlhttp.send();  
57. }  

//jQueryを読み込んだ後に最初に呼ぶ関数
function start(){
 //jQuery読み込み後の処理
}

//ローカルストレージからjQueryを読み込む
var jQ = window.localStorage.getItem('jQuery');

if(jQ === null){
 //ローカルストレージにない場合
 //jQueryファイルを読み込む
 loadJQuery();
}else{
 //ローカルストレージにある場合

 try{
  //ローカルストレージに保存してある文字列をJavaScriptとして処理
  eval(jQ);

  if(typeof jQuery === 'undefined'){
   //ローカルストレージのjQueryがうまく動かなかった場合は読み込み直し
   throw new Exception();
  }
  
  start();
 }catch (e){
  //evalでエラーが出た場合は読み込み直し
  loadJQuery();
 }
}

//jQueryを読み込んでstart関数を呼ぶ
function loadJQuery(){
 var xmlhttp = new XMLHttpRequest();

 xmlhttp.open("GET", 'jQueryファイルへのパス', true);
 xmlhttp.onreadystatechange = function(){
  
  if(xmlhttp.readyState === 4 && xmlhttp.status === 200){
   
   //読み込み成功時
   var str =  xmlhttp.responseText;
   
   //文字列として読み込んでローカルストレージに保存
   window.localStorage.setItem('jQuery', str);
   //JavaScriptとして処理
   eval(str);
   start();
   
  }else if(xmlhttp.readyState === 4 && xmlhttp.status !== 200){
   //読み込み失敗時
  }
 };
 
 xmlhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest");
 xmlhttp.send();
}

CakePHP2.0でのリダレクトエラー

CakePHPの2.0でリダレクトしようとした際に画面が真っ白になってしまった。
調べたところ、headerを返す前になにか出力してしまってるんじゃないかとのこと。

探してみたが何も出力していない。
Debuggerでなにかしようとしているということはわかった。

とりあえずcore.phpのデバッグレベルを0にすると起きないということだけわかった。
もうちょっと調べてみよう。

参考にしたサイト：

HTTPヘッダ送信後のredirectメソッドでエラーが表示されない

[mootools] 位置・座標取得まとめ

//要素までスクロールする距離を返す
elem.getScroll();

//要素のオフセットを返す
elem.getPosition();
//引数に要素を渡すと渡した要素からの相対的な距離が返ってくる

//要素の座標を返す
elem.getCoordinates();
//引数に要素を渡すと渡した要素からの相対的な距離が返ってくる

[iPhone] 縦向きでも横向きでも画像を画面いっぱいに表示したい

画像を画面いっぱいに表示する方法
cssで指定する

view plainprint?

1. img {  
2.   width: 100%;  
3.   height: auto;  
4. }  

img {
  width: 100%;
  height: auto;
}