テーマは携帯サイトの構築についてでした。忘れないうちにメモっときます。

CSS Nite in Ginza, Vol.21に関するエントリー | CSS Nite公式サイト

「携帯サイトのコーディング事情～基本編」 ／宮永邦彦（アイデアマンズ株式会社）

携帯サイトの現状からコーディングのテクニックまでわかりやすく解説されていました。

携帯サイトの現状

• 携帯サイトは面倒だが他の人がやっていなからビジネスチャンス
• 現在のインターネット利用状況はPC8000万人、携帯7000万人、両方使う人6000万人。携帯は無視できる数ではない
• 主な利用者層は若年層、学生、女性など
• 携帯サイトに求められること（大切なこと）
  • 中毒性（mixiや株など）
  • 電車に乗ってる時間や待ち時間などの短時間で楽しめる（ニュース、小説など）
  • 緊急性を必要とするもの（乗り換え案内など）
  • 携帯サイトのコーディングの基本

基本的に文字コードはShift JIS

• 段組は使わないので簡単（画像の回り込み程度は使う）
• 使用するタグは一部のもの（使うタグの一覧みたいのでてたけど書き取れず）
• XHTML+CSSの対応状況はY!>EZweb>>>>>>>i-mode（Y!は現softbank。業界ではヤフー携帯と呼ぶみたいですね）
• i-modeの状況
  • CSSの外部読み込み不可
  • head内でstyleタグを用いての指定不可
  • style属性を使用するしかない
  • XHTMLとHTMLの互換性なし
  • つまり構造と見た目の分離は不可能
  • i-modeってIEと同じ匂いを感じる（僕の意見）
• EZはY!と比べて対応状況はやや劣るが全然使える範囲っぽい
• EZでおかしいところ
• ボールドがきかない
• 余白がとれないことがある
• ボーダーの背景がおかしい
• i-modeも端末によってはボールドがきいたり、きかなかったりするので、ボールドやフォントに頼ったデザインにしないことが重要
• 実際の製作では、i-modeのHTMLはCSSが適応されないでもみれる程度に、EZとY!のXHTMLはCSSできれいにデザインされるように、i-modeのXHTMLは時間があったら対応するようにするケースが多いとのこと。（よく意味がわからなかった）
• 例でhrとかdisplay:noneを使ってCSS適応版と非適応版の見え方を使いわけるやり方が紹介されてたけど記憶がたしかでないため資料がでたら確認する

携帯サイトが面倒なわけ

• 3キャリア合わせて約600機種くらいあり、それぞれ仕様や性能が大きく異なる
• 画面サイズや画像対応の問題。Y!の第二世代はgif非対応とか
• キャッシュサイズの問題。今は100KBくらいが目安だそうな
• 絵文字の問題。以下絵文字の特徴
  • 絵文字は画像より早いし軽い
  • 強力な表現方法
  • キャリア毎の互換性がない
  • 最近はi-modeの絵文字をEZは自動変換してくれるらしい

解決案

• 古い機種を足きりする（一番早いし、楽）
• コンテンツゲートウェイを使う。これを間に噛ますと絵文字や画像をいい感じに変換してくれるらしい。高いので現時的ではないらしい
• 携帯サイトASPを使う。自由度が低いらしい。こういうのかな？ MTケータイキットを使う。今回のスピーカー、宮永さんのところが作ったMTのプラグインらしい。詳しくはWebで

質問

テストはどうしてるのかという質問。

A.持っている実機は8台程度。それぞれのキャリアの主要機種で確認する。通常はFireFoxのUserAgentSwitcherを使ってテストする。

「携帯用サービスにおける実装とデザインの現実」／原 一浩、寺田 学、尾花衣美（空飛ぶ株式会社）

アクビィという携帯サイトのSNSを作成した際の話。実体験に基づく話しなのでリアルに問題点などがわかり面白かったです。

アクビィの説明

• ターゲットは15才～25才の女性（女子大生）
• 写メを送れて簡単にコメントできるSNS

製作の話

• エクセルで画面遷移を設計
• ベトナムで開発した
• DoCoMoから絵文字をダウンロードして、FireFoxのUserAgentSwitcherを使用し、Web Developerで横幅を調整して携帯と同じような環境を作り出しテストする
• 段組は使わない（画像を回り込ませる程度は使う）
• フォントやウェイト（ボールド）は変化させない
• 画像より絵文字を主に使用する
• ファーストビューはQVGA基準で考える
• 色はsRGBに限定
• 使うタグや属性は限定される。fontタグやbgcolor属性なども使う。600機種に対応するための安全策。将来的にはCSSに対応させたい

バックエンドの話

• キャリア判定はUserAgentで行う。PHPで実装
• PCからのアクセスはIP制限で行う。DoCoMoやauからIP増えますとかいうお知らせがあると大変
• DOCTYPEの問題などもあり、できればテンプレートは3キャリアわけるのが理想だが、現在は全部共通で使っている
• 絵文字の問題とか。PHPのモジュールで変換する方法もあるらしい
• ログインに関して
  • クッキーが使えない（最近のは使える機種もある）
  • GETパラメーターでSESSIONを引き回すしかない
  • UIMを取得して実装する。i-modeは毎回確認がでるので対応が必要
  • セキュリティとかの問題もある

UIとユーザーテストの話

• コンセプト、UIはできるだけシンプルに
  • 友達の承認はなし
  • グループはデフォルトで非公開
  • 写メが送れる
• ユーザーテストは実際の大学生のヘビーユーザー、ライトユーザー、未使用者でテスト
• KPIはユーザー数、一人当たりのPVに設定
• 今後の課題は反映のスピードなど
• アクセスキーの設定。キーボードショットカットと同じようなもの

質問

フォームで項目が多くなった場合、使いやすいUIにするにはどうすればよいかという質問

A.現状では項目数を減らすことぐらしか対応策はない

感想

携帯サイトには以前から興味があったので、実際の製作の話しなどが聞けて面白かったです。セキュリティのところが結構駆け足の説明だったうえに非公開のところもあったので、もっと詳しく聞きたかったです。