画像掲示板の設置

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

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

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

プログラム概要

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

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

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

画像データの保持方式

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

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

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

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

おわりに

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

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

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

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で新着記事のお知らせもしています。宜しければフォローどうぞ。