localStorageでIE8がクラッシュする件 続き

category-icon

 こんばんは。前回の書き庫Link で、localStorageに空の値を入れるとIE8がクラッシュすると書きました。なので、空の値が入らないようなチェックを入れれば良いのですが、それだけだとナンなので、症状をもう少し追ってみました。

 もう一度、(IE8が)クラッシュするコードを書いておきます。
function addItem(){
 var key = document.getElementById("key").value;
 var value = document.getElementById("value").value;
 window.localStorage[key] = value; // valueが空白だとクラッシュ!
}
 以下のように、直接空の値を入れる分には大丈夫でした。
function addItem(){
 var key = document.getElementById("key").value;
 var value = document.getElementById("value").value; // これは使用しない
 window.localStorage[key] = ""; // 直接、空の値を入れる → これは大丈夫。
}

 ほうほう。で、クラッシュするデモページのHTMLソースをよく見てみると、input[type=text]でvalueの値を指定していないですね。もしかしてこのせいかなぁ、と

<input type="text" id="value" value="" />

value=""を追加しましたが、やっぱりクラッシュします。input[type=text]の値がないときでも、 document.getElementById("value").value はちゃんと文字列として解釈されます(typeof value == "string")。デモページは、input[type=text]のvalue値を取得していますが、これはTEXTAREA要素であっても、やはり内容が空っぽの場合、IE8ではクラッシュを引き起こしました。

 何でですかねぇ。試しに、強引に文字列ではないオブジェクトを入れてもクラッシュしません

window.localStorage[key] = document.getElementById("value"); // これは [object] という文字列に変換される

 確かに、文字列のstringだとブラウザが解釈しているのに、それが空っぽだとクラッシュするわけです。じゃ、以下はどうだろうか。

var empty = ""; // 空っぽの変数を用意する。
window.localStorage[key] = empty; // これはセーフ。クラッシュしない。

さすがにこれはオッケーです。じゃ以下はどうだろうか?

 var val = document.getElementById("val").value; // これが空っぽとする
 var empty = "";              // val もempty も空っぽの場合
 alert(empty === val); // 厳密等価演算子は true を返す
 window.localStorage[key] = val; // なのに、val だとクラッシュ!

 とりあえず string と認識しているはずなのに、代入する段階以降で、別のクラッシュを引き起こす「何か」と解釈されるらしい。というわけで、とりあえず以下のようにすれば、IE8でのクラッシュを回避できることが分かった。でも、ナンだかすっきりしないですね:(

function addItem(){
 var _key = document.getElementById("key").value;
 var _val = document.getElementById("val").value;
 window.localStorage[_key] = new String(_val); // new String()で明示してあげる
 alert("localStorage."+_key+" の値は「"+localStorage[_key]+"」です。");
}

new String()でちゃんと文字列オブジェクトとして再評価してあげると良いらしい。というわけで、IE8でもクラッシュしないlocalStorageのデモページをリンクしておきます。

 →http://p2b.jp/demo/localStorage2.htmlLink

 ちなみに、上のコードでalert(typeof new String(_val)) は何となるでしょうか? これは、 もはやstring ではなくobjectとなります。文字列オブジェクトです。

 

— posted by martin at 06:46 am   commentComment [0]  pingTrackBack [0]

localStorageで空の値を入れるとIE8がクラッシュする件

category-icon

 こんにちは。そろそろppBlogにもlocalStorageGに対応したスクリプトを組み込もうかと思っていますが、IE8で空(から)の値を入れるとブラウザがクラッシュして終了する現象に遭いました。MacBook Pro上のVMware Fusionに入れたWindows7 RC版IE8で発生します。正規版だとOKなのかなぁ。

 簡単なデモを用意しました(IE8ならクラッシュしても良い状態でアクセス)。→http://p2b.jp/demo/localStorage.html

 Firefox3.5では値が空でもエラーも何も起きませんが、IE8では即座にクラッシュです。そのスクリーンショットをば。適当なキーを設定して(例えば「foo」)、値を何も設定せずに「追加」ボタンを押すと発生。

IE8-crashed
クラッシュしても自動的に復元されますが・・・。

上記ページのスクリプトはごくシンプルなもの。

if(typeof localStorage != "object"){
 if(typeof globalStorage == "object"){ // Firefox2 possible
  localStorage = globalStorage[location.hostname];
 } else alert("お使いのブラウザはこのスクリプトに対応していません。");
}

function addItem(){
 var key = document.getElementById("key").value;
 var value = document.getElementById("value").value;
 window.localStorage[key] = value;
}

 空の値かどうかチェックすれば済む話ですが。

関連エントリー(解決編?)

  ■http://p2b.jp/200912-localStorage-crashes-IE8-with-empty-value-part2

 


— posted by martin at 09:36 pm   commentComment [5]  pingTrackBack [1]

Flexを用いた複数ファイルアップロード

category-icon

 こんばんは、martinです。前回のエントリーで述べていたように、次期バージョン(v1.9.0)では、画像ファイルのアップロードの際に、複数の画像をまとめてアップロードできる仕組みを提供予定です。

 現状では、複数の画像を一度にアップロードするには、FlashかJavaを使うしかありません。JavaもFlashも素人ですが、とっつきやすいのはFlashですし、ファイルアップロードに関しては、色んなサイトでソースコード付きのFlash/Flexのデモサイトがあったので、Flexを用いたインターフェイスを作ってみました。

実際に試すことが出来るデモサイトLink

 実際には、Coding CowboysLink というサイトにあったプログラムをベースに、好みのインターフェイスになるよういじっただけです。

uploadInterface
改良したインターフェイス。日本語化したりとか。

 ローカルのフォルダからは基本的に任意のファイルを選べるのですが、画像ファイル(*.jpg, *.png, *.gif)のみに絞っています。また、Flexの練習もかねて、デモページのFlashではアップロードした画像を見ることが出来るように、右下に画像ギャラリーへのリンクボタンを付けてます。

画像ギャラリーへのリンクLink

 ちなみに、このリンク先の画像ギャラリーは、Flashとは関係なしに、単にPHPでページを生成しています。CSSのみを用いたシンプルなものです。IE向けのハックは使ってませんが、IE6でもそう表示が崩れることはないかなと期待。アップロードされた画像ファイルの内、最新のJPEG画像を5枚表示するようにしてます。

galleryShot
CSSのみでのフォトギャラリー。IE6でも何とか動くかな。

 今後、いじるとすれば、ファイルサイズ上限を指定したりとかですかね。とりあえず。

     


— posted by martin at 04:10 am   commentComment [8]  pingTrackBack [0]

差分その2

category-icon

 こんばんは。昨日に引き続き。タグ関連の部分は、色々とアルゴリズムを変えていたんですが、まだ挙動がおかしいようで、それのアップデートです。utils_admin.phpの101行目付近からをいじっています。

 ついでに、今後のロードマップをメモしておきます。

v1.9.0
◆ 複数の(画像)ファイルを1回でアップロード 。Firefox3.6では、ブラウザでこれに対応するLink ようですが、現状は、FLASHに頼ることになるかと思います。
◆ バージョンチェック機能の強化。URLのパラメータで正しいバージョンを出すような仕組み。
v1.9.x
HTML5対応版。HTML5Gでは、HTMLの記述が現状よりシンプルに分かりやすくなると思います。

 

添付ファイル: utils_admin.phpattachedIcon 

 

— posted by martin at 01:39 am   commentComment [0]  pingTrackBack [0]

差分です。

category-icon

 こんばんは、martinです。何となくアップデート後はいつものことのような気がしますが…。

 タグの文字列に、半角スラッシュを入れていると、タグの検索でかかってきません。それの対策もしていたつもりでしたが、詰めが甘いですね。。これはmodules/tags.inc.phpの16行目を以下のようにします。

 $hit = preg_grep('{'.preg_quote($tag).'¥|}', $TAGS_LIST);

デリミッターに半角スラッシュを使っていたのが駄目でした。いつもは{}を使うんですけどね。。

 あと、やはりタグ周りですが、タグに「ソ」などの文字を使っていると、タグが文字化けするという報告がありました。まるでSHIFT_JISみたいですね。これはutils_admin.phpの39行目を修正します。全角空白を省きました。

  $tags = p_('tags') ? explode(',', preg_replace(array('{([^&]),[¥s]+}', '{,[¥s]*$}'), array('$1,', ''), p_('tags'))) : array();
ここでの正規表現で、全角空白を入れていたせいで、誤変換をしてしまったようです。UTF-8だから大丈夫かと思いましたが、preg_replace自体がマルチバイトに対応しているわけではないですからね。u修飾子でも入れればよいかもしれませんが、まぁいいか。

 ついでですが、IE6/7のサポートは基本的にやめようかと思っていたのですが(特に管理者用として)、まだ使われているようですし、折角のタグポップアップがIE6で使えないのは残念なきもするので、対応したwrite.inc.phpedit.inc.phpも添付しておきます。

添付ファイル: tags.inc.phpattachedIcon  write.inc.phpattachedIcon  edit.inc.phpattachedIcon  utils_admin.phpattachedIcon 

 


— posted by martin at 01:52 am   commentComment [7]  pingTrackBack [0]

T: Y: ALL: Online:
Created in 0.0066 sec.
prev
2009.12
next
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31