使用する CSS・JavaScrpitも指定

Presentation on theme: "使用する CSS・JavaScrpitも指定"— Presentation transcript:

1 使用する CSS・JavaScrpitも指定
現在のWebページはHTML・CSS・JavaScriptの３つに役割分担が行われており、デザイン、ページ上で 提供する機能はCSS・JavaScriptで提供されている。 HTML（動的ファイル） 【データ・文章構造を定義】 使用する CSS・JavaScrpitも指定 CSS（静的ファイル） 【デザイン定義】 JavaScript（静的ファイル） 【動的機能を定義】

2 使用する CSS・JavaScrpitも指定
一般的には、CSS・JavaScriptは同じ画面ではいつも同じファイルを利用しており、基本的にリリース後には 変更されることなく同じものを利用し続ける。一方で、現在、注目されているUI /UXにおいて、特にUIで 大きな役割を担っているが、これらにフォーカスを当てて開発を行われることは少ない。 HTML（動的ファイル） 【データ・文章構造を定義】 使用する CSS・JavaScrpitも指定 CSS（静的ファイル） 【デザイン定義】 JavaScript（静的ファイル） 【動的機能を定義】

3 使用する CSS・JavaScrpitも指定
CSSは、ページのデザインを定義しており、CSSファイルを変更するだけで、大きく異なるUIを提供する ことができる。 HTML（動的ファイル） 【データ・文章構造を定義】 使用する CSS・JavaScrpitも指定 CSS（静的ファイル） 【デザイン定義】 JavaScript（静的ファイル） 【動的機能を定義】

4 CSSは、ページのデザインを定義しており、CSSファイルを変更するだけで、大きく異なるUIを提供する
ことができる。 ・サンプル（既存ダイレクトトップ画面） ・サンプル（既存ダイレクトトップ画面のCSSファイルを試しに差し替えたもの）

5 使用する CSS・JavaScrpitも指定
CSSだけでなく、JavaScrpitも書き換えることにより、大幅にページの変更を行うことができ、単にUIだけ でなく、UXにも影響するような変更が可能となる。 HTML（動的ファイル） 【データ・文章構造を定義】 使用する CSS・JavaScrpitも指定 CSS（静的ファイル） 【デザイン定義】 JavaScript（静的ファイル） 【動的機能を定義】

6 CSSだけでなく、JavaScrpitも書き換えることにより、大幅にページの変更を行うことができ、単にUIだけ
でなく、UXにも影響するような変更が可能となる。 ・サンプル（既存ダイレクトの明細照会画面をJavaScriptとCSSで大幅に変更）

7 使用する CSS・JavaScrpitも指定
Bookmarklet（ブックマークレット）：ブラウザのブックマーク、もしくは、アドレスバーに 【 javascript: ・・・】と入力することで、現在表示しているページに強制的にJavaScriptを実行させる仕組み。 JavaScriptでCCSファイルの参照先も変更することで、ローカルで擬似的にJavaScript、CSSの変更が可能。 HTML（動的ファイル） 【データ・文章構造を定義】 使用する CSS・JavaScrpitも指定 CSS（静的ファイル） 【デザイン定義】 新CSS 【デザイン定義】 JavaScript（静的ファイル） 【動的機能を定義】 新JavaScript 【動的機能を定義】 上書き Bookmarklet（HTMLに追加で、JavaScriptが適用でき、既存 JavaScript、CSSの上書きが可能）

8 使用する CSS・JavaScrpitも指定
CSS、JavaScriptは、HTMLと独立性が高く、既存のWebアプリケーションへほとんど影響を与えず、 開発可能であり、アジャイル開発との親和性も高い。一方で、少ない工数で、抜本的なUIの変更が可能であり、 費用対効果が非常に高い。 HTML（動的ファイル） 【データ・文章構造を定義】 使用する CSS・JavaScrpitも指定 CSS（静的ファイル） 【デザイン定義】 新CSS 【デザイン定義】 JavaScript（静的ファイル） 【動的機能を定義】 新JavaScript 【動的機能を定義】