猫のサイト専用の登録式リンク集「猫ネコサーチエンジン」というサイトを運営しておりますが、ここに画像掲示板を新たに設置してみました。
画像掲示板サイトとしては、「画像掲示板の泉」というサイトをだいぶ前から運営しておりましたが、そちらはまだ投稿データの管理をファイル操作でやってしまっておりましたので、せっかく新規作成するということもあり、DBを使って画像掲示板の制作をしてみることにしました。
猫関連サイトということで、迷い猫や里親募集などに役立つよう、都道府県や市区町村データも簡単に選択可能な、jQueryの連動型選択ボックスも付けてみました。
この記事では、この画像掲示板プログラムの制作ポイントや、都道府県ー市区町村が連動するドロップダウンをjQueryで制作するポイントをご紹介しています。
この記事の目次
画像掲示板の設置
昨年末にサイトをリニューアルした際、トップページに画像スライダーを付けており、いずれは掲示板を設置して、新着投稿データをここに流しこんだりしてみたいと思っていましたが、今回はこのTOPスライダーへのデータ連携もつくりこむことができました。
プログラムの概要
「画像掲示板の泉」というサイトをだいぶ前から運営しておりましたので、画像掲示板用のPHPプログラムは手元にありましたが、データ管理をログファイルの形式とする、html書き出し型の古い掲示板プログラムでしたので、制御がきかないブラウザキャッシュに四苦八苦をしたり、投稿データの取り回しも面倒だったので、今回はPHPとSQLで新たに作り直してみました。
画像掲示板プログラム仕様
画像掲示板の泉で使用しているプログラムでは、下記のような機能がありました。
- スレッド型に掲示板を作成する
- スレッドにレスがあったらスレッドをTOPに上げる
- 画像ファイルを投稿する（上限サイズは24MB）
- スレッド／レスの投稿を選択削除する
- レスポンシブ
- YouTubeやニコニコ動画も貼り付け可能
- アンカーレスポップアップ
このうち、1～4くらいまでに投稿データ管理が絡みますので、このデータ更新処理をDB化するイメージで作業を致しました。これまでのファイル編集に伴うPHPの配列操作もなくなりましたので、プログラム自体はかなりスッキリしたものにすることができました。
画像データの保持方式
投稿データをSQLで保持するとなると、いまどきは細かいこと気にせずに画像もバイナリデータにしてBLOB型で保存といったことをやってしまうのかとも思いましたが、こちらの議論を見る限りでは、まだ保存しない派の方が多いようで安心しました。
DB内にテキストや数値以外を保存する習慣が私もないので、今回もファイルはディレクトリにアップしてPATHだけ保存といった感じにはしておきました。
バイナリにすると取り回しは楽ですが、HTMLのソースを見たときのバイナリ文字列にはかなりガックリしてしまうので、画像データはファイルのままで置きたくなります。
バイナリ文字列がどんな感じになるか見たい場合は、猫ネコサーチエンジンTOPにある、登録サイトのスクリーンショット画像なんかをみていただくと分かると思います。こちらはGoogleのPagespeed APIを使ってバイナリを取得しておりましたので、こんな感じになっておりました。
Pagespeed APIでスクリーンショット取得
とはいえ、バイナリデータが嫌とはいっても、GoogleのPagespeed APIで取得したサイトのスクリーンショットはもの凄くきれいですので、APIでサイトのスクリーンショット取得に興味があればぜひご利用下さい。
jQueryの連動選択ボックス
さて、冒頭に書きましたが、猫の情報交換掲示板ということで、迷い猫・保護猫・里親募集を書き込むとなると、お住いの地域をささっと選択できる方が便利だろうとは思いましたので、都道府県を選ぶとその市区町村がプルダウンで更に選択できるような、連動するセレクトボックスをつけてみました。
jsのコード
色々調べてみましたが、「都道府県連動型市区町村プルダウンメニューをjQueryでできる限り少ないコード数で書いてみた – Lan’s note」これが一番スッキリシンプルな感じでしたので、そのまま拝借してあります。元となる都道府県・市区町村 jsonデータも毎日更新されているとのことで、ありがたい話です。
PHPのjsonデータ処理
フロント側はこれで簡単に実装できますが、生成されるセレクトボックスに入るvalue値はjsonデータ内のid値が入るため、DBに保持されるデータはこのid値しか入りません。
投稿データを表示する際、id値を元に都道府県や市区町村の名前を引っ張り出すには、再度PHPでjsonを読み込み、idに対応する都道府県名、市区町村名を抽出する必要があります。
PHPでjsonデータの取り扱いについては、こちらの記事も参考にしてください。
おわりに
まだ投稿がなく、ページング処理も付けてなかったりの画像掲示板ですが、これからゆっくりカスタマイズしていこうと思っています。
今回ご紹介した画像掲示板以外にも、猫ネコサーチエンジンには色々と機能が作りこんであります。こちらの記事で機能をご紹介していますのでぜひどうぞ。
町の猫情報一覧 | 地域の猫情報掲示板 – 猫ネコサーチエンジン