One Note Jam

AH-K3001VのOperaにおけるCSS2システムカラーの配色 (2004-11-20)

Opera搭載AirH"PHONE「AH-K3001V」において、CSS2の各種システムカラーにどのような色が割り当てられているか調べてみた。

AH-K3001におけるシステムカラー一覧
RGB値	システム属性名	説明
#c0c0c0	ActiveBorder	アクティブウィンドウの境界色
#b00000	ActiveCaption	アクティブウィンドウのタイトルバーの色
#000000	AppWorkspace	様々な文書インタフェースの背景色
#000000	Background	デスクトップの背景色
#c0c0c0	ButtonFace	ボタン表面の色
#ffffff	ButtonHighlight	選択状態のボタンの色
#000000	ButtonShadow	ボタンの影の色
#000000	ButtonText	ボタンの文字色
#000000	CaptionText	タイトルバーなどの文字色
#808080	GrayText	使用不可を表すグレー
#ffffff	Highlight	選択領域の色
#ffffff	HighlightText	選択領域の文字色
#c0c0c0	InactiveBorder	非アクティブウィンドウの境界色
#808080	InactiveCaption	非アクティブタイトルバーの色
#000000	InactiveCaptionText	非アクティブタイトルバーの文字色
#ffffff	InfoBackground	ヒント表示の背景色
#000000	InfoText	ヒント表示の文字色
#000000	Menu	メニューの背景色
#c0c0c0	MenuText	メニューの文字色
#c0c0c0	Scrollbar	スクロールバーの色
#000000	ThreeDDarkShadow	3Dオブジェクトの暗い影の色
#c0c0c0	ThreeDFace	3Dオブジェクト表面の色
#ffffff	ThreeDHighlight	3Dオブジェクト選択時の色
#ffffff	ThreeDLightShadow	3Dオブジェクトの明るい影の色
#000000	ThreeDShadow	3Dオブジェクトの影の色
#ffffff	Window	ウィンドウの背景色
#c0c0c0	WindowFrame	ウィンドウの骨組みの色
#000000	WindowText	ウィンドウの文字色

発端

このサイトのCSSでは、各種色指定をCSS2のシステムカラーを使って指定している。そして、見出し(h1要素)の部分には、背景色として「ActiveCaption(アクティブウィンドウのタイトルバーの色)」を、文字色として「CaptionText(タイトルバーなどの文字色)」を指定していた。一般的なタイトルバーのような配色になることを意図していたわけだ。

しかし、AH-K3001VのOperaでこのサイトを表示してみたところ、「ワインレッドの背景に黒の文字」という不可解な配色になってしまっていた。そこで、今回調査してみた次第だ。

(CSS2における)システムカラーとは、ユーザー環境におけるGUI部品で使用している各色を使用するために定義された色だ。システムカラーで色を指定することにより、プラットフォームごとのGUI配色に合わせた、あるいはユーザーの画面表示設定に合わせた、自然な配色を使うことができる。反面、自分の環境では適切に表示されていても、他の環境では見づらい表示になることもあり得る。また、(今回のように)ブラウザごとの実装の詳細に振り回されることもある。

疑問

どうもAH-K3001Vのシステムカラー配色には疑問が残る。

ActiveCaption(アクティブウィンドウのタイトルバーの色)のワインレッドのような色はなんだかおかしい。AH-K3001Vの画面デザインを見るに、明るい青系統の色が適切だろう。
同様に、Menu(メニューの背景色)やScrollbar(スクロールバーの色)も、明るい青系統の色が妥当だろう。
Highlight(選択領域の色)とHighlightText(選択領域の文字色)とが共に白なのはどういうことか。たがいに対の色になるべきはずなのに、これでは読めない。

posted at 2004-11-20 | Permalink

Lynxを使って「iアプリで簡易ウェブブラウザ」計画 (2004-11-07)

前置き

テキストブラウザのLynxを使用して、iアプリで簡易的なテキストウェブブラウザのようなものを作れないものかと考えている。

ウェブブラウザをまともに実装するとなると、文字コードの判別やら、HTMLのパーズやら、表示結果のレンダリングやら、とにかく面倒くさい作業が目白押しだ。なるべくなら既存の実装を流用して楽をしたい。

そこで、そのあたりの面倒ごとはテキストブラウザのLynxにすべて任せることにする。サーバ上にLynxを用意しておき、クライアント側のiアプリでは表示したいWebページのURLをLynxに伝える。そして、サーバ側のLynxは指定されたURLのHTMLをレンダリングして、クライアント側に対してレンダリング結果をプレーンテキストで送信する。後は、クライアント側でそのテキストデータを表示するだけという寸法だ。

処理の流れ

大まかな仕組みは、以下のようになるだろうか。

iアプリ側では、表示したいWebサイトのURLをパラメータとして、Webサーバに設置したCGIプログラムを呼び出す。
CGIプログラムは、指定されたURLにLynxでアクセスして、HTMLのレンダリング結果をプレーンテキストで取得する。
CGIプログラムは、取得したプレーンテキストをzip圧縮して、octet-streamとして出力する。
iアプリ側では、取得したzipデータを展開して、画面に表示する。

図. iアプリ簡易ウェブブラウザ概念図

iアプリには「iアプリ自身のダウンロード元であるサーバーとしか通信できません」という制限がある(『iアプリコンテンツ開発ガイド for DoJa 3.0』16ページより)。よって、自由に通信する必要のあるiアプリでは、サーバ側にプロキシとなるCGIプログラムを用意して、iアプリ側ではそのプロキシ経由で通信を行うという方法が一般にはとられている(らしい。通信をともなうアプリを作ったことがないので詳細は不明)。

そういうわけで、本来ならサーバ側のCGIプログラムで通信処理を実装する必要があるわけだが、今回のケースではそのあたりもLynxにお任せできる。

また、サーバ側CGIで出力するテキストデータはzip圧縮しておくとよさそうだ。DoJa 3.0以降には「JarInflaterクラス」があるので、zipデータの展開も容易だろう。私は使ったことがないのでよくわからないのだが。

問題点

問題点もいくつか思い浮かぶ。

HTMLを解釈できない

Lynxを使うことでレンダリングされた状態のテキストデータを得ることができるわけだが、裏を返せばクライアント側ではHTMLの形でデータを解釈することができないことを意味する。

実のところ、これはかなり致命的な問題だといえる。例えば、各種要素の属性を取得できないので、リンクが張られていてもリンク先URLがわからない。フォーム部品なども全滅だ。要するに、単に表示されるだけの要素についてはテキストの状態でもかまわないが、ユーザー側からのアクションが必要な要素についてはHTMLから情報を引っ張ってくる必要があるということだ。

とはいえ、リンク関連の情報については、Lynxが気を利かせてくれるのでなんとかなりそうだ。以下は、LynxでGoogleのトップページをダンプした際に得られるテキストデータだ。

>lynx -width=40 -dump http://www.google.co.jp/

               Google

   ウェブ    [1]イメージ    [2]ニ
   ュース New!    [3]グループ
       [4]ディレクトリ


   ______________________________
   Google 検索 I'm Feeling Lucky
     [5]検索オプション
     [6]表示設定
     [7]言語ツール
   (_) ウェブ全体から検索 (_) 日
   本語のページを検索

   [8]広告掲載について - [9]人材
    募集 - [10]Google について -
     [11]Google.com in English

   (c)2004 Google - 4,285,199,774
        ウェブページから検索

参照

   1. http://www.google.co.jp/imghp?hl=ja&tab=wi&ie=UTF-8
   2. http://www.google.co.jp/nwshp?hl=ja&tab=wn&ie=UTF-8
   3. http://www.google.co.jp/grphp?hl=ja&tab=wg&ie=UTF-8
   4. http://www.google.co.jp/dirhp?hl=ja&tab=wd&ie=UTF-8
   5. http://www.google.co.jp/advanced_search?hl=ja
   6. http://www.google.co.jp/preferences?hl=ja
   7. http://www.google.co.jp/language_tools?hl=ja
   8. http://www.google.co.jp/ads/
   9. http://www.google.co.jp/jobs/
  10. http://www.google.co.jp/intl/ja/about.html
  11. http://www.google.com/ncr

ご覧のように、リンク文字列の位置には“[1]”のような目印が挿入され、テキストの最後にはリンク先一覧が追加されている。この情報を活用すれば、「リンクをたどる」ことについては可能になるはずだ。フォーム部品についてはあきらめるしかなさそうだが。

レンダリング品質

テーブルのレンダリングについては、Lynxに過剰な期待はできない。単純な表であればきれいに整形してくれるが、レイアウトのためにテーブルを使っている場合はレイアウトが崩れることになる。このあたり、w3mならばテキストベースでもきれいにレンダリングしてくれそうなのだが。

細かい点

その他、実装時に考慮したほうがいい細かい点について。

Lynxの画面幅

Lynxのオプション"-width"にて横方向の文字数を設定できるわけだが、幅はちょっと広めにとる方がよさそうだ。というのも、Lynxのレンダリングでは、画面の左右にけっこう広い余白をとるようになっているからだ。幅を広めに指定しておいて、表示する際には左側の余白を削るようにするとちょうどいい表示になりそうだ。