hijax - 少しずつajaxへ

Hijax- 少しずつAjaxへ

Hijax - 少しずつJavaScriptの埋め込み

1 of 14

なぜAjaxなの？よりよいUI/UE（ユーザ側）リッチなUIの実現が可能になる。

より速い処理（サーバー側）通信は画面遷移・リロードなし、データのみ

より柔らかいシステムアーキテクチャーサービス単位で分けることが出来る（システムをAPI化）SOA、クラウド…


2 of 14

しかし、Ajaxの時代なのに...JavaScriptロード・初期化が失敗したら...

JavaScriptを対応してないデバイスであれば...

検索エンジンがアクセスする場合に...

It must degrade well. It must still beaccessible. It must be usable. If not, it is acool useless piece of rubbish for some ormany people.

Thomas Vander Val

ピュアなHTMLは重要です！


3 of 14

漸進的にページを作るコンテンツコンテンツを適当にマークアッププレゼンテーション層各要素の振る舞い


4 of 14

漸進的にページを作るコンテンツコンテンツを適当にマークアップ HTML/XHTML

プレゼンテーション層 CSS

各要素の振る舞い JavaScript


5 of 14

ポイント！「分離」CSSの分離

inline

external

<p style="font-weight: bold">This is an introductory paragraph.</p>

<p class="introduction">This is an introductory paragraph.</p>p.introduction { font-weight: bold; }


6 of 14

ポイント！「分離」JavaScriptの分離（ポップアップ）

pseudo protocol - ダメ！

空リンク - よくない！

DOM - 良い！

<a href="javascript:window.open('help.html')">contextual help</a>

<a href="#" onclick="window.open('help.html'); return false;">contextual help</a>

<a href="help.html" onclick="window.open(this.getAttribute('href')); return false;">contextual help</a>


7 of 14

ポイント！「分離」徹底的な分離（ポップアップ）ピュアなHTML - 素晴らしい！

JavaScriptでの初期化

<a href="help.html" >contextual help</a>

$(function(){ $("a.help").bind("click", function(){ window.open($(this).attr("href")); return false; });});


8 of 14

JavaScriptを使う時に

ご遠慮ください！

<a href="#" >...</a>

<a href="javascript:" >...</a>

inline イベントハンドラー


9 of 14

Hijaxクラシック方法でウェブシステムを作る。

画面遷移はリンクとフォームで実装する。

JavaScriptでリンクとフォームをハイジャック（hijack）する。

フォームやリンクを代わりに、XMLHttpRequestでサーバーへ通信させる。

サーバはただのデータを返却する。


10 of 14

システムの仕組みサーバー側モジュール化（サービス化、API化）

データフォーマットXML + DOM

JSON + eval()

HTML + innerHTML


11 of 14

タイミング最初には、Ajaxをプランする。最後には、Ajaxを実装する。


12 of 14

Hijaxの利点無垢なHTMLどんなディバイスでも使えるシステム検索エンジンにやさしい

DRYロジックとプレゼンテーションの分離、メンテナンスしやすい。

セキュリティーすべてのビジネスロジックはサーバーサイドにある。


13 of 14

Thank you!Hijax - 少しずつJavaScriptの埋め込み

14 of 14

hijax - 少しずつajaxへ

Self Improvement