WEBシステム開発等で気付いたことなどをまとめていきます。
JQueryも動作的に大分安定してきて安心して使えるようになってますが、JQuery-UIもヴァージョンを重ねてだんだんかゆいところに手が届くようになってきています。
Webアプリケーションのカレンダーでdatepickerを使用している方も多いと思いますが、２つのdatepickerを使って開始日と終了日を指定するような場合に、
・終了日は開始日以前の日付を選択できない
・開始日は終了日以降の日付を選択できない
という制限をつけた動きを出来るようにしてみました(^^)
ヘッダでJQuery, JQueryUI, そして日本語ローカライズのdatepickerのファイルを読み込んで、レッツトライ！！
画像の上にポイントを置いて座標を取得して保存する仕組みを作ってみました。
使ったのはjQuery.uiの「ui.draggable.js」「ui.droppable.js」を使用しました。
ポイントの追加ボタンを押してポイントを追加し、ドラッグで画像の任意のところにドラッグします。
不要なポイントはドラッグしてゴミ箱に持っていくと消えます。
ポイントを配置した後に登録ボタンを押すと座標を取得して保存する流れになります。
ラジオボタンのチェックって一度つけるとはずせないので、
チェックがついてるラジオをもう一度クリックすることではずせるようにしました。
wdCalenderをローカル環境で動かしていて、実際本番環境にUPした時に動かなくなってテンパッタのでメモとしてブログに残しておきます。
症状としてはテスト環境では動くのに本番環境では動かないというもの。
jqueryに頼っているので実際動かないと、どう調査をしたらいいか分からずとりあえず、FireBugで追っかけていきます。
するとどうもテストでは値が入っている所に、本番では入っていないということが分かりました。しかもJSON形式のデータが・・・
JSON形式のデータ？？？んっ！！以前phpのjson_encodeはphpのバージョンに依存するなというのに、はまった事があるなということで調べるとビンゴでJSONが使えるPHPのバージョンは5.2以上ということ。
本番サーバーではphpのバージョンが5.1.6だったので早速5.1.6でもJSONが使えるように「http://www.softel.co.jp/blogs/tech/archives/973」を参考にサーバーの設定を変更！！
これで動くかなと思っていたのですが動かない・・・という事でもう一度デバッグ作業をしていきます。
今度はphpの記述部分をfwrite関数を使っていって1行ずつファイルにデバッグ文を出力して追って行きます。するとある関数で処理が止まってしまっている事が分かりました。
それはdate_parse関数なのですが調べてみると、この関数が使えるのはphp5.2以上との事でして、JSONと一緒やんという顛末でした。date_parse関数のところを独自の記述に置き換えると見事動いてくれました。
基本としてwdCalenderはphp5.2以上で使うもの。それ以前で使うときは動くように自分で調整をして上げる必要ありという事でした。
以前紹介した記事「wdCalendarを日本語で使ってみる」で日本語化したwdCalendarをCakePHPに組み込んでみたので紹介します。
それから少し改造ということで、登録できるフィールドを追加してみるのと、ログインした人のidを基に誰が登録した予定なのかを持たせるようにしました。
GoogleカレンダーをベースにJQueryで作られたwdCalendarを日本語にして使ってみたのでそのメモ書きです。
wdCalendarはhttp://plugins.jquery.com/project/wdCalendarからダウンロードしてきます。
今回はダウンロードしてきたファイルで分かるところを日本語に変えていきました。これで一応見た目は全て日本語になったはずです。
ダウンロードしたjsファイルだと日本語に対応していないのでwdCalendar_lang_○○.jsとdatepicker_lang_○○.jsなっているフォイルを改造してwdCalendar_lang_JA.jsとdatepicker_lang_JA.jsを作りました。ソースはこんな感じです。
AjaxでURLにGET情報をつけて渡す時に日本語をエンコードし忘れていたのでメモ。
エンコードし忘れてGETを送っていてFirefoxでは自動的にエンコードしてくれていたので気付かなかったのですが、IEではサーバー側で文字化けしていました。