Google HTML/CSS Style Guideの俺にとって使えそうな箇所

■プロトコルは省略
http:とかhttps:とかは省略する
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
.example {
  background: url(//www.google.com/images/example);
}

■必要に応じてコメントを書く

■TODOは大文字 + コロン
<!-- TODO: remove optional tags -->

■type属性はいらない
<link rel="stylesheet" href="//www.google.com/css/maia.css">
<script src="/js/js.js"></script>

■URL属性はクォーテーションを使わない
url(//www.google.com/css/go.css);


■並び順はアルファベット順にする
background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;

■CSSのグループごとにセクション名をコメントに書く
/* Header */
#adw-header {}

/* Footer */
#adw-footer {}

/* Gallery */
.adw-gallery {}


参考：Google HTML/CSS Style Guide

[JavaScript] 例外の原因。HIERARCHY_REQUEST_ERR: DOM Exception 3

JavaScriptのある処理で例外が出た。
Chromeのコンソールで確認したところ、エラー文は「HIERARCHY_REQUEST_ERR: DOM Exception 3」
変数の中身など処理を確認しながら調べてみても、いまいちつかめない。
そもそもこの例外が意味するものもわからなかった。これは自分の英語力の足らなさが原因なんだけど…日本語で説明してくれているページが少なかったので困った。

原因を説明してくれているページ→付録A.2　DOMパーサの動作の差異
前述のページには「あるノードに対して，そのノードまたは祖先ノードを引数newChildとして，appendChildメソッドまたはinsertBeforeメソッドを実行した場合」が原因と書いてある。
コードを見返したところ、DOMを取得する部分でセレクターを書き間違えていたことに気づいた。

//間違いコード
$('#wrapper ul:last').append(liElement);

//正解コード
$('#wrapper > ul:last').append(liElement);

間違いコードで取得したul要素はappendしようとしたliの子要素だったため例外が起きていた。 ただの凡ミスなんだけど、原因がわかるのにちょっと時間がかかってしまった。

つまりは親を子の中に入れようとしてた。
それは社会的にもJavaScript的にもタブーだよってことみたい

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

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

//イベントを登録できない
$(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を触ってるんだけど、色々と書き方なんかが変わってきているのでメモ

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

★コントローラー

■モデルの使用

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

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

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

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

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

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

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

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

★ヘルパー

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

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

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

随時追記していく予定

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

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

//アニメーション開始時
//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で、テンプレート内でメソッドの引数に変数を渡す方法
いっつも忘れてしまうのでメモ

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

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