ひとまず、想定していた
検索→結果一覧→行選択でポップアップ→簡易/詳細表示の選択→それぞれの画面表示→選択した行のデータ表示
という一連の流れが全て確認できた。想定していた動作が全て実現できたという事では無いけれど、後はできている事を元に肉付けしていけば、全体的な完成度が高まるはずだ。
ポップアップウィンドウで次に進む画面を選択したら、hidden設定にしてあるフィールドに選択された行のIDをセットし、次に表示する画面をactionで指定しsubmit()するという手順を踏んだ。次に表示する画面も、WordPressの固定ページとして作成してある。
jQuery(function($) {
var view_id = document.getElementById( "view_id" ) ;
view_id.value = selected_id ;
$("#view_form").attr( "action", "/viewpage/" ) ;
$("#view_form").submit() ;
$("#mydialog").dialog( "close" ) ;
}) ;
ポップアップウィンドウ上のボタンが押下された場合の処理(抜粋)は概ね上記のようにしてある。”view_id”というのがhiddenにしてあるformの要素で、そこに選択されたIDをセットした上で、formをsubmitしている。actionとして作成してある固定ページを指定している。ちなみに、form上にはtarget句で「_blank」を指定しているので、常に新しいタブが開くようになっている。
固定ページ側では$_POSTグローバル変数から値を取得する事ができるようになったので、今後渡したいパラメータが増えた場合にはhidden属性のパラメータを増やす事で対応が可能になる。固定ページの表示が完了するまでは、同一プロセスで動作するようなので、$_POSTグローバル変数だけでなく、ショートコード間でデータを共有する事が可能なようだ。
そこで、簡易画面側で、実際にSQLを発行してDBから詳細データを取得して見る事にした。結果は勿論良好♪想定したデータがちゃんと流れに沿って取り出され表示される事を確認した。
取り出したデータは、JavaScript側にJSON形式で返して固定ページのJavaScriptで個々のフィールドへ設定しようかとも考えたのだが、今回はサーバー側のコストを使ってみようと思う。つまり、一回SQLを発行するショートコードを冒頭で呼び出し、ショートコード内で取り出したデータをグローバル変数に保存。そして、画面側はショートコードをその都度呼び出して必要なデータを取り込み、表示するというもの。
現状では、取り出す項目毎にショートコードを作っているのだが、確かショートコードには引数を渡せるはずだったので、取り出したい項目名を指定しデータを返却するような汎用的なショートコードを作った方が良さそうな気がする。
実際、この方法でデータを増やしたりして試して、あまりにもサーバーに負荷がかかりすぎるようなら、JSON形式で返却し、JS側(つまり端末側)で処理する方法に切り替える必要があるかもしれない。この辺りの負荷などが、現状全く読めていないのは問題な気がする。自前サーバーならともかく、レンタルサーバーだからその辺りは慎重にやらないといけないだろう。
とは言え、これで取りあえず全体的な流れが確認できたので、後は各画面に必要なデータがテーブル上に揃っているのか、それをちゃんと取り出して表示させられるのか等の確認をする事ができるようになった。取りあえずは機械的に必要な項目を全てSELECTして画面上に表示させられるようにしてみよう。
各画面のレイアウトは、表示させる部分をショートコードにしているが、span等をうまく使って色や大きさ、配置などを後からCSSで設定できるようにしておく必要があるだろう。そういう部分は不得手なので苦労するだろうが、まぁ何とかなるだろう。
そういえば、WordPressのGutenbergで固定ページも編集しているのだが、spanタグを表示文字列の部分に「コードエディタ」で挿入しようとしたのだが、保存しようとするとspanタグが綺麗に削除されてしまうという現象にでくわした。結論から言うとdivタグで挟んでいなかった為なのだろう。編集エリア内のpタグの親にdivタグを記述する事で、spanタグはきちんと保存されるようになった。spanタグはdivの子要素になってないといけないとかの制約があったかもしれない。
spanをマメに指定する事で、その部分のCSSも自在に設定できる(と思いたいw)ので、spanが保存されないと困ってしまうｗ
次は、簡易画面に表示させる項目の検討と、詳細画面に表示させる項目の検討。及びそれらを実際に検索して表示させる部分の作りこみを頑張ろう。そこで現状のテーブルに必要十分なカラムが用意されているかどうかがわかるだろう。念のため、英語画面も用意しておくほうがいいのかもしれない。
画面表示に関しては２～３日かかるかもしれないが、大事な所なのでじっくり確実にやりたいと思う。