Ajaxで今よみがえる(^^;;-->[クロスブラウザ技術 ]DHTMLサンプル集
-- リスト --
【カテゴリー】 ActionScript ( 6 ) AIR ( 4 ) AjaSQL ( 10 ) Ajax ( 675 ) Arax ( 1 ) canvas ( 15 ) CSS ( 24 ) ( 9 ) DLNA ( 1 ) Dojo ( 25 ) DOM ( 51 ) ES4 ( 4 ) Ext JS ( 5 ) 反重力物質 ( 1 ) ffAdd-on ( 1 ) Flash ( 48 ) Flash Remoting ( 11 ) FTP ( 2 ) GAF ( 9 ) Google Maps ( 124 ) Google ガジェット ( 1 ) GPS ( 44 ) HTML ( 11 ) HTTPヘッダサンプル ( 11 ) IME ( 2 ) Internet ( 2 ) iPhone ( 50 ) IPv6 ( 1 ) 漫画 ( 4 ) Java ( 49 ) JavaScript ( 344 ) jKamo ( 8 ) jQchart ( 4 ) jQuery ( 207 ) jquery-ref ( 1 ) jsGadget ( 19 ) jslb_ ( 3 ) jslb_ajax ( 9 ) JSON ( 49 ) JSR223 ( 7 ) kjscmd ( 1 ) KNOPPIX ( 1 ) Linux ( 18 ) Mac ( 9 ) Memo ( 3 ) Microformats ( 2 ) Mini AJAX ( 2 ) MochiKit ( 2 ) mootools ( 10 ) Movable Type ( 58 ) MySQL ( 10 ) NewGameWeb ( 2 ) Nucleus ( 8 ) OpenAJAX ( 3 ) OpenDocument ( 1 ) OS ( 10 ) P2P ( 2 ) Perl ( 8 ) PHP ( 38 ) PostGIS ( 1 ) PostgreSQL ( 4 ) prototype.js ( 28 ) ROBOT ( 1 ) RSSリーダー ( 15 ) Ruby on Rails ( 7 ) SPDY ( 1 ) Spry ( 6 ) SQLite ( 17 ) SQLiteWorker ( 2 ) ssh ( 1 ) SSI ( 2 ) SVG ( 23 ) TRON ( 1 ) Ubiquity ( 7 ) Video ( 1 ) VML ( 1 ) Web Slice ( 1 ) Web Sockets ( 25 ) Webサービス ( 107 ) widget ( 6 ) Wii ( 1 ) Wiki ( 1 ) Win ( 6 ) WSH ( 1 ) X01HT ( 30 ) XML ( 32 ) XOOPS ( 1 ) XQuery ( 2 ) XUL ( 4 ) Yahoo! UI ( 74 ) 日付入力用カレンダー ( 1 ) 『Ajax実践テクニック』 ( 1 ) 『入門 Ajax』 ( 42 ) WinTips ( 2 ) こりゃすごい ( 7 ) チューニング ( 30 ) ダイナミックロード関数 ( 7 ) リファレンス ( 20 ) ライブラリ ( 210 ) レーダー雨量表示 ( 1 ) ハード ( 35 ) ペンギン ( 2 ) ブラウザ ( 109 ) ブログでBBS ( 1 ) アクセスグラフ ( 3 ) イベント ( 2 ) カレンダーによる日付入力スクリプト ( 4 ) クロスブラウザ ( 14 ) クロスブラウザ関数 ( 8 ) スポーツ ( 1 ) スマートフォン ( 8 ) セキュリティ ( 155 ) ソフトイーサ ( 1 ) マッシュアップ ( 23 ) 暗号 ( 4 ) 映画 ( 57 ) 河川の水位グラフ ( 3 ) 回線 ( 2 ) 開発ツール ( 38 ) 牛久大仏 ( 19 ) 携帯 ( 150 ) 言語 ( 19 ) 故障 ( 9 ) 高橋家の謎 ( 3 ) 広告とか ( 1 ) 洪水警報システム ( 2 ) 今日のひと言 ( 10 ) 仕様 ( 113 ) 雑談 ( 357 ) 実装 ( 2 ) 書籍 ( 20 ) 親子ウインドウ有無の確認関数 ( 3 ) 新海誠 ( 3 )
Web Sockets Domo

* サーバー側は、小松氏のこれをbloga.jp:80へ置いてあります。
* クライアント側はWS処理をjQueryプラグイン化してみました。これです。
* ちなみに、このDemoサンプルは、下記5行でローカルでも別ドメインでもどこにでも設置出来ます。
<script src="http://bloga.jp/ws/jq/js/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="http://bloga.jp/ws/jq/js/jquery.ws-0.3-noenc-pre.js" type="text/javascript" charset="utf-8"></script> <script src="http://bloga.jp/ws/jq/conn/wschatdemo0.3.js" type="text/javascript"></script> <script>/*サポートしてない時のalertメッセージを抑止*/$.ws.wsSetup({nonosupportmsg:true});</script> <div id="wsdemos"></div>

【info】いつもいろいろなテストなどをページ内のあちこちでやっているので、重かったり、壊れていたりするf^^;ことも多いです。実験用ですので、カオス(混沌)をあえて意図したりもしますので、標準やValidとは無縁だったりしますが、何卒、ご了承ください ( _ _ b

【info】 最近はTwitterでぶつぶつ言ってることが多いです。
>http://twitter.com/toshirot

【info】 Chrome Extension [WebSocket Chat] もちろんChrome専用です
https://chrome.google.com/extensions/detail/fnoegeafibddabfhmpmhniphlcojkjli

2005年12月11日

【Ajax】Operaの文字化け

Ajax , 『入門 Ajax』 , ブラウザ ブックマークに追加する ブックマーク-- Hatena  / Livedoor track feed


Ajax-MLで川俣さんのOperaと文字化けについての調査が流れていたので、検証してみました。

川俣さんの調査::まさか解決策不在なのか? OperaのXMLHttpRequestオブジェクトのresponseTextが文字化けする問題の更なる深み
http://mag.autumn.org/Content.modf?id=20051210160430

テスト1
リクエストを出す側とレスポンスデータのエンコードが違う場合
http://jsgt.org/ajax/ref/charset_test/responsetext_kawatest/htaddtype_txt-utf8_htm-sjis/kawa_test1.htm
.htaccessを、
AddType text/plain;charset=UTF-8 .txt
AddType text/html;charset=Shift_JIS .htm
読み込むtest_1_u8.txtを UTF-8
テストページを Shift_JIS

【結果】
「自動選択」OK
「Shift_JIS」文字化け

テスト2
リクエストを出す側とレスポンスデータのエンコードが同じShift_JISの場合
http://jsgt.org/ajax/ref/charset_test/responsetext_kawatest/htaddtype_txt-sjis_htm-sjis/kawa_test1.htm
.htaccessを、
AddType text/plain;charset=Shift_JIS .txt
AddType text/html;charset=Shift_JIS .htm
test_1_sjis.txtをShift_JIS
このファイルをShift_JIS

【結果】
「自動選択」OK
「Shift_JIS」OK

テスト3
リクエストを出す側とレスポンスデータのエンコードが同じUTF-8の場合
http://jsgt.org/ajax/ref/charset_test/responsetext_kawatest/htaddtype_txt-utf8_htm-utf-8/kawa_test1.htm
.htaccessを、
AddType text/plain;charset=UTF-8 .txt
AddType text/html;charset=UTF-8 .htm
test_1_u8.txtをUTF-8
このファイルをUTF-8

【結果】
「自動選択」OK
「UTF-8」OK



ユーザーの恣意的メニュー設定に依存する。というのは、なかなかデリケートです(^^;。リクエストするページとレスポンスされるデータのエンコードが違う場合は、Operaの「エンコード自動選択」は、サーバーを尊重しているようですが、もしかすると「Shift_JIS」などでは、サーバーのタイプ指定を無視してレスポンスされるデータも同じエンコードと推測してしまっているのでしょうか?、、、。

リクエストを出す側とレスポンスデータのエンコードが同じ場合は大丈夫なように見えますが、それはあくまでOperaの話ですので、更に、Safariなどでは、UTF-8である必要、および、エンコード処理などなんらかの回避などが必要です。

でも、もし、サーバーのContent-Type指定を無視してまで推測しているのだとすると、
クライアントの仕様としてどうなのでしょう?違う仕組みなのかなぁ、、、

( ブラウザがContent-Typeを推測してもよいケースは、わたしは、
サーバーからのContent-Type ヘッダが無い場合だけかと思っていました。)

RFC2616 http://www.studyinghttp.net/cgi-bin/rfc.cgi?2616#Sec7.2.1
>メディアタイプが Content-Type ヘッダによって与えられない場合に限り、
>受信者はリソースの内容の検査や、あるいはリソースを識別するために使用
>されているURI の名前拡張子を調べる事によってメディアタイプを推測して
>みてもよい。
...ただ、この辺は、あまり自信がありませんので、このあたりの事情に詳しい方がいらっしゃいましたら、ぜひ教えてください 。


ちなみに、『入門Ajax』のサンプルでは、リクエストを出す側とレスポンスデータをUTF-8にしたうえで、一応、Safari、Konquerorなどの対策として強制的なエンコード(ECMAScript15.1.3 URI 処理関数仕様のencodeURI/encodeURIComponent相当)を行う方法を利用していますので、この文字化けの問題は発生しない、、かな(^^?、と思います。

つまり、リクエストを出す側の文字コードが何(Shift_JISやEUC)であっても、JavaScriptのdecodeURI/decodeURIComponentが、レスポンスをUTF-8以外と考える余地はありませんので、たとえば、SCRIPTタグでcharset="utf-8"と指定したのと同じ効果がある、はず、、、(^^;かなと。

ということで、ついでにテストしてみます。
『入門Ajax』のchapter04/04-02-01より

テストおまけ1
リクエストを出す側とレスポンスデータのエンコードが同じUTF-8の場合
http://jsgt.org/ajax/newmon/samples/chapter04/04-02-01/sample.htm

ページは、UTF-8
受け取るデータも、UTF-8でURIエンコード済み

これは、文字化けするはずがありません。

【結果】
「自動選択」OK
「UTF-8」OK

これの、リクエスト側ページをShift_JISに変えて見ます。どうでしょう?

テストおまけ2
リクエストを出す側とレスポンスデータのエンコードが違う場合
http://jsgt.org/ajax/newmon/samples/chapter04/04-02-01/sample_test_sjis.htm

ページは、Shift_JIS
受け取るデータは、UTF-8でURIエンコード済み

【結果】
「自動選択」OK
「UTF-8」OK

大丈夫でした(^^)v

#URIエンコードでデータ量が増えることに抵抗がある場合は、Opera、Sfari、Konquerorだけに適用することで、残りのシェアの大半を占めるIEとFirefoxのパフォーマンスを犠牲にしない方法も取れます。
#p.s.解決方法はもちろんこれだけではないと思います。<gzip圧縮してしまう手もあります(^^;



  

All About/JavaScript

All About のJavaScript関連記事を書いています。参考にしていただければ幸いです。