JavaScriptとユーザーエージェント使ってパソコンやモバイル端末（スマートフォンやタブレット）でメッセージや画像、アフィリエイト広告を振り分ける方法です。
記事内で端末ごとにメッセージを分けたいときや、このブログに使っているテーマ「Luxeritas」のように振り分けできないウィジェットで端末ごとに分けてアフィリエイトコードを貼り付けたいときに役に立ちます。
今回は、この記事の中にパソコンでは「あなはパソコンで見ていますね。」、モバイル端末（Android・iPhone・iPad・iPod）では「あなたはスマホで見ていますね。」とメッセージを変えて表示させます。
WordPressテーマのCocoonではJavaScriptのメッセージはフッター内に表示され正常に動作しないので使用できません（2018 8/13時点）。
表示サンプル
画像はパソコンで見た時の表示。
画像はスマートフォン（タブレット）で見た時の表示。
※画像にある赤枠（ヘッダー）のデザインを変えましたが、JavaScriptの動作に影響ありません
JavaScriptのコード
<script type="text/javascript">
var usag = navigator.userAgent; //OSの情報取得
if ((usag.indexOf('iPhone') > 0 || usag.indexOf('iPad') > 0) || usag.indexOf('iPod') > 0 ||usag.indexOf('Android') > 0){ //PCかスマホ条件分岐
document.write('あなはスマホで見ていますね。'); //スマートフォンに表示
}
else{
document.write('あなたはパソコンで見ていますね。'); //パソコンに表示
}
</script>
パソコンとスマホ（タブレット）でメッセージを変えるコード
コードの解説
navigator.userAgentで閲覧者が使用しているOSの情報を取得しています。
そして、var usagの変数にこのOS情報を代入します。
例として、あなたの端末のOS情報を表示します。
<script type="text/javascript"> document.write(navigator.userAgent); //OSの情報取得して表示 </script>
OSの情報を表示させるコード。この文字列に含まれてるOSの名前で、次のif文で条件分岐させます。
if ((usag.indexOf(‘iPhone’) > 0 || usag.indexOf(‘iPad’) > 0 || usag.indexOf(‘iPod’) > 0 ||usag.indexOf(‘Android’) > 0)
if文でOS情報にスマートフォン（iPhone・iPad・Android・iPod）が含まれているかチェックしています。
usag.indexOf(‘iPhone’)は変数usagの中にiPhoneの文字列が含まれていたら0より大きい数字を返します。（同様にiPad・Android・iPodも）
{
document.write(‘あなはスマホで見ていますね。’); //スマートフォンに表示
}
else{
document.write(‘あなたはパソコンで見ていますね。’); //パソコンに表示
}
スマホとパソコンで分岐させdocument.write(”);でメッセージを表示させてます。
「”」（シングルクォーテーション）で囲んでいるのはアフィリエイト広告タグが「””」（ダブルクォーテーション）を使っているためです。
document.write(“<a href=”test”>”);のような書き方はNG
document.write(“<a href=’test’>”);の書き方はOK
注意点
ウィジェットだと問題ありませんが、JavaScriptを記事内に書くときに<p>タグと<div>タグは使えません。
また、空白行も記事内では使えません。(ただし、コメント行はOK)
<script type="text/javascript">
document.write('<div align="center">中央揃えにしたいけど</div>'); //<div>タグは使えません
document.write('<p>段落にしたいけど</p>'); //<p>タグも使用不可
</script>
記事内で使えないコードの例
他のコード記入例
関数を利用した書き方や、さらに「Android」と「iPhone・iPad（iOS）」に分ける書き方です。
関数を使う方法
外部ファイルなどに関数を書いて、ウィジェットや記事内で関数を呼び出し表示させる方法です。
表示サンプル
function message(){ //端末ごとに分けてメッセージを出す関数
var usag = navigator.userAgent; //OS情報取得
var msg1 = '<font color="red">これはスマホ</font>'; //変数にメッセージを代入
var msg2 = '<font color="blue">これはPC</font>'; //変数にメッセージを代入
if ((usag.indexOf('iPhone') > 0 || usag.indexOf('iPad') > 0) || usag.indexOf('iPod') > 0 ||usag.indexOf('Android') > 0){
document.write(msg1); //スマホに表示させる
}
else{
document.write(msg2); //パソコンに表示させる
}
}
メッセージを出す関数
ここでは、「関数を使う方法」直下にコードを書いてますが、外部ファイルにコードを書くことも可能です。（数が増えると管理がしやすいです）
<script>message();</script>
メッセージ出す関数を呼び出す
ウィジェットや記事内で関数を呼び出します。
パソコン・Android・iOSに分ける方法
パソコンとモバイル端末でメッセージを分けてましたが、さらにAndroidとiOSで分ける方法です。
表示サンプル
<script type="text/javascript">
var msg1 ='iOSですね';
var msg2 ='Androidですね';
var msg3 ='パソコンですね';
if (usag.indexOf('iPhone') > 0 || usag.indexOf('iPad') > 0 || usag.indexOf('iPod') > 0 ||usag.indexOf('Android') > 0){
if(!(usag.indexOf('Android') > 0)){
document.write(msg1); //iOSで表示
}
else{
document.write(msg2); //Androidで表示
}
}
else{
document.write(msg3); //パソコンで表示
}
</script>
パソコン・Android・iOS（iPad・iPhone・iPod）で異なるメッセージを出してます。
if文が入れ子にになってるので、もう少し分かりやすい書き方がありそうです・・・
まとめ
アフィリエイトの広告や画像、メッセージなんかも端末ごとに分けることが出来るのでかなり便利かと思います。
少し応用して、パソコンで広告「a,b,c」をランダムで表示、モバイル端末で広告「A,B,C」をランダムで表示させることも可能です。
（複数の広告をランダムに表示させアドセンス風に）
また、閲覧してるページURLを取得して固定ページなどの特定のページのみ広告を変えたり表示させないこともできます。
他の端末も振り分ける場合
ゲーム機などの他の端末も振り分けたい場合は以下のサイトを参考にしてください。
UserAgentからOS/ブラウザなどの調べかたのまとめ【Qiita】
任天堂ハードのブラウザのユーザーエージェント一覧【はりをきば】
usg.indexOf(”)のカッコ内を3DS・New 3DSは「3DS」、PS Vitaは「Vita」と記入すればOKです。
ちなみに、PlayStationやNintendoで書くとメーカー毎になります。
テーマCocoonで正常動作しません
2018年8/13時点のCocoonバージョン1.1.2では上記プログラムは正常に動作しません。
どうもCocoonのテーマ使用で記事内に<script>タグを入れても表示の時は<body>最下部に移動されフッター下に出力（表示）されるようです。
プラグインの干渉やサーバーキャッシュの問題かとも思いましたが、新規にインストールしたWordPressにテーマCocoonだけインストールして記事本文にサンプルコード書いても同じくフッター下に表示されました。
<script>document.write("Hello World");</script>
※JavaScriptで「Halo World」を表示するサンプルコード
Cocoonでは使えませんが、Simplicityで正常に動作することを確認しています。
