メイン

2007年10月04日

Adobe Device Central CS3 を使ったテスト

DeviceCentral.jpg

携帯サイト制作で面倒なのがテスト。
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シミュレータを使うことにして、なんとかしました。
プロファイル情報が詳細なため各端末の仕様を調べるには便利そうですが、携帯サイトのデザイン確認にはまだ厳しいという印象です。
もともと「実機テストを置き換える」ものを志向したアプリケーションではないんでしょうね。

2007年04月30日

それっぽい携帯サイトの作り方

ひょんなことから携帯用のページを初めて作ることになったので、そのとき気づいたことをまとめておきます。
作ったのは、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辞典」を片手に制作しますが、その携帯用に相当すると思います。

スクリーンショット
mobile_sample.jpg
※iモードHTMLシミュレータII使用

ソース
htmlソース