WEBスクショ機能付の登録式リンク、猫ネコサーチのリニューアルをしました

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

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

この記事の目次

1 Bootstrapのテンプレート
2 猫ネコサーチエンジンの機能
3 おわりに

Bootstrapのテンプレート

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

Material Kit 2

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

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

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

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

Unify

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

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

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

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と同時期にスタートした猫・ペットサイトのサーチエンジンで、アクセス数はこちらの方が全然多かったのですが、データ欠損で登録サイト情報が破損してしまったりのトラブルもあり、０からのスタート状態になってしまっていたりします。

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

ABOUT dtn.jp

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

dtn.jp関連サイト

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

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

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