情報工学科 05A2301 樽美 澄香 （Tarumi Sumika) 第2回 JavaScript, CSS, DOMを用いた 　　　Webページの配色操作 情報工学科　05A2301 樽美　澄香 （Tarumi Sumika) 2008年 7月14日

本日の発表内容 研究テーマの課題 JavaScriptを用いたWebページの配色操作 Webアプリケーションで注目されているJavaScriptについて Webデザインに欠かせないCSSを用いた配色操作 「DOM」による文書構造解析 デモンストレーション

研究テーマの課題（１） 従来の研究との相違点 類似した研究事例 従来の研究 本研究での課題 「対話型遺伝的アルゴリズムを用いた3色配色システムの開発」 「発想支援機能を有する対話型進化計算による 　　　　　　Web ページのデザイン生成システム」 従来の研究 IGAを用いた配色支援・発想支援・デザイン生成（デザイナ側） 感性を取り込み、0からの創作プロセスを支援する 本研究での課題 既存の配色に対して、最適化の支援を行う（閲覧者側） PCに詳しくない「色弱者」をメインユーザーとしたシステム開発 使いやすさの考慮が必要

研究テーマの課題（２） 対応させる色数 モニター Web配色はベース・サブ・アクセントが一般的 ⇒ 3 ± 1 色 色弱者に評価してもらうことが理想 残念ながら知人に対象者はいない･･･ インターネットを通じて、 配布・使いやすい環境を考慮した開発 容易なインストール 多くの機能をサポート（開発しやすさ） ⇒Firefoxのアドオン(拡張機能)として作成 ▲ アドオン「Fire Dictionary」利用例

Webページの配色操作処理 Webブラウザ上の 配色（＝色情報）を操作する システム全体での位置づけ 使用する言語 配色最適化 ### 全体フローチャート ### Webブラウザ上の 配色（＝色情報）を操作する システム全体での位置づけ UI部分 ユーザーに直接関係する処理 動作確認時には必要となる処理 使用する言語 JavaScript スクリプト言語（インタプリタ） Java (サーバサイドならばJSP) プログラミング言語（コンパイラ） Webページの 見づらい箇所を選択 選択箇所の配色取得 AIによる 配色最適化処理 （第1回） 指定箇所の配色変更 END

JavaScript（JS）とは? Webブラウザ上での利用に特化したスクリプト(簡易)言語 利点 欠点 JavaScript と Java ブラウザ上での動作の軽快さ サーバーに負荷をかけない ⇒ JSはクライアントサイドスクリプト（サーバー通信機能あり） クライアント（Webページ閲覧者）環境などの取得しやすさ 欠点 ブラウザ間の互換性が乏しい（ブラウザごとのプログラミングが必要） セキュリティ上の制限がある アクセス可能なローカルファイルはCookieのみ（他言語との併用が一般的） JavaScript と Java JSはJavaに似た記法を用いるが、直接の互換性はなく別言語である。

color 配色での必要な色情報 2色以上あれば「配色」とみなす 配色の要となる情報 色の値 地 or 図？（Webページでは、図=文字） （例）white, #ffffff 地 or 図？（Webページでは、図=文字） ピクセル単位で色の占める面積を計算し、 各色の大小関係で判断する。 文書構成を解析し、背景色(地)＞文字色(図)として判断する。 1.は確実だが処理時間がかかるため、今回は2.を採用する。 （ただし、構造が特殊な文書は考慮しない。） color 文字（図）

色情報の取得手順 ユーザーが、 Webページの色変更したい箇所を選択する。 ページ全体で色操作するかは検討中・・・ 文書構造から選択範囲を部分解析し、 CSSファイルから該当する「色の値」を取得する。 CSS (Cascading Style Sheets)とは Webページの「レイアウト・装飾」を定義する規格。 WWW標準化団体W3Cでは、CSSの利用を推奨している。 書式 selector { property: value; } h1 { color: #006400; } /* <h1>hello!</h1> */

文書構造の解析・色取得 JavaScriptで「DOMツリー」を利用する 選択ノードを起点に走査し、 適用されている「色の値」を取得する DOM (Document Object Model)とは HTMLやXML文書を取り扱うためのAPI 文書を階層的な構造として識別する 構成する要素を「ノード」とよぶ 選択ノードを起点に走査し、 適用されている「色の値」を取得する 該当ノードのCSSルールから、 文字色・背景色を取得できれば終了する。 取得できなければ、上位ノードを探索する。 　⇒ 1. に戻る # 視覚化したDOMツリー #

配色変更 と 現在の機能 CSSでは最後尾にあるルールが適用される 現在実装している機能 ⇒ルールを追加することで容易に変更（上書き）ができる 現在実装している機能 最大探索色数が調整可能 2色～4色（デフォルトは3色） CSSでのclass,id指定ルールを解析 優先順位：id > class > nomal_selector （例）selector.class#id, selector.class, selector#id, selector 対応済みの色表示フォーマット カラーネーム：black, white etc. RGB形式：rgb(255, 255, 255) 16進数：#ffffff

配色操作のデモンストレーション 補足：HTMLでみる探索順 デモンストレーション！ 3 直近(下位)のスタイルが適用 2 1 <p><ul><li>てきすと</li></ul></p> デモンストレーション！ 実行環境 WindowsXP, Mozilla Firefox3 3 2 1 （実行中のスクリーンショット）

配色候補の提案画面（次回以降） 配色提示 ユーザー指定(RGB,明度etc.） parameter

# 今後の予定 # 研究状況 次のステップ 仮外部仕様の設計 Webプログラミングの学習（JavaScript, JSP, DOM, CSSなど） GA（IGA）について文献の調査・学習 次のステップ IGAによる最適化方法を検討・実験する！ バリアフリーな配色について調査する システムを改良する（アドオン化・例外処理） 学生会発表用の原稿を作成する

# 進捗状況 # 7月 11月? 力を入れる ＜GA調査＞ ＜設計＞ ＜開発＞ ＜テスト＞ 今現在

参考文献 濱田 悠介, 狩野 均「発想支援機能を有する対話型進化計算によるWeb ページのデザイン生成システム」<http://www.kslab.cs.tsukuba.ac.jp/paper/hamada_SIS.pdf> WEBデザイン 情報を考察 色彩・配色について<http://harmonist.blog38.fc2.com/blog-entry-3.html> 上田学(1997)『JavaScript (ハンディリファレンス)』オーム社 JavaScript入門 <http://www.umechando.com/javascript/index.html> JavaScriptによるCSSの操作 <http://bmky.net/text/note/javascript-css/> ドキュメントオブジェクトモデル（DOM）<http://www.tohoho-web.com/js/dom.htm>

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