最近ブラウザ三国志のmixiアプリ版が面白くてすっかりはまってしまいました。
このゲームにはブラウザ三国志＠ウィキというナイスなまとめサイトがあって、大変お世話になっているわけですが、このサイトの武将リストがすごく役に立つのですが若干見づらいかなと。
そんなわけで、データはほぼそのままに武将リストをソートできるようにしてみました。
⇒ ブラウザ三国志 ソート可能な武将リスト
武将育成の参考として、本家ウィキと合わせてご利用いただければ幸いです。
＜TinyTable V3そのまんまじゃねーか！
携帯サイト制作で面倒なのがテスト。
iモードHTMLシミュレータで確認しつつ、最後は端末をかき集めて実機テスト、というのがよくあるケースかと思います。
今回、Mac上で作業することになり、Windowsでしか使えないiモードHTMLシミュレータの代わりとして「Device Central」が使えないかと試してみました。
Adobe Device Central CS3の紹介記事（ascii.jp）
http://ascii.jp/elem/000/000/042/42483/
以下、気づいたことです。
・プロファイルの更新は手動
ちょっと面倒ですが、プロファイル（対応携帯機種情報）の更新をするにはAdobeのサイトからダウンロード＆インストールが必要です。
DoCoMoの例では、プロファイルの更新で903シリーズに対応します。904はまだ未対応なので半年程度のラグがあることに。
なおプロファイル更新の手順などは↓の記事が詳しいです。
デバイスプロファイルの更新＠Device Central CS3（ピヨピヨエディット2.0さん）
http://piyopiyoedit.blog93.fc2.com/blog-entry-249.html
・UserAgentが固定
UserAgentを変更する機能がなく、つねに以下の通りになるようです（Macの場合）。
Mozilla/4.0 (compatible; MSIE 6.0; Mac_PowerPC; ja) Opera 9.10
おかげでUserAgentで振り分けするサイトへのアクセスが難しいことに。
プロファイルの切り替えに連動してUserAgentも自動的に切り替わって欲しいところです。
・描画の再現度はそれほど高くはないかも
iモードHTMLシミュレータとの比較だからかもしれませんが、改行位置・絵文字の表示・フォームのボタン形状など実機との違いが目立ちます。実機では文字化けしていた記号を正常に表示していたケースもありました。
フォントを選ぶ機能があるので、携帯と同じフォントを用意できればある程度改善できそうではあります。
・スクリーンショット作成機能が欲しい
ドキュメント作成時にあると助かります。
結局、ParallelsのWindowsXP上でiモードHTMLシミュレータを使うことにして、なんとかしました。
プロファイル情報が詳細なため各端末の仕様を調べるには便利そうですが、携帯サイトのデザイン確認にはまだ厳しいという印象です。
もともと「実機テストを置き換える」ものを志向したアプリケーションではないんでしょうね。
ひょんなことから携帯用のページを初めて作ることになったので、そのとき気づいたことをまとめておきます。
作ったのは、PC用なら1ページ程度の内容で、一応コーポレートサイト。
■制作する携帯サイトの基本仕様
・3キャリア対応
DoCoMo、au、Softbankで共通して見れること。更新を考えると1ページで済ませたいです。
・使用言語はhtml
3G専用サイトならxhtmlでもOK。DoCoMoのMOVAは505以降もxhtml対応。
・文字コードはSJIS
MOVAはUTF-8非対応（多分）。3G限定なら何でも大丈夫そう。
・1ページあたり（なるべく）5KB以下で
MOVAは画像込みで1ページあたり5KB以下の制限があったはず。せめて10KB以下にしておけばかなりの端末で見れるはず。この点については公表されているスペックがあてにならない（メーカーが独自に拡張している？）のであやふやです。
・画像はJPEG
Vodafone2GがGIF非対応のため。ただし、MOVAの503以前はJPEG非対応（一部対応機もあるみたい）。
重くなるし、画像はなるべく使わない方針で。
基本的な携帯サイトの作り方はさまざまなサイトで解説されています。Let's Google!
問題になるのが「それっぽい」の部分。基本的な作り方はわかってもデザイン的な部分の解説はなかなか見つかりません。なので、公式サイトをいくつか見て参考にしてみました。インスパイアとかオマージュとも言います。
■携帯サイトのよくあるデザイン
・ヘッダーとフッターはcenter、コンテンツは左寄せ
・hrタグの使い方
いいサイトはhrの使い方がうまいですね。
とりあえず今回はこんな感じにしてみました。
ヘッダーとフッターの区切りは、hr size="2" color="#テーマカラー"
コンテンツ中の区切りは、hr color="サブカラー"
・配色
色使いって難しいですね。
今回はコーポレートカラーが決まっていたので、そのままメインカラーにしました。
背景は白にしたので、メインカラーと白の中間色をサブカラーに。
・フォントカラー
ありがちですが、メインのフォントカラーはグレーに。
好みもあると思いますが、linkは明るいブルーに、vlinkもとりあえずlinkと同じ色にしました。
・見出し記号
3キャリア対応を考えると絵文字は使用できません。
一般的な記号で、今回調べたサイトで見出しに使われていたのが■□★。
主張しすぎない□が気に入ったので、今回は□を採用。□だけだと目立たないので、見出し行のフォントカラーをメインカラーにして本文と区別しました。
・アクセスキー
携帯といえばアクセスキー！数字の0キーを押すとトップページに戻る（例：モバゲー）みたいなあれです。
今回は、0キーを押すとカテゴリートップに戻る「Yahooモバイル」方式にしました。
ついでに9キーでそのページの先頭に戻る、にしましたが、これは一般的ではなさそう。
アクセスキーの表示は、[0]トップページに戻る、のようにテキストで表現しましたが、本来は絵文字か画像で表現したいところ。
・カタカナは半角
全角と半角とでは読みやすさが違います。秀丸のマクロでまとめて最後に変換しました。
■参考書籍
今回、携帯サイト作成の解説本をいくつ見てみましたが、実際役に立ったのは1冊だけでした。
「ケータイHTMLコンパクトリファレンス」（毎日コミュニケーションズ）
どのタグのどの属性がどの機種に対応しているのか、一目瞭然です。
PC用サイトだと、いつも秀和システムの「HTML&CSS&JavaScript辞典」を片手に制作しますが、その携帯用に相当すると思います。
■スクリーンショット
※iモードHTMLシミュレータII使用
■ソース
htmlソース
1 0
2 10
3 40
4 90
5 200
6 400
7 700
8 1100
9 1500
10 2000
11 2500
12 3100
13 3700
14 4400
15 5000
16 6200
17 7600
18 9800
19 12000
20 15000
21 18000
22 23000
23 30000
24 38000
25 46000
26 56000
27 66000
28 80000
29 100000
30 120000
31 150000
32 180000
33 210000
34 250000
35 300000
36 350000
37 400000
38 450000
39 500000
40 550000
41 600000
風来のシレンMEGA アイテム価格表
※販売価格/買取価格(基本値/スロット数/印)アイテム名
250/80(2/2)青銅の太刀
550/200(5/4)カタナ
1300/300(7/4)白虎の斧
3000/500(10/5)どうたぬき
4000/1300(6/3/ド)ドレインバスター
5000/1400(8/3/爆)三日月刀
5000/1500(9/3/竜)龍神剣
6000/1500(6/3/混)混沌の斧
7500/2500(15/5)風魔刀
8000/1600(6/3/死)成仏のカマ
8000/2600(4/2/三)妖刀かまいたち
14000/3000(9/3/会)ミノタウロスの斧
100/30(1/0)ただの剣
3000/80(2/6/掘)つるはし
5500/1500(15/6/銭)ガマラの剣
7500/1500(13/6/槍)妖光の刀
8000/1600(10/5/ぶ)ぶっとびの剣
10000/3000(30/1/必)必中の剣
12500/2300(20/5/八)竜巻のカマ
500/75(4/3)青銅甲の盾
800/125(6/4)鉄甲の盾
1800/350(2/3/腹)ハラモチの盾
2500/500(3/3/錆)木甲の盾
3000/500(5/3/毒)毒よけの盾
3500/400(5/3/盗)トドの盾
3500/1000(0/2/捨)使い捨ての盾+40
5500/1100(4/4/地)地雷ナバリの盾
6000/1500(5/5/返)バトルカウンター
6500/?(8/2/腹錆)白虎の盾
7500/2000(14/5)風魔の盾
7500/?身かわしの盾
8500/2200(10/5/竜)龍神の盾
12500/2500(2/3/外)見切りの盾
90000/10000(30/6)螺旋風魔の盾
100/40(3/0)ただの盾
12000/1250(15/3/矛)矛の盾
2/1木の矢
100/50鉄の矢
500/100鋼鉄の矢
1500/500(3/力)ちからの腕輪
2000/300(4/飛)高とびの腕輪
3500/500痛恨の腕輪
3500/600ハラヘリの腕輪
3500/750(3/混)混乱よけの腕輪
3500/1000(3/毒)毒消しの腕輪
5000/2500(3/眠)眠らずの腕輪
8000/2000(1/目)透視の腕輪
12000/2500(3/守)まもりの腕輪
13000/2500(1/幸)しあわせの腕輪
15000/3000(1/腹)ハラヘラズの腕輪
20000/1(3/通)通過の腕輪
10/1くさったおにぎり
30/10おにぎり
100/50大きなおにぎり
50/25弟切草
100/50高とび草
150/20火炎草
150/30毒草
150/40睡眠草
150/50すばやさ草
150/60まどわし草
150/70毒消し草
200/100目薬草
350/170ちからの草
3500/1000しあわせ草
5000/2500復活の草
100/50識別の巻物
150/75脱出の巻物
200/100バクスイの巻物
250/100大部屋の巻物
250/125かなしばりの巻物
300/150あかりの巻物
500/100おにぎりの巻物
500/250バクハツの巻物
750/250おはらいの巻物
1000/500聖域の巻物
1500/150自爆の巻物
1500/500天の恵みの巻物
1500/500地の恵みの巻物
1500/750祈りの巻物
3330/1白紙の巻物
5500/1250メッキの巻物
7770/1ジェノサイドの巻物
8000/2000合成の巻物
8000/2000指輪合成の巻物
8000/2000召喚の巻物
2000/500いかづちの杖
1500/500混乱の杖
2000/300ただの杖
2000/500睡眠の杖
10000/3000ねだやしの杖
2000/500鈍足の杖
1500/500高とびの杖
1500/500変化の杖
1000/150場所替えの杖
1000/150吹き飛ばしの杖
1500/300倍速の杖
1500/300封印の杖
2000/500クォーターの杖
1000/300身代わりの杖
2000/300仲間の杖
1500/300回復の杖
