簡単なHijaxの紹介 A brief introduce of the hijax methodology. http://domscripting.com/presentations/xtech2006/

1. Hijax - 少しずつJavaScriptの埋め込み
Hijax
- 少しずつAjaxへ
1 of 14

2. なぜAjaxなの？
よりよいUI/UE（ユーザ側）
リッチなUIの実現が可能になる。
より速い処理（サーバー側）
通信は画面遷移・リロードなし、データのみ
より柔らかいシステムアーキテクチャー
サービス単位で分けることが出来る（システムをAPI化）
SOA、クラウド…
2 of 14

3. しかし、Ajaxの時代なのに...
JavaScriptロード・初期化が失敗したら...
JavaScriptを対応してないデバイスであれば...
検索エンジンがアクセスする場合に...
It must degrade well. It must still be
accessible. It must be usable. If not, it is a
cool useless piece of rubbish for some or
many people.
Thomas Vander Val
ピュアなHTMLは重要です！
3 of 14

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

5. 漸進的にページを作る
コンテンツ
コンテンツを適当にマークアップ HTML/XHTML
プレゼンテーション層 CSS
各要素の振る舞い JavaScript
5 of 14

6. ポイント！「分離」
CSSの分離
inline
<p style="font-weight: bold">This is an introductory paragraph.</p>
external
<p class="introduction">This is an introductory paragraph.</p>
p.introduction { font-weight: bold; }
6 of 14

7. ポイント！「分離」
JavaScriptの分離（ポップアップ）
pseudo protocol - ダメ！
<a href="javascript:window.open('help.html')">contextual help</a>
空リンク - よくない！
<a href="#"
onclick="window.open('help.html'); return false;">contextual help</a>
DOM - 良い！
<a href="help.html"
onclick="window.open(this.getAttribute('href')); return false;"
>contextual help</a>
7 of 14

8. ポイント！「分離」
徹底的な分離（ポップアップ）
ピュアなHTML - 素晴らしい！
<a href="help.html" >contextual help</a>
JavaScriptでの初期化
$(function(){
$("a.help").bind("click", function(){
window.open($(this).attr("href"));
return false;
});
});
8 of 14

9. JavaScriptを使う時に
<a href="#" >...</a>
<a href="javascript:" >...</a>
inline イベントハンドラー
ご遠慮ください！
9 of 14

10. Hijax
クラシック方法でウェブシステムを作る。
画面遷移はリンクとフォームで実装する。
JavaScriptでリンクとフォームをハイジャック（hijack）する。
フォームやリンクを代わりに、XMLHttpRequestでサーバーへ通信させる。
サーバはただのデータを返却する。
10 of 14

11. システムの仕組み
サーバー側
モジュール化（サービス化、API化）
データフォーマット
XML + DOM
JSON + eval()
HTML + innerHTML
11 of 14

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

13. Hijaxの利点
無垢なHTML
どんなディバイスでも使えるシステム
検索エンジンにやさしい
DRY
ロジックとプレゼンテーションの分離、メンテナンスしやすい。
セキュリティー
すべてのビジネスロジックはサーバーサイドにある。
13 of 14

14. Thank you!
14 of 14