jQuery.dataとhtml5のdata-でどちらが速いか試してみた

状態や何かしらの値を要素と関連づいた状態で保存したい時がある。
例えばアコーディオンUIで今開いてる状態か閉じてる状態か…など。
（アコーディオンの場合はクラス名で良さそうだけど）

思いついたのはjQueryのdataメソッドを使う方法とhtml5のdata-**を使う方法
どっちが速いのか試してみた
それぞれ1000回、値を入れた後、取得するというやり方でやってみた。

/jQueryのdataの場合
$(要素).data('名前', 値);
//7ms

//html5のdata-の場合
$(要素).attr('data-名前', 値);
//11ms

※chromeで測定

測ってみたらdataを使う方が若干早かったけど、気にしなくてもいい程度だった。
html5の方がhtmlを変更する分、ずっと遅いのかと思っていたがそんなことなかった。

ログイン時にブラウザが覚えているID,パスワードを入力させない方法

ブラウザはログインが必要なサイトで、ID,パスワードを覚えていてくれて、使う際にはすごいありがたいんだけど、どうしても自動で入力をさせずに、手動で入力させたいって場合があった。

具体的にはあまり書けないが、Web上だけで完結するのではなく、Webと連動して対面でサービスを行うキャンペーン時に、ID,パスワードが必要になるため、どうしても対面前に一度、手入力して自分のパスワードを思い出しておいてほしい、という状況。

最初に考えたのはinputのnameを変えるという方法。
これは機能しなかった。nameを変えてもなぜかブラウザが覚えているID,パスワードが入力されてしまう。

次に考えたのは、Javascriptでinputのvalueを空にする方法
windowのload時にvalueを空にする処理をしたが、ブラウザが自動入力するのはその後のタイミングらしく、一旦空にした後に、valueがはいってしまった。

次に考えたのが、setIntervalとかで、定期的にinputの値を空にする方法。
IDのinputにフォーカスされたタイミングでsetIntervalを解除する。
これは一応うまく動作していたが、iPhoneやAndroid、IEなどブラウザによってはinputのフォーカスイベントがうまく動作しない可能性もあるのでは…と考え、そうなってしまったら、どれだけ手動で入力しても定期的に値を空にされてはたまらんと思いやめた。

最終的にとった方法は
name="id"のinputなどの他にname="id-2"、name="password-2"などのinputを作り、それを見えないように設置するという方法。
これをやると似た名前のどちらかにしか値が入らなくなった。
ただ、先に（または後に）記述されている方のinputに…とかではなく、ブラウザによってはidは先に書かれたinputに、パスワードは後に書かれたinputに…となってしまっていた。
複数のブラウザで試行錯誤して順番を変え、正しいinputには値が入らない順番を探した。
どういった法則があるのかはわからずじまい。

cssでdisplay:noneにしてしまうとブラウザがそのinputを無視してしまうようで、height: 0; width:0; position: absolute; top: 0; right: 0;などとして、見た目上は見つからないようにして対応した。

[iOS] iPad, iPhoneのaudioタグは同時に複数鳴らせない

iPad向けにsafariでできるゲームのようなものを作った。
その際、audio関連で色々引っかかった。
起きた問題はすべてPC版のsafariでは起きない問題だったので注意。
アニメーションなんかの動き系はPC版とあまり変わらないけど、audioは別。

・同時に複数鳴らせない
・クリックイベントと音がずれる

同時に鳴らせないのは仕様で、音がずれるのは複数の音声ファイルを扱うのは下手だからみたい。
全部のファイルをくっつけて、指定の音までシークして再生させると良いらしい。

参考：
【HTML5】iPhone向けWEBアプリで、Audioを使ってみてハマった点
iPhoneでHTML5のaudio要素を使うときに気をつけたいこと

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

videoタグの動画ファイルが再生できるかどうかJavaScriptで判定する

HTML5の新しいタグ、video要素では動画の読み込みに失敗するとerrorイベントが起きる

//video要素を取得
var v = document.getElementById('#video');

v.addEventListener('error', function(){
 //エラー時の処理
});

errorイベントは「メディアデータの読み込み中にエラーが発生した時」に発生するらしい

参考：
video要素、audio要素をJavaScriptから操作する

errorイベントが起きた時は、src属性を他の動画に変更する処理をしたんだけど、新しい動画でも読み込みエラーが起きて、無限にエラーを履き続けるようになった。
なので、やめた。

オンマウス時に出す枠をSVGでなめらかに表示＆アニメーション

SONYのヘッドフォンのサイト見ていて、オンマウス時のアニメーションがなめらかで綺麗だったので、どうやってるのか調べてみた

見たサイト↓
http://discover.store.sony.com//piiq/

水色の枠はSVGで表示している。
FLASHなんかでは良くみる表現。

ボーダーをつけたdivをオンマウス時に縮小することで、枠を表示させてもいいんじゃないのと思ったけど、firefox7ではアニメーションがコマ落ちしてガタガタだった。

で、やりかた。
線の幅をアニメーションで変更してる。
線の幅は、線の中心から両方に広がっていくので、10pxの幅の線を出したい場合は、倍の20pxに設定すると、中心から外側と内側にそれぞれ10pxの線がでる。
外枠はoverflow:hiddenにしとかないと、外側の線まで出てしまうので注意。

HTML

JavaScript(jQueryを使ってます)

$(".item").hover(function(){
 $(this).find(".border").css("opacity", 1).animate({
  "stroke-width": "10px"
 });
},
function(){
 $(this).find(".border").animate({
  "stroke-width": "0px"
 }, {
  complete: function(){
   //アニメーションが終わったら非表示
   $(this).css("opacity ", 0);
  }
 });
});

SVGがつけるかどうかをJavaScriptで判定するなら→「SVGが使えるか判定する」(Raphael使ったほうがいいと思うけど…)

参考サイト：
http://www.hcn.zaq.ne.jp/___/SVG11-2nd/paths.html



-- add 2012/12/16
Raphael.jsを使ってやってみました
オンマウス時になめからなアニメーションで枠線を表示させる
--

高速化のためだけにアプリケーションキャッシュを使ってもいいのかな？

HTML5の新機能で、Webアプリケーションをオフラインでも使えるようにするための機能としてアプリケーションキャッシュってのがある。

必要なファイルをブラウザ側でキャッシュさせて、インターネットでファイルを読み込むんじゃなくて、キャッシュさせたファイルを利用する。

スマートフォン向けのサイトを作っていて、オフラインで使ってもらうことは考えてないんだけど、アイコン画像とかJavaScript、Cssファイルなんかもキャッシュさせとくと、ものすごく高速化できる。
通常の電話回線でもwifi以上の体感スピード。

でも、この高速のためにファイルをキャッシュさせるってのは、もともとのオフラインでアプリケーションを利用できるようにするための機能ってのとは全然違う使い方なんだけど…

いいのか？
うーん…わからん


参考：
[HTML5] アプリケーションキャッシュの使い方

[Android] Androidのuseragent一覧

Androidのブラウザはバージョンによって、細かく違いがあって、なかなか大変だ…
ある動画サービスを使ってみたんだけど、2.3だと動画が見れるけど、2.2だと再生できない。
もとの動画はmp4なので、再生できそうなんだけど、コントローラーが表示されない。

自前でコントローラー作らないとだめかもなー。

useragent switcherなどでAndroid用画面を見る用に、Androidのユーザーエージェントをまとめてくれてる人がいたのでリンク↓↓

参考：
http://team-pag.interprism.co.jp/member/noguchi/data/
http://pwiki.awm.jp/~yoya/?Android/UserAgent

HTML5ではscriptタグもlinkタグもtype属性は必要ない

いつも忘れてしまうのでメモ

HTML5ではscriptタグもlinkタグもtype属性は必要ない

<script src="javascript.js"></script>
<link href="css.css" rel="stylesheet">

参考：
HTML5タグリファレンス
link 要素

JavaScriptで位置情報を取得する

スマートフォンサイトで位置情報を取得する処理があった。
コードはこんな感じ

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(pos){
    //取得成功時の処理
  }, function(){
    //エラー時の処理
  });
} else {
  error('not supported');
}

iPhoneではうまく動いたのに、Androidでは動かないけど、エラーも出ない。
確認してみるとnavigator.geolocationは確かにある。

調べてみると、Androidの設定によっては位置情報を取得できないみたい。
「設定」→「位置情報とセキュリティの設定」の中の「無線ネットワークを使用」と「GPS機能を使用」の両方にチェックを入れたら反応するようになった。
デフォルトで反応しないとなると、位置情報を使ったサービスを使わせるための引きこみが必要になるなー

※試したのはXPERIA SO-01B(Android 2.3)ってやつ。他人のもの(2人にお願いした)だったので、詳細はわからないけど、2人ともGPS絡みの設定はやったことないとのことなので、工場出荷状態だとGPSは反応しないみたい

[JavaScript] HTML5のカスタム属性を取得する

HTML5から属性を拡張できるようになったみたい。
具体的には
<li data-type="loop-article">
とか
<input data-next-id="100">
とかいう風に、こちらで持たせたい属性を追加できる。
これはすごいありがたい

で、JavaScripでの取得方法。

element.getAttribute("属性の名前");

いたって普通。