猫のサイト専用の登録式リンク集「猫ネコサーチエンジン」というサイトを運営しておりますが、ここに画像掲示板を新たに設置してみました。

画像掲示板サイトとしては、「画像掲示板の泉」というサイトをだいぶ前から運営しておりましたが、そちらはまだ投稿データの管理をファイル操作でやってしまっておりましたので、せっかく新規作成するということもあり、DBを使って画像掲示板の制作をしてみることにしました。

猫関連サイトということで、迷い猫や里親募集などに役立つよう、都道府県や市区町村データも簡単に選択可能な、jQueryの連動型選択ボックスも付けてみました。

この記事では、この画像掲示板プログラムの制作ポイントや、都道府県ー市区町村が連動するドロップダウンをjQueryで制作するポイントをご紹介しています。

画像掲示板の設置

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

プログラムの概要

画像掲示板の泉」というサイトをだいぶ前から運営しておりましたので、画像掲示板用のPHPプログラムは手元にありましたが、データ管理をログファイルの形式とする、html書き出し型の古い掲示板プログラムでしたので、制御がきかないブラウザキャッシュに四苦八苦をしたり、投稿データの取り回しも面倒だったので、今回はPHPとSQLで新たに作り直してみました。

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

画像掲示板の泉で使用しているプログラムでは、下記のような機能がありました。

  1. スレッド型に掲示板を作成する
  2. スレッドにレスがあったらスレッドをTOPに上げる
  3. 画像ファイルを投稿する(上限サイズは24MB)
  4. スレッド/レスの投稿を選択削除する
  5. レスポンシブ
  6. YouTubeやニコニコ動画も貼り付け可能
  7. アンカーレスポップアップ

このうち、1~4くらいまでに投稿データ管理が絡みますので、このデータ更新処理をDB化するイメージで作業を致しました。これまでのファイル編集に伴うPHPの配列操作もなくなりましたので、プログラム自体はかなりスッキリしたものにすることができました。

画像データの保持方式

投稿データをSQLで保持するとなると、いまどきは細かいこと気にせずに画像もバイナリデータにしてBLOB型で保存といったことをやってしまうのかとも思いましたが、こちらの議論を見る限りでは、まだ保存しない派の方が多いようで安心しました。

DB内にテキストや数値以外を保存する習慣が私もないので、今回もファイルはディレクトリにアップしてPATHだけ保存といった感じにはしておきました。

バイナリにすると取り回しは楽ですが、HTMLのソースを見たときのバイナリ文字列にはかなりガックリしてしまうので、画像データはファイルのままで置きたくなります。

バイナリ文字列がどんな感じになるか見たい場合は、猫ネコサーチエンジンTOPにある、登録サイトのスクリーンショット画像なんかをみていただくと分かると思います。こちらはGoogleのPagespeed APIを使ってバイナリを取得しておりましたので、こんな感じになっておりました。

バイナリデータにした画像をimgタグに設定した場合のソース
HTMLソースimgタグのバイナリ文字列…

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データの取り扱いについては、こちらの記事も参考にしてください。

おわりに

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

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

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

ABOUT dtn.jp

この運営ブログをみてdtn.jpの運営サイトに興味をお持ちになった方は下記のリンク集からサイトをご参照ください。PHP・SQL・JS・HTML・CSSや様々なAPIでゼロから立ち上げたサイトを複数運営しています。

dtn.jp関連サイト

  • ディレクトリ型検索エンジンdtn大手サイトは全てサービスを終了し、中小でも運営を継続するところがほとんどなくなってしまったディレクトリ型検索エンジンを2002年から細々運営しており、未だに細かい機能改修も行っております。申請されたサイトは実際に訪問して細かく確認をしているので登録までかなりお時間いただきます。
  • 猫ネコサーチエンジン猫・ペットサイト専用のディレクトリ型検索エンジンです。登録サイトはサイトのスクリーンショット付きでカテゴリに掲載しています。
  • 画像掲示板の泉画像やYouTubeやニコニコ動画が貼り付け可能な匿名画像掲示板です。27ジャンルに分かれた掲示板に、それぞれ100スレッドまで立てることが可能です。
  • ツイータンTwitter APIを使って10分おきに収集したTwitter(ツイッター)のトレンドワードや人気ハッシュタグデータを月別に集計してランキング形式で公開しています。
  • Keyword Tool++Yahoo APIや楽天サイトのデータを日次で収集したデータを元に、EC系キーワードをラインキング形式でご紹介しています。各ワードは検索ボリュームや関連語、24か月の検索ボリュームトレンドを確認も可能です。
  • 消費者金融の泉カードローン商品を取り扱う金融業者を一覧で比較可能としたサイトです。カテゴリ別、人気度別、限度額別、金利別に比較可能なサイトにしています。
  • TrendinGファッションモールに出店するブランドをアイテムヒット率でランキングとしたサイトです。まだβ版です。

各サイトの開発方法などについて

各サイトの開発方法や運用トラブルについては、当ブログで不定期にご紹介しています。Twitterで新着記事のお知らせもしています。宜しければフォロー下さい。