Ajax èªçãã 10 å¹´ã¨ãããã
Intro
èªçã¨è¨ãã®ãæ£ãããå¾®å¦ã ãã©ãå¤åèªçã§ããã¨æãã¾ãã ã¨ããã®ãããAjaxãã¨ããååã®åºå ¸ã¯ä»¥ä¸ã®è¨äºã§ããã®è¨äºãæ¸ãããã®ãä»æ¥ããã¡ããã© 10 å¹´åã§ããã
Ajax: A New Approach to Web Applications
(å½æããã URL ãä¸åå¤ãã£ã¦ãã)
Web åãã¦ã¾ã 10 å¹´ãã£ã¦ç¡ããã§ãå ¨é¨è¦ã¦ããã£ã¦ããã§ã¯ãªãã§ãããå人çã«ã¯ã¡ãã£ã¨æãåºæ·±ãè¨äºã ã£ããããã®ã§ãã¡ãã£ã¨æ¯ãè¿ã£ã¦ã¿ã¾ãã
Ajax: A New Approach to Web Applications
çè ã® Jesse James Garrett æ°ã¯ UX ã®ã³ã³ãµã«ãã£ã³ã°ä¼ç¤¾ã§ãã Adaptive Path ã®åµç«ã¡ã³ãã¼ã®ä¸äººã§ã UX ã¨ã³ã¸ãã¢ã§ãã ãã®è¨äºã®è¶£æ¨ã¯ãå½ææ¢ã«ãã£ã Google Maps ã GmailãGoogle Suggest ã¨ãã£ãã¢ããªã®æåã«ã¤ãã¦åæããããã Ajax ã¨åä»ãããã®ã§ããã
å½æãç¹ã« Google Map ãä¸ã«åºãæã«ãæ代çã«ã¯å¤ãã®äººã¯ãã® UX ããFlash ã§å®ç¾ãã¦ãããã ãããã¨æã£ãã§ãããã ãããã£ã¦ã°ãªã°ãªåãããããããä½ãäºã¯ãå¾æ¥ã® Web ã®èãæ¹ã§ã¯ã§ãã¾ããã§ããã
ã¡ãªã¿ã«å½æã®å°å³ã¨ããã°ãæ¦ããããªæãã§ãããã
å°å³ã®å¨ã 8 æ¹åã®ç¢å°ãæ¡å¤§çã¯å ¨é¨ãªã³ã¯ã§ãã¯ãªãã¯ããã¨ãã®å ´æãæ¡å¤§çã表示ãããã¼ã¸ãé·ç§»ããããªãã¨æããã UI ã ãããä»ã ã¨ã¤ã©ã¤ã©ãã¦ææªãª UX ã§ãããæã®å°å³ã¨ã¯ããã ã£ãã¨æãã¾ãã
Yahoo å°å³ ã¯ä»ã§ãããã®ç»é¢é·ç§»ã¿ã¤ãã®å°å³ãæ®ã£ã¦ãã¾ããã
ã¡ãªã¿ã«å°å³ãã¯ãªãã¯ã§æ´ãã§ããããã¨ããã¨ããããªãwww (ãã®å°å³ããã®ãã¡æ¶ããã ãããããã£ãããªã®ã§èå¤å¦ã®è³æã¨ãã¦æ®ãã¦ããã)
ã§ã Google Map 㯠Flash ãå ¥ã£ã¦ããªãã¦ãç»é¢ãªããé·ç§»ããã°ãªã°ãªåããäºãã§ããä»ã§ã¯ã©ã®å°å³ãã ããããããªã£ã¦ãã¾ã(ãã¡ãã Yahoo ã®å°å³ã)ã
ä»ã«ããã©ã¦ã¶ã§ã®ã¡ã¼ã«ã¯ãªãã¼ããã¦åä¿¡ãã¦ãã¡ã¼ã«ãéãã®ã¯ç»é¢é·ç§»ã ã£ãããå ¥åãã©ã¼ã ãä»ã®ããã«åè£ãåºãã¦ããããã¯ããªãã£ãããæ¤ç´¢çµæãåæã«çµãè¾¼ã¾ãããããªãã£ãã
Garrett æ°ãæ¸ãããã®ã¨ã³ããªã¯ãããããã¢ããªã Flash ã使ããã«ã©ããã£ã¦ãã® UX ãå®ç¾ãã¦ããã®ãã解æããããã«ååãä»ãããã®ã§ããã ã ããå®éå½¼ããã®ã¨ã³ããªãæ¸ãåããã Ajax çãªãã®ã¯å°ãã¥ã¤åºã¦ãã¦ãå½¼ãããã«åãã®è¯ããããªååãä»ããã¨ãããã®ã
Ajax ã®ä½ãè¯ãã£ãã®ã
ä½ãããã¤ã³ãã¯ãã大ããã£ãã®ã¯ãããã Flash ã®ããã«ãã©ã°ã¤ã³ã®ã¤ã³ã¹ãã¼ã«ãå¿ è¦ã¨ããã HTML + CSS + JS (+ XML) ã ãã§æãç«ã£ã¦ããã¨ããäºã ã£ãã¨æãã¾ãã å°å ¥ã«ã¤ã³ã¹ãã¼ã©ã¯ãããªãã£ãããã¨ãããã¨ã¯æé æ¸ããããªãã£ãã ããã¦ãå½ææ°ããæè¡ã¯ããã³ããã主å°ãã¦ããã®ã主æµã ã£ãã¨ããã Ajax ã¯ãã©ã¦ã¶ãæã£ã¦ãæ¨æºæè¡ã ãã§ã§ãããå¹³ããè¨ãã°ã©ããã«é«ãã©ã¤ã»ã³ã¹æãæãå¿ è¦ããªãå®ç¾ã§ããã
ããã¦ããã®è¨äºããNew Approachãã¨è¨ã£ã¦ããã®éãã使ã£ã¦ããæè¡ã¯ãã§ã«ãããã®ã§ããã®çµã¿åããæ¹ãæ°ããã£ãã
ããã«ãã£ã¦ããã¾ã§ææ¸(Document)ãé²è¦§(browse)ããããã«ä½¿ããã¦ãã Web ããã¢ããªãåä½ããããã©ãããã©ã¼ã ã¨ãã¦ã¹ã¿ã¼ããããã£ããã ã£ãã®ã¯ç¢ºãã ã¨æãã¾ãã (ããããã°ããã Web2.0 ã¨ãè¨ã£ã¦ã¾ããã)
ã¾ãå®éãã㧠Google Map 並ã¿ã®ã¢ããªãä½ãã®ãã©ãã ã大å¤ãã¯å¥ã¨ãã¦ãã夢ã¯åºãã£ã¦ãããã ã¨æãã¾ãã
å½æã® JavaScript ãªãã¦ããã¦ã¹ã«ã¼ã½ã«ã«å¤ãªè£ 飾ãæ½ãããããç¨åº¦ã®ãã®ã¨ãå®å ¨ã«ããã¡ãæ±ãããã¦ããé ã§ããã ããã¦ã»ãã¥ãªãã£çãªäºæ ããããã©ã¦ã¶ã§ JS ããªãã«ãã¦ããã¦ã¼ã¶ã沢山ãããã¨ãçç±ã« ãJS ç¡ãã§ãåããã Web éçºã®ç¨ä»¶ã¨ãã¦ãããã£ããããããåããã¨ãã¦ããã©ã¦ã¶ã®å®è£ å·®ç°ãªãã¦ç®ãå½ã¦ãããªãç¶æ ã ã£ãã¨æãã¾ãã (ãã®ææã« Google Map ã¨ãå®ç¾ãã¦ããã¨ãããã¨ãèããã¨ã¤ãã)
Ajax ã®ç±æ¥
è¨äºã§ã¯ Asynchronous JavaScript + XML ã®ç¥ã ã¨æ¸ããã¦ãã¾ãã
The name is shorthand for Asynchronous JavaScript + XML
éä¿¡ãã©ã¼ããã㯠XML ã ï¼ã¿ãããªæãããã¦ããããã®ããã㧠ãAjax ã§ããã¨ãããã®ã¯ XML ã ï¼ã ã¿ãããªç¡çãªåçå¨ãç£ãã ã¨ããæå³ã§ã¯å®³æªããç¡ãååã§ããã ä¸å¿ãã®ã¨ã³ããªã® FAQ ã«ã ãXML ãããªãã¦ããããã JSON ã¨ããããï¼ãã£ã¦æ¸ããã¦ã¾ãã
ãªãã§ãã¨ããã¨ãæ£ç´ããã¯åãªãæ´å¤ã®èªååããã ã¨è¨ããã¦ãã¾ãã(ããçç¥ãªãæ®é AJAX ã¨å ¨é¨å¤§æåã«ãã)
ãªãã§æ´å¤ãã¨ããã¨ããã®ãã SOAP (ç³ãã)ã¨ããæè¡ããã£ã¦ã ãªã¨ãã話ããããã©ãã¾ãååãªãã¦ãããªããã§ããã 大äºãªã®ã¯é¿ããããã¦ãã¶ãæ¬äººã®æ³å以ä¸ã«æåããããããªãã§ãããããä»ã³ã¬ãä½ã®ç¥ããªãã¦èª°ãæ°ã«ãã¦ãªãã ãããã
ãã®å¾ã®æµã
ã¾ãã JS ãè¦ç´ããã¾ãããããæ¸ã人ãå§åçã«å¢ãå§ããã
ãã¼ã«ãã¨ã³ã·ã¹ãã ãåºå§ãã¦ã jQuery ãåºãã®ã¯ãã®ç¿å¹´ã ããã§ãã
$.ajax()
ãªãã¦å·éã«èããã°é
·ãã¡ã½ããåã§ããã
ããã¦ãé²è¦§ã½ããã ã£ããã©ã¦ã¶(Browser)ã®éè¦æ§ããããããã® 3 å¹´å¾ã® 2008 å¹´ã«ã¯ Google èªèº«ããã©ã¦ã¶ãä½ããChrome ã® beta ãå ¬éããã¾ããã åæã«ããã©ã¦ã¶å士ãå·®å¥åã®ããã«ç¬èªæ©è½ãã¤ãã¾ãã£ã¦ãæ代ãçµãã(ã¨ãããç«ã¡è¡ããªããªã)ãã¡ããã¨æ¨æºåãããã¨ããæµãã«ãªã£ã¦ã ã ãã ã HTML, CSS, JS ã®ä»æ§ãéè¦æ§ãå¢ãã¦è¡ãã¾ãããããã HTML5 ã¨ããç大ãªãç¥ãã«ç¹ãã£ã¦è¡ãã¾ãããã
XHR ã使ã£ã¦ Comet ã§ãã£ããã¨ããæµè¡ã ãã¦(Lingr ã¨ãããã®ææé£ãããªãããª)ã XHR ã§ãã¼ã¿é£æºã§ãããã·ã¥ã¢ããã ï¼ãã¿ãããªæ代ããããã俺ãè¨æ¶ãããã¾ãã ãã㦠JSONP ã¨ããè£æãé§ä½¿ãã¦ã»ãã¥ãªãã£çã«ã¤ãããã¨ã«æ°ã¥ã㦠CORS ãå«ã XHR2 ã«ç¹ãã£ããã Push ãå«ã㦠WebSocket ã«ç¹ãã£ã¦ããã¾ããã
HTTP + JSON 㧠API ãå ¬éãããµã¼ãã¹ãå¢ããã¢ã¼ããã¯ãã£ã¨ãã¦ã® REST ããããã¨è¦ç´ãããããèªè¨¼ã¨ã㦠OAuth ãªãããåºã¦ãããããã
2009 å¹´ã«ã¯ã V8 ããµã¼ãã«ä»ç«ã¦ã Node.js ã Ry ãä½ã£ã¦ããããªã Socket.IO ã¨ãããã©ã¼ã©ã¤ãã©ãªãåºã¦ãã¦ããªã¢ã«ã¿ã¤ã çãªè©±ã¨çãä¸ãã£ãã
ãããã³ã«ã¨ã¨ã³ã·ã¹ãã ã¨ãã©ã¦ã¶ã® API ããããå§ããã¨ãããããããã³ãã§å®çµãããã¸ãã¯ãå¢ã㦠SPA çãªè©±ãåºããã ããã³ãã¨ã³ãå«ãã¦ãã¬ã¼ã ã¯ã¼ã¯ãé¨å¾ã®ã¿ã±ãã³ä¸¦ã«ç¾ãã¦ã¯æ¶ãã¦ã£ãã
ãããã£ã¦ã HTML ã JS ããã©ã¦ã¶ããããã³ã«ãããã§ããã¨ããã»ã©ã«é²åãã¦ãããªãã¨ããæ°ããã¾ãããã¡ããã¾ã ã¾ã 足ãã¦ãªããã®ã¯ããããããã¾ãããã㨠CSS é å¼µããè¶ é å¼µãã
ãã®å¾ãè²ã ãªãã¨ãèµ·ãã£ããã©ãçµå±ãã¾ã ã«ãã®è¨äºã«æ¸ããã¦ãããã¨ã¨ãããå¤ãããªãçºå±ç³»ããã£ã¦ããã ãã§ã ã¤ã¾ããã® 10 å¹´éã¯ã Ajax ãã²ãããæ¶åããæéã ã£ãã®ããªãã¨ããæ°ããã¾ãã
WebSocket ã WebRTC ãé¢ç½ããã©ãçµå±éããªãã£ãããããã©ãæå¾ã« Ajax ã¯å¿ ãéãã ãã®å®å¿æã¨ã·ã³ãã«ããä»ã® Web ãããªãæ¯ãã¦ããæ°ããã¾ãã
ãããã
ä»èªãã§ã¿ãã°ãã¡ãããªãã¦ãã¨ã¯ç¡ãè¨äºãªãã ãã©ã Web ã®ãã¨ãåå¼·ãå§ãã¦ãã°ãããã¦ãããã®è¨äºã®åå¨ãç¥ã£ã¦ãèªã¿ãªããã¯ã¯ã¯ã¯ãã¦ãæ°ããã¾ãã å¤åãèªåèªèº«ã Web ãé¢ç½ãã¨æ¬æ ¼çã«ã®ããè¾¼ããã£ããã ã£ãã®ããããã¾ããã
Web ãã¢ããªã±ã¼ã·ã§ã³ãã©ãããã©ã¼ã ã¨ãã¦ã®ã¹ã¿ã¼ããåã£ã¦ãã 10 å¹´ãã£ã¦ããæªã ã«äººã®æ¬²ã¯å°½ãããã¾ã ã¾ã é²åã®ä½å°ãè¦ãã¦ããæ°ã¯ãã¾ãã æ°ããäºã¯æ¾ã£ã¦ããã¦ãèµ·ãããããã®éä¸ãä½æã§ããã®ã§ãã¿ã¤ãã³ã°çã«ã¯åã楽ããã
ä¸æ¹ã§ããã©ã¦ã¶ã¨ããã人é¡ãã¼ãããä½ãã«ã¯è¤éãããåå¨ã«ãªã£ã¦ãã¾ãããã¯ã OS ã«ãªããã¨ãã¦ããããã©ã¦ã¶ãç©ãããã¤ã¹ãå¢ãããã Web ã«è¼ããã¢ããªãå¢ããã ãã¨ãä½ãã¨ããç«å ´ã§è¨ã㨠Web ã£ã¦åå¼·ããã®ããã®åã大å¤ã«ãªã£ã¦ãã¾ã£ãæ°ããã¦ãã¾ããåå¿è ããã©ãããå§ãããããã®ããã¨æãã®ãç¡çã¯ç¡ãã æè¿ã¯æ£ç´ Web èªä½ãããã®èªéã§ã¤ã¶ããªããã¨æãäºããã¾ã«ããã¾ãã
ããã§ã Web èªä½ã¯è¯ããªã£ã¦ãããã¨ãã¦ãããããã¯ããå°ãç¶ãããããªãããªãä»ã¯ã¾ã 人ã«ã¨ã£ã¦æ¬ ãããªããã®ã«ãªã£ã¦ããã¨æããã ä½ãããèªåã¯ãWeb ã好ãã ãã¨æãã¦ããã®ã§ãWeb ããããããè¯ããªã£ã¦è¡ãã°ãããªã¨æããããããã¦ããããã¨æã£ã¦ããã Web ããä»ã©ããªã£ã¦ããã®ããããããããã©ããªã£ã¦ããã®ãããããããã°ããçå£ã«èãã¦ã¿ããã¨æã£ã¦ãã楽ãããã
次㮠10 å¹´ã¯ã©ãã ããããããããããããã Web ã®æ¬¡ãåºã¦ãã¦ãããã«å¼å°ã渡ãã¦è¡ã 10 å¹´ã«ãªããããããªãã ã§ããã°ã Web ã®æå¾ãã©ãæ¯ãå¼ãåãã®ããä½ã次ã®ä¸çãä½ã£ã¦ããã®ãããããã¾ã楽ãã¿ãããããªãã