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を圧縮してみた”の続きを読む

selectのデザインをCSSとJavascriptでカスタマイズ

jQuery mobile などの大規模なプラグインを導入せずに
オリジナルデザインのセレクトボックスを設置するためのjQuery+CSSのソースをご紹介します。

動作サンプルはこちら。

フォーム要素の初期装飾をリセットできるCSS3のappearanceは、IE8以下でつかうことができませんが
このやり方なら、外形の装飾はIE6から最新のブラウザまで同じようにデザインを変えられます。
ただ、スマートフォン対応をがメインのため、展開したときのoption部分はデフォルトのままです。

“selectのデザインをCSSとJavascriptでカスタマイズ”の続きを読む

データの差分を確認できるjavascriptライブラリMergely

案件によっては、納品時にソースといっしょに仕様書や差分情報も提出することがあります。
ただ、差異があまりに多い場合は、ワードやエクセル、パワーポイントなどで書類を作るのが本当にしんどいしナンセンスすぎる!
技術は進化しているのに、WEB屋さんで一般的に受注できる案件ではtracやsvnを導入できないケースがほんと多いな…
そんなわけで、ブラウザ上でデータの差分を確認できるMergelyで解決できないか導入してみました。

Mergelyはもともとオンラインサービスなのですが、javascriptのオープンソースライブラリ「Mergely Javascript Library」もリリースされています。

納品データとなれば、不特定多数の目に触れないよう慎重に取り扱うため、オンラインサービスでの共有は断念。
今回は、このライブラリをつかってローカル環境で差分を見られるようにするまでのチュートリアルです。

Mergelyライブラリ設置デモページ

“データの差分を確認できるjavascriptライブラリMergely”の続きを読む