SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

そこが知りたい! Web標準サイトの活かし方

「携帯ゲーム機用Webページ」の作り方

そこが知りたい!Web標準サイトの活かし方(7)

文字のサイズ

 表示モードとは別に、ユーザーは、フォントサイズも「大・標準・小」の3段階で選ぶことができます。XHTMLやCSSでのフォントサイズは、以下のルールに従い、5種類のフォントサイズにマッピングされるため、細かく調整することはできません。

ポイント指定

 コンテンツでのポイント指定で、文字サイズが「大」の場合は1、「標準」の場合は3/4、「小」の場合は1/2、を乗じたポイントでマッピングされます。

ポイント指定
ポイント フォントサイズ
16pt以上 Size 4(最大)
12pt~15pt Size 3
10pt~11pt Size 2
8pt~9pt Size 1
7pt 以下 Size 0(最小)

サイズ指定

 文字サイズ「大・標準・小」のそれぞれの設定において、次のとおりにマッピングします。

キーワード指定
サイズ指定 標準
xx-large Size 4 Size 3 Size 2
x-large Size 3 Size 2 Size 0
large Size 3 Size 1 Size 0
medium Size 2 Size 1 Size 0
small Size 1 Size 0 Size 0
x-small Size 0 Size 0 Size 0
xx-small Size 0 Size 0 Size 0

ユーザーエージェント

 PSPブラウザの場合、CSSのメディアタイプは「screen」が適用されるため、DS/DSiブラウザのように、メディアタイプによって表示を制御することはできません。しかし、ここまで紹介したように、PSPブラウザの場合は、制作者側が制御しなくても、ユーザー側が表示を好みにコントロールできる仕組みが提供されているのが特徴です。

 それでもPSP用の表示を提供した方が良い場合には、専用のXHTMLを用意し、JavaScriptなどを利用してユーザーエージェントで振り分けると良いでしょう。ユーザーエージェントは次のとおりです。

PSPブラウザのユーザーエージェント
Mozilla/4.0 (PSP (PlayStation Portable); 2.00)

 PSPブラウザの仕様については、「インターネット向けコンテンツ作成ガイドライン」というPDFデータの中で詳しく公開されています。これは制作者にとってありがたい情報ですので、制作の際には、ぜひそちらで確認してみてください。

 最新版は、PSPシステムソフトウェアアップデートのページの「各種ガイドライン」の欄に掲載されています。

まとめ

 DSシリーズの場合は、画面も小さく、Flashや音声、動画などにも未対応であるため、CSSのメディアタイプを「handheld」として振り分け、「縦長/タテ長モード」に最適化したデザインを提供するのは有効だと思います。

 一方のPSPの場合は、特に意識しなくとも、ユーザー側で表示を制御する仕組みが提供されているのが特徴です。例えば横幅が画面サイズを超えても、十字キーの右を押したり、ジャストフィットモードを選択したりすれば良いわけです。このように、同じ携帯ゲーム機であっても、仕様が異なれば制作側の対応も異なってきます。サイトの方向性やターゲットの属性に合わせて柔軟に対応するようにしましょう。

この記事は参考になりましたか?

連載通知を行うには会員登録(無料)が必要です。
既に会員の方はを行ってください。
そこが知りたい! Web標準サイトの活かし方連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト 宮本麻矢(ミヤモト マヤ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/5223 2010/06/29 14:00

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー