携帯 – デジタルゲート – ホームページ制作やリニューアル、サイトの企画・制作・運営をしています

MT4を携帯に対応させる「pc2m編」（その６）

2007年12月17日

·

master

PC2M Website Transcoder for Mobile Clients（pc2m）を利用し、ホームページを携帯対応にする場合の改造ポイント。

pc2mを通したサイトを、通常の携帯サイトと比較した場合、どうしても「ツールを使っている感じ」がする場所。

設（設定）

さまざまなユーザーのアクセスが予測される場合は、ユーザーにより「パケット定額」ではない場合もあるが、ユーザーやサイトの方針で、「半角にしない」「画像は表示」と規定するのであれば、「設定」のメニューは削除してしまうといい。

設定ファイル：Template.inc.php

ただし、そのままではデフォルトの「カタカナ半角」「画像はリンク」のままなので、別の設定を望む場合は、以下のファイルを修正する。

設定ファイル： index.php

    if ($local_args[‘v’] === null and isset($_SESSION[‘settings’][‘v’])) {
        $local_args[‘v’] = $_SESSION[‘settings’][‘v’];
    }
    if ($local_args[‘l’] === null and isset($_SESSION[‘settings’][‘l’])) {
        $local_args[‘l’] = $_SESSION[‘settings’][‘l’];
    }
    if ($local_args[‘k’] === null and isset($_SESSION[‘settings’][‘k’])) {
        $local_args[‘k’] = $_SESSION[‘settings’][‘k’];
    }

の部分を

    if ($local_args[‘v’] === null and isset($_SESSION[‘settings’][‘v’])) {
        $local_args[‘v’] = 1;
    }
    if ($local_args[‘l’] === null and isset($_SESSION[‘settings’][‘l’])) {
        $local_args[‘l’] = 1;
    }
    if ($local_args[‘k’] === null and isset($_SESSION[‘settings’][‘k’])) {
        $local_args[‘k’] = 1;
    }

とすれば、デフォルトで「カタカナ全角」「画像表示」になる。

MT4を携帯に対応させる「pc2m編」（その５）

2007年12月17日

·

master

PC2M Website Transcoder for Mobile Clients（pc2m）を利用し、ホームページを携帯対応にする場合の改造ポイント。

アクセス制限設定（踏み台対策）（その４）参照　を施していても100％安全とは言えないため、 URLに自分のサイト以外のURLが書かれた場合は無効になるようにしておくと安心。

設定ファイル：index.php

function sendRequest($_url, $_client_param = array(), $_post_data = array(), $_is_framesrc = false){

の部分、各種 global の次あたりに

if (!ereg(“^http://digital-gate.com/”, $_url)){$_url = “”;}

を追加。
※http://digital-gate.com/は、自分のサイトのURL

これで、http://digital-gate.com/を含まないURLが記入された場合、$_urlの値は空になる。

この修正を施したものでURLのテキストボックスに他のURLを入れてみると、

「〜から応答がないわけで、サーバが見つからないとかDNSエラーとかそんなんだと思われ」

とエラーが表示されるようになる。
このエラーメッセージが気になる人は、

修正ファイル：ErrorMessages.inc.php

‘ERROR_SERVER_NORESPONSE’ => ‘<a href=”r.php?{%1}”>{%1}</a>から応答がないわけで、サーバが見つからないとかDNSエラーとかそんなんだと思われ’,

の部分を修正するといい。

MT4を携帯に対応させる「pc2m編」（その４）

2007年12月17日

·

master

PC2M Website Transcoder for Mobile Clients（pc2m）を利用し、ホームページを携帯対応にする場合の改造ポイント。

pc2mを通したサイトを、通常の携帯サイトと比較した場合、どうしても「ツールを使っている感じ」がする場所。

URL記入ボックス

通常のサイトであれば、そこから他のサイトに行くのは本来の目的とは違うはず（検索サイトや変換サービスとして構築の場合を除く）なので、URL記入ボックスは削除してしまうといい。

修正ファイル：Template.inc.php

同様に、配布サイトにおいて「アクセス制限設定（踏み台対策）」として書かれているように、このスクリプトを悪意をもって利用されることは防がなくてはいけない。
モバイルキャリアのネットワーク以外からのアクセスを禁止は設定として用意されているから簡単にできる。

修正ファイル：Config.inc.php

// define(‘ALLOW_ONLYMOBILE’, true);
↓
define(‘ALLOW_ONLYMOBILE’, true);

当然のことながらPCからの確認も出来なくなるから、ちゃんと動くことを確かめてから設定すること。

MT4を携帯に対応させる「pc2m編」（その３）

2007年12月17日

·

master

MovableTypeで作成したサイトを携帯で見られるようにするための方法を探していて見つけたもの。
（カスタマイズ編）

元になるスクリプトはこれ

PC2M Website Transcoder for Mobile Clients
「PCサイト->携帯変換スクリプト」
http://www.rcdtokyo.com/pc2m/note/

インストール他は（その１）参照

pc2mを導入して、MovableTypeで作成しているDigital Gateも携帯で見られるようになったが、デフォルトの設定のままではいくつかの不具合がある。

不要なパーツの表示（その２）参照
見出しタグのサイズ

今回は、見出しタグのサイズ（文字サイズ）を本文と同じにする。

今の携帯は見出しタグ（<H1>や<H2>）にある程度表示するため、見出しタグを使ったページを表示した場合、逆に見づらくなってしまうことがある。
デジタルゲートの場合も、記事タイトルのフォントサイズが妙に大きく格好悪い。
そこで、見出しタグは置き換えてしまうことにする。

修正ファイル：FormatRule.inc.php

このファイルの、

    ‘h1’ => array(
        ‘type’ => ‘block’,
        ‘children’ => array(‘#PCDATA’, ‘a’, ‘br’, ‘span’, ‘img’, ‘map’, ‘i’, ‘b’, ‘u’, ‘big’, ‘small’, ‘font’, ‘em’, ‘strong’, ‘dfn’, ‘code’, ‘q’, ‘samp’, ‘kbd’, ‘var’, ‘cite’, ‘abbr’, ‘acronym’, ‘sub’, ‘sup’, ‘input’, ‘select’, ‘textarea’, ‘label’, ‘button’),
        ‘attributes’ => array(‘align’)
    ),
    ‘h2’ => array(
        ‘type’ => ‘block’,
        ‘children’ => array(‘#PCDATA’, ‘a’, ‘br’, ‘span’, ‘img’, ‘map’, ‘i’, ‘b’, ‘u’, ‘big’, ‘small’, ‘font’, ‘em’, ‘strong’, ‘dfn’, ‘code’, ‘q’, ‘samp’, ‘kbd’, ‘var’, ‘cite’, ‘abbr’, ‘acronym’, ‘sub’, ‘sup’, ‘input’, ‘select’, ‘textarea’, ‘label’, ‘button’),
        ‘attributes’ => array(‘align’)
    ),
    ‘h3’ => array(
        ‘type’ => ‘block’,
        ‘children’ => array(‘#PCDATA’, ‘a’, ‘br’, ‘span’, ‘img’, ‘map’, ‘i’, ‘b’, ‘u’, ‘big’, ‘small’, ‘font’, ‘em’, ‘strong’, ‘dfn’, ‘code’, ‘q’, ‘samp’, ‘kbd’, ‘var’, ‘cite’, ‘abbr’, ‘acronym’, ‘sub’, ‘sup’, ‘input’, ‘select’, ‘textarea’, ‘label’, ‘button’),
        ‘attributes’ => array(‘align’)
    ),
    ‘h4’ => array(
        ‘type’ => ‘block’,
        ‘children’ => array(‘#PCDATA’, ‘a’, ‘br’, ‘span’, ‘img’, ‘map’, ‘i’, ‘b’, ‘u’, ‘big’, ‘small’, ‘font’, ‘em’, ‘strong’, ‘dfn’, ‘code’, ‘q’, ‘samp’, ‘kbd’, ‘var’, ‘cite’, ‘abbr’, ‘acronym’, ‘sub’, ‘sup’, ‘input’, ‘select’, ‘textarea’, ‘label’, ‘button’),
        ‘attributes’ => array(‘align’)
    ),
    ‘h5’ => array(
        ‘type’ => ‘block’,
        ‘children’ => array(‘#PCDATA’, ‘a’, ‘br’, ‘span’, ‘img’, ‘map’, ‘i’, ‘b’, ‘u’, ‘big’, ‘small’, ‘font’, ‘em’, ‘strong’, ‘dfn’, ‘code’, ‘q’, ‘samp’, ‘kbd’, ‘var’, ‘cite’, ‘abbr’, ‘acronym’, ‘sub’, ‘sup’, ‘input’, ‘select’, ‘textarea’, ‘label’, ‘button’),
        ‘attributes’ => array(‘align’)
    ),
    ‘h6’ => array(
        ‘type’ => ‘block’,
        ‘children’ => array(‘#PCDATA’, ‘a’, ‘br’, ‘span’, ‘img’, ‘map’, ‘i’, ‘b’, ‘u’, ‘big’, ‘small’, ‘font’, ‘em’, ‘strong’, ‘dfn’, ‘code’, ‘q’, ‘samp’, ‘kbd’, ‘var’, ‘cite’, ‘abbr’, ‘acronym’, ‘sub’, ‘sup’, ‘input’, ‘select’, ‘textarea’, ‘label’, ‘button’),
        ‘attributes’ => array(‘align’)
    ),

の部分をコメントアウトし、

    ‘h1’ => array(
        ‘replace’ => ‘div’
    ),
    ‘h2’ => array(
        ‘replace’ => ‘div’
    ),
    ‘h3’ => array(
        ‘replace’ => ‘div’
    ),
    ‘h4’ => array(
        ‘replace’ => ‘div’
    ),
    ‘h5’ => array(
        ‘replace’ => ‘div’
    ),
    ‘h6’ => array(
        ‘replace’ => ‘div’
    ),

を記入。

これで見出しタグはdivとなりフォントサイズは本文と同じになる。

MT4を携帯に対応させる「pc2m編」（その２）

2007年12月14日

·

master

MovableTypeで作成したサイトを携帯で見られるようにするための方法を探していて見つけたもの。
（カスタマイズ編）

元になるスクリプトはこれ

PC2M Website Transcoder for Mobile Clients
「PCサイト->携帯変換スクリプト」
http://www.rcdtokyo.com/pc2m/note/

インストール他は（その１）参照

pc2mを導入して、MovableTypeで作成しているDigital Gateも携帯で見られるようになったが、デフォルトの設定のままではいくつかの不具合がある。

不要なパーツの表示
見出しタグのサイズ

Digital Gateでは３カラムのデザインがベースとなっているが、携帯から見た場合に必要だと思われるのは、記事本体のみで、広告はもちろん、ブログパーツも携帯に対応していないものも多い。

pc2mには、ページの任意の箇所を非表示にする方法が用意されているから、それを利用することにする。
なお、以下はDigital Gateでの場合。

修正するのは「テンプレートモジュール」内にある「サイドバー (3カラム)」

Digital Gateではメインコンテンツのメニューは上部にまとめてあるので、右の２カラムを丸ごと非表示にしても支障が無い。
そこで「サイドバー (3カラム)」のファイルを開き、最上部に、<!–pc2m_void–>を挿入し、最下部に<!–/pc2m_void–>を追加する。
保存、再構築を経て、携帯から確認すると、ちゃんと本文記事のみになっている。

ただし、このままでは何も表示されないので、
Template.inc.phpのファイルを開き、</body>の前に
(c) Digital Gate
と追加し保存。

これでボトムの表記もすっきりした。

見出しタグの変更は次回。

MT4を携帯に対応させる「pc2m編」（その１）

2007年12月14日

·

master

MovableTypeで作成したサイトを携帯で見られるようにするための方法を探していて見つけたもの。

PC2M Website Transcoder for Mobile Clients
「PCサイト->携帯変換スクリプト」
http://www.rcdtokyo.com/pc2m/note/

ライセンスを確認すると、

Free Software FoundationによるGNU General Public Licenseのバージョン2あるいはそれ以降のバージョン（以下「GPL」と言う）に基づきライセンスされます。

ということ。

動作環境は「PHP 4.3.9/5.0.1以降」だから、多くの環境で使える。

サイトのマニュアルが詳しく書いてあるからインストールは簡単。

携帯でアクセスすると、上に「設下」や下に「上写直履TOP」と表示されているから、文字化けしているのかと錯覚するが設定メニューを省略して表示しているだけなので、これでOK。

利便性から、pc2m.phpはindex.phpに変更。（以降、修正ファイル名はindex.phpと表記）

MT4を携帯に対応させる「CSS・handheld編」

2007年12月13日

·

master

Movable Type 4 を携帯に対応させたい場合、代表的な方法として、

MT4i
http://www.hazama.nu/pukiwiki/index.php?MT4i

ケータイキット for Movable Type
http://www.ideamans.com/keitaikit/

MT-Mobile
http://lab.fancs.com/download.html

その他、一度のエントリーで携帯用ページを書き出すという方法もあるが、単純に読めるようにするだけなら、もっと簡単にできるかもしれない。

まずはcssでのコントロールあたりから試してみよう。

のようにして携帯はmobile.cssを適用させる。

新たにmobile.cssを設定して、Operaの「スモールスクリーン表示」で見てみると、ちゃんとmobile.cssが反映されている。

display: none;
の項目もちゃんと非表示。


しかし、携帯からチェックしてと media="handheld" に対応している携帯では無いためPCのまま表示。

Javascript か PHPで振り分けるのがよさそう。

※このエントリーは順次更新していきます。