1 / 13

第 5 回

第 5 回. 配色最適化システムの仮完成と GA パラメータの調整. 情報工学科 05A2301 樽美　澄香 （ Tarumi Sumika). 2008 年 12 月 1 日. Javascript による DOM 操作 ページの配色操作 IGA による配色最適化手順 色相（全般）→ 明度・彩度（個人） →ルール化 遺伝的アルゴリズム操作の設計 ＜提案内部処理＞ 最適な 明度・彩度 の解の探索（ HSV 色空間を用いる）. 前回までの内容. 配色最適化システムが完成 !! （現在は、補正は明度・彩度のみ）. 配色最適化システムの全体画面.

keola
Download Presentation

第 5 回

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第5回 配色最適化システムの仮完成と GAパラメータの調整 情報工学科05A2301 樽美　澄香 （Tarumi Sumika) 2008年12月 1日

  2. JavascriptによるDOM操作 ページの配色操作 IGAによる配色最適化手順 色相（全般）→明度・彩度（個人）→ルール化 遺伝的アルゴリズム操作の設計 ＜提案内部処理＞ 最適な明度・彩度の解の探索（HSV色空間を用いる） 前回までの内容 配色最適化システムが完成!! （現在は、補正は明度・彩度のみ）

  3. 配色最適化システムの全体画面 Webページの選択（クリック）した箇所の配色を、見やすく補正する。CSSを操作する。 アプリ画面で操作を行う。 現在は、補正したいページにボタンを設置することで利用可 表示中のページに対応予定 設置法：以下の２行を記述 Webページ アプリ <script type=“text/javascript“ src=“optapp.js"> <form> <input value=“配色補正ボタン" onclick="appOpen()" type="button"> </form> △ 実行中の画面

  4. パラメータ設定画面 パラメータ設定画面は面積節約のため、折りたたみ式にレイアウト 打ち切り世代 交叉率 突然変異率 突然変異範囲 1～3の減少率 △ 実行中の画面

  5. 現配色＆新配色の表示 Webページの選択箇所から解析し表示する 色指定されているselector RGB16進に変換表示（Webで使われる書式） 新配色はIGA処理後に生成 3rd 2nd ABC ( 1st ) 1色目：文字色 2色目：背景色 3色目：2次背景色 現在の配色 新しい配色 △ 実行中の画面

  6. 配色提案（IGA）画面 ５段階の星評価 人間が操作しやすいといわれる5段階評価 打ち切り世代まで評価を繰り返す・・・ 「元の配色」に最も近い新配色をデフォルト自動選択 各色の明度・彩度の差の合計が、最も小さい配色 （配色評価） • ５段階の星評価 • 人間が操作しやすいといわれる5段階評価 • 打ち切り世代まで評価を繰り返す・・・ ×（打ち切り　　世代数：調整中） （配色決定） Webページの配色を変更する（適用する） △ 実行中の画面

  7. 配色補正のプレビュー 文字色（1色目）と第1背景色（2色目）の明度差の表示機能 W3C（WWW技術標準化推進団体）では、ウェブサイト設計で、明度差は125以上が望ましいとしている。 明度差は( R×299 + G×587 + B×114 )/1000 で計算。 ※　現在は数値表示のみなので、自動選択・判断基準に利用したい。 明度差 △ 実行中の画面

  8. パラメータの調整＆テスト 現在、パラメータの調整（設定）中です。 短期大学部からモニターをお借りして人力実験中。 EIZO社 色覚シミュレーションモニター「FlexScan U」 公式サイト製品情報 http://www.eizo.co.jp/products/u/sx2461w-u/index.html テスト日程 ゼミ実施日、12月15日（月）or 20日（月）予定 ぜひテストにご協力ください！（お願い） 詳細が決まり次第、後日ご連絡します。

  9. デモのテストデータについて 見づらい配色でCSSを定義 参考：色覚異常-Wikipedia htmlデータ（配色はCSS定義） ＜日本語での名言集＞ △見づらい配色（出典：色覚異常 - Wikipedia）

  10. 補正後の色弱シミュレーション結果 本システムを利用し、色弱者の見え方を実験 Web色弱シミュレータ「Vischeck」(http://vischeck.com/) パラメータの補正前・補正後の低圧縮jpg画像を利用 私の通常の見え方で感覚的に補正した結果をシミュレートしているため、今回の実験より、さらに情報を読み取りやすく補正することは可能？ 補正前の配色 補正後の配色 オリジナル 見えづらい 見えやすくなった! 第一色盲

  11. # 今後の予定 # 研究状況（完了） 配色提案・補正処理の実装 システムの仮完成！ GAパラメータの調整中 12月上旬までに完了 次のステップ GAパラメータの調整終了 複数人によるテスト（主観評価） 評価方法の調査＆検討 評価用紙の作成

  12. 参考文献 色覚異常 – Wikipedia,http://ja.wikipedia.org/wiki/%E8%89%B2%E8%A6%9A%E7%95%B0%E5%B8%B8 W3C, Web Content Accessibility Guidelines 1.0,http://www.w3.org/TR/WAI-WEBCONTENT/

  13. ＊ご清聴ありがとうございました＊ 樽美　澄香

More Related