WebTecNote

Aptana Studio 3のこと（その２：使い方等）　

2012-01-10 (火)
Memo
Aptana

Aptana3のβが出た頃に前のまとめを書いたんだけど、
βが取れた後もWebStormなどの波に揉まれつつ相変わらずAptanaを使っているので
前の記事に載せてない機能や使い方などについてまとめる事にします。

Comments: 0
Trackbacks: 0

[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

[js,css] テンキーがついているスマートフォンの罠

2011-12-27 (火)
Memo
Android

Androidを爆発し隊・投げ捨て隊に所属するみなさん、
ますますスマホ戦線が活発化する中いかがお過ごしでしょうか。

スマホといえばiPhoneがその美しいデザインでこれぞスマホ！という概念を決定的に印象づけた
３〜４インチ前後のタッチパネルのものが主流ですが、
テンキーとか十字キーとかがついている狂った機種をお忘れじゃありませんか？

007sh

狂気の007SH
ぱっと見ガラケーなのに中身はAndroid。
画面はタッチパネル対応だから触ればタッチイベントが発生する。
007SHはソフトバンクから出てるものですが、シャープはauやdocomoにもテンキー付きAQUOS PHONEを出してます。なんてことしやがる。
私はこのデバイスに触れて初めてスマホをへし折りたいと思いました。

幸い今の会社はテスト端末が豊富なのでスマケー()も実機で見る事が出来たんですが、
手元に無ければこんな機種絶対頭から抜け落ちるだろうと思うので
この機種に関する注意事項をちょっと書いておこうと思います。

Comments: 0
Trackbacks: 0

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

2011-12-19 (月)
Javascript | MooTools
Drag&Drop | File API

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

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

できること

画像ファイルをドラッグ＆ドロップで変換実行
変換１回あたりの枚数制限なし（ＰＣスペック依存）
imgタグ作成
５０%縮小オプション（小数点以下切り捨て）

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

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

PLAIN TEXT

JavaScript:

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

Comments: 0
Trackbacks: 0

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

2011-10-17 (月)
Javascript
iScroll | Mobile

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

デモより抜粋

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

PLAIN TEXT

JavaScript:

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();
}
}
});