PHPのテクメモ

どうも最近はクロスドメインでもjsonを扱えるらしい。なんでもCross-Origin Resource Sharing（CORS）というらしい。

仕事でサーバ処理の担当者から、「jsonの通信先サーバ変えるんで」とか言われて心配した。Access-Control-Allow-Originレスポンスヘッダを返せば大丈夫、との言葉を信じて言われるままにURLを書き換えたのだが・・・結果騙された。IE動かないじゃん。

jQueryでAjax通信しているのだが、これ単発では対応できないことが調べてみて初めてわかった。怒っても始まらないのでもう少しまじめに調べてみた。

最近のモダンブラウザはたいてい大丈夫らしいが、IE8、IE9は実装方法が違うらしいのでNG。IE7以前は非対応。IE10以降で他のブラウザたちと足並みをそろえるらしい。たいていのブラウザはAjaxでCORSする際、XMLHttpRequestを使用するが、IEだけはXDomainRequestってのを使い、かつjQueryはXDomainRequestを使っていないので、必然的にjQuery単体ではCORSなAjax通信ができないということらしい。Firefoxtとかで動いていても、IEでコンソール出力すると「アクセスが拒否されました」とか出力される。

この時点でサーバ担当者に「やっぱ戻したほうが」と相談しようかと思ったけどたまたま外出中だったので、もう少し調べてみた。そしたら、やっぱり世の中には大変良くできた方がいらっしゃって、jQueryのプラグインっぽい形式で、ブラウザによる分岐処理を発見した。

詳しい説明はこちら（CORSによるクロスドメイン通信の傾向と対策）

結果として、見事にIEでも取得することができた。サーバ担当者には追加費用を請求したいくらいだったが、今回は勉強になったのでよしとすることにした。

タイトルは当たり前なことを言っているだけだが、ウェブでも適用できるっていうメモ。

最近はJavaScriptでアプリケーションを作ることが多いのだけれど、データ処理をサーバサイドでせずクライアントサイドで実行させたほうがいい場合もあるよね、と思っている。重い処理をサーバで実行すると仮定して、リクエストが増加するとすぐにサーバの応答速度が劣化しそうだ。例えば、利用者が増えた場合もそうだし、ちょっとした操作でサーバと通信してその都度サーバ側で処理をさせる場合などがある。

これを一切やめて初回アクセス時に、データを全てダウンロードさせJavaScriptでまかなっちゃうほうがサーバへの負荷が少ないなぁ、と思い始めた。しかしその際、一旦データを全てダウンロードさせるわけだから、当然データ量が大きくなってしまう。つまり初回アクセス時の応答速度に難が生じるわけだ。

で、やってみたこと。データはJavaScriptのJSON形式でサーバからブラウザに送出するわけだが、このときJSONデータ（ファイル）をzip圧縮して渡してしまう。JSONデータは単なるテキストデータだから、うまくすれば転送するデータ量が10分の1くらになる。ただし単にzip圧縮して、それをコールしてもブラウザはそのデータを解釈することができないからエラーになっちゃう。そこで.htaccessで一工夫。

AddEncoding x-gzip jgz

zip圧縮したデータ（ファイル）は、とりあえず拡張子jgzとつけておいて、エンコーディング指定をしてやる。たったこれだけで、ブラウザは自分で適切に解凍し、解凍したデータをJSONとして扱ってくれる。すごく便利。

おそらく他にも適用できるんじゃないかと思う。cssとか画像とか。また暇があったら試して見ることにする。