読者です 読者をやめる 読者になる 読者になる

攻めは飛車角銀桂守りは金銀三枚

ITとアコースティックギター、そして日常のひとこま。

「はてなブログ」でHTML5のカスタムデータ属性を使ってパソコン、スマホからのアクセスかを見分ける方法

はてな
スポンサーリンク

はてなブログでは自分のブログがパソコンからアクセスされたのかスマートフォンからアクセスされたのか簡単にわかる方法があります。

HTML5で利用可能になったカスタムデータ属性「data-*」を参照

自分のブログがパソコンからのアクセスかスマートフォンからのアクセスかを見分けるのには一般的には「CSS メディア クエリ」で切り分けるのが良いのでしょうが、書式が面倒だったりします。

<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
<link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">
<style>
  @media (min-width: 500px) and (max-width: 600px) {
    h1 {
      color: fuchsia;
    }
    .desc:after {
      content:" In fact, it's between 500px and 600px wide.";
    }
  }
</style>

はてなブログでは「パソコン」か「スマートフォン」の切り分けしかできませんがHTML5でカスタムデータ属性「data-*」に「data-device」という値が設定されておりそれを参照することで判断ができます。

カスタムデータ属性「data-device」を参照するスクリプト例

以下は実際のJavascript例です。

<script>
$(function(){
    if( document.querySelector("html").getAttribute("data-device") == "pc"){
        //PCの処理
    }else{
        //スマホの処理
    }
});
</script>

こんな感じで判断できます。

しかしながら「pc(パソコン)」と「touch(スマホ)」の2種類しかないのかiPadmini2でも「pc(パソコン)」と値が設定されています。
(「touch(スマホ)」はiPhoneSEで調べました。)

この2種類しかなく「縦」も「横」もわからないので簡単な処理にしか使えませんが、スマホとPCで広告のバナーサイズを変えるくらいには十分使えます。

そのほかに設定されているカスタムデータ属性

ほかにもカスタムデータ「data-page」属性が設定されています。
これを見ると表示されているページの種類がわかります。

属性名意味
data-pageindexトップページ
entry記事ページ
archiveカテゴリページ、月ページ
aboutプロフィールページ