facebookのページタブで読み込むページをスマホも同時対応させるときのお話

facebookのページタブを読み込んで、その中でHTMLを表示したいとか、
アプリ的な事をやりたいとかそういうときに、
同時にスマホ対応もしたいときにどう書いたらいいのか的なお話。

ちなみにスマホではページタブは表示する事が出来ないので、
読み込まれる側のURLにまずはアクセスさせて、PCだったらページタブに遷移させるのがよい。

ということで今日はページタブで読み込まれるURLにアクセスしたら、
PCかどうかで判別してページタブに遷移させるかどうかという方法を書いてみる。

■読み込まれるURLにアクセスした際にユーザーエージェント判別

PHPで作成してもいいけど、諸々の関係上jsでこれは判別した方がよい。
以前書いたJavaScriptによるUserAgent判別を使えば判別は容易になる。
実際はちょこっと改造してあげる必要があり、
iPhoneだけでなく、iPad・iPodもiPhone扱いに、
Androidはmobileに関わらずAndroidでに、という風に改造してあげる必要がある。
ということでそれを踏まえた場合の記述は下記になる。

var ua = getUA();
if(ua != "iPhone" && ua != "Android"){
  location.href = "FacebookページタブのURL";
}

これでPCからアクセスした際にFacebookページタブに飛ばす事が出来る。
ただこれだとFacebookページタブのiframe呼び出しでループがかかってしまって見れなくなってしまう。
なのでそれを解決する方法は下記になる。

■Facebookページのタブから読み込まれている場合は、遷移しないようにする

if(self == top){
  //hogehoge
}

このselfとtopはjsで定義されているオブジェクトであり、locationに関するオブジェクトである。
iframeから読み込まれるとselfの値が変更されることを利用すると下記が正しい方法になる。

var ua = getUA();
if(ua != "iPhone" && ua != "Android" && self == top){
  location.href = "FacebookページタブのURL";
}

これで何も問題なく、目的の動作になる。

ということでこんな感じで行えばよかったりする。
ここ1年以内で一気にスマホでも！という案件も増えてきており、
意外とこういう細かいところというのは調べても出てきたり出てこなかったりするけど重要だったりするので、
ちゃんと忘れずにやっていきたいところである。