Blog ブログ・ブログ構築

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で振り分けるのがよさそう。

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

ブログシステムのインストール&カスタマイズ

各種ブログシステムのインストールからカスタマイズまで、幅広く承ります。
ご利用のサーバー環境にあったシステムのご提案から、ホスティングのご案内までご紹介いたします。

オープンソースのシステムを使えば、高価なライセンス費用や、プログラム開発費用をかけずに構築することが可能です。
このサイトもMovable Type version 4.01をベースとして構築しています。

Movable TypeによるBlog作成例:03style Blog

Geeklogカスタマイズ(5)

Geeklogの場合、<title>部分の表記順が

例:サイト名 - 各ページタイトル
となっているが、SEOに配慮した場合、各ページのタイトル(カテゴリ名など)が先に来る方がいい。

例:各ページタイトル - サイト名


修正ファイル:lib-common.php

if( !empty( $pagetitle ))
{
$pagetitle = ' - ' . $pagetitle;
}
$header->set_var( 'page_title', $_CONF['site_name'] . $pagetitle );

の部分を

if( !empty( $pagetitle ))
{
$pagetitle = $pagetitle . ' - ';
}
$header->set_var( 'page_title', $pagetitle . $_CONF['site_name'] );

にすればいい。

Geeklogカスタマイズ(4)

各ページにおけるパンくずリストは、以下のスクリプトを埋め込むことで表示されるようになる。

<a href=”http://digital-gate.com/”>HOME</a>
 &gt; <a href=”{story_topic_url}”>{story_topic_name}</a>
 &gt; {start_storylink_anchortag}{story_title}{end_storylink_anchortag}

修正ファイル:featuredstorytext.thtml(注目記事のテンプレート)
修正ファイル:storytext.thtml(記事のテンプレート)

Geeklogカスタマイズ(3)

ブラウザのキャッシュが原因で、データを修正したり、コメントを削除したりした場合に反映されないように見える時がある。
特にMacのSafariでは気になることが多い。

ブラウザのキャッシュをコントロールするmetaタグは以下のもの。
これを<head>〜</head>の間に挿入しておくといい。

<meta http-equiv=”Pragma” content=”no-cache”>
<meta http-equiv=”Cache-Control” content=”no-cache”>

修正するファイル:header.thtml

Geeklogカスタマイズ(2)

各記事下の印刷」「記事を友人にメールする」アイコンを非表示にしたい場合

修正ファイル名:config.php

$_CONF[‘hideemailicon’]         = 1;      // 記事を友人に送るアイコン(1:隠す 0:隠さない)
$_CONF[‘hideprintericon’]       = 1;      // 記事を印刷するアイコン(1:隠す 0:隠さない)

それぞれを修正

Geeklogカスタマイズ

ホームページ用として使用する場合等で、フッターに表示されている
『本ページのすべての商標と著作権はそれぞれの所有者に帰属します。』
という文章が適合しない場合は、以下の方法で修正が可能。

文章を修正したい場合

修正ファイル:
private/langeage/japanese_utf-8.php

文章を削除したい場合

修正ファイル:lib-common.php

    $footer->set_var( ‘copyright_notice’, ‘&nbsp;’ . $LANG01[93] . ‘ &copy; ‘
            . $copyrightyear . ‘ ‘ . $_CONF[‘site_name’] . ‘<br>&nbsp;’
            . $LANG01[94] );

    $footer->set_var( ‘copyright_notice’, ‘&nbsp;’ . $LANG01[93] . ‘ &copy; ‘
            . $copyrightyear . ‘ ‘ . $_CONF[‘site_name’] );

ブログシステムの紹介/Geeklog

geek.jpg

Geeklogは、PHP・MySQLで動作するオープンソースのCMSです。
管理権限設定が可能なため、一般のサイト以外に企業のサイト構築も可能です。
また、SEO対策にも配慮されており、デフォルトで3キャリアからも閲覧が可能となっています。

Geeklogを動かすのには以下の環境が必要です。
PHP: PHP4.1.0 以上 データベース: MySQL3.23.2 以上。