第2回JavaScript, CSS, DOMを用いた Webページの配色操作情報工学科 05A2301 樽美澄香（Tarumi Sumika) 2008年 7月14日本日の発表内容 1. 研究テーマの課題 2. JavaScriptを用いたWebページの配色操作  Webアプリケーションで注目されているJavaScriptについて  Webデザインに欠かせないCSSを用いた配色操作  「DOM」による文書構造解析  デモンストレーション研究テーマの課題（１）  従来の研究との相違点   類似した研究事例  「対話型遺伝的アルゴリズムを用いた3色配色システムの開発」  「発想支援機能を有する対話型進化計算による Web ページのデザイン生成システム」従来の研究  IGAを用いた配色支援・発想支援・デザイン生成（デザイナ側）   感性を取り込み、0からの創作プロセスを支援する本研究での課題  既存の配色に対して、最適化の支援を行う（閲覧者側）  PCに詳しくない「色弱者」をメインユーザーとしたシステム開発  使いやすさの考慮が必要研究テーマの課題（２）  対応させる色数  Web配色はベース・サブ・アクセントが一般的 ⇒ 3 ± 1 色  モニター  色弱者に評価してもらうことが理想  残念ながら知人に対象者はいない･･･  インターネットを通じて、配布・使いやすい環境を考慮した開発  容易なインストール  多くの機能をサポート（開発しやすさ） ⇒Firefoxのアドオン(拡張機能)として作成 ▲ アドオン「Fire Dictionary」利用例 Webページの配色操作処理配色最適化  Webブラウザ上の配色（＝色情報）を操作する Webページの見づらい箇所を選択選択箇所の配色取得（第1回） AIによる配色最適化処理指定箇所の配色変更  システム全体での位置づけ  UI部分ユーザーに直接関係する処理  動作確認時には必要となる処理  使用する言語  JavaScript  END  Java (サーバサイドならばJSP)  ### 全体フローチャート ### スクリプト言語（インタプリタ）プログラミング言語（コンパイラ） JavaScript（JS）とは? Webブラウザ上での利用に特化したスクリプト(簡易)言語  利点  実行環境の広さ * 主要Webブラウザでは標準実装  ブラウザ上での動作の軽快さ  サーバーに負荷をかけない ⇒ JSはクライアントサイドスクリプト（サーバー通信機能あり）  クライアント（Webページ閲覧者）環境などの取得しやすさ  欠点  ブラウザ間の互換性が乏しい（ブラウザごとのプログラミングが必要）  セキュリティ上の制限がある  アクセス可能なローカルファイルはCookieのみ（他言語との併用が一般的）  JavaScript と Java  JSはJavaに似た記法を用いるが、直接の互換性はなく別言語である。配色での必要な色情報   地 2色以上あれば「配色」とみなす配色の要となる情報  色の値（例）white, #ffffff  color 文字（図）地 or 図？（Webページでは、図=文字） 1. 2. ピクセル単位で色の占める面積を計算し、各色の大小関係で判断する。文書構成を解析し、背景色(地)＞文字色(図)として判断する。 1.は確実だが処理時間がかかるため、今回は2.を採用する。（ただし、構造が特殊な文書は考慮しない。）色情報の取得手順 1. ユーザーが、 Webページの色変更したい箇所を選択する。  2. ページ全体で色操作するかは検討中・・・文書構造から選択範囲を部分解析し、 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 文書を階層的な構造として識別する構成する要素を「ノード」とよぶ選択ノードを起点に走査し、適用されている「色の値」を取得する 1. 2. 該当ノードの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でみる探索順  直近(下位)のスタイルが適用 <p><ul><li>てきすと</li></ul></p> 1  3 デモンストレーション！  実行環境  （実行中のスクリーンショット） 2 WindowsXP, Mozilla Firefox3 配色候補の提案画面（次回以降）  配色提示  ユーザー指定(RGB,明度etc.） parameter # 今後の予定 #  研究状況  仮外部仕様の設計  Webプログラミングの学習（JavaScript, JSP, DOM, CSSなど）  GA（IGA）について文献の調査・学習  次のステップ  IGAによる最適化方法を検討・実験する！  バリアフリーな配色について調査する  システムを改良する（アドオン化・例外処理）  学生会発表用の原稿を作成する # 進捗状況 # 7月力を入れる＜GA調査＞＜設計＞＜開発＞＜テスト＞今現在 11月? 参考文献  濱田悠介, 狩野均「発想支援機能を有する対話型進化計算による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.tohohoweb.com/js/dom.htm> ＊ご清聴ありがとうございました＊樽美澄香