gesen.jpgesen.jp2009年12月09日[ブラウザ三国志]ソート可能な武将リスト最近ブラウザ三国志のmixiアプリ版が面白くてすっかりはまってしまいました。このゲームにはブラウザ三国志@ウィキというナイスなまとめサイトがあって、大変お世話になっているわけですが、このサイトの武将リストがすごく役に立つのですが若干見づらいかなと。そんなわけで、データはほぼそのままに武将リストをソートできるようにしてみました。ソート可能な武将リスト武将育成の参考として、本家ウィキと合わせてご利用いただければ幸いです。使ったテスト携帯サイト制作で面倒なのがテスト。iモードHTMLシミュレータで確認しつつ、最後は端末をかき集めて実機テスト、というのがよくあるケースかと思います。Central」が使えないかと試してみました。CS3の紹介記事(ascii.jp)http://ascii.jp/elem/000/000/042/42483/以下、気づいたことです。・プロファイルの更新は手動ちょっと面倒ですが、プロファイル(対応携帯機種情報)の更新をするにはAdobeのサイトからダウンロード&インストールが必要です。DoCoMoの例では、プロファイルの更新で903シリーズに対応します。904はまだ未対応なので半年程度のラグがあることに。プロファイル更新の手順などは↓の記事が詳しいです。CS3(ピヨピヨエディット2.0さん)http://piyopiyoedit.blog93.fc2.com/blog-entry-249.html・UserAgentが固定UserAgentを変更する機能がなく、つねに以下の通りになるようです(Macの場合)。9.10おかげでUserAgentで振り分けするサイトへのアクセスが難しいことに。プロファイルの切り替えに連動してUserAgentも自動的に切り替わって欲しいところです。表示・フォームのボタン形状など実機との違いが目立ちます。実機では文字化けしていた記号を正常に表示していたケースもありました。フォントを選ぶ機能があるので、携帯と同じフォントを用意できればある程度改善できそうではあります。・スクリーンショット作成機能が欲しいドキュメント作成時にあると助かります。結局、ParallelsのWindowsXP上でiモードHTMLシミュレータを使うことにして、なんとかしました。プロファイル情報が詳細なため各端末の仕様を調べるには便利そうですが、携帯サイトのデザイン確認にはまだ厳しいという印象です。「実機テストを置き換える」ものを志向したアプリケーションではないんでしょうね。(0)2007年04月30日それっぽい携帯サイトの作り方ひょんなことから携帯用のページを初めて作ることになったので、そのとき気づいたことをまとめておきます。作ったのは、PC用なら1ページ程度の内容で、一応コーポレートサイト。・3キャリア対応DoCoMo、au、Softbankで共通して見れること。更新を考えると1ページで済ませたいです。・使用言語はhtml3G専用サイトならxhtmlでもOK。DoCoMoのMOVAは505以降もxhtml対応。・文字コードはSJISMOVAはUTF-8非対応(多分)。3G限定なら何でも大丈夫そう。・1ページあたり(なるべく)5KB以下でMOVAは画像込みで1ページあたり5KB以下の制限があったはず。10KB以下にしておけばかなりの端末で見れるはず。この点については公表されているスペックがあてにならない(メーカーが独自に拡張している?)のであやふやです。・画像はJPEGVodafone2GがGIF非対応のため。MOVAの503以前はJPEG非対応(一部対応機もあるみたい)。重くなるし、画像はなるべく使わない方針で。基本的な携帯サイトの作り方はさまざまなサイトで解説されています。Google!問題になるのが「それっぽい」の部分。基本的な作り方はわかってもデザイン的な部分の解説はなかなか見つかりません。公式サイトをいくつか見て参考にしてみました。インスパイアとかオマージュとも言います。■携帯サイトのよくあるデザイン・ヘッダーとフッターはcenter、コンテンツは左寄せ・hrタグの使い方いいサイトはhrの使い方がうまいですね。今回はこんな感じにしてみました。色使いって難しいですね。今回はコーポレートカラーが決まっていたので、そのままメインカラーにしました。背景は白にしたので、メインカラーと白の中間色をサブカラーに。・フォントカラーありがちですが、メインのフォントカラーはグレーに。好みもあると思いますが、linkは明るいブルーに、vlinkもとりあえずlinkと同じ色にしました。・見出し記号3キャリア対応を考えると絵文字は使用できません。一般的な記号で、今回調べたサイトで見出しに使われていたのが■□★。主張しすぎない□が気に入ったので、今回は□を採用。□だけだと目立たないので、見出し行のフォントカラーをメインカラーにして本文と区別しました。携帯といえばアクセスキー!数字の0キーを押すとトップページに戻る(例:モバゲー)みたいなあれです。今回は、0キーを押すとカテゴリートップに戻る「Yahooモバイル」方式にしました。ついでに9キーでそのページの先頭に戻る、にしましたが、これは一般的ではなさそう。アクセスキーの表示は、[0]トップページに戻る、のようにテキストで表現しましたが、本来は絵文字か画像で表現したいところ。全角と半角とでは読みやすさが違います。サイト作成の解説本をいくつ見てみましたが、実際役に立ったのは1冊だけでした。「ケータイHTMLコンパクトリファレンス」(毎日コミュニケーションズ)どのタグのどの属性がどの機種に対応しているのか、一目瞭然です。PC用サイトだと、いつも秀和システムの「HTML&CSS&JavaScript辞典」を片手に制作しますが、その携帯用に相当すると思います。