情報工学科 05A2301 樽美 澄香 （Tarumi Sumika)

Presentation on theme: "情報工学科 05A2301 樽美 澄香 （Tarumi Sumika)"— Presentation transcript:

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

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

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

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

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

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

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

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

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

10 配色変更 と 現在の機能 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

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

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

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

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

15 参考文献 濱田 悠介, 狩野 均「発想支援機能を有する対話型進化計算によるWeb ページのデザイン生成システム」< WEBデザイン 情報を考察 色彩・配色について< 上田学(1997)『JavaScript (ハンディリファレンス)』オーム社 JavaScript入門 < JavaScriptによるCSSの操作 < ドキュメントオブジェクトモデル（DOM）<

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