SenchaãšExt JSããŒã å
šäœã代衚ããŠãæ¬æ¥Ext JS 5ããªãªãŒã¹ããããšãçºè¡šã§ããããšãèªãã«æããŸããExtJS 5ã¯å€§ããªåé²ã§ããããã£ãŒãããã¯ãšç¶ç¶çãªãµããŒãã«æè¬ããŸãã ããã¯ç§ãã¡ã®æŽå²äžæ倧ã®ããŒã¿ã§ããã10äžããŠã³ããŒããè¶
ããŸããã äžç·ã«ãªã£ãŠãäžçã§æãå
é²çãªãã«ãããã€ã¹JavaScriptãã¬ãŒã ã¯ãŒã¯ãäœæããŸããã æé«ã®Ext JSãã¬ãŒã ã¯ãŒã¯ãäœæããããã«ãçããã¯èšãç¥ããªãè²¢ç®ãããŸããã
æ°æ©èœ
ã¿ãããµããŒã
Ext JS 5ã¯ããã¬ãŒã ã¯ãŒã¯ã®æãåºç¯ãªã¢ããããŒãã§ãã ãã®ãªãªãŒã¹ã§ã¯ãåäžã®ã³ãŒãããŒã¹ã䜿çšããŠãã¿ããããã€ã¹ã§ãã¹ã¯ãããã¢ããªã±ãŒã·ã§ã³ãå®è¡ããæ©èœãæäŸãããŸãã
ã¢ãŒããã¯ãã£ã®æ¹å
MVVMã¢ãŒããã¯ãã£ãšåæ¹åããŒã¿ãã€ã³ãã£ã³ã°ã䜿çšããŠãã¢ããªã±ãŒã·ã§ã³ã®äœæããããŸã§ä»¥äžã«ç°¡åã«ãªããŸããã ã¯ã©ã€ã¢ã³ãåŽã§ã¯ããµãŒããŒã¢ã¯ã»ã¹ã®åæ°ãæžããããã«ããŒã¿ã»ãã·ã§ã³ç®¡çãçµ±åããŸããã ã«ãŒãã£ã³ã°ãå
¥åãããšãã¢ããªã±ãŒã·ã§ã³ã«ãã£ãŒããªã³ã¯ãäœæã§ããŸãã ããããã¹ãŠã®æ¹åã«ãããã¢ããªã±ãŒã·ã§ã³éçºã¯ããã«å¹ççã«ãªããŸãã
ã¬ã¹ãã³ã·ãããŒã¯ã¢ãã
æ¬æ¥ãããæ°ããã¬ã¹ãã³ã·ãã¬ã€ã¢ãŠãã·ã¹ãã ã®ãããã§ãã¢ããªã±ãŒã·ã§ã³ã¯ãåãã®å€æŽã«é¢ä¿ãªãããã¹ã¯ããããšã¿ãã¬ããã®äž¡æ¹ã§æé©ãªå€èŠ³ãæã€æ©äŒããããŸãã
ã³ã³ããŒãã³ãã®æŽæ°
ã¢ããªã±ãŒã·ã§ã³ãæé·ããã«ã€ããŠãSenchaã¯ã³ã³ããŒãã³ãã©ã€ãã©ãªãæ¹åãç¶ããŸãã Ext JS 5ã䜿çšãããšããŠã£ãžã§ãããããŒãã«ã»ã«ã«è¿œå ããŠãããã°ããŒã¿ã®èŠèŠåãšåæãè¡ãããšãã§ããŸãã 財åæ©èœãåããã°ã©ãäœæçšã®ã¿ããã«æé©åãããã³ã³ããŒãã³ãã®ã»ãããç»å ŽããŸããã
å®éã«èŠãŠã¿ãŸãããïŒ
Ext JS 5ã®è©³çŽ°
ãã¹ã¯ããããšã¿ããã¹ã¯ãªãŒã³éã®çµ±äžãããã€ãã³ã
Ext JS 5ã¯ãã¿ããã¹ã¯ãªãŒã³ãåãããã¹ã¯ãããããã³ããã€ã¹ã§1ã€ã®ã³ãŒãã䜿çšã§ããããã«ããæåã®ããŒãžã§ã³ã§ãã Sencha Touchã®ãžã§ã¹ãã£ã·ã¹ãã ã䜿çšããŠããã³ãããºãŒã ãã¹ã¯ã€ããã¿ãããé·æŒããªã©ã®ãžã§ã¹ãã£ã®ãµããŒããå°å
¥ããŸãããããã«ãããã¿ããã¹ã¯ãªãŒã³ã§ãã¹ã¯ãããã¢ããªã±ãŒã·ã§ã³ãã»ãšãã©ãŸãã¯ãŸã£ããå€æŽããã«äœ¿çšã§ããŸãã
å§ä»»ãããã€ãã³ãã·ã¹ãã ã䜿çšããŠãã¿ããããã€ã¹ã®ã€ãã³ãã®ããŠã¹ã¯ãªãã¯ããããããŸããã
MVVMããã³åæ¹åãã€ã³ãã£ã³ã°
Ext JS 4ã§ã¯ãMVCã¢ãŒããã¯ãã£ãå°å
¥ããŸããã ãŸããExt JS 5-MVVMïŒã¢ãã«-ãã¥ãŒ-ViewModelïŒã§ã¯ãåæ¹åã®ããŒã¿ãã€ã³ãã£ã³ã°ãæäŸããããžãã¹ããžãã¯ãšãã¥ãŒéã®è²¬ä»»ã®å
±æãæ¹åããŸãã MVVMã䜿çšãããšããã¥ãŒããã¢ãã«ãžããŸãã¯ãã®éã«å€æŽãèªåçã«è»¢éã§ããŸãã ãã¥ãŒãšã¢ãã«éã®ãã®æŽ»çºãªèªååæã«ãããéçºæéãšãšã©ãŒãåæžãããŸãã èšç®ãããå€ãšãã£ãŒã«ããè¿œå ããåæåã®ãªããžã§ã¯ãã®ãã¥ãŒãžã®ãã€ã³ããäºåã«å€æã§ããããã«ããŸããã æ°ããMVVMã¢ãŒããã¯ãã£ã圹ç«ã€ããšãé¡ã£ãŠããŸãã
Ext JS 5ã®MVVMã«å ããŠãViewControllersãå°å
¥ããããšã§MVCãµããŒããæ¹åããŸããã ViewControllersã¯ç¹å®ã®ãã¥ãŒãç¹ã«å¯Ÿè±¡ãšããŠããããªããžã§ã¯ãã®ç®¡çãšã¢ããªã±ãŒã·ã§ã³ã®ç¶æ
ã®åŸ©å
ã«é¢ããŠãåŸæ¥ã®MVCãšæ¯èŒããŠäžèŠãªã³ã¹ããåæžããŸãã çŸåšããã¹ãŠã®ãã¥ãŒã€ãã³ãããªãã¹ã³ããéåžžã®ã³ã³ãããŒã©ãŒãåé¿ããããšã«ãããã¢ããªã±ãŒã·ã§ã³ã¯ã¡ã¢ãªäœ¿çšéãåæžããããã©ãŒãã³ã¹ãåäžãããããšãã§ããŸãã
ã¬ã¹ãã³ã·ãããŒã¯ã¢ãã
Ext JS 5ã¯ããã¹ã¯ããããšã¿ããã¹ã¯ãªãŒã³éã®ã¢ããªã±ãŒã·ã§ã³ãšããã²ãŒã·ã§ã³ã®å€èŠ³ãæ¹åããããšãç®çãšããæ°ããã¬ã¹ãã³ã·ãããŒã¯ã¢ãããã©ã°ã€ã³ãå°å
¥ããŸãã åããå€ããïŒããã€ã¹ãå転ããïŒå ŽåãèŠçŽ ã®äœçœ®ãŸãã¯é
眮ãå€æŽããå¿
èŠãããã¢ããªã±ãŒã·ã§ã³ã¯ãæ°ããæ§æã·ã¹ãã ã䜿çšããŠãããèªåçã«è¡ãããšãã§ããŸãã
responsiveConfig: { landscape: { region: 'west' }, portrait: { region: 'north' } }
| ãŸãã¯
| responsiveConfig: { 'width > 800': { region: 'west' }, 'width <= 800': { region: 'north' } }
|
åäœã確èªããã«ã¯ããã©ãŠã¶ç»é¢ã®ãµã€ãºãå€æŽããããã¿ããã¹ã¯ãªãŒã³ãåããŠ
ãã®äŸãè©ŠããŠãã ããã
ãããã¥ãŒã³ã¿ãããšã¯ãªã¹ãã¿ãã
UIã³ã³ããŒãã³ãã®è±å¯ãªã³ã¬ã¯ã·ã§ã³ããã¹ã¯ããããšã¿ããã¹ã¯ãªãŒã³ã§åãããã«èŠããããã«ãã2ã€ã®æ°ãããã«ãããã€ã¹ããŒãããããŸãã æ¢åã®NeptuneããŒããšæ°ããCrispããŒãã®ã¿ããããŒãžã§ã³ã§ã¯ãæ¡å€§ãããèŠçŽ ã䜿çšããŠãã¿ããã¹ã¯ãªãŒã³ã§ã®äœæ¥ã«å¿
èŠãªå€§ããªã³ã³ã¿ã¯ãã¹ãããããµããŒãããŸãã
ãã¹ã¯ããããšã¿ããã¹ã¯ãªãŒã³ã§ããŒãã®ã¿ããããŒãžã§ã³ã䜿çšã§ããŸããããã¹ã¯ãããã«ã¯NeptuneãšCrispãã¿ããã¹ã¯ãªãŒã³ã«ã¯Neptune TouchãšCrisp Touchã䜿çšããããšããå§ãããŸãã
ããŒãã«ã®æ©èœåŒ·å
ã°ãªããã¯ãExt JSã§æã人æ°ã®ããã³ã³ããŒãã³ãã§ãããããŒãžã§ã³5ã§ã¯ããã«åŒ·åã«ãªããŸããã ã°ãªãããŠã£ãžã§ããïŒ
Grid Widgets ïŒã®å°å
¥ã«ãããæ°ããæ©èœ-Buffered Updatesãšçµã¿åãããããšãã§ãããªããããŒã¿ãšãªã¢ã«ã¿ã€ã ã®æŽæ°ãèŠèŠåããŠããã°ããŒã¿åæããµããŒãã§ããããã«ãªããŸããã
ã»ãã·ã§ã³ç®¡ç
ExtJS 5ã®æããšããµã€ãã£ã³ã°ãªæ©èœã®1ã€ã¯
ã»ãã·ã§ã³ç®¡çã§ãããã©ã³ã¶ã¯ã·ã§ã³ã»ãã·ã§ã³ãè¿œå ãããŸããã Ext JS 4ã䜿çšããŠãµãŒããŒã«ã¬ã³ãŒããä¿åããå Žåããããå®è¡ããé åºã«æ³šæããå¿
èŠããããŸããã å€æŽãããåã¬ã³ãŒããšã¹ãã¬ãŒãžã«å¯ŸããŠsaveã¡ãœãããåŒã³åºããããšã確èªããå¿
èŠããããŸããã ãã®ãã¹ãŠã®ãç°¿èšãã«ãããããŒã¿äžèŽãšã©ãŒãçºçãããããªããŸããã
Ext JS 5ã§ã¯ããããã®ã¢ã¯ã·ã§ã³ãæäœããããã®æ°ããã¯ã©ã¹[Ext.data.Session]ãå°å
¥ãããŠããŸãã ã»ãã·ã§ã³ã¯ããµãŒããŒäžã§å€æŽãäœæããŸãã¯åé€ããå¿
èŠããããšã³ããªã远跡ããŸãã æ°ããã¬ã³ãŒãããã®ãã©ã³ã¶ã¯ã·ã§ã³ã®ä»ã®ã¬ã³ãŒããæ£ããåç
§ããããã«ããããã®æäœããœãŒãããããšãã§ããŸãã ã»ãã·ã§ã³ã䜿çšãããšãã¬ã³ãŒããšãã®é¢é£ä»ããç·šéãããã¹ãŠã®å€æŽãåéããŠãµãŒããŒã«éä¿¡ããããšã容æã«ãªããŸããã ãããŠä»¥æ¥ ã»ãã·ã§ã³ã¯ãã¹ãŠã®å€æŽãä¿åããŸãããã©ã³ã¶ã¯ã·ã§ã³ãæ£åžžã«å®äºãããã©ããã«å¿ããŠãããã«ååŸããããšããåäžã®å€æŽãååŸããããšãã§ããŸããã
ã«ãŒãã£ã³ã°
Ext JS 5ã§ã¯ãURLã«ãŒããã³ã³ãããŒã©ãŒã¡ãœããã«å€æããããšãã«ãã¢ããªã±ãŒã·ã§ã³ã§
ãã£ãŒããªã³ã¯ãäœæã§ããŸãã ã«ãŒãã£ã³ã°ã䜿çšãããšããµãŒããŒäžã®ç©çãã¡ã€ã«ãå¿
ãããåç
§ããªãURLãåãå
¥ããããã«ã¢ããªã±ãŒã·ã§ã³ãæ§æã§ããŸãã ïŒã§å§ãŸãURLã®éšåïŒãã©ã°ã¡ã³ãèå¥åãšããŠäœ¿çšïŒã¯ãããŒãžããªããŒãããã«ãã©ãŠã¶ãŒå±¥æŽã¹ã¿ãã¯ãžã®éãéããŸãã ããã·ã¥ãå€æŽããããšããã©ãŠã¶ã¯ãhashchangeãã€ãã³ããçºçãããŸããããã¯ãã¯ã©ã€ã¢ã³ãã¢ããªã±ãŒã·ã§ã³ãåç¬ã§äœ¿çšã§ããŸãã
ã¿ããã«æé©åãããã°ã©ãã£ãã¯ã¹
Ext JS 4ã¯ãSVGããã³VMLã«åºã¥ããã©ã°ã€ã³ãªãã®ã°ã©ãäœæã·ã¹ãã ãæäŸããŸããã ãã ãããã®ã·ã¹ãã ã¯ã¢ãã€ã«ããã€ã¹ã§ã¯æé©ã§ã¯ãªããã¡ã¢ãªãéãããŠãããããCanvasã¯é«éã§SVGã¯äœéã§ããããšãããããŸããã Ext JS 5ã§ã¯ãSencha Touchã®åæ§ã®ã·ã¹ãã ã«åºã¥ããŠåæ§ç¯ããŸãããããã¯ãå°éã®ã¡ã¢ãªãæèŒããããã€ã¹ã§æãæäœããããã«æé©åãããŠããŸãã æ°ãããã£ãŒãã·ã¹ãã ã«ã¯ããºãŒã ãµããŒããå«ãã財åãã£ãŒããå€æ¬¡å
ãã£ãŒãã3Dãã£ãŒããªã©ã®æ©èœãè¿œå ãããŸããã ããã©ãŒãã³ã¹ãåäžããæ¡åŒµæ§ãé«ããã¿ããã¹ã¯ãªãŒã³ã§åªããæ©èœãåããŠããŸãã
Kitchen Sinkãªã©ã®ããŸããŸãªã¿ã€ãã®ã°ã©ããæäœããããã®ãµã³ãã«ã¢ããªã±ãŒã·ã§ã³ãäœæããŸããã Ext JS 4ã®æ¢åã®ã°ã©ãã£ãã¯ã¹ã¯åŒãç¶ãåå¥ã«å©çšã§ããããããããã䜿çšã§ããããšã«æ³šæããŠãã ããã ãã ããã¿ãã¬ããã«çŠç¹ãåãããŠããå Žåã¯ãæ°ãããã£ãŒãã·ã¹ãã ã«ã¢ããã°ã¬ãŒãããå¿
èŠããããŸãã Ext JS 5ãžã®ç§»è¡ã®è©³çŽ°ãªæé ã¯ã
ããã¥ã¡ã³ãã«èšèŒãããŠã
ãŸã ã
Senchaã³ã¢ããã±ãŒãž
Ext JS 5ã®æ倧ã®èª²é¡ã®1ã€ã¯ãExt JSãšSencha Touchã³ã¢ãå¯èœãªéãè¿ã¥ããããšã§ããã ã¯ã©ã¹ã·ã¹ãã ãããŒã¿åŠçããã±ãŒãžãããã³é¢æ°/ç°å¢æ€åºã®ã³ãŒããäžè²«ããŠåæžããããããã®ã³ãŒãã¯Ext JSãšSencha Touchã®äž¡æ¹ã§äœ¿çšã§ããŸãã ãã®å
±éãã©ãããã©ãŒã ã䜿çšãããšããã¬ãŒã ã¯ãŒã¯ã«é¢ä¿ãªãããã¹ã¯ããããã¿ãã¬ããããã®ä»ã®ã¿ããã¹ã¯ãªãŒã³ã§å
±æãªãœãŒã¹ã䜿çšããŠã¢ããªã±ãŒã·ã§ã³ãã¬ã³ããªã³ã°ã§ããŸãã çŸåšããã®å
±éã³ã¢ã«åºã¥ããSencha TouchãªãªãŒã¹ã«åãçµãã§ããŸãã ã楜ãã¿ã«ã
æé ãšããã¥ã¡ã³ã
Ext JS 5ã§ã¯ãæ°æ©èœãšæ¹åã®ããã«å€§éã®æ°ããåœä»€ãè¿œå ããã ãã§ãªããåœä»€ã·ã¹ãã èªäœãæŽæ°ããŠäœ¿ããããããŸããã ãããã®æé ã¯ãSencha Cmdãã°ã©ãã£ãã¯ã¹ãã¢ããªã±ãŒã·ã§ã³ã¢ãŒããã¯ãã£ãªã©ãæ°ãããã¬ãŒã ã¯ãŒã¯ãžã®ã¢ããã°ã¬ãŒãã«é¢ãããã¹ãŠãã«ããŒããŠããŸãã
Ext JS 5ã®ããã€ãã®éèŠãªæ©èœã«ã€ããŠã®ã¿èšåããŸãããããŸã å€ãã®è©±é¡ããããŸãã
Ext JS 5ã®æ°æ©èœããã¥ã¢ã«ã§ãæ®ãã®æ°æ©èœãšæ¹åç¹ãæ¢æ±ããŸãã
ãµããŒããããŠãããã©ãŠã¶ãŒãšãã©ãããã©ãŒã
ãããããExt JS 5ã§å€æŽãããŠããªãæ¯é³ã®1ã€ã¯ãVIPã¯ã©ã€ã¢ã³ãïŒ
äžæµã®åžæ°ãšããŠ-ãããTranslã ïŒãšããŠIE8ã䜿ãç¶ããŠããããšã§ãã Ext JS 5ã¯ãSafari 6以äžãFirefoxãIE8以äžãChromeãããã³Opera 12以äžããµããŒãããŠããŸãã ã¢ãã€ã«ãã©ãããã©ãŒã ãiOS 6ããã³7ã®SafariãAndroid 4.1+ã®Chromeãããã³Windows 8ã¿ããã¹ã¯ãªãŒã³ïŒSurfaceããã®ä»ã®ã¿ããã¹ã¯ãªãŒã³ã©ããããããªã©ïŒ-IE10 +ããµããŒããããŠããŸãã
Ext JS 5ãã¬ãŒãã³ã°
ãŸããSencha
ãã¬ãŒãã³ã°ããã°ã©ã ãæŽæ°ããŸããã Ext JS 5ãã¬ãŒãã³ã°ã¯6æã«éå§ãããããã«ã¯æ¬¡ã®ã¯ã©ã¹ãå«ãŸããŸãïŒExt JS 5ã¢ããããŒããExt JS 5ãžã®ã¢ããã°ã¬ãŒããExt Track to Ext JS 5ã
Ext JS 5ã®äŸ¡æ Œ
ãã®ãªãªãŒã¹ãã2014幎6æ30æ¥ãŸã§ãExt JS 5ã®ã©ã€ã»ã³ã¹ã¯çŸåšã®Ext JS 4.xã®äŸ¡æ Œã§å©çšã§ããŸãã ããã¯çŸåšã®äŸ¡æ Œã§Ext JS 5ã賌å
¥ãã絶奜ã®æ©äŒã§ãã 7æ1æ¥ãããæ°ããäŸ¡æ Œãæœè¡ãããŸãã 詳现ã«ã€ããŠã¯ã
Ext JS 5補åããŒãžã«ã¢ã¯ã»ã¹ããããã
åãåãããã ãã ã
ã©ããããããšã
ã³ãã¥ããã£ã«å¿ããæè¬ããŸãã æ°æ©èœããªãã¡ãŒãã¬ãã¥ãŒããã°ã¬ããŒãã®ãªã¯ãšã¹ãã«ããããã®ãªãªãŒã¹ã®ãã¹ãŠã®ç®æšãéæããããšãã§ããŸããã Ext JS 4ããExt JS 5ã«åãæ¿ããéã®ã³ãŒãå€æŽãæå°éã«æããããã«ãç§ãã¡ã¯äžçæžåœåããŸããããã®ããŒãžã§ã³ãæžãã®ã奜ãã ã£ãã®ãšåãããã«ãExt JS 5ã§æ°ããã¢ããªã±ãŒã·ã§ã³ãäœæããŠæ¥œããã§ãã ããã