HTML5API

[html5] Android 4.0 で HTML5 Test

2012/03/09 Memo No comments , , , ,

Android 4.0

昨日LABI渋谷のスマホ売り場見てたら
Galaxy Nexusに続きAQUOS Phone 104SHもAndroid4.0だったので、
触りついでにHTML5 Testしてみたんです。
結果の256という点数はHTML5 Testにもう載ってるんですが、
その詳細は見た事なかったので晒しておきます。

(さらに…)

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

[HTML5] Drag and Drop API のこと

2010/10/04 Javascript No comments

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

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

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

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

(さらに…)

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

2010/09/01 Javascript No comments ,

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

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

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

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

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

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

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

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

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

2010/08/29 Javascript No comments , ,

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

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

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

ルール

  • テキストが池に落ちるとミス
  • テキストと違うキーを押すとミス
    (ゲーム中のスペースキーと、ポーズ中のエンターキーはカウントしない)
  • テキストと同じキーを押すとそのテキストはクリア(粉砕)
  • 1文字クリアするごとに池の高さが1つ減る
  • レベルが上がると同時に落ちてくる文字数が増える(レベルと同じ数)

コンボ表示ありますが今の所レベル計算にしか使ってません。
レベルは「Passed + Combo – Miss + Karma /13.5」っていう適当な計算で出してます。
Karmaはレベル計算用の裏カウンターで、文字クリアは+1、落下は-3、タイプミスは-2します。

未実装ネタ

  • 赤い文字は落ちた衝撃で砕ける骨なのでタイプしない。したらミスカウント
  • レベルX以上で大文字と小文字が出現(シフトキー開放)
  • 日本語モード
  • レベルX以上で落下速度UP
  • 文字の奥行きをランダムに変化(遠近感的な意味で)
  • bezierCurveToかquadraticCurveToで血の池の水面を水面っぽくする
  • クリアorミスしたキーの総計表示(Web Storage使えば出来そう)

元々タイピングゲームの作成はmooTypingみたいなのをMediaRSSでやろうとしてたが(JAM用に)
写真投稿サイトをあんまり使った事がない所為で問題作成のイイ手段が思い浮かばなくてネコ図鑑に落ち着いた。
Canvas+JavaScriptはゲーム作成に凄く向いてると思う。

Canvasのアニメーションで最大の謎だったのは異なるスピードのものを同じフレームレート上でぬるぬる動かす方法なんだけど、clockmakerさんやhakimさんのソースを舐めるように視姦プレイしてたら把握できました 😀