mobile

MT4iにGoogle Adsenseを入れる方法(サンプル付き)

MT4iを携帯用にしたMovable Typeを使って使っている人で、携帯版のグーグルアドセンス(google adsense)を入れたいと思っている人にGoogle Adsenseを埋め込む方法。

いくつかの方法があるが、まずはmt4i.cgi内に埋め込む方法。

mt4i.cgiのファイルを開き、以下のサンプルを追加。

その1
        # 結果をテンプレートに埋め込む
        $template->param(BLOG_LOGO => &index_title_logo);

        # 結果をテンプレートに埋め込む
        $template->param(BLOG_LOGO => &index_title_logo);
        $template->param(GOOGLE_AD => &google_ad);

その2
    # fill in some parameters
    $template->param(BLOG_LOGO => &index_title_logo);

    # fill in some parameters
    $template->param(BLOG_LOGO => &index_title_logo);
    $template->param(GOOGLE_AD => &google_ad);

その3
# —– 概要 —–
sub index_blog_description {
の上あたりに(場所ば他でも可能)

# —– Google —–
sub google_ad {
    my $str;

use LWP::UserAgent;
use Time::HiRes qw(gettimeofday);
use URI::Escape;

〜省略(最後の部分はちょっと変更する)

if ($google_ad_output->is_success) {
  $str = $google_ad_output->content;
}else{
  $str = “[ad]”;
}

    return $str;
}

これでmt4i.cgiの変更は終わり。

次に、テンプレートの変更。

tmplフォルダにあるindex.tmplを開く。

Google Adsenseを挿入したい場所に、
<TMPL_VAR NAME=”GOOGLE_AD”>
と入れ、保存。

各記事の詳細ページにGoogle Adsenseを入れたい時は、
individual.tmplを開き、
Google Adsenseを挿入したい場所
例えば、
<TMPL_INCLUDE NAME=”header.tmpl”>
の下に、
<TMPL_VAR NAME=”GOOGLE_AD”>
と入れ、保存。

タイトルよりも上にGoogle Adsenseを入れたい場合は
header.tmplに入れておくといい。

MT4を携帯に対応させる「pc2m編」(その6)

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編」(その5)

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

アクセス制限設定(踏み台対策)(その4)参照 を施していても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編」(その4)

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編」(その3)

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

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

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

インストール他は(その1)参照

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

  • 不要なパーツの表示(その2)参照
  • 見出しタグのサイズ

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

今の携帯は見出しタグ(<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編」(その2)

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

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

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

インストール他は(その1)参照

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

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

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

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

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

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

なお、MovableTypeではボトムに
Copyright © 2001-2007 Six Apart. All Rights Reserved.
等が入っているが、携帯では機種により© が文字化けし、また、表記も長いので、「テンプレートモジュール」内にある「フッター」のファイルを開き、上記部分を<!–pc2m_void–>と<!–/pc2m_void–>で囲む。

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

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

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

MT4を携帯に対応させる「pc2m編」(その1)

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編」

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でのコントロールあたりから試してみよう。

<link rel=”stylesheet” href=”styles.css” type=”text/css”>
<link rel=”stylesheet” href=”mobile.css” type=”text/css” media=”handheld”>

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

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

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


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


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

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