nao-pon/blog/2008-06-17 [プリロードで携帯対応する [ 携帯対応レンダー ]] - UsersWiki

TOP » UsersWiki » nao-pon » blog » 2008-06-17

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

[ Freeze | Diff | Backup | Reload ]

[ Referer ] [ Comments(0) ]

プリロードで携帯対応する [ 携帯対応レンダー ]

携帯対応レンダーについて、最新の情報は、xpwiki:携帯対応レンダーにまとめています。

HypCommonFunc Ver 20080617以降の HypCommonPreLoad で、XOOPS全体を携帯に対応させるオプションを追加しました。(デフォルトではオフになっています。)

とりあえず実機は、SoftBank 911T でテストしましたが、ユーザー登録・ログイン・ログアウト・各ページへのアクセスは、特に問題ないようです。

XOOPSのテーマが DIV レイアウトであれば、とりあえず見ることができる状態で表示されると思いますが、 TABLE レイアウトのテーマだと、ちょっと苦しいかもしれません。

そのような時は、XOOPS テーマの theme.html に、携帯対応レンダー用の抽出タグを仕込むことにより、何とか見れるレベルの表示にすることができます。

さらに、HypCommonFunc Ver. 20080620 以降で、簡単ログイン機能・主要３キャリア(au, docomo, SoftBank)対応のIPアドレスチェック機能などを設けました。

携帯対応レンダー用の抽出タグ for theme.html

とりあえず、初期値では以下のタグが使えます。

<!--headerlogo--><!--/headerlogo-->
<!--headerbar--><!--/headerbar-->
<!--breadcrumbs--><!--/breadcrumbs-->
<!--leftcolumn--><!--/leftcolumn-->
<!--centerCcolumn--><!--/centerCcolumn-->
<!--centerLcolumn--><!--/centerLcolumn-->
<!--centerRcolumn--><!--/centerRcolumn-->
<!--content--><!--/content-->
<!--rightcolumn--><!--/rightcolumn-->
<!--footerbar--><!--/footerbar-->

それぞれで、囲まれた範囲を、携帯レンダー用テンプレートに書き出します。

携帯レンダー用テンプレートは、初期値では XOOPS_TRUST_PATH/class/hyp_common/ktairender/templates/default ディレクトリにある以下のファイルです。

header.html
body.html
footer.html

最終的に出力される内容は、上から順に合わせたものになり、body.html にあたる部分は、ページサイズが大きい場合に分割された内容の上下にページナビゲーションが付いた形になります。

XOOPS Cube Legacy に付属している、cube_default の theme.html に、携帯レンダー用抽出タグを書き加えたものを参考までに添付しておきます。

theme.html このテーマは、http://cube.hypweb.net/ で使っています。

追加した設定値

class/hyp_commonfunc/preload/hyp_preload.conf.php (Ver 20080617.2 以降、設定値が増えています。)

// 各機能のメインスイッチ (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['template'] = 'default';
 
// インラインイメージを表示するホスト名(後方一致)
$this->k_tai_conf['showImgHosts'] = array('amazon.com', 'yimg.jp', 'yimg.com');
 
// リダイレクトスクリプトを経由しないホスト名(後方一致)
$this->k_tai_conf['directLinkHosts'] = array('amazon.co.jp');
 
// 外部リンク用リダイレクトスクリプト
$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'] = 'ログアウト';
 
// 携帯対応レンダー設定 以上
/////////////////////////////