keyword/HypCommonPreLoad/HYP_K_TAI_RENDER [携帯対応レンダー] - xpWiki::Dev

TOP » xpWiki::Dev » keyword » HypCommonPreLoad » HYP_K_TAI_RENDER

[ New | List of pages | Search | Recent changes | Help ]

[ Referer ]

Table of contents

携帯対応レンダー

携帯対応レンダー

HypCommonPreLoad に含まれる出力フィルターで、XOOPSを丸ごと携帯対応にすることができます。

この機能を利用するには、サーバーに HypCommonFunc をアップロード後、XOOPS に HypCommonPreLoad を導入し、HypCommonPreLoad の設定を行ってください。
簡単ログイン機能を使用するには、XOOPS_TRUST_PATH/cache ディレクトリに書き込み権限が必要です。
外部サイトに移動するために「外部リンク用リダイレクトスクリプト」が必要です。
デフォルトでは、[ XOOPS_ROOT_PATH/class/hyp_common/redirect.php ] が設定されています。
サーバー上に該当ファイルがない場合は、redirect.php(ダウンロード) を XOOPS_ROOT_PATH/class/hyp_common ディレクトリに配置してください。
HypCommonFunc Ver 20080626 以降で、RSS 出力にも対応しています。
HypCommonFunc Ver 20080717 以降で、各モジュールのテーマ下テンプレートに対応しています。
- 各モジュールのテーマ下テンプレートは、モバイルテンプハウスなどで入手できます。
HypCommonFunc Ver 20080720 以降で、携帯絵文字に対応しています。携帯三社とPCで絵文字の自動変換を行い、変換できない絵文字は画像で表示されます。
- アーカイブ中の htp_common/html/images/emoji ディレクトリ以下を XOOPS_ROOT_PATH/images に忘れずアップロードしてください。
- 詳しくは、Blog:携帯絵文字に対応してみたやフォーラム:[HypCommonFunc] Ver 20080720 携帯絵文字に対応を参照してください。

注意事項: HypCommonFunc Ver 20080720 以降に含まれる SoftBankの絵文字を営利目的でホームページ、ソフトウェア、書籍等で利用される場合は、以下のアドレスから事前に連絡する必要があります。
http://creation.mb.softbank.jp/web/web_privacy.html

XOOPS のテーマ調整

HypCommonFunc Ver 20080717 以降では、デフォルトで携帯対応レンダー専用のテーマセット(ktai_default)を使用し、各モジュールのテーマ下テンプレートに対応しています。

携帯対応レンダー専用のテーマセットを使用する場合は、テーマの調整は不要です。

一方、携帯対応レンダー専用のテーマセットを使用しない場合は、設定で

// 携帯用テーマセット
$this->k_tai_conf['themeSet'] = '';

とします。その場合は、通常のテーマセットが使用されます。

通常使用するテーマセットが DIVレイアウトの場合は、そのままでもある程度、携帯で見やすい形で表示されますが、TABLE レイアウトの theme では、コンテンツ部分を先に表示したりと、HTMLの再構成をしないと、実用的でない場合があります。

HTML の再構成をする場合は、携帯対応レンダーが適切に部分抽出できるように、簡単なタグを仕込む必要があります。

HTML 再構成用タグの説明

使用できるタグは、設定項目にある「HTML再構築用タグ設定」のキーワードを利用したタグなります。規定値では、次のタグが使えます。

開始タグ	終了タグ
<!--headerlogo-->	<!--/headerlogo-->
<!--headerbar-->	<!--/headerbar-->
<!--breadcrumbs-->	<!--/breadcrumbs-->
<!--leftcolumn-->	<!--/leftcolumn-->
<!--centerCcolumn-->	<!--/centerCcolumn-->
<!--centerLcolumn-->	<!--/centerLcolumn-->
<!--centerRcolumn-->	<!--/centerRcolumn-->
<!--content-->	<!--/content-->
<!--rightcolumn-->	<!--/rightcolumn-->
<!--footerbar-->	<!--/footerbar-->
<!--HypKTaiIgnore-->	<!--/HypKTaiIgnore-->

"" 以外のそれぞれのタグで囲まれた範囲が、XOOPS_TRUST_PATH/class/Hyp_common/ktairender/templates/default ディレクトリ内にある

header.html [ページヘッダ]
body.html [コンテンツ部分(必要に応じて分割され、ページナビゲーションが付加されます)]
footer.html [ページフッタ]

各ファイルの該当キーワードタグと置換され、「HTML再構築用タグ設定」の各キーの 'above' の内容が前方に、'below' の内容が後方に挿入されます。

例外として、"" と "" で囲まれた範囲は、出力から除去されます。*1

例えば、XOOPS Cube Legasy の "cube_default" テーマにおいて、"leftcolumn" を設定する場合は、theme.html に、次のような箇所があると思います

<{if $xoops_showlblock == 1}>
<td id="leftcolumn" class="leftcolumn">
<!-- Start left blocks loop -->
<{foreach item=block from=$xoops_lblocks}>
<div class="leftblockTitle"><{$block.title}></div>
<div class="leftblockContent"><{$block.content}></div>
<{/foreach}>
<!-- End left blocks loop -->
</td>
<{/if}>

これを次のようにします。

<{if $xoops_showlblock == 1}>
<td id="leftcolumn" class="leftcolumn">
<!-- Start left blocks loop -->
<!--leftcolumn-->
<{foreach item=block from=$xoops_lblocks}>
<div class="leftblockTitle"><{$block.title}></div>
<div class="leftblockContent"><{$block.content}></div>
<{/foreach}>
<!--/leftcolumn-->
<!-- End left blocks loop -->
</td>
<{/if}>

注意すべき点は、<{foreach ... }> ～ <{/foreach}> を崩さないようにすることです。

また、携帯対応レンダーを使っている場合は、Smarty変数の $smarty.const.HYP_K_TAI_RENDER が TRUE になりますので、この値で、場合分けができます。

このようにして、携帯対応レンダー用タグを仕込んだ "cube_default" テーマの theme.html が theme.html です。参考にお使いください。

theme.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<{$xoops_langcode}>" lang="<{$xoops_langcode}>">
<head>
<meta http-equiv="content-type" content="text/html; charset=<{$xoops_charset}>" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-language" content="<{$xoops_langcode}>" />
<meta name="robots" content="<{$xoops_meta_robots}>" />
<meta name="keywords" content="<{$xoops_meta_keywords}>" />
<meta name="description" content="<{$xoops_meta_description}>" />
<meta name="rating" content="<{$xoops_meta_rating}>" />
<meta name="author" content="<{$xoops_meta_author}>" />
<meta name="copyright" content="<{$xoops_meta_copyright}>" />
<meta name="generator" content="XOOPS Cube" />
<link rel="shortcut icon" href="<{$xoops_url}>/favicon.ico" />
<link rel="stylesheet" type="text/css" media="screen" href="<{$xoops_url}>/xoops.css" />
 
<{* If you change standard Legacy theme structure removing style*.css from the theme directory, you have to remove the following; *}>
<{if $xoops_themecss != ""}>
  <link rel="stylesheet" type="text/css" media="screen" href="<{$xoops_themecss}>" />
<{/if}>
 
<title><{$xoops_sitename}> - <{$xoops_pagetitle}></title>
<!-- RMV: added module header -->
<{$xoops_module_header}>
<script type="text/javascript">
<!--
<{$xoops_js}>
// -->
</script>
</head>
<body>
<div class="outline">
<table cellspacing="0">
<tr>
<td class="headerlogo">
<!--headerlogo--><a href="<{$xoops_url}>/"><img src="<{$xoops_imageurl}>images/logo.gif" width="200" height="100" alt="<{$xoops_sitename}>" title="<{$xoops_sitename}>" /></a><!--/headerlogo--></td>
<td class="headerbanner"><{$xoops_banner}></td>
</tr>
</table>
<!--headerbar-->
<{if $smarty.const.HYP_K_TAI_RENDER}>
<center>
<{/if}>
<div class="headerbar">Welcome <{if $xoops_isuser}><{$xoops_uname}><{else}>Guest<{/if}>&nbsp;</div>
<{if $smarty.const.HYP_K_TAI_RENDER}>
[ <a href="#leftcolumn">Main menu</a> ]
</center>
<{/if}>
<!--/headerbar-->
 
<table cellspacing="0">
<tr>
<{if $xoops_showlblock == 1}>
<td id="leftcolumn" class="leftcolumn">
<!-- Start left blocks loop -->
<!--leftcolumn-->
<{if $smarty.const.HYP_K_TAI_RENDER}><div id="leftcolumn"><{/if}>
<{foreach item=block from=$xoops_lblocks}>
<div class="leftblockTitle"><{$block.title}></div>
<div class="leftblockContent"><{$block.content}></div>
<{/foreach}>
<{if $smarty.const.HYP_K_TAI_RENDER}></div><{/if}>
<!--/leftcolumn-->
<!-- End left blocks loop -->
</td>
<{/if}>
 
<td id="centercolumn" class="centercolumn">
<{if $xoops_showcblock == 1}>
<table cellspacing="0">
<tr>
<td class="centerCcolumn" colspan="2">
<!--centerCcolumn-->
<{foreach item=block from=$xoops_ccblocks}>
<div class="centeroutline">
<div class="centerCblockTitle"><{$block.title}></div>
<div class="centerCblockContent"><{$block.content}></div>
</div>
<{/foreach}>
<!--/centerCcolumn-->
</td>
</tr>
<tr>
<td class="centerLcolumn">
<!--centerLcolumn-->
<{foreach item=block from=$xoops_clblocks}>
<div class="centeroutline">
<div class="centerLblockTitle"><{$block.title}></div>
<div class="centerLblockContent"><{$block.content}></div>
</div>
<{/foreach}>
<!--/centerLcolumn-->
</td>
<td class="centerRcolumn">
<!--centerRcolumn-->
<{foreach item=block from=$xoops_crblocks}>
<div class="centeroutline">
<div class="centerRblockTitle"><{$block.title}></div>
<div class="centerRblockContent"><{$block.content}></div>
</div>
<{/foreach}>
<!--/centerRcolumn-->
</td>
</tr>
</table>
<{/if}>
<!--content-->
<div class="content"><{$xoops_contents}></div>
<!--/content-->
</td>
 
<{if $xoops_showrblock == 1}>
<td id="rightcolumn" class="rightcolumn">
<!--rightcolumn-->
<{foreach item=block from=$xoops_rblocks}>
<div class="rightblockTitle"><{$block.title}></div>
<div class="rightblockContent"><{$block.content}></div>
<{/foreach}>
<!--/rightcolumn-->
</td>
<{/if}>
</tr>
</table>
 
<div class="footerbar">
<!--footerbar-->
<a href="http://xoopscube.sourceforge.net/"><img src="<{$xoops_imageurl}>images/poweredby.gif" width="287" height="10" alt="XOOPS Cube PROJECT" title="XOOPS Cube PROJECT" /></a><br />
<{if $xoops_footer != 'Powered by XOOPS Cube 2.1&copy; 2001-2006 <a href="http://xoopscube.sourceforge.net/" target="_blank">XOOPS Cube Project</a>'}><{$xoops_footer}><{/if}>
<!--/footerbar-->
</div>
 
</div>
</body>
</html>

設定 (hyp_preload.conf.php)

"XOOPS_TRUST_PATH/class/hyp_common/preload/hyp_preload.conf.php" を編集して設定をします。該当ファイルがない場合は、同じディレクトリに含まれている "hyp_preload.conf.php.rename" をリネームしてください。

hyp_preload.conf.php 内の携帯対応レンダー関連の設定項目

// 各機能のメインスイッチ (On = 1, Off = 0)
$this->use_k_tai_render      = 0; // 携帯対応レンダーを有効にする
 
/////////////////////////
// 携帯対応レンダー設定
 
// 携帯端末判定用 UA 正規表現
$this->k_tai_conf['ua_regex'] = '#(?:SoftBank|Vodafone|J-PHONE|DoCoMo|UP\.Browser)#';
 
// HTML再構築用タグ設定
$this->k_tai_conf['rebuilds'] = array(
    'headerlogo'    => array( 'above' => '<center>',
                              'below' => '</center>'),
    'headerbar'     => array( 'above' => '<hr>',
                              'below' => ''),
    'breadcrumbs'   => array( 'above' => '',
                              'below' => ''),
    'leftcolumn'    => array( 'above' => '<hr>',
                              'below' => ''),
    'centerCcolumn' => array( 'above' => '<hr>',
                              'below' => ''),
    'centerLcolumn' => array( 'above' => '',
                              'below' => ''),
    'centerRcolumn' => array( 'above' => '',
                              'below' => ''),
    'content'       => array( 'above' => '<hr>',
                              'below' => ''),
    'rightcolumn'   => array( 'above' => '<hr>',
                              'below' => ''),
    'footerbar'     => array( 'above' => '',
                              'below' => ''),
    'easylogin'     => array( 'above' => '<div style="text-align:center;font-size:0.9em">[ ',
                              'below' => ' ]</div>'),
);
 
// 携帯用テーマセット
$this->k_tai_conf['themeSet'] = 'ktai_default';
 
// 使用テンプレート
$this->k_tai_conf['template'] = 'default';
 
// インラインイメージを表示するホスト名(後方一致)
$this->k_tai_conf['showImgHosts'] = array('amazon.com', 'yimg.jp', 'yimg.com', 'ad.jp.ap.valuecommerce.com', 'ba.afl.rakuten.co.jp', 'assoc-amazon.jp', 'ad.linksynergy.com');
 
// リダイレクトスクリプトを経由しないホスト名(後方一致)
$this->k_tai_conf['directLinkHosts'] = array('amazon.co.jp', 'ck.jp.ap.valuecommerce.com');
 
// 外部リンク用リダイレクトスクリプト
$this->k_tai_conf['redirect'] = XOOPS_URL . '/class/hyp_common/redirect.php?l=';
 
// Easy login を有効にする
$this->k_tai_conf['easyLogin'] = 1;
// Easy login で IP アドレス帯域をチェックしない
$this->k_tai_conf['noCheckIpRange'] = 0;
// リンクメッセージ
$this->k_tai_conf['msg']['easylogin'] = '簡単ログイン';
$this->k_tai_conf['msg']['logout'] = 'ログアウト';
 
// 携帯対応レンダー設定 以上
/////////////////////////////

各モジュールの対応など

各モジュールのテンプレート内でも、Smarty変数の Smarty変数の $smarty.const.HYP_K_TAI_RENDER を使って、場合分けができます。

部分的に場合分けしてもいいですし、大胆に全体を

<{if $smarty.const.HYP_K_TAI_RENDER}>
携帯の場合のテンプレート
<{else}>
PCの場合のテンプレート
<{/if}>

とすることもできます。

d3forum

d3forum では、スパム対策のデフォルトフィルターで、ゲスト投稿時に JavaScript を利用してフィルタリングを行っていますが、このフィルターが有効になっていると、ゲストが携帯で投稿することができません。

そこで、携帯からのアクセスかを IP 帯域で判断して、携帯であると判断した場合は、フィルタリングを行わないフィルターを書いてみました。

D3forumAntispamDefault_ktai.class.php

このファイルを、XOOPS_TRUST_PATH/modules/d3forum/class にアップロードし、[ d3forum の管理画面 - 一般設定 - SPAM投稿チェック用クラス ] に「default_ktai」と指定してください。

mailbbs (写メールBBS)

Version 2.3.6 で、携帯対応レンダーに対応しました。Ver 2.3.6 以降をお使いください。

最新バージョンをCVSからダウンロード

yomi (Yomiサーチ)

Version 0.89 にて、サイトバナーの表示に対応しました。

最新バージョンをCVSからダウンロード

意見・要望

意見要望を書くところが、あちこち探したがよくわからなかったのでここにコメント欄を作ってみました。 -- 通りすがりさん 2008-08-17 (Sun) 10:16:25 New
携帯判定にWILLCOMと、e-mobileを是非入れて欲しい。 -- 通りすがりさん 2008-08-17 (Sun) 10:16:34 New
directLinkHosts に、Adsenseのgooglesyndication.comを入れて欲しい -- 通りすがりさん 2008-08-17 (Sun) 10:32:53 New
- WILLCOM と e-mobile の端末の多くは、PCサイトブラウザを搭載していてほとんどのユーザーは、それでアクセスしているので、携帯対応はかえってユーザーの不利益になるという認識なのですが、如何でしょうか。(このあたり、私は詳しくないので間違っているかもしれません。)
  Adsense対応に関しては、hyp_preload.conf.php にて設定していただければよいと思いますが、規定値に設定しておいたほうがよさそうなら加えておきます。 -- nao-pon 2008-08-17 (日) 21:38:06 New