あきらめてはいないモバイル化、でもなかなか進まないのはなぜか気づいた。

ページ数！（…のせいにしてみる）

コカバトは100ページでは利かないと思う。

だって、裏コラムだけ数えてみたって…

162ページ？

うっそ
言い直す

コカバトは300ページじゃ利かないと思う。

みんなのバトルデータ集に53人から協力してもらった。
ニュースも20個になった。
バトル以下は70ページ以上はある。

ここまででもう300ページ超えてる。
その他拾っていったら、350くらいになっちゃうかなぁ。


モバイル用がいらないと思うページもあるし、省略して減らすものもある。
それにしたって

おぃおぃおぃおぃ…


よくもPCサイトをリニューアル（2008夏）できたものだとわれながら感心する。
まぁいい。全部で350ページとしよう。

くじけそうになる心を強くするために、グラフ。




むしろ、折れそう…

コカバトモバイル化大作戦（？）は、未だぐだぐだな進みだけれど、
見切り発車をする心構えのもと、ちゃんと最大公約タグの洗い出しをした。
↑
…一番最初にするべきだった…

使えるタグとCSSが一番少ないドコモのものを書き出して、auとソフトバンクで使えるか照らし合わせる。そうすれば3キャリアで使える最大公約タグがわかる。それだけ使うようにすれば、たぶん、あんまりヘンテコなことにはならないんじゃないかという淡い期待のもとに。

けれど、相変わらずいろいろな「？」が日々浮上する。
今回あらたに浮かんだ「？」は、記号の表示について。

HTMLで記号を表すのには文字参照を使う。
よく使うものだけ覚えた。

&　→　&
<　→　<
>　→　>
↑　→　↑
↓　→　↓
←　→　←
→　→　→

矢印は使い勝手がいい。

そしたら！なんと！三角マークもこのように指定できることを初めて知った。

れぶろぐ：三角形を示す数値文字参照の一覧

ひゃー、記号の三角形って使えたんだ！
知らずにコカバトPCサイトでは、三角形の画像を使ってたよ…
コレはいい！

と、携帯サイトで喜んで三角形を使うことにしたところ…




左から、ドコモ、au、ソフトバンク（の各シミュレータ）

同じように表示されるようになってきたでしょ。

でもね…
ソフトバンク携帯のシミュレータ（またか…！）で三角マークが表示されないではないか！
なぜ？

ソフトバンクのサイトでは、文字参照は使えませんなんてことは書いてなかった（と思う）。
三角マークだけではなく、矢印マークも表示されず、コードがそのまま出ちゃう。
「&」も、&って。

これは、ソフトバンクのシミュレータに限っての問題なのかしら。
それともソフトバンク携帯では、記号のコードを理解しなかったりするのかしら。
三角マークをあきらめて、「一つ下」とか「スキップ」などの言葉にしたほうがいいのかしら。
せっかく三角マークを出せることを知ったのに…

もぅ！

左から、ドコモ、au、ソフトバンク（既出のスクリーンショット）。

ソフトバンク携帯のシミュレータでなぜ色の指定がきかないんだろ？
という疑問に知らんぷりをしようとしていたが、偶然理由がわかった。

原因は、色の指定の仕方だったみたいなの。
背景赤、文字白の指定を
<div style="background-color:#ff0; color:#fff;">文字文字</div>
としていたのを
<div style="background-color:#ff0000; color:#ffffff;">文字文字</div>
にしたら、こんなふうにちゃんと色ついた。
↓

文字文字

htmlでの色の指定は、Tag index Webサイト：CSSの色指定で、

■HTMLと同じ指定方法
#ff0000 ：ハッシュ（ # ）で始まる6桁のカラーコードで指定
red ：redやgreen、whiteといったカラーネームで指定

■CSS独自の指定方法
#f00：ハッシュ（ # ）で始まる3桁のカラーコードで指定
rgb(255,0,0) ：rgb( ) による指定（0〜255）
rgb(100%,0%,0%) ：rgb( ) による指定（0%〜100%）

と説明されている。

この中のどれかであれば、問題ないってことだよね…？

PCサイトではぜんぶで6桁のカラーコードで色の指定している。
ただ、携帯サイトは容量を軽くしなくちゃダメだよね？と、3文字分節約してみたら…
コレだ…。

ソフトバンクのサイトでは、色指定について3桁のカラーコードはダメだから、6桁のカラーコードで書きなさい　とは書いてない（と思う…）。
なんだかよくわからない。

ま、とにかく色は6桁のカラーコード（か、カラーネーム）で指定すりゃいいんだってことがわかったから、いいってことにしよう。

このままでは、いつになってもコカバトモバイルOPE〜Nとはならなさそう。
05ごめんね、2Gでガックリしたソフトバンク用のシミュレーター「ウェブコンテンツヴューア」の表示がひっかかっているの。
検索をかけてみると、「ウェブコンテンツヴューア」はひでぇシロモノ（という言い方はしていないが）だと言っている人がいないわけじゃないけど、表示されている人もいる。本でもまともなスクリーンショットがちゃんと載っている。
だからわたしが何か「やらなきゃいけないことをやってない」とか「やらなきゃいけないことを間違ってやってる」んじゃないかと。
今のままだと、「どうすればウェブコンテンツヴューアで色の指定を有効にできるか」にとらわれて、別な方向に走っていきそうだ…

だから、見切り発車をすることにした。
シミュレーターはあくまでシミュレーターなんだ。
多少表示が意図したものと違ってしまっても、読めないわけじゃあない。

ついでに発車前のまとめをしておくことにもした。
…最近、書いておかないと忘れるし、でもあちこちに書くとどこに書いたのかわかんなくなるし…

・XHTML文書にするとauとソフトバンクで外部スタイルシート（CSS）が利用できる。
・XHTML文書にしても、ドコモは外部CSSは使えない。
・ドコモでCSSを利用するには、インライン指定をする。内部参照はa:link、a:focus、a:visitedのみ。
・ドコモでCSSをインライン指定するとき、＜div＞＜span＞だけ…と思っておいたほうが安心。
・XHTMLモードで動作させるために、ドコモのために.htaccessファイルに、AddType application/xhtml+xml .htm .htmlなどと書いてやらなければいけない。
・画面のサイズは240pxと考えておく。

そして発見！
「適当な日々」というサイトに

xhtmlを中心にモバイルサイト構築ノウハウまとめ

個人的に＆本能的に、そこに書かれていることに習うことが正しいと直感した
実際にその仕事をしてきて溜まってきたノウハウって貴重っ。
わたしも広告づくりをやっていて、経験に裏打ちされたノウハウは強いってことを多々感じるし！

というわけで、
＜div＞＜span＞だらけになることを恐れずに、基本文字サイズをドコモとソフトバンクはsmall、auはx-smallで、見切り発車をしようかと思いマス。
…どうなることやら。

[文字サイズの情報memo]
・ドコモ：iモードブラウザ2.0対応コンテンツ作成時の仕様
・ソフトバンク：XHTMLとCSSによる携帯サイト制作
・au：auのフォントサイズ（Kimura.Memo）

PCだって携帯だって、誰にでも見てもらえるようにしたい…気持ちはヤマヤマだけど、携帯サイトをXHTMLで作ることにした。
2G携帯では見られないってことになる…

気分はスッキリ！ではないけれど、これで「何語で書けば？」はクリア。
とはいっても、HTMLで書いているPCサイトのひとつのサブディレクトリだけがXHTMLであることがいいのかどうかは、わからないまま（少なくとも不自然な気はする）。
また、ドコモ携帯にXHTML文書であることを知らしめるために、サーバーに「これは誰がなんといおうとXHTML文書ですよ」と伝えるメッセージを付け足さなければいけないんだって。
これが他のHTMLでのページに影響したらどうなっちゃうの？という心配もある。
調べてみたら、そのメッセージは、置かれた場所以下の文書のみに影響するという説明があったので、ヨシとすることにした。

…大丈夫なのかな。

先に進まないので、とにかくXHTMLに書き換えてテスト。
「まず読め、ちゃんと読め」をモットーに、本を見ながら3キャリアで…というより、使えるタグやCSSが少ないドコモにあわせて書くよう気をつける。

ドコモ用を基準に、auなら緑、ソフトバンクなら青い文字になるよう、CSSで指定してみた。

まずはPCで表示確認。



左から、ドコモ、au、ソフトバンク。

いいねぇ！
こうでなくちゃ！

次にシミュレーターで表示させてみた。




同じく左から、ドコモ、au、ソフトバンク。

おぃッ！
どうしてよ？

シミュレーターで表示させると、auで絵文字が出ない。
ソフトバンクに至っては、色の指定が反映されないし、CSSで指定している青い文字にもならない。しかも、絵文字がドコモっぽい。

シミュレーターの使い方がよくわかってないのかも知れない。
何かひとつやるたびに、「？」が出現、調べてはまた試す…の繰り返しで、ホントさっぱり先に進めない。
でも仕方ないから調べてみる。

「携帯端末振り分けソースがソフトバンク端末でうまくいかない？」に、

このシミュレータでは「USER_AGENT」という識別子を発信していません。」

とある。

わたしは、携帯サイトを作ろう！-ちょっと詳しいモバイルサイトの作り方-さんから、携帯絵文字変換スクリプトと、auとソフトバンクの外部CSSを切り替えるMobile CSS Switcherを使わせてもらった。

絵文字の変換もCSSの切り替えも、この「USER_AGENT」というのを利用して、キャリアを判別させている（そうな）のだ。
だから、ソフトバンクのシミュレーターで「USER_AGENT」という識別子を発信しない（本物である"Softbank"ではないモノを発信しているらしい？）なら、当然、絵文字変換も外部CSS切り替えスクリプトでも、ソフトバンクだってことを認識できなくなちゃう。ソフトバンク用の指定は効かないことになる。
だから絵文字が基本のドコモのようになっていても、青い文字にならなくても、わたしの間違いではないらしい。

ただ困っちゃうのは、赤背景に文字白ヌキとか、薄い黄色を敷く指定が反映されてないってことだ。
だって、それは外部CSSに書いたわけではなく、XHTMLページに書いてある。
＜div style="background-color:#---; color:#---;"＞みたいに。
ソフトバンクはdivタグにbackground-colorもcolorも指定できるって本に書いてあるよ？

XHTMLにすれば外部CSSが使える
↓
外部CSSで文字サイズを3キャリアそれぞれで適当な大きさに指定できる
↓
文字サイズばかりでなく、3キャリアの差異を少しは少なくできて見やすくなるかも♪

と、すんなりはいかないにしても、とにかく少しは前進するんじゃ？と期待していた。

前進、しないじゃん。