Blogger:PC表示/モバイル表示を、JavaScriptにて取得する方法 - BloggerのテンプレートのHTML方式

2015年5月27日水曜日

Blogger:PC表示/モバイル表示を、JavaScriptにて取得する方法 - BloggerのテンプレートのHTML方式

イントロダクション

Google のブログサービス「Blogger」では、PCで表示した場合と、モバイル端末で表示した場合とで、表示を変えることができます。

Blogger:モバイル版のテンプレートをカスタマイズするときに、私がよく使っているもの
http://upa-pc.blogspot.com/2015/05/blogger-mobile-template-customize.html
Dr.ウーパのコンピュータ備忘録

さて、今現在 Blogger ブログが、PC表示をされているのか、モバイル表示をされているのか、JavaScript として取得したい場合があります。

その時には、次の方法が考えられます。

(1) URL のクエリパラメータを見て、PC表示/モバイル表示を判別
現在表示している Blogger ブログの URL のクエリパラメータに、m パラメータが付与されているかどうかでPC表示/モバイル表示をチェックします。

m=1：モバイル表示
m=0：モバイル表示から、PC表示へ切り替えて表示
mパラメータなし：PC表示

BloggerのPC/モバイル表示の切り替え管理方法が興味深い！
http://upa-pc.blogspot.com/2015/01/blogger-mobile-page-to-pc-page.html
Dr.ウーパのコンピュータ備忘録

Bloggerユーザなら知っておきたい、BloggerブログのURL構成まとめ
http://upa-pc.blogspot.com/2015/02/blogger-url-summary.html
Dr.ウーパのコンピュータ備忘録

(2) Blogger のテンプレートの HTML のタグを使用して、PC表示/モバイル表示を判別

Blogger のテンプレートの HTML 内でのみ効果を発揮するタグを使って、PC表示/モバイル表示をチェックします。

今回は、(2) の「Blogger のテンプレートの HTML のタグを使用して、PC表示/モバイル表示を判別」の方法について記載します。

Blogger:PC表示/モバイル表示を、JavaScriptにて取得する方法 - BloggerのテンプレートのHTML方式

以下のコードを、Blogger のテンプレートの HTML の <head> タグの直下に貼り付けます。

<b:if cond='data:blog.isMobile'>
<script type='text/javascript'>
    var blogger_isMobile = true;
</script>
<b:else/>
<script type='text/javascript'>
    var blogger_isMobile = false;
</script>
</b:if>

このコードによって、モバイル表示の場合には blogger_isMobile が true, PC 表示の場合には、blogger_isMobile が false に設定されます。

blogger_isMobile は任意に定義した JavaScript のグローバルな変数です。
この変数は上記のコード以降の箇所において、利用することができます。

なお、Blogger のテンプレートの HTML を編集する場合には、以下の点に注意してください。

Blogger:BloggerのテンプレートのHTMLを編集するときに気を付けること
http://upa-pc.blogspot.com/2015/03/blogger-template-edit-attention.html
Dr.ウーパのコンピュータ備忘録