jQueryのtriggerはcreateEventで代用

jQueryのtriggerを使うと、すでに付与されているイベントを呼び出して実行できて便利なのですが
プラグインが使えないときもあるため、代用方法を紹介します。

jQueryを使えないときは
createEventでイベントを作成し、initEventで初期化し、dispatchEventで付与しすると
イベントを発火させられます。

この方法は
clickなどの基本的なイベントはIE8以上から対応しており
独自に作成したカスタムイベントは、IE9以上からの対応しています。

なお、triggerがIEのバーションに縛られず実行できるのは
ここで紹介するcreateEventを単純に使っているのではなくjQuery内で独自にオブジェクトを組んで作りこんであるためです。
古いブラウザへの対応が必須だったり、急遽サポート範囲が広がったり、納期がいきなりタイトになるなど心配事があるなら
安定性を考慮して、jQueryが使えるよう働きかけるほうが賢明だと個人的には思います…

“jQueryのtriggerはcreateEventで代用” の続きを読む

iOS8でwindow.close()が効かないバグ (8.1.1で修正済)

window.close()が効かないバグは
2014年11月のiOS 8.1.1アップデートで無事に修正されていました。

以下は、~8.1.0 時点の記事です。

iOS 8.0.x 8.1.0 のSafariでは
開いているタブを閉じるwindow.close()が使用できないバグがあります。

調査してみたところ、どうやら
window.close()の使い方がマズイのではなく
iOS8のSafariが現時点でこの機能に対応していない旨のやり取りがされていました。

参考:
javascript – window.close() doesn't work on iOS 8 GM seed – Stack Overflow
(Appleのデベロッパーフォーラムは、アカウントがないと見られないので、とりあえずこちらへリンク)

今できる対応策は
同一ウィンドウ内での遷移で代用できるところは
バグ修正がアップデートされるまで、別窓遷移をやめることくらいでしょうか。

iOS 8.0は、他にも致命的なバグを見つけちゃってるので
2014年10月20日のiOS8.1アップデートで修正されてないか期待していたのですが
残念ながらほとんど直っていませんでした orz
たとえば、テキストボックス関連でこんなバグがあります。

“iOS8でwindow.close()が効かないバグ (8.1.1で修正済)” の続きを読む

プレーンなJavascriptでhtmlタグのDOMを取得

javascriptでhtmlタグのDOMを取得したい場合は、この書式になります。

document.getElementsByTagName('html')[0]

たとえば、
スマホ版Facebookの右上にあるスライドインするメニューや
jQuery mobileのPanelのように
ページ全体が横にずれて隣や背面からメニューが現れる仕掛けを自前でつくるとき
メニューを展開したとき、横にずれたぶんだけページに横スクロールが生じてしまいます。
これを防ぐため
htmlにoverflow:hidden;を設定することがあるのですが
Xperia acro でスクロールできなくなるCSSのように
htmlにoverflow:hidden;を設定できないケースもあります。

そんな時は、このように
ユーザーエージェントでXperia acroを判定し
htmlタグに設定してあるoverflow:hidden;のスタイルをnoneに書き換えます。

if(navigator.userAgent.match(/SO-02C|IS11S/i)) {
	document.getElementsByTagName('html')[0].style.overflow = 'none';
}

javascriptのtransitionEndイベント実行回数

CSSのtransitionアニメーション終了時にjavascriptを実行したいときには
このように、transitionEndイベントを指定します。

2014年6月現在では、
スマートフォンブラウザ向けの webkitTransitionEnd と
PCブラウザ向けの transitionend を設定すれば
IE(transitionに対応した10以降)、Firefox(最新版)、Chrome(最新版)、Opera(最新版)に対応できます。

$(function(){
	var count = 0;
	$('.button').on('webkitTransitionEnd transitionend', function(){
		count ++;
		$('.log').prepend('<p>transitionEnd! '+count+'</p>');
	});
});

“javascriptのtransitionEndイベント実行回数” の続きを読む

スマートフォンで撮影した写真をjavascriptのFile APIでinputへセット

iOS6のSafariから対応の、HTML5のFileReaderをつかって
スマートフォンのカメラを起動し、撮影した画像を
<input type=”file”>へセットしたり
<img>としてプレビューしたりするサンプルを作ってみました。

サンプル

“スマートフォンで撮影した写真をjavascriptのFile APIでinputへセット” の続きを読む

Microsoft Ajax Minifierでjavascriptを圧縮してみた

javascriptのソースコードを圧縮してくれるMicrosoft Ajax Minifierを使ってみました。

インストーラにしたがって進めるだけだったので、わりと簡単でした。

  1. 公式のダウンロードページASP.NET – Download: Microsoft Ajax Minifier 4.0からインストーラのmsiをダウンロード
  2. インストーラを実行、特別な選択肢はないので最後まですすめる
  3. Windowsのスタートメニューから、Microsoft Ajax Minifier 4 を実行するとコマンドプロンプトが起動
  4. コマンドで圧縮対象のjsファイルと出力ファイル名を指定し実行

ポイントになったのはコマンドでのファイル指定のところで
cdコマンドで圧縮したいjsファイルのあるディレクトリまで移動してから
圧縮実行コマンドを実行する流れではエラーが出てしまい小ハマりしました。

“Microsoft Ajax Minifierでjavascriptを圧縮してみた” の続きを読む