日々のコンピュータ情報の集積と整理

Dr.ウーパのコンピュータ備忘録

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.ウーパのコンピュータ備忘録


まとめ

BloggerブログのPC表示/モバイル表示を、JavaScriptにて取得する方法として、BloggerのテンプレートのHTMLを使う方法があります。

ブログがPC表示されているときと、モバイル表示されているときで、異なる処理をさせる場合に役立つでしょう。




Kindle版 楽天 7net




関連記事

関連記事を読み込み中...

同じラベルの記事を読み込み中...
Related Posts Plugin for WordPress, Blogger...