Hijax - 少しずつAjaxへ
•
2 likes•3,344 views
簡単なHijaxの紹介 A brief introduce of the hijax methodology. http://domscripting.com/presentations/xtech2006/
Hijax - 少しずつAjaxへ
- 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
- 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