PHPのテクメモ

PHPしかやっていなかったときは、極力クッキーを使って値を保存するようなことはしないようにしていた（セッションは使うけど）。クライアントサイドにデータを保存しても改ざんされる前提で使わないといけないからだ。しかし最近はいろいろ使うようにしている。そもそもGETやPOSTでの値引渡しと同じという前提でやれば問題ないわけで。ただ、GETやPOSTと違うのは値をセットする方法で、setcookie関数を使わないといけないところだ。GETやPOSTと同様にこんな感じでクッキーがセット出来ればいいのに。

$_COOKIE[‘_key’]=’_value';

まぁ、できないほうがいいという理由もわかるのだけれど。

で、最近使うようになったクッキーだが、便利な関数があることを知った。session_set_cookie_params関数だ。この関数一つでクッキー周りの設定がすべてできてしまう。

void session_set_cookie_params (
int $lifetime
[, string $path
[, string $domain
[, bool $secure = false
[, bool $httponly = false ]]]]
)

第1引数：セッション有効期限（秒）
第2引数：クッキーが動作するパス
第3引数：クッキーが有効なドメイン名
第4引数：https時のみ使用可能とするかどうか
第5引数：JavaScript等からのクッキーへのアクセスを許可するかどうか

デフォルトではPHPでセットしたクッキーを、JavaScriptから読み込むことはできないのかな。その逆はできるけど。

今まではほぼPHP専門でやってきたけど、最近はあきらかにJavaScriptの開発が多い。JavaScriptで作ったプログラムが動くと、見た目の印象がいいので面白いしね。

Google Maps V3で開発していて、地図表示領域の四隅の座標を取得したくて以下のように記述してみた。

var bounds = gmap.getBounds();
// gmapはGoogle Mapsのオブジェクト

四隅の座標なんて簡単！、と思っていたら、値が取得できない。ていうかboundsがundefinedになってる。その直前でgmap.getZoom()出来ているのに！。

検索してみてわかったこと。どうもgetBounds()は、タイルのロードが完了していないと取得できないらしい（英語のサイトになんとなくそんな意味のことが書いてあった）。「addListenerして’bounds_changed’とか’tilesloaded’とかしろ」と書いてある。

結構不便だけど、考えて見れば当然かもしれない。地図の表示領域はブラウザの画面サイズやCSSとも関係してくるだろうから、タイルがロードさえされればそこから判別できるんだけど、と言われれば納得出来る。

納得出来るのと、こんな具合に動いて欲しい、というのは時として矛盾する。

最近はjQueryを使った動きのあるフロントエンドを作る作業が多いのだが、先日IEで問題が発生した。

自分の場合、フロントエンドの開発の際はFireFoxを使っている。JavaScriptのデバッグ処理は、なんといってもFireBugが便利だからだ。以前はJavaScriptの開発がとても嫌いだったのだが、おそらくIEで表示されるJavaScriptのエラーメッセージの意味が全くもって不明だったことも一因だと思っている。

フレームワークを使わない場合は、クロスブラウザ対応で問題がでることが多かったが、最近はそのへんをフレームワークが全て吸収してくれるので便利だ。

さて、本筋に戻って開発段階で問題なく動いていたJavaScriptをクロスブラウザ環境で一通りテストしてみて問題が起きた。FireFox、Chrome、Safariとここまでは順調だったが・・・、IEでつまづいた。「文字が正しくありません」。

おかしい。開発段階でも万一を考えて時々IEでもチェックしていたのだから、今更動かないわけがない。しかし実際は動かないので悩んでしまった。訳がわからないことに、サーバにアップロードすると動くけどローカルPC上では動かない。ウェブを検索すると、いくつか原因となりそうな事項があるような感じ。

• JavaScript外部ファイルのパスの指定が間違っている
  いやいや、初心者でもないのでさすがにそういうミスはありえない。というか一番最初に調べてるし。
• JavaScript外部ファイルの文字コードとHTMLの文字コードが違う
  ドキドキして調べたけど、そういえばプログラムに日本語使ってない。一部コメントには日本語があるけれど・・・。ってそれでももちろん問題ない。文字コードはあわせてある。

と、虱潰しにあたってみたけど、まったくわからない。そしてふと思いついた。

「キャッシュ壊れてないか」

IEのキャッシュを削除して、再度ページを開き直すと問題なく動いた。そういえばさっきの状態では、本来なら「セキュリティ保護のため・・・」というローカルファイルにJavaScriptが埋め込まれている場合に表示されるエラー自体が出ていなかった（ちょっとおかしいなぁとおもっていたのだが）。

ということで原因はキャッシュが壊れていたことだったようだ。

jQuery-1.4.2を使っていて生じた問題についてのメモ。

jQueryを使ってajax処理し、結果をjsonで受け取るなんていうのはよくある話。普段から使っていた処理なのに、今回どうにもこうにもはまってしまったのでメモ。

ajaxメソッドの引数のオブジェクトで{success:hoge,error:fuga}と成功時と失敗時でそれぞれ関数を定義しておいた。基本的にはhoge関数が起動してその中で処理が行われ、fuga関数自体が起動されることはまずないはず、と踏んでいた。しかしどうしてもhoge関数が呼ばれず、fuga関数ばかりが呼ばれてしまう。理由がわからない。

まずfuga関数の第2引数をダンプしてみた。「parseerror」の表示。つまりサーバから送られてきたレスポンスがjsonオブジェクトになっていない（フォーマットが間違っている）というエラーだ。最初はてっきり「あ、またヘッダつけるの忘れた」と思い、PHP側で以下の1行を追加してみたが結果は変わらない。

header(‘Content-Type: application/json; charset=utf-8′);

どうにもこうにも原因がわからないので、根本的に「JavaScriptのオブジェクトってこのフォーマットであってたっけ」みたいなことも考えてみた。PHP側からの出力は最初、以下のようにしていた。

{result:0, message:’エラー’}

JavaScriptとしては正常なオブジェクトのように思うのだが、jQueryはこの形式がお嫌いのようだ。まず問題を簡単にするために[]とか{}とかで返してみた。この場合は正常にパースしてくれる。次に[1]や[1,2]としてみた。これもOK。そして[‘1′]。これはパースエラーになった。もしやと思い[“1″]。これはセーフ。つまりシングルクォーテーションでくくるのはダメらしい。マジかよ。

次にオブジェクトをチェック。{“result”:0}はOKだけど{result:0}はNG。つまり添字になる部分もダブルクォーテーションでくくれってことになっている（シングルクォーテーションの場合もNGだった）。

結果として、以下の文字列で返すことで正常にパースできるようになった。

{“result”:0, “message”:”エラー”}

なんだか解せないが、とりあえずヨシとする。

最近はJavaScriptベースのリッチテキストエディタ（Rich Text Editor）が数多く出回っている。HTMLの知識がなくてもウェブページ上でHTMLコンテンツを手軽に生成できるため、とても便利だ。CMSに実装することも多い。しかしどれも一長一短的なところがある。WYSIWYGエディタを調べてみたのでメモしておく。

• TinyMCE
  http://tinymce.moxiecode.com/
  おそらく現時点で最強のJavaScript WYSIWYGエディタ。世の中のWYSIWYGエディタに実装されている機能は、おそらく全て網羅されているのではないだろうか。カスタマイズにも対応（自作ボタンを用意して自作コマンドを実行することもできる）。jQueryのプラグインとしても動作する。WordPressのエディタとして有名。難点は重いこと。
• FCKEditor
  http://ckeditor.com/
  今では「CKEditor」と名前が変わっている。FCKEditorのクオリティとインターフェイスを継承している強力なWYSIWYGエディタ。TinyMCEと双璧をなす。
• WYMeditor
  http://www.wymeditor.org/
  Drupal等のCMSでも採用されいているポピュラーなWYSIWYGエディタ。インターフェイスはやや特殊だが、玄人好み。一般ユーザには使用しにくいかも。
• nicEdit
  http://nicedit.com/
  軽量のWYSIWYGエディタ。XHTMLに対応。クロスブラウザ対応。
• jHtmlArea
  http://jhtmlarea.codeplex.com/
  jQueryのプラグインとして動作するWYSIWYGエディタ。 作者曰く「公式にはIE6に対応しない」とのこと。クロスブラウザ対応。
• ｊwysiwyg
  http://code.google.com/p/jwysiwyg/
  jQueryのプラグインとして動作するWYSIWYGエディタ。 WYMeditor互換で、機能縮小版。そのかわりに軽量化。
• markItUp
  http://markitup.jaysalvat.com/home/
  他のエディタと違い、プレビューモードと編集モードが別の場所に表示。一般向けではないように思われる。
• openwysiwyg
  http://www.openwebware.com/
  XHTML非対応。クロスブラウザ対応だがSafari、Chrome系はNG。

他にもいくつか見つけたが、現状ではこんなところ。