猫ネコサーチに画像掲示板を設置しました

画像掲示板の設置

猫サイト専用登録式リンク集の猫ネコサーチエンジンに、画像掲示板を新たに付けてみました。迷い猫や里親募集などに役立つよう、都道府県や市区町村も簡単に選択できるjQueryの連動選択ボックスも付けてあります。

新着投稿はTOPスライダーにも表示

昨年末にリニューアルした際、トップページに画像スライダーのようなものは付けており、いずれは掲示板投稿データをここに流しこんだりしてみたいと思っていましたが、今回はこのTOPスライダーのデータ連携もつくりこむことができました。

プログラム概要

画像掲示板プログラムは、画像掲示板の泉で長年使ってきたプログラムがあるので、これを流用すれば簡単に実装できましたが、以前の記事でもご紹介したように、html書き出し型の古い掲示板プログラムですので、制御がきかないブラウザキャッシュに四苦八苦をまたするのも嫌だったので、今回はPHPとSQLで新たに作り直してみることにしました。

画像掲示板プログラム仕様

画像掲示板の泉で使用しているプログラムのうち、データ更新処理部分をDB化するイメージでしたが、投稿データを配列操作でゴリゴリ書く必要もないので、とってもスッキリしたプログラムにすることができました。DBさまさまです。

画像データの保持方式

投稿データをSQLで保持するとなると、いまどきは細かいこと気にせずに画像もバイナリデータにしてBLOB型で保存といったことをやっちゃうのかと思い少々調べてみましたが、こちらの議論を見る限りでは、保存しない派の方がまだ多いようでしたので、DB内にテキスト、数値以外を保存する習慣がない私も一安心でした。

バイナリにすると取り回しは楽ですが、HTMLのソース見たときのバイナリ文字列にはガックリするので、画像データはファイルのままで置きたくなりますね。猫ネコサーチエンジンの登録サイトのスクリーンショットは、GoogleのPagespeed APIを使ってバイナリを取得したデータですので、見るとこんな感じなのが少々微妙な気がしてしまいます。

Pagespeed APIでスクリーンショット取得

バイナリデータが嫌といっても、Google APIで取得したサイトのスクリーンショットは凄くきれいにとれるので、APIでサイトのスクリーンショット取得に興味があればこちらの記事をご参照ください。

jQueryの連動選択ボックス

さて、冒頭に書きましたが、猫の情報交換掲示板ということで、迷い猫・保護猫・里親募集を書き込むとなると、お住いの地域をささっと選択できる方が便利だろうとは思いましたので、都道府県を選ぶとその市区町村がプルダウンで更に選択できる、よくあるあのセレクトボックスをつけてみました。

jsのコード

色々調べてみましたが、「都道府県連動型市区町村プルダウンメニューをjQueryでできる限り少ないコード数で書いてみた – Lan’s note」これが一番スッキリシンプルな感じでしたので、そのまま拝借してあります。元となる都道府県・市区町村 jsonデータも毎日更新されているとのことで、ありがたい話です。

PHPのjsonデータ処理

フロント側はこれで簡単に実装できますが、生成されるセレクトボックスに入るvalue値はjsonデータ内のid値が入るため、DBに保持されるデータはこのid値しか入りません。

投稿データを表示する際、id値を元に都道府県や市区町村の名前を引っ張り出すには、再度PHPでjsonを読み込み、idに対応する都道府県名、市区町村名を抽出する必要があります。

PHPでjsonデータの取り扱いについては、こちらの記事も参考にしてください。

おわりに

まだ投稿がなく、ページング処理も付けてなかったりですが、これからゆっくりカスタマイズしていこうと思っています。

今回ご紹介した画像掲示板以外にも、猫ネコサーチエンジンには色々と機能が作りこんであります。こちらの記事で機能をご紹介していますのでぜひどうぞ。

町の猫情報一覧 | 地域の猫情報掲示板 – 猫ネコサーチエンジン