携帯サイトを作ろう! -ちょっと詳しいモバイルサイトの作り方-
XHTML+CSSで一歩進んだモバイルサイトを作るテクニックを幅広く紹介☆
このエントリーを含むはてなブックマーク このエントリーをブックマークに追加
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


このエントリーを含むはてなブックマーク このエントリーをブックマークに追加
前回の記事でHTMLの冒頭で宣言するDOCTYPEの違いについて触れたのと、
携帯の機種によってDOCTYPEを自動出力するようなプログラム(関数)
を作ろうかなって思ったので、ここで今一度覚え書き程度にまとめてみます。

3回にわたって各キャリア別に書いていきます。
まずはドコモから。

○iモードHTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD Compact HTML 1.0 Draft//EN">

通称:Compact HTML(CHTML)。W3Cで正式な勧告がなされている。
以前、携帯メーカー各社がこの「Compact HTML」をW3Cに逆提案したいきさつがある。

現在バージョンは7.0まであり、バージョンアップを重ねるごとに
ドコモの新機能に対応した形でリリースされる。基本的にはHTMLと同様。
このDOCTYPEは省略可能か公式サイトには明言されていませんが、
省略しても動作はするようです。

○iモードXHTML(バージョン共通)

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />...

基本はこの共通系で動作しますが、通常はiモードXHTMLのバージョンによってDOCTYPEが用意されているので、そちらに合わせた方が良いでしょう。

バージョンによるDOCTYPEは以下。

iモードXHTML1.0

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/1.0) 1.0//EN" "i-xhtml_4ja_10.dtd">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />...


iモードXHTML1.1

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/1.1) 1.0//EN" "i-xhtml_4ja_10.dtd">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />...


iモードXHTML2.0

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/2.0) 1.0//EN" "i-xhtml_4ja_10.dtd">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />...


iモードXHTML2.1

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/2.1) 1.0//EN" "i-xhtml_4ja_10.dtd">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />...


たぶん分かると思いますが、iモードXHTMLの場合は、
DOCTYPEの以下の部分がバージョンに合わせて変わるだけです。

<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/2.1) 1.0//EN" "i-xhtml_4ja_10.dtd">


文字コードはiモードXHTMLの場合に限り、UTF-8も可能です。
この場合は、「Shift_JIS」を「UTF-8」に変えて、HTMLをUTF-8で保存し直せばOKでしょう。

ただし、3キャリア対応サイトを作るなら、Shift_JISにするほうが良いです。
これは前の記事でふれました。

なお、iモードXHTMLのDOCTYPEは省略不可。これは前回の記事で詳しく解説しました。
DOCTYPEを省略したり、記述を間違うと、ブラウザがXHTMLモードにならないので、
いじらない方が無難です。
スポンサーサイト


このエントリーを含むはてなブックマーク このエントリーをブックマークに追加
最近発売されているドコモの機種(FOMA)のブラウザにはたいてい
iモードHTMLとiモードXHTMLの両方に対応したモードが搭載されています。

例えば、最新のハイエンド機種FOMA 904iでは、ドコモの技術情報の端末スペック表を見ると、
iモードHTMLはバージョン7.0、iモードXHTMLは2.1に対応していることが分かります。

これは、携帯電話が機能向上するのと並行して、
携帯に対応したHTMLもバージョンアップを繰り返すためです。

このi-HTMLとi-XHTMLの違いは、多くはHTMLタグで指定できる属性やCSSの対応状況になりますが、簡単に言ってしまえば、i-XHTMLのほうがより豊かな表現が可能になっていると解釈しても間違いではないでしょう。


さて、携帯サイトを作成する際のポイントについてふれますが、
多くの方が勘違いされているのは、

ドコモの機種が割と新しい機種、つまりXHTMLに対応した機種であれば、
HTMLは自動的にXHTMLモードになるということ。


言い換えると、

i-XHTMLでしか対応していないCSSや書き方でも、
普通にHTML内に書けばそれに対応している機種なら表示できるということ。


結論から言ってしまえば、これはどちらも間違いです。

ドコモ携帯のブラウザをi-XHTMLモードで表示させるためには、
以下のような点に注意しなければなりません。

・DOCTYPE宣言が正しく行われていること。
・コンテンツのMIMEタイプが「application/xhtml+xml」であること。

2点目のMIMEタイプはHTMLのヘッダーで

<meta http-equiv="ContentType" Content="application/xhtml+xml">

が指定されていて、
かつサーバー側においても正しいHTTPヘッダが出力されている必要があります。

設定されていない場合は、.htaccessで
「AddType application/xhtml+xml .html」
のいう一文を追加します。

このような条件がそろって初めて、ドコモの機種はi-XHTMLモードでの表示が可能になります。
よりstrictな設定が必要だということですね。

ちなみに、ドコモ向け端末において、XHTMLモード(iモードXHTML)で表示させる場合、
拡張子は「xhtml」でなければならないという解説をしているところもありますが、それは間違いです。
Webサーバーにおいては拡張子はそれほど重要ではなく、
問題はその拡張子がどのようなコンテンツMIMEタイプであり、どんなHTTPヘッダが出力されるか
ということのほうが重要です。

上記例(htaccess)では、「.html」という拡張子においてはHTTPヘッダ
は「application/xhtml+xml」にせよ、という明示なので、この設定がなされていれば、Webサーバーは拡張子htmlで、「application/xhtml+xml」というHTTPヘッダを出力するようになるので、
ドコモの機種はXHTMLモードに切り替わります。
機種によっては「.xhtml」を読まない機種もありますので、私はこのような指定方法を推奨します。



また、このXHTMLモードに切り替えると以下のような表現が可能になります。

DIVタグでbackgroundプロパティを指定したい

というケース。

ドコモ機種では文字の後ろに背景色をつけたような表示をさせるには、
以下の2種類の方法があります。

・tableタグを用いる。(正確にはtdタグのbgcolor要素を使用する)
・DIVタグを用いる。(正確にはstyleでインライン指定する。)

ただ、tdタグでの背景色指定はi-HTMLバージョンが6.0以上、i-XHTMLで2.0以上という条件に対し、
DIVタグのstyle指定ならi-XHTML1.0以上という条件ですから、
DIVタグで指定する方法のほうが、より多くの端末を内包することになります。

従って、上記のようなケースではDIVタグを用いるほうが正解ですが、これも先ほど説明したようにブラウザがi-XHTMLモードになるようにHTML側で正しく設定していた場合の話です。

以下のサンプルを参考によく理解しておきましょう。

■DIVタグのSTYLE属性で背景を指定する例

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />
<title>テスト</title>
</head>
<body>

<div style="background-color:#808080;">aaa</div>

</body>
</html>



このエントリーを含むはてなブックマーク このエントリーをブックマークに追加
なかなか更新できず申し訳ないです。

auのGPS機能を利用する方法と、GPSの起動方法については前回の

au携帯のGPS機能で地図を表示させるプログラム

を参考にしていただければ、だいたいの流れは分かったとは思いますが、
今回は最終回「auのGPSから緯度や経度を取得するプログラム例」を書きたいと思います。

前回の記事で、
GPSを起動させるには、

<a href="device:gpsone?url=test.php&ver=1&datum=1&unit=0&acry=0&number=0">位置情報取得</a>

というような記述をすればよいということはふれました。

ここで、上記の「url=test.php」という部分は、GPSにより得られた結果を処理するプログラムを指すわけですが、実際のところ、プログラムの肝となるのは、MapFanのような携帯地図表示サービス(要登録)が提供している仕様に合わせて、結果をカスタマイズすれば良いのです。

今回は、このMapFanが提供しているサービスを例に、そのプログラム(といっても数行ですが…)を紹介したいと思います。

まず、MapFanが提供しているサービスとは、
予め登録した携帯サイトにMapFanが提供するAPIを組み込むことで、
誰でも簡単に携帯GPSを使った地図表示サービスの提供が可能となり、
例えば、自社周辺の地図を提供したり、今回のようなプログラムを使用することで、現在地を提供したりすることが無料でできるようになります。

一方、MapFan(インクリメントP社)は、地図サービスを無料で提供する一方で、地図を表示するのは1回に限ったりと制限を加えることで、オリジナル版と差別化を図ることでMapFanへの登録を促したり、サービスをより広く告知する意味でもAPIを公開することがプラスになるわけです。

だいぶ本題からはずれましたが、
このサービスを利用するには登録が必要ですので、登録しなければ得られない情報は「***」で伏せてありますので、予めご了承ください。

スクリプト例
test.php

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Cache-Control" content="no-cache">
<title> [周辺地図検索]</title>
</head>
<body bgcolor="#fffcee">
<a name="top"></a>
<center><font color="orange">[周辺地図検索]</font></center>

<center>
<form method="get" action="http://****************.cgi">
<input type="hidden" name="***" value="http://">
<input type="hidden" name="***" value="戻る">
<input type="hidden" name="***" value="11">
<?
chop($lat);
chop($lon);
$lat_s = explode("+", $lat);
$lon_s = explode("+", $lon);
echo "<input type=hidden name=*** value=E$lon_s[1]N$lat_s[1]>";
?>
<input type="submit" value="現在地表示">
</form>

<br><font size="-2">powered by MapFan</font></center><br>

<hr size="1" color="orange" width="90%">
<font color="red">[ご注意]</font><br>地図の表示は1枚に限ります。2頁目以降はMapFanへの登録が必要です。

<hr color="blue" size="1">
<a href="/">トップへ戻る</a>
<hr color="blue" size="1">
</body>
</html>

といった感じです。
上記例はPHPを使ったスクリプトですので、CGIなどの言語にも応用可能なはずです。

ここで重要となるは、

<form method="get" action="http://****************.cgi">
<input type="hidden" name="***" value="http://">
<input type="hidden" name="***" value="戻る">
<input type="hidden" name="***" value="11">
<?
chop($lat);
chop($lon);
$lat_s = explode("+", $lat);
$lon_s = explode("+", $lon);
echo "<input type=hidden name=*** value=E$lon_s[1]N$lat_s[1]>";
?>
<input type="submit" value="現在地表示">
</form>

の<form>タグで書かれた部分ですが、
まず、わざわざMapFanのサービスにformタグを用いて情報を渡す必要があるのは、MapFanの仕様では、経度や緯度などの情報はURLエンコードされてなければならない理由があるためです。

「http://****************.cgi」は、MapFanからいただける技術情報に記載のURLで、これが経度や緯度といった情報を渡す地図プログラムです。

さらに、hiddenの隠しパラメータで戻りURLを指定したり、そのアンカーテキストなどを指定することができます。それが2~4行に書かれているものです。

そのほか、phpの部分である

<?
chop($lat);
chop($lon);
$lat_s = explode("+", $lat);
$lon_s = explode("+", $lon);
echo "<input type=hidden name=*** value=E$lon_s[1]N$lat_s[1]>";
?>

は、auのGPSが返す戻り値を参考に、MapFanの仕様に合わせるだけです。

上記例は、MapFanの地図サービスの中で、「経度・緯度」による地図表示を使用していますので、それ以外にも、駅名検索や電話番号検索などのサービスもこの応用で使えます。

ごらんの通り、「経度・緯度」による地図表示は現在地を上手く表示するためには、それなりの精度が求められます。これはau携帯のGPSが取得する情報に大きく依存することになりますので、
auのGPS起動時のパラメータを上手く設定してあげる必要がありますが、
これは前回の記事に詳しく書いてありますので参考にしてください。


このエントリーを含むはてなブックマーク このエントリーをブックマークに追加
携帯サイトのページを作成する場合と、パソコン向けのページでは
よく使用するHTMLタグがまったくといっていいほど異なります。

今回は携帯サイトを作成する際によく使うHTMLタグのご紹介です。

つづきを表示


このエントリーを含むはてなブックマーク このエントリーをブックマークに追加
ただでさえ、分かりにくいモバイルサイト。
運営しているサイトから管理人へ連絡する手段はありますか?
つづきを表示


このエントリーを含むはてなブックマーク このエントリーをブックマークに追加
マーキータグ。marquee tag。

この言葉を耳にすると、多くのHTML作成の経験者やWEBデザイナーは、ちょっと憂鬱な気分になります。

電子掲示板のように動的に文字を画面上でスクロールさせることのできるマーキータグは、パソコン向けのホームページでは、常に煙たがられるちょっとかわいそうな存在です。
つづきを表示


このエントリーを含むはてなブックマーク このエントリーをブックマークに追加
ちょっと3キャリア対応サイト作成法から離れて、今回はちょっとハイエンドなテクニックを紹介します。

例えば、壁紙サイトを携帯サイトで運営するとします。「自分が作成した画像はできれば、自分のサイトからダウンロードして欲しい。」
とか、

「画像を勝手にコピーされたくない。」などのように考える方もいらっしゃるでしょう。

現在の携帯端末はサイト上に掲載されている画像を簡単に端末に保存できます。また、通常、著作権処理が施されていない画像の場合、これらの画像をメールで転送したり、外部メモリーカード等に書き出すことができます。つまり、サイトオーナーからしてみれば、事実上画像の流出を防ぐことができません。

しかし、これを許してしまうと、例えば商用サイトなどでは、死活問題になりかねないことになり、対策する必要が出てきます。

その画像に著作権を付ける方法が今回のテーマです。
つづきを表示




Copyright © 携帯サイトを作ろう! -ちょっと詳しいモバイルサイトの作り方-. all rights reserved.

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。