前回の宣言通り携帯版モバゲーのTOP画面を画面メモして見ながら作成した。
まず携帯のXHTMLを理解するのに3時間くらいかかったかも。
それ含めてトータル6時間くらい。
いろいろトラブルがありました。
簡単に流れをメモしとく。
・まずＴＯＰを画面メモ
・画像をコピーしてＰＣに送って、同じサイズの真っ白画像作る
・XHTMLの宣言などする
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
☆検証デバイスはdocomoだけど一応共通宣言
・画面メモ見ながらテキスト入力
・<div>で囲んだりフォームを作ったり画像を埋め込む
・インラインCSSでレイアウトする
☆XHTMLとうことで内部CSSや外部CSSが使えるが、怖いのでインラインにしました
・絵文字入力ソフト「ｉ 絵文字」でdocomoの絵文字をポンポン追加してくhttp://www.nttdocomo.co.jp/service/imode/make/content/pictograph/tool/
今回はdocomoだけどほかのキャリアの場合大変だな＾３＾；
・念のため<span>で絵文字の色をつける
理由：Dreamweaverのライブビューで出てこない→わかりにくい→私的な理由です→容量の無駄使い？＾３＾；
・リンクの作成
携帯サイトはリンクが多い！今回はTOPページだけなのですべてリンク先は「#」で！
内部CSSのところにリンクのスタイルだけ記述しました＾３＾；
・ファイアーモバイルシュミレーターをｉモードHTMLシュミレーターで検証！
Firefoxのファイアーモバイルシュミレーター
http://firemobilesimulator.org/?%A5%C0%A5%A6%A5%F3%A5%ED%A1%BC%A5%C9
ｉモードHTMLシュミレーターで検証http://www.nttdocomo.co.jp/service/imode/make/content/browser/html/tool2/index.html
うん！画像が白だと違和感あるけど出来てる！ＯＫ！
忍者ツールのドメイン使ってFFFTPアップロードしてみよ！
（画像消してるし、固有情報は変えたし、何より商用じゃないから大丈夫だよね？＾３＾；）
あれ！？
レイアウト崩れてる・・・・
左に寄ってる
背景色がでてない
フォームがないよ・・・・
てかフォーム以外のバグってインラインＣＳＳのじゃん！！
考えられる原因
１：この携帯がXHTMLに対応していない
→本家のモバゲーがきれいに出ているのでそれはない！？もしや本家はHTMLで作成してるの！？
２：忍者ツールが勝手にHTMLにしている
→試しにｉモードHTMLシュミレーターでソース表示してみる・・・・
忍者ツールの広告のところに・・・・<div align="center">・・・・・あ・・・・・HTMLだ・・・・・
これかーっ！！
自分はXHTMLで作成したつもりが、忍者ツールの広告はHTMLで表示しいる！！
そらおかしくなるわ！！
ってことで、せっかく作ったXHTMLのコードを全部HTMLに直す；３；
めんどくさいよ～
XTMLの複雑な宣言消して～
Ctrl+Fで置き換えして～
HTMLのスタイル定義に書き換え～
フォームのバグは後回し！！
いろいろHTMLって制限されてんだね～
まず苦戦したのは「色」
Dreamweaverだと「#」をうつとカラー一覧が出てきてマウスでちょこっと選べばでますね
XHTMLは#FFFFFFを#FFFのように略すことができます
そのノリでHTMLでも#FFFにしたら適応されませんでした！！
なんとゆうことでしょう！勉強になった！テキストに参考サイトものってなかった！
てかDreamweaverでHTML作成の設定にして「#」押して色選んだら略されずにちゃんと６ケタでてるし＾３＾
次に苦戦したのが背景色
XHTMLのインラインCSSだと
<div style="background-color:#FF00FF;">
のように簡単にできたけど、HTMLはこれが使えません！！
一見
bodyタグ
<body bgcolor="#FF00FF">
のように
<div bgcolor="#FF00FF">
でいけんじゃね？じゃね？って思えますがだめです！実際ダメでした！
テキストを見る限りでは
<marquee>を使うか<table>でテーブルを組むかしかダメとのこと
<marquee>を使うと簡潔に済み見ますがテキスト動いてる＾３＾；はいボツ～！
ってことでテーブル組んで背景色を設定
<table align="center" width="100%" border="0px" bgcolor="#FF00FF">
<tr>
<th><font color="#FFFFFF">テキスト</font></th>
</tr>
</table>
ここで注意！
<th>を<td>にするとテキストが中心に来なかった！
tabel の align="center" はあくまでテーブル全体の位置なので注意！
でも<td align="center">でいけるのか？
その他注意はページ全体のフォントの大きさを変えたい場合
<body><font size="3">
～略～
</font></body>
としてみた！ライブビューやシュミレーターでは変わるが、自分の実機では変化なし！
微妙な文字の変化は無効にするのかな～？
未定義から、size="3" だったから大差ないのかな～？
とまぁこんな感じでなんとか書き換え終了！
次にフォーム！
前回適当に作ったHTMLのモバイルサイトはフォームが表示されていたので検証！
修正前
<form>
<input type="text" name="seachtext" size="15"> <input type="submit" value="検索">
</form>
修正後
<form method="post" action="">
<input type="text" name="seachtext" size="15"> <input type="submit" value="検索">
</form>
送信方法とかだったわ＾３＾；
この辺はPHPとかのCGI絡んでくるからわからなーい！
結論！XHTMLのほうが便利！身をもって知った！
携帯サイトって表現限られてて単純でいいじゃんって思ってたけど、タグ限られてたり、独自のタグあったりする
からまた違う難しさ！意外とコーディングおもしろかった！
リンクにクリックするとテレビ電話かけちゃう属性あんだよ！すげーよな！まずつかわねーけど！
こんな感じでとりあえず終わり！
結果的にXHTMLとHTML作っちゃったけど勉強になりました！
トータル時間：12時間ほど
次は自分でレイアウトしたサイトを作りたいな～あと掲示板とかのＣＧＩも♪おわり＾３＾