ホーム > タグ > HTML5API

HTML5API

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

2011-12-28 (水)
Javascript
HTML5API

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

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

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

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

PLAIN TEXT

JavaScript:

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を挟んでおくと
連続書きこみのエラーが回避出来ます

Comments: 0
Trackbacks: 0

[HTML5] Drag and Drop API のこと

2010-10-04 (月)
Javascript
HTML5API

HTML5のドラッグ＆ドロップはこれ書いてる時点でFirefox、Chrome、IEが対応。
しかしIEの場合はFileReaderとデータURI未対応だから全く面白みがない。

Drag出来るといってもMooToolsやjQueryなどで実装するようなぬるぬる動かすようなものではなく、
html5.jpのチェックページにあるツールのように、右から左へ受け流すようなことしか出来ない。
jQueryとの比較がこのサイトで見れる。

故にshapeshed.comのデモみたく、ゴミ箱にドキュメントを捨てたり、カートに商品を入れたりする用途には向いているが
自由奔放にドラッグさせるとなるとFrameworkの力を借りるより他ない。

サンプルでよく見るのはコンピューターにあるファイルをブラウザウィンドウにドラッグして、
そのファイルの中身をFileAPIで読み込んでこねこねするっていうやつだと思う。
以下に簡単なサンプルを示す。

Comments: 0
Trackbacks: 0

[html5] canvasでテキストのコピペ防止

2010-09-01 (水)
Javascript
canvas | HTML5API

Web2.0的にHTMLソースを隠す方法を修正しているときに思ったんだけど、
単純に小説とかのコピーブロックならCanvas使う手もあるよね。ってことでデモ書いてみた。

Canvas novel - jsdo.it - share JavaScript, HTML5 and CSS

Canvasのテキスト関係は図形とかの描画に比べると貧弱貧弱ゥ！な感じだから自分で処理書かないと何も出来ないのだが、Flash化や画像化に比べると格段に楽チンだと思う。
DOMや接続をモニタリングする解析ツールには弱いものの、素の状態でコピペが出来ないというのは強い。

考えられるデメリットは…

ガラケーで見れない
IEが9からしか対応してない（ライブラリとかで対応させる手間がある）
スクロールとかページングとかの処理を実装するのが面倒

jsdo.itにうｐしたデモのロジック解説

小説テキストをXHRで読み込む
ページ分割フラグ（--\d--）でsplitして配列作成。[0]のタイトルは除く
現在のページ番号と同じインデックスにある配列の中身をループ処理。
１文字ずつくっつけてmeasureTextでwidthを計測し、設定の横幅を超えたら次の行に移る。
空行の場合は行番号を繰り上げる。
次の行に移る前に文字カウント（i）を-1する
ページ移動用の矢印出力

ページ移動用の矢印は矢印をクリックしてるかどうかの判定が面倒だから、普通に画像とかで作った方が楽かも。
やろうと思えばiPhoneのi文庫みたいなUIも出来そうな感じ。
縦書きはmeasureTextでheightが取得できないからフォントサイズから算出するしかないのだが、
句読点がarcとかで描けるっていう利点があるかな。

Comments: 0
Trackbacks: 0

[html5] canvasでゲーム作成 - Typing Blood

2010-08-29 (日)
Javascript
canvas | HTML5 | HTML5API

CanvasのcreateLinearGradient、fillText、fillRect、context.shadow等のメソッド・プロパティに
jsdo.itで良く見るParticleテクニックを足してアニメーションで割り、寝不足の気だるさを小さじ１杯程度混ぜて作ったタイピングゲームです。
文字は今の所アルファベット＋数字でテンキーは使えません。
ダウンロードしてローカル起動する方がサクサク動くと思う。

Typing Blood - jsdo.it - share JavaScript, HTML5 and CSS

コンセプト
閻魔大王はさらっとした血の池地獄が好きなので、落ちてくる骨がそのまま沈むのを防止しよう。

ルール