こんにちは、『livedoor 歌詞』や『livedoor グリーティング』を担当している吉沢です。それらのサービス以外では、モバイルサイトのコーディング関連のとりまとめを担当していることもあり、今回はモバイルサイトのCSSについてご紹介したいと思います。
以前の記事『モバイルサイトのデザイン』でもご紹介させていただきましたように、『ケータイ livedoor』は 3Gケータイを中心とした開発を行っており、XHTML でコーディングする機会が増えてきました。モバイルで XHTML を表示できるということは、スタイルシートに対応していることも意味するので、モバイルサイトの表現力のアップにつながります。
■モバイルサイトのCSS事情
スタイルシートを採用するメリットとして、通常は HTML 構造の簡略化やデザインの一括管理などがあげられます。しかしモバイルサイトでのスタイルシートの採用は、通常のメリットとはあてはまる部分が少なく、スタイルシートの設定方法にキャリア別の問題があります。
具体的には、DoCoMo は外部スタイルシート、head 要素へのまとめ書きに対応しておらず、タグに style 属性を直接指定する方法のみ対応しています。au(ツーカー)、SoftBankは、DoCoMo とは異なり、外部スタイルシート、head 要素へのまとめ書き、style 属性の直接指定にも対応しています。
細かい部分では、au(ツーカー)、SoftBank は HTML で記述されていてもスタイルを認識してくれますが、DoCoMo は MIME タイプの設定が XHTML になっていないとスタイルどころか XHTML ファイルということも認識されないため、background-color プロパティが使用できず、簡単に装飾することができません。
ほかにもキャリアによってはスタイルの指定にクセがあり、margin、float プロパティ が img 要素にしか適用されない、font-size プロパティの値が異なる、istyle属性の指定方法が異なるなど多々あります。
このような問題があるとモバイルサイトにスタイルシートの採用を躊躇してしまうのですが、『ケータイ livedoor』では、DoCoMo 基準で記述した XHTML(HTML)ファイルをキャリア別、端末別に適したカタチで表示させており、スタイルシートも DoCoMo 基準で記述し、キャリア別、端末別に適したスタイルシートを読込むようにしています。
■「スタイルシートの共通化」プロジェクト
結局はキャリア別にスタイルシートを書きわけてハードコーディングしているため、同じスタイルでもコンテンツによってソースが異なる、ソースが複雑になるなど日々の運用の効率低下を招いています。
そこで、スタイルシートを一元管理できるようなシステム「スタイルシートの共通化」プロジェクトがスタートしました。プロジェクトの概要は、キャリア別の記述が必要で、よく使うと思われるスタイルの擬似クラスや文字サイズ、罫線、画像の回り込み、そして istyle という5点の共通化を行っていく予定です。
現在は、プログラマと相談しながら、仕様を策定している段階ですが、このプロジェクトが終わりますと、弊社におけるモバイルサイト構築のスピード感がより速くなると考えています。プロジェクトといっても、収益化につながるわけでもなく、またサービスを立ち上げてユーザーに対して何かを提供するわけでもありません。とはいえ、裏側の仕組みを整理し、共通化し、いつ誰が担当となってもひとつの基準に基づきスピーディーに作業できるような環境を整備することはとても重要だと考えております。
めまぐるしく展開されるモバイル業界で、キャリアから公開される仕様についていくことは大変ですが、それがモバイル業界で働く醍醐味でもあり、こういった裏側の仕事も、ディレクターとしては考えていかなければならない大切な要素かと思います。
現在、モバイルグループではディレクターを募集しています。あなたもモバイルの最先端で活躍してみませんか？
以前の記事『モバイルサイトのデザイン』でもご紹介させていただきましたように、『ケータイ livedoor』は 3Gケータイを中心とした開発を行っており、XHTML でコーディングする機会が増えてきました。モバイルで XHTML を表示できるということは、スタイルシートに対応していることも意味するので、モバイルサイトの表現力のアップにつながります。
■モバイルサイトのCSS事情
スタイルシートを採用するメリットとして、通常は HTML 構造の簡略化やデザインの一括管理などがあげられます。しかしモバイルサイトでのスタイルシートの採用は、通常のメリットとはあてはまる部分が少なく、スタイルシートの設定方法にキャリア別の問題があります。
具体的には、DoCoMo は外部スタイルシート、head 要素へのまとめ書きに対応しておらず、タグに style 属性を直接指定する方法のみ対応しています。au(ツーカー)、SoftBankは、DoCoMo とは異なり、外部スタイルシート、head 要素へのまとめ書き、style 属性の直接指定にも対応しています。
細かい部分では、au(ツーカー)、SoftBank は HTML で記述されていてもスタイルを認識してくれますが、DoCoMo は MIME タイプの設定が XHTML になっていないとスタイルどころか XHTML ファイルということも認識されないため、background-color プロパティが使用できず、簡単に装飾することができません。
ほかにもキャリアによってはスタイルの指定にクセがあり、margin、float プロパティ が img 要素にしか適用されない、font-size プロパティの値が異なる、istyle属性の指定方法が異なるなど多々あります。
このような問題があるとモバイルサイトにスタイルシートの採用を躊躇してしまうのですが、『ケータイ livedoor』では、DoCoMo 基準で記述した XHTML(HTML)ファイルをキャリア別、端末別に適したカタチで表示させており、スタイルシートも DoCoMo 基準で記述し、キャリア別、端末別に適したスタイルシートを読込むようにしています。
■「スタイルシートの共通化」プロジェクト
結局はキャリア別にスタイルシートを書きわけてハードコーディングしているため、同じスタイルでもコンテンツによってソースが異なる、ソースが複雑になるなど日々の運用の効率低下を招いています。
そこで、スタイルシートを一元管理できるようなシステム「スタイルシートの共通化」プロジェクトがスタートしました。プロジェクトの概要は、キャリア別の記述が必要で、よく使うと思われるスタイルの擬似クラスや文字サイズ、罫線、画像の回り込み、そして istyle という5点の共通化を行っていく予定です。
現在は、プログラマと相談しながら、仕様を策定している段階ですが、このプロジェクトが終わりますと、弊社におけるモバイルサイト構築のスピード感がより速くなると考えています。プロジェクトといっても、収益化につながるわけでもなく、またサービスを立ち上げてユーザーに対して何かを提供するわけでもありません。とはいえ、裏側の仕組みを整理し、共通化し、いつ誰が担当となってもひとつの基準に基づきスピーディーに作業できるような環境を整備することはとても重要だと考えております。
めまぐるしく展開されるモバイル業界で、キャリアから公開される仕様についていくことは大変ですが、それがモバイル業界で働く醍醐味でもあり、こういった裏側の仕事も、ディレクターとしては考えていかなければならない大切な要素かと思います。
現在、モバイルグループではディレクターを募集しています。あなたもモバイルの最先端で活躍してみませんか？
コメント