OLYMPUS DIGITAL CAMERA
前回スタッフブログにかいたのが1月なので約5ヶ月ぶりにスタッフブログを書く龍司です。
今日は久しぶりのXOOPS Cubeネタです。
最近、XOOPS Cubeでサイト構築するときには1つのXOOPS CubeでPCサイトとスマホサイトの両対応をすることがほとんどです。
最初からテーマをレスポンシブ対応させてという方法もあるのですが、RYUSにご依頼いただくケースではスマホ用はスマホ向けのデザイン、PC用はPC向けのデザインを見せたいというご要望が多いので、テーマはPC向け、スマホ向けそれぞれ用意することがほとんどです。
ちなみにテーマの切り替えには iPhone用テーマ切り替えプリロード を使ってます。
さて、そうやってテーマはPCとスマホで全く別モノにすることができるわけですが、Pico等のコンテンツ中に書いたJavaScriptやstyleタグをPCかスマホ一方だけで有効にしたいケースがでてきました。
たとえば
<style type="text/css">
...ここにPC向けのスタイル
</style>
<script>
... ここにPCだけで有効にしたいJavaScript
</script>
ここから通常のHTMLもちろんかわりにスマホ用のstyle記述等を足したいってケースもあります。
というわけでそれができるようなプリロードファイルを作成してみました。
・HTML置換プリロード htmlReplace.class.php
使い方は単純です。
XOOPS_ROOT_PATH/preload下にhtmlReplace.class.phpを配置します。
あ、リンク先のプリロードファイルではスマホ用テーマはsmartphoneという名前でつくったときの例になってるんで別の名前のテーマだったら20行目のsmartphoneをそれぞれご自身の環境にあわせて書き換えてから配置してくださいね。
あとはコンテンツ中でPC用の記述は <!–4PC–> 〜 <!–/4PC–>でかこい、スマホテーマ用は<!–4SMARTPHONE–> 〜 <!–/4SMARTPHONE–>でかこえばOKです。下記の様な感じです。
<!--4PC-->
<style type="text/css">
...ここにPC向けのスタイル
</style>
<script>
... ここにPCだけで有効にしたいJavaScript
</script>
<!--/4PC-->
<!--4SMARTPHONE-->
<style type="text/css">
...ここにスマホ用のスタイル
</style>
<!--/4SMARTPHONE-->
ここから通常のHTMLpicoのコンテンツだけでなく、カスタムブロックでもテーマでもモジュールのテンプレートでもこの記述は有効です。
使い処は少ないとは思いますが、私と同じようなことをやる必要がでてきたときにでもご利用ください。
[Ads]
よくわかるAuto Layout iOSレスポンシブデザインをマスター
posted with ヨメレバ
川邉 雄介 リックテレコム 2016-06-17