ãã®è¨äºã¯12/17ã«æ²è¼ããããAn Introduction to Theming Sencha Touchãã訳ãããã®ã§ãï¼ç¿»è¨³ï¼@taka_2ï¼ Sencha Touchã¯ãSASSã¨Compassã使ã£ã¦æ§ç¯ããããé©æ°çãªæ°ãããã¼ãã·ã¹ãã ãå°å ¥ãã¾ããããã®ã·ã¹ãã ãå©ç¨ããã°ãSencha Touchã®åºæ¬ãã¼ããã¢ããªã±ã¼ã·ã§ã³ããã©ã³ãã«åããã¦ç°¡åã«ã«ã¹ã¿ãã¤ãºãããã¨ãã§ãã¾ããSencha Touchã¯Webæ¨æºã«åºã¥ããè¨è¨ã«ãªã£ã¦ãã¦ãã¾ããç¾å¨ã¯WebKitãã©ã¦ã¶åãã«ä½ããã¦ãããããWebKitã§æ¢ã«å©ç¨å¯è½ãªCSS3ã®æ§ã ãªããããã£ããã¨ãã°ãè§ä¸¸ãèæ¯ã°ã©ãã¼ã·ã§ã³ã ãã§ãªããCSS3ããã¯ã¹ã¢ãã«ã®ãããªé«åº¦ãªããããã£ããèªç±ã«å©ç¨ãããã¨ãã§ãã¾ããããã¦ãSASSã¨Compassã使ãã°ãCSS3ã§æ§æããã¦ããSencha Touc
ãã®ããã¥ã¡ã³ãã§ã¯Sencha Touchã®å§ãæ¹ã«ã¤ãã¦è§£èª¬ãã¦ããã¾ãã æåã«ã¿ããå端æ«åãã®Webã¢ããªã±ã¼ã·ã§ã³ãéçºããããã®åºæ¬çãªã¹ãããã«ã¤ãã¦ã®èª¬æã 次ã«ãSencha Touchããã±ã¼ã¸ã«ãå梱ããã¦ãããã¢ã¢ããªGeoTweetsã®ä½ãæ¹ã«ã¤ãã¦ã®è©³ç´°ãªèª¬æ ããã¦ããã¾ãã ãã®ããã¥ã¡ã³ãã¯Sencha Touchã使ã£ã¦ã¿ããå端æ«åãã®Webã¢ããªã±ã¼ã·ã§ã³ã®éçºãããã Webéçºè ã«åãããã®ã§ããåææ¡ä»¶ã¨ãã¦ã¯ãSencha Touchã©ã¤ãã©ãªããã¦ã³ãã¼ããã¦ãããã¨ã Webãµã¼ãã¼ç°å¢ãç¨æããã¦ãããã¨ãããã¦JavaScriptã»HTMLã»CSSãªã©ã®Webã¢ããªã±ã¼ã·ã§ã³éçº ã«å¿ è¦ãªæè¡ãèãæ¹ã«ã¤ãã¦ç解ãã¦ãããã¨ããããããã¾ãã ãã®ããã¥ã¡ã³ãã¯ä»¥ä¸ã®ã»ã¯ã·ã§ã³ã§æ§æããã¦ãã¾ãï¼ Sencha Touch ã«ã¤ãã¦
以åãiUI ã jQTouch ã§ä½æãããã®ï¼iUIç㯠id:fits:20100715, jQTouchç㯠id:fits:20100731ï¼ã¨åæ§ã®ãµã³ãã«ã Sencha Touch ã§ä½æãã¦ã¿ã¾ãããï¼ãµã¼ãã¼å´ã®å¦çãåããã®ã使ç¨ï¼ Sencha Touch 1.0 Ext.NestedList ã使ã£ã¦å®è£ ãã¦ã¿ã¾ããããExt.NestedListï¼ã¨ãããã TreeStoreï¼ã¯é層çãªãã¼ã¿ãä¸æ¬åå¾ããã±ã¼ã¹ãæ³å®ãã¦ããããã§ãä»åå©ç¨ãããµã¼ãã¼å´ã®å¦çã®ããã«é層æ¯ã«å¥ã® URL ãããã¼ã¿ãåå¾ãããããªã±ã¼ã¹ï¼ã¹ãã¼ãåå¾ ã¨ãã¼ãã«åå¾ã§URLã¨ãã¼ã¿ã¹ãã¼ããç°ãªãï¼ã§ã®å®è£ ã¯ããªãè¦å´ãã¾ããã ãã®ãããä»åã®ãããªã±ã¼ã¹ï¼é層æ¯ã«åå¾å URLããã¼ã¿ã®ã¹ãã¼ããç°ãªãï¼ã«ã¯ Ext.List 㨠CardLayout ã®çµã¿åããã§å®è£
2011å¹´ã¯ãµã¼ããµã¤ã JavaScript ã®å¹´ï¼ ãµã¼ããµã¤ã JavaScript ã®æ¬å½ã¯ node.jsï¼ ã¨ãããã¨ã§å²ã¨æ®éã®ã¦ã§ãã¢ããªã±ã¼ã·ã§ã³ã node.js ã§ä½ãããã®ãã¥ã¼ããªã¢ã«ãæ¸ãã¦ã¿ã¾ãããWebSocket ã¨ãæ°ããã®è©±é¡ã¯çµæ§è¦ã¾ãããPHP ã¨ãã§æ®éã®ã¦ã§ãã¢ããªä½ã£ã¦ã人åãã®ãã¥ã¼ããªã¢ã«ã¨ãããã¾è¦ãªããããªæ°ãããã®ã§ãã£ã¦æãã§ãã ãã¥ã¼ããªã¢ã«ã®å 容ã§ãããã³ã¼ãéãå°ãªãã§æ©è½çã«ãåãããããããªã¢ãã¨ãããã¨ã§ãç縮 URL ã¦ã§ãã¢ããªã±ã¼ã·ã§ã³ãä½ã£ã¦ã¿ããã¨ã«ãã¾ãããbit.ly ã¨ã t.co ã¨ã nico.ms ã¿ãããªã¢ã¬ã§ããç縮 URL ã®ãã¼ã¿ã¯ MySQL ã«ä¿åãã¾ãã çµæ§é·æã«ãªã£ã¡ãã£ãã®ã§ãå ã«ç®æ¬¡ç½®ãã¨ãã¾ãã node.js ã®ã¤ã³ã¹ãã¼ã« npm (Node Package Mana
Ext.XTemplateã§ã¯ãã³ãã¬ã¼ãå ã§forãifãè¨å®ãã¦ããã³ãã¬ã¼ããå¦çãããã¨ãã§ãã¾ããæ¡ä»¶åå²ã®å¦çããã³ãã¬ã¼ãå ã«è¨è¿°ãã¦ãapply()ã§ãã¼ã¿ã渡ãã ãã§ãã Ext.XTemplateã«ã¤ãã¦ã®ãã®ä»ã®è¨äº ExtJSå ¥é10 Ext.XTemplateã使ã ExtJSå ¥é11 Ext.Xtemplateã§JSå ã®ãã³ãã¬ã¼ãã使ã Ext.XTemplateã¯ã©ã¹ â Ext 3.0 â API Documentation æ¥æ¬èªç http://extdocs.xenophy.com/?class=Ext.XTemplate ã»HTML <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ExtJSåå¤å±åå¼·ä¼ãxtem
TabPanelã¯ã©ã¹ã¯cardSwitchAnimationããããã£ãå©ç¨ãããã¨ã§ãç°¡åã«ã«ã¼ãåãæ¿ãã®ã¢ãã¡ã¼ã·ã§ã³ãä½ãã¾ãã cubeã¢ãã¡ã¼ã·ã§ã³ãµã³ãã« fadeã¢ãã¡ã¼ã·ã§ã³ãµã³ãã« flipã¢ãã¡ã¼ã·ã§ã³ãµã³ãã« popã¢ãã¡ã¼ã·ã§ã³ãµã³ãã« slideã¢ãã¡ã¼ã·ã§ã³ãµã³ãã« cubeã¢ãã¡ã¼ã·ã§ã³ãè¡ãJavaScriptã¯æ¬¡ã®ã¨ããã§ããcardSwitchAnimationããããã£ã®å¤ã«'cube'ãæå®ãã¦ããã¾ãã index.js Ext.setup({ onReady: function(){ var cards = [{ title: 'Photo 1', html: 'Photo 1 ', cls: 'card1' }, { title: 'Photo 2', html: 'Photo 2 ', cls: 'card2' }, { title: '
æ¥çåã®HTML5ã¢ãã¤ã«ã¢ããªç¨ãã¬ã¼ã ã¯ã¼ã¯ Sencha Touchã使ãã°ã¿ããã¹ã¯ãªã¼ã³ãè£ åããApple iOSã Android端æ«ä¸ã§ãã¤ãã£ãã¢ããªã®ãããªWebã¢ããªãéçºå¯è½ã§ãã Webæ¨æºæè¡ã«æºæ Sencha Touchã¯HTML5ãCSS3ãJavaScriptã«ç¹åããä¸çåã®ã¢ããªã±ã¼ã·ã§ã³ãã¬ã¼ã ã¯ã¼ã¯ã§ããSSencha Touchã¯ãããã®æè¡ãæã¤åãæ大éã«å¼ãåºãããã¤æè»ã§æé©åãããã¢ããªã±ã¼ã·ã§ã³éçºãå¯è½ã«ãã¾ããSencha Touchã§ã¯ãé³å£°ãåç»ãçµã¿è¾¼ãçºã®ã³ã³ãã¼ãã³ãããã¼ã¿ããªãã©ã¤ã³ã§ãå©ç¨å¯è½ã«ããlocalStorageãããã·ã¼ãªã©ã§HTML5ã®æ©è½ãå©ç¨ããã¦ãã¾ããã¾ãSencha Touchã®ã¹ã¿ã¤ã«ã·ã¼ãã§ã¯CSS3ãæ大éæ´»ç¨ãã¦ã¨ã¦ãå ç¢ãªã¹ã¿ã¤ãªã³ã°ã¬ã¤ã¤ã¼ãå®ç¾ãã¦ãã¾ãã ãã®ã©ã¤ãã©ãªã¯ã
ãªãªã¼ã¹ãé害æ å ±ãªã©ã®ãµã¼ãã¹ã®ãç¥ãã
ææ°ã®äººæ°ã¨ã³ããªã¼ã®é ä¿¡
å¦çãå®è¡ä¸ã§ã
j次ã®ããã¯ãã¼ã¯
kåã®ããã¯ãã¼ã¯
lãã¨ã§èªã
eã³ã¡ã³ãä¸è¦§ãéã
oãã¼ã¸ãéã
{{#tags}}- {{label}}
{{/tags}}