lessでcssアニメーションを簡単に書く方法

lessを使ってる時にキーフレームアニメーションを簡単に書く方法がないか調べていたら教えてくれているページがあったのでメモ
 参考：LESS CSS でキーフレームアニメーションを楽に書く

// 今回作ったのは、ピコピコ動くアニメーション
// まずはmix-inでアニメーションを指定
.pikopiko() {
 @_r: 10deg;
 from { .rotate(0); }
 5% { .rotate(@_r); }
 10% { .rotate(@_r * -1); }
 15% { .rotate(@_r); }
 20% { .rotate(@_r * -1); }
 23% { .rotate(0deg); }
 to { .rotate(0deg); }
}

//作ったアニメーションを各ブラウザ用にプレフィックスをつけて指定
//現在、キーフレームアニメーションでプレフィックスが必要なのはwebkitだけらしい
@keyframes pikopiko { .pikopiko(); }
@-webkit-keyframes pikopiko { .pikopiko(); }

// アニメーションを簡単に指定するmix-inも作成
.animation(@name, @duration: 300ms, @delay: 0, @ease: ease) {
 -webkit-animation: @name @duration @delay @ease;
 -moz-animation: @name @duration @delay @ease;
 -ms-animation: @name @duration @delay @ease;
 -o-animation: @name @duration @delay @ease;
 animation: @name @duration @delay @ease;
}

.animation-count(@count) {
 animation-iteration-count: @count;
 -webkit-animation-iteration-count: @count;
 -moz-animation-iteration-count: @count;
 -o-animation-iteration-count: @count;
 -ms-animation-iteration-count: @count;
}

//アニメーションを設定する
.element {
 .animation(pikopiko, 4s);
 .animation-count(infinite);
}

すげー記述量減った！ ありがたし。 自分1人で作業するならcompassを使うんだけど、黒い画面が苦手な人もいる場合はguiのあるlessで作業してる。

retina用画像のサイズ指定はwidth="50%"でいけそうだ。…と思ったら状況によるな

スマートフォンサイトを作ってるんだけど、もうretina用画像のみで作ってって話になった。

いちいち一個ずつ画像サイズを調べて、その半分のサイズを指定ってやるのが面倒だったので、
 <img src="file.png" width="50%">
って書いたら、うまく表示された。

 height="50%"もいれとくか。

 --add 2013.05.21 height="50%"を入れたら、表示がおかしくなった
さらにwidth="50%"でもおかしくなる画像もあった。

要は…状況による。
imgタグを囲ってる要素にサイズ指定があったりすると、その要素のサイズの50％ってなってしまうのかも。
 半分のサイズを指定するのが安全そうだ

[Backbone.js] イベント関連で起きやすいメモリリーク

Backbone.jsを使っていて起きやすい問題ってのを紹介してくれている記事があった。 その中で、頻繁に起きてしまいそうなメモリリークの問題。 onを使ってview側でmodelのchangeイベントをbindしていると、viewを削除した後でもイベント経由でmodelからviewへの参照が残ってしまうらしく、メモリが解放されない。

var MyView = Backbone.View.extend({
	initialize: function(){
		this.model.on('change', this.render, this);
	},
	render: function(){
		//render処理
	}
});

viewをremoveした際に自動で参照を解除するにはonではなくlistenToに変更するとよい。

initialize: function() {
	this.listenTo(this.model, 'change', this.render);
}

違いはイベントをひもづけているのがmodel->viewからview->modelへ変わったこと。 なのでviewを削除すればview->modelへの参照も自動でなくなり、メモリも解放される。 参考Avoiding Common Backbone.js Pitfalls

[Backbone.js] 自分で作ったイベントをViewとCollection(またはModel)で連携させたい

「次を読む」ボタンを押すとAJAXで次のリスト一覧を取得する。 アンド、取得し終わったらさらに次のページがあるのかどうかチェックして、なかったら「次を読む」ボタンを非表示にするってのをやった。 まずはCollection側で独自イベント登録

var MyList = Backbone.Collection.extend({
 initialize: function(){
  //自分独自のイベントフックを登録
  this.on('nothingNext', this.myEvent)
 },
 load: function(){
  //何かを読み込む処理
  if(次のページがなかったら){
   //自分で作ったイベントを起動
   this.trigger('nothingNext');
  }
 },
 myEvent: function(){
  console.log('俺独自のイベントだ');
 }
});
var mylist = new MyList();

Viewも独自イベントに連動させる

var Btn = Backbon.View.extend({
 collection: MyList,
 initialize: function(){
  //collectionの独自イベントが起動した時に一緒に動かしたいメソッドを登録
  this.collection.on('nothingNext', hideMe);
 },
 hideMe: function(){
  this.$el.hide();
 }
});

CollectionをModelに変えてもできる

MySQLでエラー [Incorrect string value]

ブログシステムのメール投稿機能でエラー。
MySQLエラー [Incorrect string value]
文字コードの問題って話が多いけど、今回は違った。

本文に絵文字が入っていたため。

ガラケー時代はほとんど起きなかった問題。
スマートフォンになって多様になったなー。

PHPの場合、変換不能な文字は削除する関数があったはず。
文字コードを一度変換してから、最初の文字コードに戻すって処理をすればエラーになるような文字は削除される。

前に対処したはずだったんだけど…
新しい問題かも。


--add 2013.4.24
iPhoneの「メッセージ」（吹き出しアイコンの方）で写真とタイトルのみで送信すると、メールのbodyが画像のデータだけになっていた。
そういう状況を想定していなかったので、画像のbase64データをテキストとして処理しようとしてしまっていたらしい。

今までの機種だと、メールの本文なくても空っぽのプレーンテキスト枠があったんだけど、iphoneだとそれもなくなってた。

compass使ってたらsingle-transitionでエラーになった

Undefined mixin single-transitionとかなんとか、そんなエラー。
結論だけかくと、バージョンアップしたら治った。

調べてたら、「2つ同時にcompass watchしてたせいだったっぽいよ」って言ってた人もいたので、そういう場合もあるのかも。

[WordPress] functions.phpに入れていたら少し楽になる関数

WordPressでimgタグを書くのが面倒

<img alt="sample" height="100" src="<?php echo 'TEMPLATE_DIR' . '/sample.jpg' ?>" width="100" />

functions.phpに下を追加

define('DIR', get_bloginfo( 'template_directory' ));
/* imgタグを返す */
function img_tag($file, $alt = '', $opt = array()){
  //ディレクトリ名は自分の環境に合わせて
        $path = DIR . '/images/' . $file;
        if(!empty($alt)){
                $opt['alt'] = $alt;
        }
        $etc = '';
        foreach($opt as $key => $value){
    //引数のデータをそのまま属性に追加している。
    //必要だったら値のチェックをしましょう
                $etc .= ' ' . $key . '="' . $value . '" ';
        }

        $path = sprintf('',
                $path,
                $etc
        );

        echo $path;
}

使い方

<?php
img_tag ('sample.jpg', 'alt属性', array('width' =>100, 'height' => 100)) ?>
//省略も可
//<img class="php" code="" src="テンプレまでのパス/images/sample.jpg'>

少しだけimgタグを書くのが楽になると思うんだけどどうだろう？ cssを追加するのも少しだけ楽になる↓ 配列で渡せるようにしてもいいかも

function css_tag($file){
    echo sprintf('',
            DIR . '/stylesheets/' . $file
    );
}

まあ、他のフレームワークのパクリなんだけどね