イントロダクション
今まで数回にわたり、これに関することを記載しました。以下の記事がそれにあたります。
部分的な記載なので詳細部分は上記の記事がわかりやすいと思います。
Ajax + XmlHttpRequest
今回作成しているウェブアプリケーションはGoogle Mapを使用して地域の情報を位置情報を土台にして発信できるものを作成中です。
現状は、まだわけのわからない情報が載っています。こんな感じです(笑)。
PCとスマホなどのモバイルで同じような表示になっています。CSSでのコントロールは行なっていません。→＠mediaなどのタグを使用していません。
なぜAjax?
今回の実装では使用しているファイルは以下のようになります。
<クライアント>
- SampleMap.html
- SampleMap.js
<サーバー>
- InsertMapData.php(だったと思う。。。)
- GetMapData.php(と思う。。。)
これらの構成で今後はphpファイルが増えていくような形になります。(1機能、1ファイル)
ポイント
HTML, JS(クライアント)とphp(サーバー)を分断して実装したいと思い、このような形になりました。
サーバーとクライアントの通信部分にはAjaxを使用しています。
つまり
「HTML & JS」
- HTMLの初期表示時にAjaxでphpを呼び出しGoogleMapから地域情報(オーバーレイ)を取得
「PHP(サーバー)」
- データ入力とデータ送信のボタンで地域情報をサーバーに登録(PHP呼び出し)を行う
＜サーバーとクライアントの通信イメージ＞
このように用途を分割して実装しました。
MVCモデル
余談ですが、自分はJava屋なのでMVCモデルのような実装の仕方が好きです。「あの機能はあのファイル」「この機能はこのファイル」というように処理を分割してやると、修正や追加の実装をするときに「どの部分にコードをついか・修正すれば良いか？」がすぐにわかります。「自分で作ったんならわかるだろ？」という声が聞こえそうですが、それは多分やったことのない人の意見だと思います。
もし、若い人であれば、是非やってみてください多分「んーどこを修正すれば良いのだろう？」となります。そして、この経験をした人でないと「こーやれば良い」というのがわからないと思います。
それなりに経験を積んでいる人であれば、若い子がやって「んー。。。」と声を上げているときに、何か一言声をかけてあげてください。若くても、老人でも「新しきを知る」というのは必要だし。面白いことだと思います。
処理フロー
本当のMVCモデルでは以下のような関係を作りアプリケーションの設計を行います。
- モデル(M) = ロジック処理部分(DB登録など)
- ビュー(V) = 画面、クライアント側
- コントロール(C) = リクエストハンドラ
このような形で設計します。JavaのSpring, Play(リンクはちょっと古い)、JavaEE etc ... などのフレームワークはStrutsという古いフレームワークを基本にしているように見えます。(実際のところは自分の予想です)
それというのはリクエストハンドルを行う中心的なサーブレット(フレームワーク部品)を使用して各URLに対してどのアクション(Control)を起動するのか決定しているからです。
ハンドリング方法
「http(s)://XXXX.com/XXX 」というリクエストが来たときXXXActionというControlクラスのXXXメソッドが起動する、というような形をとっています。
MVCの流れ
画面(V) → コントロール(C) → モデル(M)→ コントロール(C) → 画面(V)と処理が流れていくように設計します。
VからはHTMLでフォームのaction属性を使用する方法、Ajaxで直接処理を呼び出す方法とありますが、そこはアプリケーションの設計次第になります。
同期通信と非同期通信
Ajaxという技術が確立されて久しいですが、昔は「同期通信」、つまり、フォームのaction属性を使用する同期通信にて画面の更新を行なっていました。この場合は画面全体をリロードするので必要な場合のみこのような通信方法を使用したいと思うのが人情だと思います。
しかしAjaxの技術を使用すれば更新したい部分のみを更新できるので、この方法を使用することが多いです。
よく目にするのは「JQuery」を使用した「$.ajax()」です。これはXmlHttpRequestを使用したもので、自分の認識としては単なるラッパー(拡張して使いやすくしたもの)だと思っています。しかし便利になればその分よくない部分も出るので。。。まぁ好みの問題でもありますが。。。とにかく自分はシンプルにXmlHttpRequestを使用した実装を行いました。
具体的には、HTMLでid="jax"とつけた領域のみを更新するなどです。中身としては「非同期通信はレスポンスを待たない」のでリクエストを送信してこのレスポンスが帰って来たときにXXXの処理をするというような形で実装するので「部分的に画面を更新できる」というわけです。
この部分は下の記事を参照願います。
JS XmlHttpRequest 〜JSでの同期/非同期通信〜
今回の実装では
MVCの「C」がない状態です。HTMLとPHPだけで処理を行い、画面の繊維を行わないのでControl部分がいりません。１画面で事を足らします。
というかほとんどをGoogleMapsAPIに依存する形で実装するのでサーバーサイドの処理はDBからのデータの取得、更新のみで良いのです。
MVモデル？
とってつけたようにいろんな言葉が横行していますが、それも時代でしょう。なので「MVモデル」という言葉は筆者が勝手に言ったことです。。。
しかし、実装の方はHTML（V）とDB更新・データ取得(M)のみなのでこのような言い回しになりました。詳細に関しては以下のリンクを参照していただけるとありがたいです。
でわでわ。。。
