1

ブログ風日記の携帯用表示画面をちょこっと変更。 2010・9・22

6
2

nik



こにぎりのブログ風日記で使用している
CGI「nik.cgi」の携帯用の表示画面にリンクとか
アフェリエイトのコンテンツを載っけようと
思ってちょこっと改造です。

超初心者用に解説しているので興味の
ある人だけ見てね!!

因みにとにかく第一歩からやっていきます。

まずはいちいち作ったコンテンツを携帯で
確認をするのは面倒なので PCのブラウザから
確認出来るように「Firefox」なるブラウザを
 インストールして「User Agent Switcher」なる
アドオンを入れます。 「User Agent Switcher」が
どの様な物かの解説は面倒なので
 各自調べてね!!

「nik.cgi」は携帯のキャリアのIPや
そんなこんなまで判別していないので
これで携帯から見た画面の確認は出来ます。
 携帯のコンテンツはほぼ「kei.pl」で
生成しているので それを弄る事になります。
ちょっと弄ると上のような感じになります。

その前に「kei.pl」を弄るのに
「テキストエディター」なる物を使いますが、
 自分が使っているのはフリーの「TeraPad」と
「Sakuraエディター」です。 (各自調べてね!!)
Winに標準で付いてる「メモ帳」なんかでも
良いけど 編集能力が違うのでね。。

でも、有料の物は使う気になれないので。。

で、ここから「kei.pl」のちょこっと解説です。
 なるべく分かりやすいように図と連動して
解説したいと思います。

 (エディターは「Sakuraエディター」で
行番号をなるべく統一したいので
 「タイプ別設定」の「カラー」タブの
「行番号の表示」で「改行単位」に
 チェックを入れる事で改行していない行に
行番号が付きません)

取り敢えず弄るまえにバックアップを
取っておいてね!!
A・B・C・Dとバックグラウンドの指定等で基本的に同じなので一括で解説します。

Bに関してはリンクの貼り方の解説などもしています。

バックグラウンドの指定から
4行目当たりの「# ヘッダー携帯用」以下に「sub head_c」の10行目下当たりから。
15行目の「$html_x .= qq|</head>\n|;」の下に
「$html_x .= qq|<body style="background-image: url(link_img/sakurab.jpg);">\n|;」を
追加しています。これはバックグラウンドに画像を指定しています。
画像ファイルは「nik.chi」のフォルダーに「link_img」と言うフォルダーの「sakurab.jpg」を指定。

A・B・Cの指定
-------------------------------------------------------------------------------------------------
「sub head_c」以下にある
-------------------------
Aの部分(オリジナルだと16行の下あたり。分かりやすいように前後の行も表示してます))
    $html_x .= qq|</head>\n|;
    $html_x .= qq|<body style="background-image: url(link_img/sakurab.jpg);">\n|;   バックグラウンド指定
    $html_x .= qq|$body_kei|;
# 改造挿入部分_c_1_start                ここから
    $html_x .= qq|<hr />\n|;              ↓
    $html_x .= qq|リンク募集1<br />\n|;       ↓
    $html_x .= qq|<hr />\n|;              ↓
# 改造挿入部分_c_1_end                 ここまで

    if ($mode != 4 and $mode != 9 and $mode ne 'res' and $mode ne 'res2') {
        $html_x .= qq|<a href="$cgi?mode=1|;
        if ($in{'tv'}) {
            $html_x .= qq|&tv=$in{'tv'}|;
--------------------------------------------------------------------------------------------------

「nik.cgi」の「kei.pl」には「*_c」と「*_w」と有り72行辺りに
---------------------------
# ヘッダー携帯用
sub head_w
---------------------------
と言う「_w」の付いたもう一つの携帯用があります。
これは各社携帯に対応する為に2種類の表示用のルーチンを置いている為です。(多分・・・)
基本的に「*_c」に何かしら付け足したら「*_w」にも同じように付け足す事になります

こんな感じで・・・
---------------------------------------------------------------------------------------------------

-----
# ヘッダー携帯用の表記から約50行下の
「sub head_c」の最後の辺り(sub head_wのちょっと上辺り)
画像からの他サイトへのリンク
------------------------------------------------------------
                $html_x .= qq|" $d_key="3">[3]タイトルのみ表\示する</a><br />\n|;
            }
        }

        $html_x .= qq|<hr>\n|;
# 改造挿入部分_c_3_start             ここから
        $html_x .= qq|<font size="2">アサヒグルメガイド東北のお店情報</font><br />\n|;
        $html_x .= qq|<a href="http://m.asahibeer.co.jp/area/search_02.html" target="_blank">
<img style="border: 0px solid ; width: 88px; height: 31px;" alt="image with alt" title="東北のアサヒグルメガイドはこちら" src="link_img/asahibeer_banner_c.gif"></a>\n|;
#        $html_x .= qq|<a href="http://m.asahibeer.co.jp/area/search_02.html" target="_blank"
 alt="東北のアサヒグルメガイドはこちら">アサヒ東北のお店情報</a>\n|;
        $html_x .= qq|<hr />\n|;
# 改造挿入部分_c_3_end              ここまで

    }

}
--------------------------------------------
「sub head_w」の最後の辺りにも同じものが有り
---------------------------------------------------------------------------------------------------

-----
オリジナルだと133行辺りに有る
-----------------------------------
sub foot_c {
# 改造挿入部分_c_2_start              ここから
    $html_x .= qq|<hr />\n|;            ↓
    $html_x .= qq|リンク募集2<br />\n|;     ↓
    $html_x .= qq|<hr />\n|;            ↓
# 改造挿入部分_c_2_end               ここまで
    $html_x .= qq|</body>\n|;
    $html_x .= qq|</html>\n|;
}
sub foot_w {
# 改造挿入部分_w_2_start              ここから
    $html_x .= qq|<hr />\n|;            ↓
    $html_x .= qq|リンク募集2<br />\n|;     ↓
    $html_x .= qq|<hr />\n|;            ↓
# 改造挿入部分_w_2_end               ここまで
    $html_x .= qq|</body>\n|;
    $html_x .= qq|</html>\n|;
}


# ログを表示 携帯用1
sub logvw_c {
--------------------------------------------------

ここでBの画像リンクの解説です。

# 改造挿入部分_c_3_start             ここから
        $html_x .= qq|<font size="2">アサヒグルメガイド東北のお店情報</font><br />\n|;
        $html_x .= qq|<a href="http://m.asahibeer.co.jp/area/search_02.html" target="_blank">
<img style="border: 0px solid ; width: 88px; height: 31px;" alt="image with alt" title="東北のアサヒグルメガイドはこちら" src="link_img/asahibeer_banner_c.gif"></a>\n|;
#        $html_x .= qq|<a href="http://m.asahibeer.co.jp/area/search_02.html" target="_blank" alt="東北のアサヒグルメガイドはこちら">アサヒ東北のお店情報</a>\n|;
        $html_x .= qq|<hr />\n|;
----------------------------------------------------
画像リンクとテキストリンクの2つが有りますがテキストリンクの方は「#」でコメントアウトしているので表示されてません。
「src="link_img/asahibeer_banner_c.gif"」は「kei.pl」から画像を相対パスで指定してます。
「alt="image with alt" title="東北のアサヒグルメガイドはこちら"」は画像にアイコンが乗った時に
案内のテキストが表示されます。携帯で見ると表示されないが「User Agent Switcher」を
入れた「Firefox」で見ると表示されます。
まぁー検索エンジン対策みたいなものかぁー?


---------------------------------------------------------------------
Dはログのタイトル表示に関しての変更
--------------------------------------------------------------------
オリジナルは177行辺りの「# ログを表示 携帯用1」から下行「sub logvw_c 」_c当然があるので_wもある。
439行辺りに「# ログを表示 WAP携帯用1」がそれ。


$html_x .= qq|<h3><font color="$tc">--最新の$title2--</font></h3>\n|;
            } else {
$html_x .= qq|<h3><font color="$tc">--最新のLOG--</font></h3>\n|;
----------------------------------------------------------------------------
オリジナルは色指定は$tcなのでCGIの設定管理の携帯の設定で出来ると思うが、強制的に指定
因みに俺はタイトル表示にしているのがログ表示の時は2箇所変更で。。
--最新のXXXX--とかも自分なりに変えられます。

$html_x .= qq|<h3><font color="#660000">--最新の$title2--</font></h3>\n|;
            } else {
$html_x .= qq|<h3><font color="#660000">--最新のLOG--</font></h3>\n|;

----------------------------------------------------------------------------
下はタイトル表示の文字サイズを変更。PCでは1行で見れるタイトルも
携帯からだと2行になってしまう事が多いので文字サイズを変更してなるべく
1行で表示されるように文字サイズを指定してます。
携帯だと各キャリアや機種に依存するので何とも言えないが「size="-1">└|;」の
日付表示の「-1」を基本に「2」を指定。自分の携帯では「-1」も「2」も同じ大きさで表示。
多分キャリアや携帯の機種が違えばそれなりに違ってくると思う。あくまでも思うです!!

$html_x .= qq|<a href="$link"><font color="$kei_c_ti">$_[2]</font></a><br>\n|;
$html_x .= qq|<font color="$kei_c_ji" size="-1">└|;
-------------------------------------------------------------------------------------
「size="2"」を追加
-------------------------------------------------------------------------------------
$html_x .= qq|<a href="$link"><font color="$kei_c_ti" size="2">$_[2]</font></a><br>\n|;
---------------------------------------------------------------------------------------


携帯での表示と考えればあまり画像なんかを入れない方がキャリアや機種に依存しないので良いかも!!
あまり余計な物を付けると肝心のLOGが見づらいしね!!俺自身がクチャグチャしたコンテンツが嫌いなせいもあるか?

忘れちゃいけない事は「*_C」を弄ったら「*_W」も同様にすると言う事で・・・。。
今時の携帯に対応したCMS辺りだとわざわざ2つも書き換えしなくても良いが、
逆の発想から考えればど素人がそんな複雑な物を容易に弄れない面倒さもある。。
俺なんてCMSのコンパネを弄る事だけでも面倒なんで。。。
面倒な人はトットと大手のWEBLOGシステムを利用したら良いしね。
自分のそうだがnik等のDBを使用しないプログラムはサーバーを移動した時やバックアップが
容易なので重宝するというのが良いか!!基本的にはログと画像が入ったフォルダーだけで良いし。
7
3
4
5

SPINOUT_TOP

当方で使用しているブログ風日記のCGIは→ HPの回し者
8