モバイルでのXHTMLとCSS

[ kz ]
[ http://miniturbo.org/ ]
[ shono@miniturbo.org ]
[ http://gaiax.co.jp/ ]

Agenda

  1. 自己紹介
  2. モバイルにおけるXHTML
  3. モバイルにおけるCSS
  4. 三大キャリア
  5. まとめ

自己紹介

自己紹介

しょうの かずや と申します

その正体はマークアップエンジニア

今年の4月より、株式会社ガイアックスにて

をかいております

順路→

ちょっと脱線#1

モバイル勉強会の話はTwitterがきっかけではじまりました

携帯からの発言

そう、気軽に携帯から発したこのヒトコトがきっかけとなったのです

ちょっと脱線#2

次々と賛同者が！

  • iアプリとかで良かったら喋るよー♪by yoshiori
  • モバイルってなかなか知識得る機会ないから興味あるよ！by tobetchi
  • なんかしゃべりましょうか？むしろ最近の話に弱いですが、準備しますよby tmtysk
  • いきたいby fshin2000
  • 高まる期待(*'∀`)=3ﾜｸﾜｸby cafistar
  • モバイル勉強会興味津々！by clearether
  • モバイル勉強会期待してます。by kaoritter

これに対して携帯から全レスするみにたぼ (｀・ω・´) ｼｬｷｰﾝ

ちょっと脱線#3

つまり

モバイル勉強会はモバイルから始まった

ということなんですね！ (えっへん

ちょっと脱線#4

えーと...

ちょっと脱線#5

参加していただいたみなさま、スピーカーのみなさま

ありがとうございます＞＜

きれいにまとまったところで

本題にすすみます :)

順路→

モバイルにおけるXHTML

2つの仕様

今現在において、モバイル端末向けのXHTMLの仕様は2つ存在します

ちょっと待って

OMAってなにさ！

OMA(Open Mobile Alliance)ってなぁに？

OMAとはモバイル通信関連の業界団体です

OMA（Open Mobile Alliance）は、世界各国のモバイル通信関連企業が集まった業界団体の名称（6月13日の記事参照）。本部は米国カリフォルニア州に設置されている。OMAは、これまであった各種の業界団体を「束ねた」という点が特徴で、参加企業は既に200社を超えている。日本からは、NTTドコモをはじめとしたキャリア、主要メーカーが名を連ねている。

WAPを推進してきたWAP Forumという業界団体もOMAに仲間入りしました

ちょっと待って

WAPってなにさ！

WAP(Wireless Application Protocol)ってなぁに？

WAPとはモバイル通信関連の業界団体です

携帯電話や腕時計などの携帯端末用の通信プロトコル。Ericsson社、Motorola社、Nokia社、Unwired Planet社(現Openwave Systems社)によって設立されたWAP Forumによって策定された。

当初使われていたコンテンツ記述言語はWMLということでしたが評判がよろしくなかったため、WAP2.0にてXHTMLをベースとした言語が採用されました

OMA, WAPについてわかりましたか？

では、

についてお話します :)

XHTML Basicってなぁに？

XHTML BasicはW3Cによって勧告されたXHTMLのサブセットです

XHTML1.0(1.1)のいくつかの機能を削ったシンプルなものとなります

XHTML Basicのルール

XHTML Basicでは次のように記述することが定められています

XHTML Basicのサンプル

実際にはこんな感じでかきます

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"
   "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
   <title>...</title>
</head>
<body>
   ...
</body>
</html>

XHTML Basicの要素#1

Structure
  • html
  • head
  • title
  • body
Text
  • h1～h6
  • address
  • blockquote
  • div
  • p
  • pre
  • abbr
  • acronym
  • br
  • cite
  • code
  • dfn
  • em
  • kbd
  • q
  • samp
  • span
  • strong
  • var
Hypertext
  • a
List
  • dl
  • dt
  • dd
  • ol
  • ul
  • li

XHTML Basicの要素#2

Basic Forms
  • form
  • input
  • label
  • select
  • option
  • textarea
Basic Tables
  • caption
  • table
  • td
  • th
  • tr
Image
  • img
Object
  • object
  • param
  • dd
  • ol
  • ul
  • li

XHTML Basicの要素#3

Metainformation
  • meta
Link
  • link
Base
  • base

どんどんいきます

では続いて、

についてお話します :)

XHTML Mobile Profileってなぁに？

XHTML Mobile ProfileはOMAが制定したXHTMLのサブセットです

XHTML Basicは、本当に必要不可欠な最低限のモジュールだけをあつめて作られました

XHTML Mobile Profileでは、XHTML Basicにいくつかの要素、属性が加わってます

XHTML Mobile Profileで追加されたもの

要素
  • fieldset
  • optqroup
  • b
  • big
  • hr
  • i
  • small
  • style
属性
  • style
  • (ol要素における)start
  • (li要素における)value

XHTML Mobile Profileのサンプル

実際にはこんな感じでかきます

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
 "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
   <title>...</title>
</head>
<body>
   ...
</body>
</html>

2つを見比べて...

ということで、

についてお話しましたが、現時点ではよりモバイル通信端末に特化したXHTML Mobile Profileを選択するのがよいでしょう

実際にはそうも言ってられないのですが...

ここまでおわかりでしょうか？

次に進みます :)

順路→

モバイルにおけるCSS

2つの仕様

今現在において、モバイル端末向けのCSSの仕様は2つ存在します

CSS Mobile Profileってなぁに？

CSS Mobile ProfileはW3Cが発表した仕様でCSS2のサブセットです

CSS Mobile Profileの対応するセレクタ#1

CSS Mobile Profileでは以下のセレクタに対応しています

汎用セレクタ
*
型セレクタ
E
子孫セレクタ
E F
子セレクタ
E > F

CSS Mobile Profileの対応するセレクタ#2

リンク擬似クラス
E:link
リンク擬似クラス
E:visited
動的擬似クラス
E:active
動的擬似クラス
E:focus
クラスセレクタ
.hogefuga
IDセレクタ
#hogefuga
グループ化
E1, E2, E3 {...}

CSS Mobile Profileの@規則

CSS Mobile Profileでは以下の@規則に対応しています

CSS Mobile Profileの対応するプロパティ#1

CSS Mobile Profileでは以下のプロパティに対応しています

(...)内は、CSS2.1より変更のあったものです
*は、2.0にて対応したプロパティです

マージン関連
  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
  • margin

CSS Mobile Profileの対応するプロパティ#2

パディング関連
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
  • padding

CSS Mobile Profileの対応するプロパティ#3

ボーダー関連
  • border-width
  • border-color
  • border-style (none|solid|dashed|dotted|inherit)
  • border

CSS Mobile Profileの対応するプロパティ#4

アウトライン関連
  • *outline-color
  • *outline-style (none|solid|dashed|dotted|inherit)
  • *outline ([<outline-color>]||[<outline-style>]|inherit)

CSS Mobile Profileの対応するプロパティ#5

表示関連
  • visibility

ボックス関連
  • display (inline|block|list-item|none|inherit)
  • width (<length>|<percent>|auto|inherit)
  • *min-width / max-width
  • height (<length>|<percent>|auto|inherit)
  • *min-height / max-height

CSS Mobile Profileの対応するプロパティ#6

絶対位置決め
  • *position (relative|absolute|inherit)
  • *top / right / bottom / left (<length>|<percent>|auto|inherit)
  • *z-index
浮動体
  • float
  • clear

CSS Mobile Profileの対応するプロパティ#8

リスト関連
  • list-style-type (disc|circle|square|decimal|lower-roman|upper-roman|
    lower-alpha|upper-alpha|none|inherit)
  • list-style-image
  • list-style

CSS Mobile Profileの対応するプロパティ#8

バックグラウンド関連
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position (top|center|bottom|left|right|inherit)

CSS Mobile Profileの対応するプロパティ#9

テキスト関連
  • color
  • line-height
  • text-align
  • text-decoration
  • text-indent
  • text-transform
  • vertical-align
  • white-space

CSS Mobile Profileの対応するプロパティ#10

フォント関連
  • font-family
  • font-style
  • font-variant
  • font-weight
  • font-size
  • font

WCSS(Wireless CSS)ってなぁに？

WCSSは、OMAが制定した仕様です

W3Cが勧告したCSS Mobile profileに、いくつかの

を追加しています

WCSSで追加された独自拡張#1

以下の項目が独自拡張として追加されました

WCSSで追加された独自拡張#2

詳細は割愛いたします
詳しくはOMAの仕様書をご覧ください

2つを見比べて...

ということで、

についてお話しました

WCSSは、モバイルに特化しているのですが、日本の携帯電話ではCSS Mobile Profileでちょうどよいくらいではないでしょうか

ここまでおわかりでしょうか？

では、ここで日本の各キャリアの対応状況を見ていきます :O

順路→

三大キャリア

代表的な三社はどうなっているの？

代表的なキャリアである

を比較しつつ追っていきたいと思います

三大キャリアの対応状況

対応する仕様を以下のように公表しています

NTT DoCoMo
WAP2.0互換な(XHTML Mobile Profileを基にした)iモード対応XHTML
au by KDDI
XHTML Basic / iモード対応HTML
SoftBank
XHTML Basic / XHTML Mobile Profile / iモード対応HTML

しかし、ここに大うそつきがいます

うそついてるの誰？

DoCoMo2.0

また君かね、ドコモ君！

そう、あのDoCoMoです

さて、そろそろ反撃してもいいですか?

どうぞどうぞ＞＜

実は互換ではなかった

前述したとおり、DoCoMoは公式に

WAP2.0互換な(XHTML Mobile Profileを基にした)iモード対応XHTML

と発表しております

...にも関わらず、link要素をサポートしておりません

さらには、style要素にかけるのは擬似クラス&動的クラスのみ、
WAP2.0で推奨しているCSSにはstyle属性にてサポートしているのみです

style属性でサポートしているっていっても...

<font color="char">...</font>

これが、

<span style="color: char;">...</span>

になるだけです

だったら
<font color="char">...</font>
でいいじゃん

他のキャリアは比較的対応しています

auとSoftBankはXHTML MPを使用してもまず問題はありません

CSSについても比較的サポートされているようです

CSSについては公式でリファレンスが無いため確認できない
KDDIが採用しているOpenwave社にてXHTMLとCSSについてのリファレンス(日本語版)が公開されています

つまり

大まかにわけるならば、

こうなりますね

XHTML+CSSでサイトを作成するには、どうしてもドコモ用にコンテンツを別で用意しなくてはなりません :(

もしくは

いっそのこと

iモード対応HTML

で組んでしまうという手もあります

(それはやだけど...)

さてさて

どうでしたか？

せっかく仕様が制定しているのに、仕様をまったく使われていない現状なのです

じゃあ実際のコンテンツ制作はどうすればいーのさ！

それは...

yuzuhoさんの資料ですべてわかります

＞＜

順路→

まとめ

まとめ

参考資料

ご清聴ありがとうございました