Home » webツール » ◎ 日立のサイトで、『CSS3で開発するWeb画面の色と形の作成を支援するツール』が公開されていて、個人でも無償で利用できる。

◎ 日立のサイトで、『CSS3で開発するWeb画面の色と形の作成を支援するツール』が公開されていて、個人でも無償で利用できる。

2012年7月25日水曜日

css3 html5 webツール



CSS3で開発するWeb画面の色と形の作成を支援するツールで、業務システム向けらしいが、個人でも無償で利用できる。ツール利用に際して登録などは不要。

動作環境（2012年7月時点で、想定通りに動くことを確認した環境と書かれている）
OS：Windows 7 と Mac OS X 10.7。
ブラウザ：Firefox 12 および 13

MacBook（Mac OS X 10.6.8）、ブラウザは Safari 5.1.7でアクセスしたところ、「Firefox 12以降でアクセスしてください」とのアラートが出た。そこで、Firefox 14に変えてアクセスすると、ほぼ問題なく利用できたもよう（公開側が想定している動きどおりだったか詳細が分からないので何ともいえないが）。

ツールの特徴
●作成した色と形を登録すると、次にブラウザを立ち上げたときも利用可能。
HTML5のlocalStorageの機能を用いてクライアントに保存しているので、localStorageを削除すると消えてしまう。Firefoxの場合、cookieを削除すると同時に消えてしまう。
Firefox（Mac）のcookieの場所は、ユーザー/Library/Application Support/Firefox/Profiles/●●●.default/cookies.sqlite

●作成した色と形のHTMLとCSSのコードを表示させることができる。
このコードをコピーし、HTMLに張り込んで利用できる。

●作成した色を色覚特性別に変換して示すことができる。

●作成した色が色覚の特性に依存せず判別できるかを、輝度比を近似したグレースケールに変換された画像で確認することができる。

ツール公開の目的
  • CSS3普及（＝Webコンテンツの質の向上）の促進。
  • W3C(World Wide Web Consortium)が勧告するWCAG 2.0やJIS X8341-3の中では、文字と背景の相対輝度の比を4.5以上にするように規定されているが、色覚特性に依存せず識別できるかの確認方法として「輝度比近似グレースケール」の提案。

試しにボタンや、文字の背景になる矩形を作ってみた（用意されているサンプルに変更を少し加えただけだが）。

とりあえず、保存し、作ったボタンのソースをコピーして、htmlを作成し、ブラウザで表示。ツールのプレビューどおりのボタンが画像なしで再現される。画像右側はマウスオーバー（オンマウス）したとき。




全体の印象としては、黒を基調にツール画面がデザインされているので、作成するものもやや濃いめのものに偏るかもしれない。このあたりのUIもカスタマイズできるとありがたい。

また、アクティビティ.appで見ると、このツールのみを開いているFirefox 14の実メモリは215MB前後、他のページのタブを4つ開いているSafari 5.1.7の実メモリが140MB前後、やはり負荷がやや大きく、その分動作が重い感じ。ちなみに使用したMacBookはメモリ4GB。

その後、MacBook Air（Mac OS X 10.7.4、メモリ4GB）、ブラウザ Firefox 14でも試してみたところ、アクティビティ.appの数値は変わらないものの、こちらの方が動きは軽い。やはりMac OS X 10.7に最適化されているのかもしれない。

CSS3で表示する画面の色作成支援ツール：日立のユニバーサルデザイン
（実際のツールへのリンクもこちらから）


By 時刻:
ラベル: , ,