モバイルページ(携帯電話対応サイト)の作り方

普通のパソコン対応のホームページが作れるようになったら、モバイルページ(携帯電話対応ページ)を作ってみましょう。言語はCHTMLを使えば、まずどの携帯電話(フィーチャーフォン)でも問題なく表示されます

携帯電話対応ページ(サイト)にするには

携帯電話(フィーチャーフォンとかガラケーとか言う)対応ページ(サイト)とはどのようなものでしょうか。簡単に言えば文字だけのページ(サイト)です。通信方式はパケット通信です。

文字コードはShift-JISで、記述言語はCHTML、１ページの容量は5KB以内で、画像や音楽や絵文字を使わないようにすれば、ほぼ全ての携帯端末で使えるページができます。

CHTML（Compact HTML）とは

携帯電話やPDA(Personal Digital Assistant)などの携帯情報端末向けの記述言語です。HTMLから余分な仕様を除いたものです。

とにかく、次のように文字を書く基本的なタグのみ使えば問題ありません。

CHTMLで書いたモバイルページの例

次のCHTMLで書いたモバイルページは、文章だけを伝える為のページの例です。1行目でCompact　HTMLだということをブラウザに知らせます。

ヘッドタグ内にメタタグでテキスト文字のコードをShift_JISで書いていることを知らせます。当然文字コードはシフトJISで書きます。meta name="description"とmeta name="keywords"はSEO対策です。ページに的確なタイトルを付けて、タイトル(TITLEタグ)を書きます。

ボディタグ内は人にも検索ロボットにも見易いように、見出し楽天 (H1~H6タグ)を付けます。文章に段落を付けて、段落(Pタグ)を使って文章を構成していきます。段落以外は改行をしなくても良いのですが、適度に改行をしたい時は改行(BRタグ)で改行します。リンクをするにはリンク(Aタグ)を使います。

これだけでほぼ普通の文章は作れます。Pタグを使わず文章をタグ無しで書いても問題ありません。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD Compact HTML 1.0 Draft//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta name="description" content="***********">
<meta name="keywords" content="***,***,***">
<title>*****</title>
</head>
<body>
<h1>*****</h1>
タグ無しで書いてもOKです。
<p>普通はPタグを使って文章を書きます。</p>
<br>
<a href="***">*****</a>
</body>
</html>

CHTML 1.0で使えるその他のタグ

上記以外にもCHTML 1.0で使える主なタグには、次のようなものがあります。

CENTER　中央揃え
DIV　位置指定　align="left | center | right"
HR　区切り線(水平線)
PRE　ベタ書き(ソースをそのまま表示)
UL　リストの指定
LI　リストの内容
FORM　フォーム　action="URL" method="get | post"
INPUT　テキスト入力フィールド、ラジオボタン、チェックボックス
IMG　画像表示　GIFとJPEG画像は問題なく使えます

携帯電話(フィーチャーフォン)向けグーグルアドセンス

モバイル向けグーグルアドセンスはPHPで記述します。拡張子をphpにするか、拡張子がhtmlでもPHPが動作するようにhtaccessファイルに記述します。当然、PHPの使えるサーバーでないと携帯電話向けグーグルアドセンスは表示できません。

CHTMLで作成したモバイルページにグーグルアドセンスを付けた場合は、広告だけが表示されて、広告枠が表示されないので、広告の上に水平線の区切り(HRタグ)を付けたり、「広告」か「スポンサーリンク」かのラベルが無いとプログラムポリシー違反となる可能性がありますので注意してください。

モバイル向けグーグルアドセンスは一つのページに一つしか付けることができませんので注意します。また、ダブルの広告はページの下部にしか付けられなかったのですが、この項目はモバイルアドセンスのプログラムポリシーから削除されたようです。

PHPのインクルード機能でグーグルアドセンスの外部ファイルを取り込むと便利です

PHPとはHTML文書中に記述されたスクリプトをサーバーのPHPが実行し、その結果を HTMLデーターとしてWebブラウザに渡すものです。

PHPファイル(拡張子は普通php)の中で同じフォルダ内にあるグーグルアドセンスの外部ファイル(mobile_adsense.inc)を呼び出すには次のようにします。

<?php include("mobile_adsense.inc"); ?>

インクルードするファイルの拡張子はincやhtmやhtmlやphpでもかまいません。上記のHRタグもこのファイルに記述すると便利です。

CHTMLの文法を診断する

モバイルページが完成したら、HTML文法診断ページでCHTMLの文法チェックをしましょう。普通はかなり厳しい診断結果になりますが、重大なエラーでなければ良しとしましょう。