JavaScriptでパソコンとモバイルでメッセージを変える方法 | コピペから応用へ!

JavaScriptでパソコンとモバイルでメッセージを変える方法

シェアする

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

JavaScriptとユーザーエージェント使ってパソコンやモバイル端末(スマートフォンやタブレット)でメッセージや画像、アフィリエイト広告を振り分ける方法です。

記事内で端末ごとにメッセージを分けたいときや、このブログに使っているテーマ「Luxeritas」のように振り分けできないウィジェットで端末ごとに分けてアフィリエイトコードを貼り付けたいときに役に立ちます。

今回は、この記事の中にパソコンでは「あなはパソコンで見ていますね。」、モバイル端末(Android・iPhone・iPad・iPod)では「あなたはスマホで見ていますね。」とメッセージを変えて表示させます。

表示サンプル

点線の枠内に表示されます。

20170124054531
画像はパソコンで見た時の表示。

20170124054707
画像はスマートフォン(タブレット)で見た時の表示。

※画像にある赤枠(ヘッダー)のデザインを変えましたが、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で書くとメーカー毎になります。

スポンサーリンク

このブログはレンタルサーバーmixhost
運営してます。

シェアする

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

フォローする