プレイ無料!ブラウザで遊べるHTML5ゲームサイト!

TOP> 記事一覧> タグ検索が出来るようになりました

2017/04/06

タグ検索が出来るようになりました

タグ: 技術 サイト改修 ブログサイト作成

このエントリーをはてなブックマークに追加

昨晩から完全に飾りと化していたタグがやっと機能するようになりました
作ってから思ったのがカテゴリでは?という疑問です。

とはいえ、ゆくゆくは必要な機能となるのでこの段階で実装しておいてバチは当たらないかなと思ってます。


出来ること

タグが一致する記事のみ表示する事ができます。(画像は「技術」で絞り込んだ場合)


実装手順

0.TOXI法でのテーブル作成

当サイトは何故かテーブル作成を先にやってソート機能を実装してなかったので、
以前にテーブル作成自体の説明は以下にて紹介しています。

参考にしたサイト:

CakePHPとMySQLで作るタグ機能 ①テーブル設計


1.記事一覧ページにタグIDを受け渡す

今回の例ではURLパラメータとしてリンクの後ろに付与する形にします。
もっとスマートなやり方はあると思いますが、何らかの形で記事一覧ページにタグIDをパラメータとして渡せればOKです。

タグのテンプレートhtml


<span class="info_tag">
	<a href="./info_list.php?tag_id={tag_id}">
		{tag_name}<!--タグの表示名-->
	</a>
</span>

これをphpで各記事毎に表示すれば、タグ部分をタップ(orクリック)した時にタグIDが受け渡された記事一覧ページに遷移します。


2.記事一覧ページのSQL文を出し分ける

記事一覧ページはSQLでどの記事を表示するか条件分岐しているかと思います。
タグIDを取得・処理した後のSQL文を解説します。

作る人によってカラム名やテーブル名など変わるかと思うので、上記の図に則って【】にしておきました。
【T:】がテーブル名で【C:】がカラム名です。適宜書き換えて頂ければと思います。

//IDが$tag_idのタグが付いている記事のみ取得するSQLを$sqlに入れる部分

//1.記事マスタの内一覧表示に必要なデータを記載
$sql = "SELECT mst.【C:取得したいカラム名】,…… ";

//2.記事マスタに記事タグデータを外部結合する
$sql = $sql . "FROM 【T:記事マスタ】 mst LEFT JOIN 【T:記事タグデータ】 map ON mst.id = map.【C:記事ID】 ";

//3.さらにタグマスタも外部結合する
$sql = $sql . "LEFT JOIN 【T:タグマスタ】 tag ON map.【C:タグID】 = tag.id ";

//4.タグマスタのタグIDと$tag_idが同じ物のみ取り出す
$sql = $sql . "WHERE tag.id = " . $tag_id . " ";

//5.記事IDの大きい順に並び替える(必要なら)
$sql = $sql . "ORDER BY mst.id DESC";

なお、記事IDが取得できなかった時の処理も追加しておくと吉です。
当サイトでは、タグIDを取得できなかった時は単純な記事IDが大きい順にしてます。

バックエンドは大体苦手意識があるんですが、SQL文は特に強い苦手意識があります。
なので、SQL文をスラスラ書き上げられる人って頭の構造違うなぁと思います。

ただ、苦手苦手で逃げられる分野でも無さそうなので、ちゃんとコメントしてみました。
参考にしたサイト様では解説は省かれておりました。。。やはり簡単なのかもしれませんね。

参考にしたサイト:

MySQL,MariaDBでタグ機能(TAG)を実現する(TOXI法)④SQL応用

LEFT JOINとRIGHTを指定して使って表を結合する


結局……

タグじゃなくてカテゴリなんじゃないか?とは思います

とはいえこれで技術記事とは関係ない料理音楽の記事をこれから作ったとしても、
技術記事だけ見たい人でも大丈夫になるのかなぁとは思います。

サイドバーに記事数の多いタグを並べることも出来るのかなぁと思います。
やっぱりWordPress使ったほうが良かったんじゃないか?とも思います。


感想・リクエストなどは公式Twitterアカウント(@santmove_com)まで是非ご連絡よろしくお願いいたします!
また、ゲームの感想なども励みとなりますのでよろしくお願いいたします!

ではまた!

santmove.

矢印Fever

矢印Fever

ノリノリでフリックしてフロアを沸かそう!手持ちの音楽を聴きながらのプレイがオススメ!


当サイトはブラウザで遊べるゲームサイトです。

最新のゲームです!
Rotate Number Panels

Rotate Number Panels

ロテパネって呼んでね!キレイなパネルをクルクル回して数字を並べよう!相当頭をつかうよ!

人気のゲームです!
避けて食べてペンギンタワー

避けて食べてペンギンタワー

ペンギンだって暖を取りたい!氷を避けて登って、アツアツ料理を食べよう!

よかったら遊んでいって頂けると幸いです!面白かったら是非シェアしてください!

また以下のリンクよりお買い物頂けるとサイト運営の助けとなりますので、もしよろしければ是非よろしくお願いいたします!

楽天市場

amazon

良ければ是非いいね・シェアしてください!

このエントリーをはてなブックマークに追加

この記事のコメント

この記事にはまだコメントがありません。
はじめてコメントしてみませんか?


ログインするとコメント出来ます!
ログイン
無料アカウント作成

ログインしていません!

アカウントを作るとスコアの保存・閲覧が可能です!(無料です)
アカウントを作る!

サイト運営者

運営:サントムーブ

案件の依頼や問い合わせなどはコチラ!

メンバー

santmove.

プログラマー(代表)

最近更新されたゲーム

メニカラモザイク

New! 2019/05/24 更新

将棋ライフゲーム

New! 2019/05/17 更新

夜景と炒飯

2019/04/14 更新

ID Typing_

2019/04/07 更新

新着公開ゲーム

将棋ライフゲーム

New! 2019/05/17 公開

Rotate Number Panels

2019/03/10 公開

記憶丼

2019/02/24 公開

スシバタケ

2019/02/17 公開