Javascript

[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の高さを増やせばいい、ってことなんですが…

(さらに…)

[JavaScript] 非初心者向け入門記事まとめ

2011/02/03 Javascript No comments

経験者でも入門したい時がある。

基礎

JavaScript基礎文法最速マスター

Ajax時代のJavaScriptプログラミング再入門

JavaScript再入門

アマグラマーのすすめ

プログラマのためのJavaScript

これでできる! クロスブラウザJavaScript入門

[JavaScript] 猿でもわかるクロージャ超入門

JavaScript – MDN Doc Center
eval

Google JavaScript Style Guide 和訳

Building iPhone Apps with HTML, CSS, and JavaScript

Eloquent JavaScript

HTML5 API

Using web workers

サーバー不要で保存できる「Web Storage」の使い方

HTML5サンプル集

まだまだ間に合うCanvasでアニメーション入門(まとめと実践)

ネイティブのドラッグ & ドロップ

Using files from web applications

古籏一浩のJavaScriptラボ

OOP

Prototype.js を使った JavaScript OOP 講座
JavaScript OOP におけるクラス定義方法

ゲームプログラミング

An Introduction to Game Programming with JavaScript

Simple Game Programming In JavaScript

Game Development with JavaScript and the Canvas element

JavaScriptゲームプログラミング

ゼロから始める「ゲームの作り方」入門 by BFF

grantgalitz/GameBoy-Online – GitHub
JavaScriptのゲームボーイエミュ

いろいろ

jsのオレオレ演算子

How to Crash Internet Explorer IE6, IE7, IE8, IE9

document.write()の実行タイミングをずらす方法

HTML5@iPhoneゲーム開発

サーバー側コーディング不要のGoogle App Engine開発環境「jsonengine」

Androidで動く HTMLとJavaScriptで作る電子書籍アプリ

難読化JavaScriptで利用可能なテクニック

JavaScriptからメモリ情報を取得する方法

WebSocket, Socket.IO, Comet

WebSocket and Socket.IO

Socket.IO

Jettyで始めるWebSocket超入門

サーバを作りながら学ぶWebSocketプロトコル

Comet Programming: Using Ajax to Simulate Server Push

Comet—プッシュ型のWebアプリケーションを作る

CometとAjaxを利用したチャットサーバの実装

サーバサイドJavaScript

node.js (ja)

node.jsとMySQLで割と普通のデータベースウェブアプリを作ってみるチュートリアル
node.jsとjQueryでスクレイピングするウェブアプリの作り方

Learning Server-Side JavaScript with Node.js

マニアックな金融系サイトをnode.jsとMongoDBで実装してみた(概要編)