Hijax - 少しずつAjaxへ
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Hijax - 少しずつAjaxへ

on

  • 1,919 views

簡単なHijaxの紹介

簡単なHijaxの紹介

A brief introduce of the hijax methodology.

http://domscripting.com/presentations/xtech2006/

Statistics

Views

Total Views
1,919
Views on SlideShare
1,918
Embed Views
1

Actions

Likes
2
Downloads
0
Comments
0

1 Embed 1

http://a0.twimg.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Hijax - 少しずつAjaxへ Presentation Transcript

  • 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