NP_MobileWithSinglePageの設定

投稿者: | 2010年12月26日
0件のコメント
このエントリーをはてなブックマークに追加
Pocket

はじめに

NP_MobileWithSinglePageには、2010年12月現在でversion 1.5.1とversion 2.1.0が公開されています。Nucleusのフォーラムには「ver.2.1.0はbeta版です。ver.1.5.1のほうがまだ安定していると思います。」と記載がありますが、この記事では両versionの設定方法を紹介したいと思います。

NP_MobileWithSinglePageを適用した際の一例として、本サイトを携帯電話対応させた時の変化を以下の図で紹介します。

NP_MobileWithSinglePage

プラグインのインストール

NP_MobileWithSinglePage1.5.1 の場合

まずは単純な1.5.1の場合から説明します。

nucleusフォーラムからダウンロードしてきた「NP_MobileWithSinglePage1.5.1.zip」を解凍して中身を /var/www/example/nucleus/plugins/にアップロードし、管理画面のプラグイン管理からインストールします。1.5.1の場合はこれだけです。

NP_MobileWithSinglePage2.1.0 の場合

  1. nucleusフォーラムからダウンロードしてきた「NP_MobileWithSinglePage2.1.0.zip」を解凍して中身を /var/www/example/nucleus/plugins/にアップロードします。
  2. 必要なPEARライブラリを用意し、以下の配置でアップロードします。 
    *プラグインディレクトリ (通常は"plugins")
  ・"sharedlibs"ディレクトリ
        +"PEAR.php"
        +"XML"ディレクトリ
           "XML_HTMLSax.php"
           "HTMLSax"ディレクトリ (およびその中身)
           ...
        +"Net"ディレクトリ
           "UserAgent"ディレクトリ
           "Mobile.php"
           "Mobile"ディレクトリ (およびその中身)

    詳細手順を以下に記載します。

    # aptitude install php-pear
パッケージリストを読み込んでいます... 完了
依存関係ツリーを作成しています
状態情報を読み取っています... 完了
拡張状態情報を読み込んでいます
パッケージの状態を初期化しています... 完了
タスクの記述を読み込んでいます... 完了
以下の新規パッケージがインストールされます:
  php-pear
更新: 0 個、新規インストール: 1 個、削除: 0 個、保留: 0 個。
334kB のアーカイブを取得する必要があります。展開後に 2408kB のディスク領域が新たに消費されます。
拡張状態情報を書き込んでいます... 完了
取得:1 http://security.debian.org lenny/updates/main php-pear 5.2.6.dfsg.1-1+lenny8 [334kB]
334kB を 1s 秒でダウンロードしました (168kB/s)
未選択パッケージ php-pear を選択しています。

...

# pear install Net_UserAgent_Mobile-1.0.0
downloading Net_UserAgent_Mobile-1.0.0.tgz ...
Starting to download Net_UserAgent_Mobile-1.0.0.tgz (43,849 bytes)
............done: 43,849 bytes
install ok: channel://pear.php.net/Net_UserAgent_Mobile-1.0.0

# pear install XML_HTMLSax-2.1.2
downloading XML_HTMLSax-2.1.2.tgz ...
Starting to download XML_HTMLSax-2.1.2.tgz (16,099 bytes)
......done: 16,099 bytes
install ok: channel://pear.php.net/XML_HTMLSax-2.1.2

# cp -rf /usr/share/php/Net /var/www/example/nucleus/plugins/sharedlibs/
# cp -rf /usr/share/php/XML /var/www/example/nucleus/plugins/sharedlibs/
# cp /usr/share/php/PEAR.php /var/www/example/nucleus/plugins/sharedlibs/
  3. 管理画面からプラグインをインストールします。
  4. 試験のため、携帯電話からhttp://www.example.jpにアクセスしたところ、以下のエラーが出ました。 
    Fatal error: Call to undefined method Net_UserAgent_Mobile_DoCoMo::isError() in /var/www/example/nucleus/plugins/NP_MobileWithSinglePage.php on line 104

    そこで、NP_MobileWithSinglePage.phpの以下の箇所を修正します。

    # vi /var/www/example/nucleus/plugins/NP_MobileWithSinglePage.php
...

  function event_PostAuthentication($data) {
    global $CONF;
    if (!$CONF['UsingAdminArea']) {
      $userAgent = serverVar('HTTP_USER_AGENT');
      require_once('Net/UserAgent/Mobile.php');
      $objUAMobile =& Net_UserAgent_Mobile::factory($userAgent);
      if (!$objUAMobile->isNonMobile() && !$objUAMobile->isError()) {
      if (!$objUAMobile->isNonMobile()) {
        $this->isMobile = true;

    以上でエラー無くアクセス可能となりました。

    mobスキンの適用

    携帯電話用のスキンである「mob」を適用します。スキンはnucleusフォーラムにあります。

    スキンの適用

    1. /var/www/example/skins/ に mob ディレクトリ毎アップロード
    2. 管理画面のサイドバーより「読込／書出」を選択
    3. 「読み込み」->「ローカルファイルから読み込み：」のリストからアップロードした「mod」を選択し「読み込み」ボタンを選択
    4. サイドバーの「プラグイン管理」を選択

    オプション設定

    「Mobile with single page」の「オプション編集」を選択し、以下の設定を行います。バージョンによって若干差分があります。

    ver 1.5.1の場合

    • 「Select mobile skin :」を「mobile」から「mob」に修正
    • User-Agents of Mobile :DoCoMo|J-PHONE|UP\.Browser
      から以下に修正
      User-Agents of Mobile :DoCoMo|UP\.Browser|J-Phone|Vodafone|SoftBank|J-EMULATOR|Googlebot-Mobile|Y!J-SRD|Y!J-MBS

    ver 2.1.0の場合

    「1-1. Skin name to change.」に「mob」と入力

    mobスキンの修正(メインの目次ページ)

    管理画面のサイドバーよりレイアウト設定→スキン編集を選択し、「mob」の「メインの目次ページ」をクリックして編集します。

    本サイトでは以下の観点から最低限の修正を行っていますが適宜修正して下さい。

    • 記述誤りの修正(serch,powerd)
    • linkの修正(sitevar(url)/i → sitevar(url))
    • サブカテゴリー対応
    • Menu → 詳細記事 の順番で並べる
    <form method=get action=<%sitevar(url)%>i/>
<form method=get action=<%sitevar(url)%>>

…

<input type=submit value=serch class=formbutton>
<input type=submit value=search class=formbutton>

…

<hr>[New]<br>
<%blog(mob/short,50)%>
<%prevlink(Prev,50)%> <%nextlink(Next,50)%>
<hr>[Menu]<br>
<%categorylist(mob/full)%>
<hr><a href=<%sitevar(url)%>i/>HOME</a><hr>
powerd by <a href=http://wmlproxy.google.com/chtmltrans/h=ja/u=nucleuscms.org/c=0>Nucleus</a>

<hr>[Menu]<br>
<%ContentsList(>subtemplate)%>
<hr>[詳細記事一覧]<br>
<%ShowBlogs(catitle,100,,,ASC)%>
<hr><a href=<%sitevar(url)%>>HOME</a><hr>
powered by <a href=http://wmlproxy.google.com/chtmltrans/h=ja/u=nucleuscms.org/c=0>Nucleus</a>

    mobスキンの修正(個別アイテムページ)

    同様に個別アイテムページも修正します。

    こちらはlinkの修正(sitevar(url)/i → sitevar(url))のみです。

    <a href=<%sitevar(url)%>i/>HOME</a><br>
<a href=<%sitevar(url)%>>HOME</a><br>

    動作確認

    携帯電話からhttp://www.example.jpにアクセスすると「mob」スキンが適用されていました。

    ただしnc.vicuna(別記事にまとめます)を使用していて、トップページを個別ページにする対応を行っている場合は以下の修正が必要です。

    # vi /var/www/example/index.php
<?php
...

include('./config.php');

if (!count($_GET)) $_GET['special']='top';

if(isset($_SERVER['HTTP_USER_AGENT'])){
    if(preg_match("/(DoCoMo|UP\.Browser|J-Phone|Vodafone|SoftBank|J-EMULATOR)/i",$_SERVER['HTTP_USER_AGENT'])) {
        selectSkin('mob');
    } else {
        if (!count($_GET)) $_GET['special']='top';
    }
}
selector();

...

    トラブルシューティング

    Easy Cacheの問題

    NP_EzCache(NP_EzCacheの設定を参照)を使用している場合、http://自分のサイトのURL/に対してPCよりも先に携帯電話がアクセスしたとすると、携帯用画面がメモリに保存されてしまいます。すると、たとえアクセス元がPCか携帯かをUSERAGENTで識別していたとしても、キャッシュのデータがダウンロードされてしまうため、携帯でPCの画面になってしまったりPCで携帯の画面になってしまうことが発生します。

    このような状態になってしまった場合は、NP_EzCacheをアンインストール→インストールしてNP_MobileWithSinglePageよりも下に持ってくるとうまく動作するようになります。

    サイトの先頭部分に「・ソ」という文字が入ってしまった場合

    これはUTF-8のBOMというものです。

    このような状況になってしまった時は、こちらで紹介されているスクリプトを回してBOM入りファイルを探します。

    # vi /var/www/example/nucleus/plugins/bom.pl

#!/usr/bin/perl

@bom = (
chr(0x00).chr(0x00).chr(0xFE).chr(0xFF),
chr(0xFF).chr(0xFE).chr(0x00).chr(0x00),
chr(0x00).chr(0x00).chr(0xFF).chr(0xFE),
chr(0xFE).chr(0xFF).chr(0x00).chr(0x00),
chr(0xFE).chr(0xFF),
chr(0xFF).chr(0xFE),
chr(0xEF).chr(0xBB).chr(0xBF)
);

#// カレントフォルダオープン
opendir(DIR, './') or die;
@files = sort readdir(DIR);
closedir(DIR);

foreach (@files) {
if(-f $_){
open(FILE, $_) or die;
$dat = ;
for(my $i = 0; $i <= $#bom; $i++){
if(index($dat, $bom[$i]) == 0){
print "$_\n";
last;
}
}
close(FILE);
}
}

# /var/www/blog/nucleus/plugins/bom.pl
NP_Calendar.php
NP_MultipleCategories.php

    上記二つのファイルにbomが存在することが分かりましたので、ファイルをviで開いて

    :set nobomb
:w

    で保存し直すことで・ソが消えます。

    参考文献

    NucleusWiki

    Nucleusでつくる！最強のブログサイトのp.374～377

    Nucleusフォーラム 1

    Nucleusフォーラム 2

    マクシモクブログさんのサイト

    higuchi.comさんのサイト

    教えて!goo

    More from my site

    このエントリーをはてなブックマークに追加
    Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です