投稿者: sanreborn

Ajaxによる、非同期通信ようやく成功！

変数名の間違いをしている事に全然気づけず、数時間無駄にしてしまった…。
JavaScriptの場合この手のミスはやってしまいがちだけど、中々難しいな。
まぁ、そういうミスが起こり易いという認識ができたからよしとしようか。

とりあえず、ボタンを押下して、サーバー側(PHP)関数を呼び出して、結果を表示するという一連の非同期通信処理ができた。

よし、次は条件をサーバー側に渡して、その条件で検索するという所までを目指そう。
暗号化とか色々お作法はあると思うけど、まずは単にPOSTでパラメータを渡して、それをWHERE句に指定して検索をかけ、結果を得る事を目指す。

うまく行けば、今日中にそこまではいけるぞ。

WordPressとテーマの更新通知が来た。

以前チラ読みした情報によると、下手に更新すると今作っているfunction.phpが上書きされてしまって、色々困る事になりそう。
本来は、それを防ぐ為？に「子テーマ」なるものを作り、自作関数などはそこに定義していくのが推奨されているようなのだけど、あいにくまだそこに手をつけられていない。
とりあえず、WordPress本体の更新は実施するけど、テーマの更新は保留にしておくのがよさそう。

検索ボタンを押した後、画面遷移させずにDBから検索させて結果を表示させる。
表示させる部分はDOM操作でOK。表示させるデータはJSONでやり取りする…のかな？

検索機能の本体はSQLで処理するだけだし、PHPでやるんだろう。
だとすると、function.php内に実装して、それを呼び出すという形になるのだろうか。
初期表示では無いので、ショートコードでは無い。

結論から言うと、あらかじめ用意されているWordPress用の関数を使ってやり取りするらしい。表示時に呼び出すもの、随時呼び出すものとあるが、それらはfunction.php内に宣言しておき、必要なフック、ハンドラに渡すような感じらしい。

とりあえず、習うより慣れろ。

まずボタン押下でAjaxでDOM変更する一連の流れを書いてみよう。

色々と手間取った(単に変数名の取り違い)けれど、どうにかこうにか形になった。

プルダウン１で選択したものを元に、プルダウン２を絞り込み表示する。先頭を選んだ場合には全てを表示…という処理が、PCブラウザでもスマホブラウザでも正しく動くようになった。

想定通り、固定ページ内の最後で、現状のプルダウン２のクローンを保持しておき、プルダウン１のonChangeフック関数の内部で、一旦プルダウン２を初期化(pulldown2.length = 0;)してから、該当するオプションオブジェクトを、保持しておいたクローンから抜き出して追加。速度的にも問題ないように思える。想定では間に通信入らないはずだし、これでいいはず。

PCとスマホ両方動くとはいっても、どちらもChromだから当然と言えば当然なので、又別ブラウザでも確認は必要だとは思うけど、今はそこまで厳密な確認は必要ないだろう。

とりあえず、当初目標だった二つのプルダウンの連動というものは達成できたので、次のステップに進もうかな。

次は指定された条件でDBを検索し、その候補を表示するという部分か。

大雑把には次のような感じか。

• 結果はリスト表示
• 表示されたリストを選択してさらに詳細表示が可能
• 検索条件とは同じ画面に表示

まずはここまでを目標にしよう。

一方のプルダウンの選択イベント、その都度DBにアクセスしに行くのは、リソースがいくらあっても足りないし、以前も考慮したように、その都度通信が発生するのはダメでしょう。

という事で、初期画面表示時に、連動先のプルダウンの選択肢データを全て読み込んで起き、選択イベントのタイミングでそこからオプションタグを生成し直すという方針が考えられる。

オプションタグの元になる選択肢データはJSQN形式で…。

と考えたんだけど、幸いにして元々そこまで長大なデータでも無いわけだし、一度SELECT文を作ってしまい、その作ったSELECTオブジェクトを保存しておくというのはどうだろう？

大きなデータだとメモリ食うから無理だけど、小規模なら大丈夫なのでは？

初期表示状態では、１つ目のプルダウンは「未選択」を選択状態にしておき、２つ目のプルダウンもdisableにしておくことでごまかせそうだぞ。

とりあえずそこまでやってみよう！

色々と参考にさせてもらったけど、ひとまずJavaScript動かす事ができた。

WordPress内の投稿や固定ページの記事の中ででも、ソース直書きにして、scriptタグを
divタグで囲む事で正しく認識させる事ができた。

selectのオブジェクトをgetElementByIdで取得し、選択されたindexを取得するっていう関数をdivタグの中のscriptタグ内で記述。
select分には、onChangeフックにその関数を指定。
今回は、選択された項目名(ラベル)を、options[index].textで取得してテキストボックスに貼り付けるっていう処理だけど、とにかくちゃんと動いた！

JavaScriptはこんな感じ

<p>
<div><script>
function select_top_level() {
  var pulldown1 = document.getElementById( “top_level_kind” ) ;
  var selected_kind = pulldown1.selectedIndex ;
  document.getElementById( “text1” ).value = pulldown1.options[selected_kind].text ;
}
</script></div></p>

フォームはこんな感じ

プルダウンリスト１

<form name=”pulldown1″>

<select id=”top_level_kind” name=”kindbig” onChange=”select_top_level()”> ショートコード１ </select>

<select name=”kind”> ショートコード２ </select>

<input id=”text1″ type=”text” value=”” placeholder=”文字列”> <textarea name=”testarea” rows=”5″ cols=”40″> </textarea>

<input type=”submit” value=”検索”>

</form>

昨日は疲れすぎて何もできなかったけど、今日はちょっと頑張ろう。

まず、DBを少し見直した。
DBから１つ目のプルダウンの候補を持ってくるようにしているが、今までは「公開/非公開」のフラグを流用していたのを、見出し用の項目をちゃんと用意する事にした。
現状プルダウンに使うのは１回層のみだけど、見出し項目にもレベルを設ける事にした。
でも、画面とかも複雑になるので、当面は最上位階層のみを取ってくるようにする。

あわせて、３桁だった分類を４桁に変更。
これで階層にも余裕ができて、並びも融通が利くようになった。
SQLもそれにあわせて、対象のカラムを変更してみた。
ひとまずうまくいったので、昨日やる予定だったJavaScriptの作成に入ろう。

予定としては、JSファイルを作り、そこにプルダウンで項目を選択した際のフック関数などを定義したり、Ajax用の関数を作って格納しておく。
・JSファイルはどこに置くのか？
・JSファイルはどこで読むのか？(ヘッダ？フッタ？)
・function.phpの変更
このあたりをやらないといけないと思われる。

まず、手始めに１つ目のプルダウンを選択したら、その項目を逐次テキストボックスに表示させる処理を記述してみよう。それに必要な関数、フック処理、ファイルの準備、読み込みなどの一連の準備を完了させるのを目標にする。

Adsenseの当サイトへの設定と、Search Consoleの活性化を実施。
まだ色々作成中な事もあって、検索エンジンへの通知をオフにしていたのを、一昨日深夜にオンに変えた影響もあって、サイトマップが正しく認識してもらえなかった。

２４時間ほど経った今朝、サイトマップに関してチェックしてみたらほぼ全てがOKになっていたが、個別ページ(検索画面)だけ別フォルダにしていたせいか、警告になっていた。

プラグイン側に、通知に含める設定をして再度チェックしたら今度は正しく認識され、とりあえず現状のページは全てRobotでのトレイルができるようになったらしい。

さて、現状では自動広告を出すように設定はしているものの、実際このブログがどれだけ観られているのかはまだわからないし、広告なんぞでないのではないだろうか？
スマホからみると表示されているようでもあるが…。

と思いAdsense側をチェックしてみると、「表示」にこのサイトが含まれていた。
まぁ多分全部私だろうけどw
ここ、他の人が見に来るようだったら、本当に画像その他早急に変えないとだな。
ただ、どんな画像用意していいんだか、いまいちわかんないんだよな。

後、固定ページいくつかつけてるけど、不要な部分は表示させないようにしといた方がいいのかもしれないなぁ…。

どれを表示させて、どれを隠すのかってのも、まだ良くわかっていないし。

まず大きな方針として、WordPressの「投稿」でスクリプトを使って実装するのか。
はたまた、素でPHPファイルを作成し、ドキュメントルートなどに置いて動かすのか。

将来、本番サイトに以降しようとした際、自前でMySQL、Apache、WordPress、PHPを全て用意できるのか(いや、これはできるでしょ)。
ただし、家のマシンに構築するのではなく、レンタルサーバー上に構築するとしたならば、環境に左右されない作りにしておくのが本当はいい。

しかし、ここんとこXREAでWordPressを使っていると、やっぱり環境整えた上で作った方が、色々と楽だよなーと実感してきた。
試験導入が終わったら、ちゃんと有料契約をして継続的に使っていくというのも、一つの選択肢だろう。

という事で、今回はWordPressにどっぷりと使ってみようかなと思う。
ただし、プラグインに関しては極力使わない方針で行く。

現状「子テーマ」ってのが何なのか良くわかっていないで、直接20-17を使って、いくつかのファイル(function.phpとか)を触っているけれど、どうやらあんまり良い作法ではなさそう。
ある程度形ができたところで、その辺りもやっておきたいけど、ひとまずは現状のまま進めよう。

やっぱり全て自動的に連動ってのは、それだけ通信頻繁に起こるわけで、PCならともかくスマホでは困るよね。

毎回取りに行くのは良く無いから、リスト項目全体は初期表示時に全てとってきておいて、ページ内のインスタンスで保持、第一リスト選択に従って、JSで動的な絞込みを行う。
こうすれば、リストいじった所で特に通信もでないしOKだよね。

その方向で行こうか。

第一リストを複数選択可能にしようかとも思ったけど、ニーズ的に必要かわからんし、単一選択でまずは進めることにしよう。