Ajax使って新しいことをやってみた

新しいことと言っても画期的なこととかでは全然無いので・・・

おかげさまで CodeIgniter でのWebアプリケーションもまた1個できた。
それで今回、サイト全体をCIで管理するのはやめて(つまりトップに index.php 置くのやめて)、システム用のディレクトリを作ってそこに管理サイトを置き、サイトページからはAjaxで通信するように構成してみたが、
結論からいうと、そこまでしなくても良かった気はしてる。(汗)

発注元の都合により、サイトにはPHPの静的ファイル群があり、さらにブログなどはWordPressで作るらしい。だから上記の構成を考えたわけであるが、AjaxとPHPフレームワークとの連携は、思ったより相当、大変だった。

<ページ遷移>

サイトトップで条件を選んで、条件にあった情報の一覧を表示し、詳細ページにも遷移する。
一覧ページでユーザーが必要な情報にチェックを入れて、次に進むと、選んだ情報とユーザー情報の入力フォームが表示され、そこから確認画面に行き、完了画面まで行くと、メールが送信されるというもの。(ショップのページみたいな感じ)

各ページは、PHPの静的ページ。
CIで管理している情報を、PHPの静的ページに出力させるには、(たぶん)Ajaxしか無いので、各ページで動くJSのコードを書いた。それぞれからCIの情報にアクセスしてゲットした内容を書き出し、フォームに入力されたデータの送信を行い、次のページに遷移(リダイレクト)する。
それで、検索結果と詳細ページは、URLクエリを叩いたら出るようにした。

スマートじゃないけど・・・出来てしまったものは仕方がない。(笑)

<ページ間のデータの保持>

今回、初めて Web Storage (localStorage)を使ってみた。なんのことはない、非常に簡単だった。
一覧ページは複数に渡るので、ページを跨いでユーザーがチェックした情報(ID)が、どれであるかを保持しておく必要がある。そのために使った。
送信完了すればデータを消去する。(残ってしまう場合もあるけど)

<市区町村コードAPIの使用>

ユーザーがエリアを選択するため、および、管理側でエリアを登録するために、市区町村コードAPIを使ってみた。
http://www.land.mlit.go.jp/webland/api.html
これは、都道府県コードで呼ぶと、その中の市区町村のJSONデータが返ってくるというもの。
都道府県コードAPIというものが(たぶん)無いので、都道府県コードの配列は自分で作った。
ユーザーが都道府県を選択すると、その横のセレクタに市区町村の選択肢が出てくるようにする。

Ajaxで取ってくれば簡単だろうと思ったが、やってみると意外と色々やらなきゃいけないことがあった。
このサービスはSSLでは提供されていないようなので、SSLページからAjaxで呼ぶとERRORとなる。さあどうしましょ?

仕方ない、というか、セレクタ操作するたびにAPI呼びに行くのもダサいなということも同時にあって、一旦、APIの情報をサーバー上に保存(キャッシュ)するようにした。DBにするか迷ったけど、テキストファイルに保存してみた。
そこからCIでAjaxに提供する。最初、管理画面もAjaxでAPI呼びに行っていたので、そちらはCI内で処理するように変更した。それでようやくスッキリ動くようになった。

大変ですな。当初はすごーーく簡単に考えていたけど、意外としんどかった。
しかし結構いろいろ、AjaxやJSやjQueryのことが勉強になった。今度からもうちょっと素早く立ち回れるようになるだろう。今回のも、イケてない部分もあるので改善したいところ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です