---

ということで、カクテルDBの改修はこれで終わりなのですが、ついでにもうひとつ手を加えたい箇所があるんですよ。それがTwitterカードですね。


このあたりの技術的なお話は前にも触れたんですが、まあ日記ということで取り上げようかなと。


twitterカード自体はheadタグにmeta情報として色々ぶっこんでおけば表示はされるんで、秒で実装終わるかな〜と思ってたんですが、どうやらSPAで構築されたサイトだとtwitter側がJSを認識してくれないということらしく。
一応簡単に説明すると、あのカクテルDBはHTMLではなく一枚のjavascriptファイルで構成されており(正確には1枚のファイルを分割し、その場で必要なもののみを取り込んでる、って感じです)、要すると普通のPHP＆HTMLで構成されたページではない、ということですね。
Googleのクローラーはjavascriptを解釈してくれるみたいですけどtwitterは解釈してくれないみたいなので、そのあたりをこちらがわで配慮しなくてはいけないみたいです。



具体的な対応方法としてはこのエントリに書かれてます。方針としてはSNSのクローラに対しては処理をサーバー側に飛ばすということで対処するみたいです。つまり、ユーザーからアクセスがあったら通常通りjavascriptを表示し、クローラーからアクセスがあったらサーバーにアクセスさせ、つまりPHPで処理すればいいよねというお話になります。言ってることはめちゃくちゃ簡単です。



まず、こんなふうに.htaccessを書き換えるみたいです。.htaccessの書き換えって大体失敗するから嫌いなんだよなぁ･･････（）



で、リダイレクト先のファイルはこんな感じ。めちゃくちゃ簡単そうな感じなので作っちゃいましょ〜。


とはいえ、実はちょっと考えなくてはいけないところがあって、カードを作るべきページが「カクテル」「カテゴリ」「ミドルカテゴリ」「銘柄」「その他(indexとか)」と5つに分かれているのが問題なんですよね。
これをどう解決するかっていうと、たぶんRewriteRuleを5分岐させて、処理をひとつにまとめる、というのをやればいいかなと。
とはいえ、アドレスが基本的に/detail/○○/idの形になってるので、実際はアドレスにdetailが含まれるか否かで分岐しちゃってもいいような気がする。んじゃ作ってみましょ。



ということで、コードはこんな感じになりました。相変わらず突貫工事なコードなのでもうちょっとシェイプアップできそうな気もしますけど、どうせそんな管理するようなコードじゃないはずなのでこんなもんでいいでしょう。
とりあえず何回かテストしてみて動くことを確認したのでよしとします。


その結果･･････



こうだったのが･･････



こんな感じになりました。画像が表示されてませんが、スマホで見ると表示されているのでtwitter側の都合です。これに関しては以前から気になってるんですが、原因不明なんで諦めてます。



あと、ついでに･･････




右上のここをリンクにしてランダムアクセスを実装してみました。要するにランダムなページに飛ぶリンクなので、なんかぱっとしないページに飛んだ時はここをクリックすると未知との遭遇が楽しめることになります。
仕様としては、カクテル、親カテゴリ、ミドルカテゴリ、銘柄をそれぞれ1/4の確率で抽選してから、そのカテゴリ内でランダムに1件取得してくる、っていう仕様にしました。カクテルのデータの数が圧倒的に多いため、カクテルのページばっか引いてもつまらんかなと思いまして･･････(笑)


とりあえずカクテルデータベースに関してはこれで一旦改修を終わりにして、再びデータをちまちま入れていこうかなと思います。
所々表示が崩れてるところとか確かあったような気がしますが、僕がコードを書きたくないのでもう致命的なバグが発生しない限りはコードに手を触れないつもりではいます。はい。

とりあえずこれでちょっとは収入アップにつながればいいなー、って感じです。よろしゅう。