2014-02-23

メモ　.htsccessのRewriteでメンテ画面表示

ErrorDocument 503 任意のURL(http://~ もしくは /~ )

RewriteEngine On
RewriteCond %{REQUEST_URI} !任意の文字列
RewriteCond %{REMOTE_ADDR} !^000\.000\.000\.000$
RewriteRule ^.*$ - [R=503,L]

・リダイレクト後のurl（に含まれる文字列）で判定してループを防ぐ（ロリポで試してるけどこの記述がない場合503の素のページが表示された）
・自分のipのみを許可
・503のとび先をhttp://〜にしてるとリダイレクト
・とび先はこの記述の.htaccessがあるのと別のディレクトリにしないと画像とか表示されないので注意

2014-02-14

audioタグ覚書

想像をはるかに下回る

http://www.ibm.com/developerworks/jp/web/library/wa-ioshtml5/

・対応状況が異なるために複数ファイルが必要
・ループ再生がスムーズにつながらず、1回再生し終わった時点で音が途切れる

　iOSでの問題点
　・プリロードの術がない（初回読み込み時に必ず遅延が発生）
　・ユーザーのタッチイベント以外のタイミングで音を鳴らすことはできない

　某Android機種での問題点
　・タッチイベントにバインドしたaudio.play()が、2度目以降のタッチできかなかった

もうWindows版safariの大々的な配布は終わってるようなので切り捨てていい部分かもしれないけど、
QuickTimeインストールしてない場合にWindows版safariはaudioタグ認識しない
audioのメソッド実行する部分で 'undefined' is not a function　ていわれてた

PCのみならまよわずflash
モバイルはつぎのようなことにちゅうい

プレイヤー設置してユーザーの任意で音を再生、程度の使い方なら実用的。
プレイヤー設置しない場合でも、クリックしたときに音を出す、程度ならつかえる。
ただゲーム制作などでリアルタイムに好きなタイミングで音を出すということがかなり困難。

プリロードなどの問題点については
オーディオスプライトという手法が有効らしいけど、回りくどい

クリックをトリガーにしてsetTimeoutで指定秒数ずらして再生、なら、かろうじて可能。
（でも普通に書いてたらできない、setTimeout直前にload()必要）

ちゃんと調べてないけど、ひとつのクリックハンドラの中でふたつ音が出せない？
audioひとつ再生につき、ひとつのアクションが必要っぽい。

2014-01-30

for inループの挙動

javascript

IE8なんなの

var arr =["a","b","c"]
for(var i in arr){
  alert(i);
}

// 0
// 1
// 2
// indexOf

4回まわってる上に
最後のやつなんなの
140322追記：
IndexOfの正体はArrayのprototypeに追加したIndexOfメソッドだったことが判明
for inループはprototypeに追加したメソッドもプロパティとして数えられるのか…

別途Array.IndexOfが存在しないブラウザのみArray.IndexOfを追加する記述をしていた。
IE8でだけIndexOfが出力されたのはIE8にもともとIndexOfメソッドがなかったからだ。

文句言ってごめんIE8。でもArray.IndexOfメソッドないのがいかんのだよ。

2014-01-29

（反省）event.targetのさすものを忘れるな

javascript

初歩的過ぎるミス
イベントオブジェクトのtargetプロパティで取れるのはイベントが発生したオブジェクトだ
必ずしもイベントリスナーを登録したオブジェクトとは限らない
AS3いじりたての頃に散々やったはずなんだけど

<ul>
<li id="btn"><div>ボタン</div></li>
</ul>

$("#btn").click( function(e){ 
   alert( $(e.target).attr("id")); // undefined
 }

マウスイベント受け取ったのがdivの場合、divのidをとろうとしてundefinedに

$("#btn").click( function(e){ 
    alert($(e.target).closest("li").attr("id")); // btn
 }

こっちは確実にliのidがとれる

AS3ではボタンにしたインスタンスのmouseChildren=falseにして、
ボタンの子がマウスイベントを受け取ること自体を防止するのが通例になってたから...
すっかり忘れてた。

2014-01-16

（あまり役立たない）IE8で擬似要素の背景を動的に切り替えられない場合

html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<title></title>
<style>
#box{width:200px;height:200px;background:#eee;}
#box:before{content:"before box";color:#fff;display:block;background:#aaa;width:100px;height:100px;}
#box.change:before{background:#ccc}
</style>
<script src="js/jquery.js"></script>
<script>
$(function(){
	$("#chengeBeforeBox").click(function(){
		$("#box").toggleClass("change");
	});
})
</script>
<!---->
</head>
<body>
<div id="box">box</div><a id="chengeBeforeBox" href="#">chengeBeforeBox</a>
</body>
</html>