Javascript

[js] Closure Tools用コンパイルツール plovr について

2012/10/02 Javascript

plovrはClosure Toolsに依存するJSとClosureTemplateのSoyファイルのローカルコンパイルデーモン。

普通にClosure LibraryやClosure Templateを使う時は 作成→コンパイル→コンパイル後のソースで動作確認 という手順になるが、
plovrを使うと、作成→コンパイル前後のソースで動作確認→コンパイル という手順に変わる。

作りながらコンパイル後の動作確認ができる。というのが主たる恩恵だが、それだけじゃなく、
必要になった時だけJSファイルを読み込めば良いように、JSファイルをメインとモジュールに分割して作りたい場合にも使えるツールです。

(さらに…)

[js] WebStorageのサポートチェック

2011/12/28 Javascript No comments

LocalStorage や SessionStorageが使えるかどうか確認する時の条件について。

未サポート機種であればwindowにlocalStorageやsessionStorageというプロパティがないので
if(window.localStorage)みたいな条件だけでもチェック出来る。

しかしWebViewでも表示する場合、ネイティブ側で使用許可をしていないと
「サポートはしているんだけど使えない」という状況になってsetItem等を使った場合にQUOTA_EXCEEDED_ERRとなる。

WebViewで許可されていない場合はnullを返すので、その条件も含めつつ
setItemで適当な文字列を書きこんでgetItemした時に同じ文字列だったら
ストレージが使えると判断するのが確実みたいでした。

var hasLocalStorage = (function(){
	if(('localStorage' in window) && window['localStorage'] !== null){
		try {
			localStorage.setItem('test', 'test');
			var c = localStorage.getItem('test');
			localStorage.removeItem('test');
			return (c === 'test');
		} catch(e) {
			return false;
		}
	}else{
		return false;
	}
})();

書きこみの前に都度チェックを入れる場合は、setItemの前にremoveItemを挟んでおくと
連続書きこみのエラーが回避出来ます

[js] 画像をDataURLに変換するツール

2011/12/19 Javascript, MooTools No comments ,

中身はDrag&Drop + File API なので何番煎じなんだか分からないけれども…

ブックマークするならこちら

できること

  • 画像ファイルをドラッグ&ドロップで変換実行
  • 変換1回あたりの枚数制限なし(PCスペック依存)
  • imgタグ作成
  • 50%縮小オプション(小数点以下切り捨て)

複数の画像を一括でDataURLに変換するのと、
画像タグを生成してくれるものが無かったので自分で作った。
スタイリングはBootstrapです。

MooToolsで未定義の新しいイベントを使う時には
Element.NativeEventsで設定するとaddEventとかで使えるようになります。

Element.NativeEvents['drop'] = 2;
Element.NativeEvents['dragover'] = 2;
Element.NativeEvents['dragleave'] = 2;

[js] iScroll4でform要素が動作しなくなる問題

2011/10/17 Javascript No comments ,

テキストボックスとかセレクトメニューとかをタップしても動かなくなる症状が出る事があります。
その解決方法についてのメモです。

デモより抜粋

form要素があるiScrollに下記オプションを設定すれば動くようになります。

var myScroll = new iScroll('wrapper',{
	onBeforeScrollStart: function (e) {
		var target = e.target;
		while (target.nodeType != 1) target = target.parentNode;
						
		if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA')
			e.preventDefault();
		}
	}
});

[js,iPhone,Android] コンテンツがwindow.innerHeightより小さい時にもアドレスバーを隠したい

2011/10/05 Javascript No comments , ,

スマートフォンのブラウザアプリで画面の高さにきっちり収まる仕様で作っていると
高さが足りないのでwindow.scrollToしてもアドレスバーが隠せない。
でも隠した方が表示領域が増えるので何とかしたい。
単純に考えればアドレスバー分bodyの高さを増やせばいい、ってことなんですが…

(さらに…)