2013-03-16

CSS3の@keyframesについて

Sassを使ってて、
キーフレームアニメーション書いてたら全然動かなくって
おかしいなー(´・ω・｀)
ってなってたんですが、
@keyframesを入れ子にすると動かないみたいです。(´・ω・｀)

動かない例

.hoge{

  p { animation: anime .5s linear 0 1 normal; }

  @keyframes anime 
  {
    from { background-color: red; }
    to { background-color: blue; }
  }

}

動く例

.hoge{
  p { animation: anime .5s linear 0 1 normal;  }
}
@keyframes anime 
{
  from { background-color: red; }
  to { background-color: blue; }
}

これはハマる。(´;∀;｀)

2013-03-03

Android爆発しろ

スマートフォンでハマった事メモ

画像が表示されない事がある。

画像数が多いと画像が表示されない場合がある。
GalaxySⅡで発生した。
爆発しろ

touchendが効かない

Android4.0からはtouchstartかtouchmoveの時にevet.preventDefault()しないと
touchendのイベントが発火しない
爆発しろ

参考
http://www.gravitypianist.info/android-40touchend

ページ内リンクが上手く飛ばない

同一ハッシュだと同じURLじゃんHAHAHA-っていって飛んでくれない
Android,iPhoneどっちも起こる

解決法は下記記事参照
http://mermaid1112.hatenablog.com/entry/2012/09/01/192503

nth-childが効かない端末がある

nth-child(2n),nth-child(n)は効かないけど:nth-child(odd),:nth-child(even)は効く端末がある。
爆発しろ

要素をheight:0,overflow:hiddenにして非表示にしても非表示にした中身の要素のイベントが発火する。

上記のようなcssで非表示にしていたコンテンツにフォームを入れてたんですが
非表示にしたコンテンツに入ってたセレクトボックスがなぜかクリックされた...(´・ω・`)
display:noneしてあげた。
確かDocomo F03-Dで発生した。
そろそろ泣く。

以上、先週先々週だけで遭遇したバグたちでした...。

◞( 、΄◞ิ౪◟ิ)、< わしのバグ地獄はまだまだ終わらぬよ

2013-01-16

配列の要素の有無を確認するとき

連想配列の要素の有無を確認するときはinを使うらしい

  if(要素名 in 配列名){ /*実行したい処理*/ }

使用例

  var a = { url : 'hogehoge' , type : 'homu' , ver: 1.0  };
  /* urlがある場合、alertを表示 */
  if('url' in a){ alert('hoge'); }

2013-01-15

備忘録

今日はまったので忘れないためのmemo

http://hoge.com/hoge.php?id=0.0&ver=hoge&type=123

例えばこういうURLがあったときに、idとかverとかをPOSTしたくて
idとかの数字を抜き出す必要があったんですが、
「よし、正規表現だー☆」
って思って実装してたらはまりました。

いくら悩んでも解決しなくて、上司に質問しにいったら、
アプローチの方法がそもそも違っていたらしい...。

教えてもらった方法

  var url = "http://hoge.com/hoge.php?id=0.0&ver=hoge&type=123";
  var hash = /id=.+/.exec(url); //idより後の文字列を取得
  hash = hash.toString(); //文字列に変換
  var data = {}; //結果を格納する配列

  var tmp = hash.split('&'); //&で文字列を分割
  tmp.forEach(function (val) {
    var t = val.split('='); 
    data[t[0]] = t[1]; //配列に格納
  });

ある程度規則性がある時は無理して正規表現を使うよりも
splitで文字列を分割することで文字列を取得したほうがいいみたいです。

あと今日はスペルミスで迷惑をかけてしまったのでなんとか英語の基礎力を...あげたい...。

2012-12-08

あくしょんすくりぷとはじめました

AS3をはじめました。
@itsukichangに教わり中

今日勉強した事

関数について
変数について

関数について

jsのときは例えば、

function Sum(a,b){ return a + b; }

ってかいてたけど
AS3は

function sum(var a:int, var b:int):int { return a + b; }

こんな風に書くらしい。型宣言必要なんですね。

変数について

変数型が色々あるっぽい。varだけ書いて終わりじゃない

var a:int	整数型
vat a:uint	正の数
var a:Number	実数
var a:String	文字列

今日の成果

円と四角を書きました。
クリックイベントのことも少し教わったので、使ってなにかモーション作ったりしてみる

今日の成果 - wonderfl build flash online

2012-09-19

unachang.com

unachang.com復活させた。

もの置きにするよてい

2012-09-01

スマートフォンでページ内リンク

このあいだスマートフォンで

<a href="#hoge">hogeへ戻る</a>

がうまく動かなくて泣いた。

どうやらURLに#hogeがついてからまた同じIDのページ内リンクを実行しようとすると
同じURLなのでページ内リンクの処理起こらない模様。。。

jsで対処するしかないのでjqueryで書きました...
意外とめんどくさいスマートフォン

/* ページ内リンク */
$('a').click(function(e){
  var url = $(this).attr('href');
  if(url.indexOf('#') > -1){
    e.preventDefault();    	
    $(window).scrollTop($(url).offset().top);
    return false;
  }
});

aタグが押されたらページ内リンク(hrefの中身がid)か判別して
ページ内リンクだったら
preventDefault()でaタグのイベントをころして
scrollTopで移動先を指定してます。そしたらURLにidが追加されないし何度同じリンク押してもページ内リンクが可能です。
return falseも入れないとAndroidブラウザだとうまく動かないみたいです...。
なにかもっといい方法あったら教えて下さい。

/*追記*/
touchイベント使った方が早いみたいなのでちょっと書いてみます。

/*追記*/
にーさん(@21f)がtouchイベント使ったやつを書いてくれましたー！

参考サイト
aタグのリンクを無効にする | commit purring cat to memory
http://reinyan.pussycat.jp/wpc/?p=927