突然ですが、このブログではOpenCage製のWordPressテーマ”Stork”を使っています。
（「テーマ」ってのはサイトのデザインのテンプレみたいなモノだと思ってください）
このStork、なんか有名なブロガーとかがやたら使っているのでよく見かけると思うんですが、使いやすいので特に自分でCSSとか書きたくないって人にはオススメです。
そして、そんなStorkに対応したスマホ用のフッターメニュー（画面下に出てる「フォロー」とか「シェア」とかのやつね）を超簡単に導入できるのが、ザ・サイベースさんで販売されている「フッター固定メニュー」です。
なんと値段は1,000円。やっす！
このクオリティで1,000円なんてもうタダみたいなもんなんで、見た瞬間即買いしました。
導入作業も簡単で、めっちゃ気に入って満足度ハンパない。
かなりオススメなのでStorkユーザーは是非。
もくじ
いつの間にかFacebookの仕様が変わり、画面が狭くなった
ところが最近、Facebookに投稿されたリンクを開いてみたら、画面の下に色々といらんもんが表示される仕様に変わっていました。
こんな感じ。これいる？
この状態で、これまで通りにフッターメニューを表示させていると、ちょっと画面が狭すぎますね。
さすがにFBのいろいろ+固定フッターだと、あまりにごちゃごちゃして見づらいのでなんとかしたい。
でも、とみっちさんのフッターメニューはすごく気に入ってるので、無くしたくはない。
というわけで、解決策としてFacebookアプリからブログを開いた時にだけ、フッターメニューを非表示にするコードを書いてみました。
Facebookアプリからのアクセス時のみフッターメニューを非表示にする
今回はPHP側でUA（ユーザーエージェント）を取得し、Facebookアプリからの閲覧時のみ表示しないように設定したいと思います。
なお、Android持ってるけど面倒なので、とりあえずiOSだけで検証。
手順は以下。
- $_SERVER変数からUA（ユーザーエージェント）を取得
- ユーザーエージェントの文字列からFacebookアプリかどうか判定
- Facebookアプリからのアクセスならフッターを表示しない
では、具体的なやり方を順を追って解説していきます。
Step1. UA（ユーザーエージェント）の確認
まずは、Facebookアプリのユーザーエージェントを確認しましょう。
ユーザーエージェントとは、ざっくり言えばサイトにアクセスしたきたユーザーのデバイスの種類（PCかスマホか、iPhoneなのかAndroidなのかとか）や、使用したブラウザ（Safari, Chrome, Firefoxとか）などの情報がわかるもの。
別にこれで個人が特定できたりはしないので心配しなくてok。
とりあえずググってみたところ、Facebookアプリのユーザーエージェントはこんな感じらしい。
“FBAN”とか”FBIOS”とか、とりあえず”FB”って文字が含まれるっぽい。
一応、自前のiPhoneでFacebookアプリのUAを確認してみる。
今回、確認に使ったのは確認くん。
Facebookアプリからこの確認くんにアクセスすることで、ユーザーエージェントなどいろいろな情報を確認できます。
Step2. UA（ユーザーエージェント）に’FB’の文字があったら非表示
Facebookアプリのユーザーエージェントがわかったので、これを利用して表示わけの処理を書いていきます。
今回は、ユーザーエージェントに”FB”の文字列が含まれていたら、フッターメニューを非表示にすることにします。
ちょっとザルな条件のような気がしなくもありませんが、あまりこれに時間かけたくないのでとりあえずこれで。
問題が出るようなら後で直すスタイルでいきます。
$_SERVERからユーザーエージェントを取得
PHPでユーザーエージェントを取得するには、$_SERVER変数を利用します。
$_SERVER[‘HTTP_USER_AGENT’]と書いてやれば、ユーザーエージェントの文字列を取得できます。
一応、isset()関数を使って、ユーザーエージェントがあるかどうかを判定します。
strpos()で文字列が含まれているか判定
ユーザーエージェントの文字列が取得できたら、”FB”の文字列が含まれるかを判定します。
文字列が含まれるかどうかの判定には、
- 正規表現(preg_match)を使う
- 単純に文字列の検索を行う (strpos())
などの手段が考えられます。
PHP公式リファレンスによると、単に文字列が含まれるかどうかを判定するだけなら、正規表現を使うよりもstrpos()の方が早いとのこと。
なので、今回はpreg_match()ではなく単純にstrpos()を使います。
strpos(対象の文字列, 検索したい文字列)って感じで、第1引数に対象となる文字列（今回はユーザーエージェント）を、第2引数に検索したい文字列（今回は”FB”）を渡します。
検索したい文字列が含まれていた場合、strpos()はその文字が最初に現れる位置のインデックスを返し、文字列が見つからなかった場合はFalseを返します。
なので、「ユーザーエージェントに”FB”が含まれていない場合」の判別は以下のように書くことができます。
ユーザーエージェントがある && “FB”が含まれていない時のみフッターを表示
では、固定フッターメニューを表示する部分のコードがあるfooter.phpに、分岐の処理を追加します。
「Facebookアプリからのアクセス時に固定フッターを表示しない」という条件は、「$_SERVERにユーザーエージェントが設定されていて、かつそのユーザーエージェントに”FB”が含まれていない場合のみ固定フッターを表示する」ということなので、コードは以下のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php if(is_mobile()): // そもそもスマホかどうか判定する ?> <!-- ユーザーエージェントがある && “FB”が含まれていない時のみフッターを表示 --> <?php if ( isset($_SERVER['HTTP_USER_AGENT']) && strpos($_SERVER['HTTP_USER_AGENT'],'FB') === false ) : ?> <!-- スマホ固定フッター --> <?php endif; ?> <?php else: // スマホじゃなかった時の処理 ?> <!-- PC、タブレット ページトップボタン --> <div id="page-top"> <a href="#header" title="ページトップへ"><i class="fa fa-chevron-up"></i></a> </div> <?php endif; ?> |
結果
できた。
Facebookアプリからこのブログを開くと、フッターメニューが表示されなくなっている。
けど、SafariやChromeから開いた時は、いつも通りフッターメニューが表示されている。
感想
今回はPHP側でUA判定・表示わけをしましたが、もしかしたらJSで画面サイズ取得→判定して非表示とかでもよかったかもしれないですね。
できれば完全に非表示にしてしまうんじゃなくて、スクロールに合わせて下に引っ込んだりまた出てきたりするようにしたいところ。
ただ、今はPythonとかでクローラー作ってる方が楽しいので後回し。
そのうち気が向いたら実装して記事にまとめたいと思います。
参考にしたもの
PHPでユーザエージェントや引数からデバイスを判定 – Qiita
http://qiita.com/nowmura/items/0159233f672542619058
iPhoneのアプリ内WebViewのUAまとめ(2015/12/15時点)とjsでの判定方法 – Qiita
http://qiita.com/nabettu/items/e481412c4ca0f50e7fb5
$_SERVER – PHP.net
https://secure.php.net/reserved.variables.server
strpos – PHP.net
http://php.net/manual/ja/function.strpos.php
