スクリーンショット付きのペットサイト用登録式リンク集、猫ネコサーチエンジンというサイトをやっていますが、久しぶりにリニューアルをやってみたので、そのご紹介をしたいと思います。

さくらサーバのプラン変更をした影響で、PHPエラーが多数発生していたのを修正したついでにフロントも直しただけですが、中途半端にDB化をして放置してしまっていた画像掲示板も作り込むことができたので、これでひと段落ついたかと思っています。

新しくなった猫ネコサーチエンジンTOPページ
新しくなった猫ネコサーチエンジンTOPページ
この記事の目次
  1. Bootstrapのテンプレート
    1. Material Kit 2
    2. Unify
    3. PHPにテンプレートを組み込む方法
  2. 猫ネコサーチエンジンの機能
    1. 登録リンクはスクショ付きでご紹介
    2. アクセスランキングとリンク
    3. 登録リンク管理画面
    4. 画像掲示板
  3. おわりに

Bootstrapのテンプレート

見ていただくと分かると思いますが、今回もBootstrapテンプレートのお世話になっています。前回は「Material Kit 2」というBootstrapテンプレートを利用してリニューアルをしましたが、テンプレートの雰囲気がサイトにあまり合わなかったようなので、今回は別のBootstrapテンプレートの「Unify」を使ってリニューアルをしてみました。

Material Kit 2

前回のリニューアル時に使ったテンプレートは、Creative Timさんが提供しているBootstrapテンプレートの「Material Kit 2」でした。2014年頃からGoogleが推奨しているマテリアルデザインを手軽に適用させることができるテンプレートで、なんとこれが無料で提供されています。

Material Kit 2 Bootstrapテンプレート
Material Kit 2 Bootstrapテンプレート

↑のように、トップヘッダの背景画像上にメニューやタイトルがかっこよく配置されていて、まさに紙の上にオブジェクトをパッと置いたような、マテリアルなデザインをすぐに実現できるのですが、このインパクトあるヘッダ部分を全然うまく使うことができませんでした。

前回リニューアルしたときに書いた記事に当時のスクショが残ってました。良い猫画像が手元になく、つい飼い猫ちゃんの画像をデカデカとのせてしまったのですが、スマホで見るとそこそこいい感じだったものの、PCではサイズが大きくなりすぎて、今思ってもかなり微妙な感じになってます。ぱっと見、サーチエンジンには全然見えません。

WEBスクリーンショット機能付の登録式リンク集

Unify

今回のリニューアルで使ったのが、このBootstrapテンプレートの「Unify」です。こちらは有料のテーマになってしまいますが、正直これがあれば他はいらないというくらい、一家に一セットおススメのテンプレートです。

Unify Bootstrapテンプレート

Unifyテンプレートの素晴らしいところは、テンプレートのパーツ種類がめちゃくちゃ豊富なことと、更新を頻繁にしてくれているところにあるといえます。

ヘッダのメインコンテンツ部分デザインだけでも１５種類のデザインパターンが用意してあります。ベースデザインでこれだけあれば、ブログのトップページやコーポレートサイトまで何でも作れそうです。

UnifyのHero Sectionsデザインパターン

PHPにテンプレートを組み込む方法

用意したHTMLテンプレートをPHPに組み込ませる方法はいくつかあると思いますが、せっかくのテンプレートなので、そのままテンプレート化して使う方が無難と思います。

PHPで外部HTMLを読み込むのであれば、file_get_contents()を使うのが一番楽ですが、なんとなく昔からのクセでfopen()・fread()を未だに使ったりしています。

function read_file($filepath){
    $fd = fopen($filepath, "r");
    $content = fread($fd, filesize($filepath));
    fclose($fd);
    return $content;
}

$html = read_file("xxxxx.html");

//テンプレの置換をしたり
$html = str_replace("***TITLE***", $title, $html);

方法はともかく、PHP側で読み込みをすれば、テンプレート側に用意した置換用文字列をDBデータに置き換えるとかで色々と使い倒すことができます。

猫ネコサーチエンジンの機能

最後に、猫ネコサーチエンジンの主な機能をご紹介します。

登録リンクはスクショ付きでご紹介

サイトの登録申請時にGoogleのPagespeed APIを使い、WEBサイトのスクリーンショットを取得します。カテゴリにはスクリーンショット付きでリンクが掲載されます。

スクリーンショット付きでサイトをご紹介
スクリーンショット付きでサイトをご紹介

登録リンクがまだまだ少ないため、掲載されると凄い目立ちます。

アクセスランキングとリンク

掲載サイトのリンクがクリックされると自動的にカウントを取ります。ランキングページではクリックカウントが多い順にご紹介もしています。

クリックカウントはjavascriptでカウントしているので、aタグのhref属性には登録URLがそのまま入ります。もちろん、nofollow属性なんて付けず、猫ネコサーチエンジンからのリンクとしてしっかりご紹介しています。

<a  href="https://sannekoyonneko.hateblo.jp/"

登録リンク管理画面

登録して下さった管理者さま専用の管理画面をご用意しています。登録サイトの情報編集やスクリーンショットの再撮影、登録データの全削除もできるようにしています。

猫ネコサーチエンジン管理画面
猫ネコサーチエンジン管理画面

画像掲示板

前回途中まで作った画像掲示板を、今回は雑談掲示板、迷子猫・保護猫掲示板、里親募集掲示板の３ジャンルに増やしてきちんとご用意しました。都道府県・市区町村JSONデータを使って、投稿時に都道府県→市区町村も選択しやすくしています。

猫画像掲示板ございます
猫画像掲示板ございます

おわりに

元々ディレクトリ型検索エンジンdtnと同時期にスタートした猫・ペットサイトのサーチエンジンで、アクセス数はこちらの方が全然多かったのですが、データ欠損で登録サイト情報が破損してしまったりのトラブルもあり、０からのスタート状態になってしまっていたりします。

またのんびり運営していきたいと思っていますので、猫・ペット関連サイトをお持ちの方は、お気軽にご登録下さい。