XML vx (HTML+CSS)
ãæåã«ãæãï¼ãããããããåºãé ã ã¨æãã®ã§ãééã£ã¦ãã¨ããï¼ç¹ã«HTML+CSS+JSï¼ããä½å¹´ãããã£ã¦ãªãã®ãï¼ããã£ããããã³ãã§ãã ãããã
ãã¼ã¨ãããªãæ¢åºãªæè¦ã ã¨æããã©ã
ã¾ããå°æ¥çãªwidget/gadgetä½è
æ°ããè¨ãã¨ãã©ãèãã¦ãHTML+CSSã®å§åã«ãªãã§ãããã
ç¾å¨ãKonfabulatorã®å
¬å¼Galleryã«widgetãç»é²ãã¦ããä½è
ã®æ°ã¯559人*1ãç»é²ãã¦ããªãèªåå°ç¨ãªã³ãªã¼ãèªä½ãã人ãªããã¾ã§å«ãã¦ããããã1000人ã«ãæºããªãã¨æããã ãã©ãã©ãã ãï¼ããMacç¨ã®ä¸ã·ã§ã¢ã¦ã§ã¢ã«ãããªããã£ã¦ãã¨ãèããã¨ãããããã«ãããæ°åã ã¨æããã©ãããã§ãHTML+CSSãæ¸ããçµé¨ã®ãã人ã®æ°ã®è¶³ä¸ã«ãåã°ãªãã¨æã訳ã§ã
次ã«ãã©ã£ã¡ãè¦ããããã¨ããã¨ãå人ç*2ã«ã¯Konfabulatorã®æ¹ã«è»é
ãä¸ãã¾ããªãæåãããDAã¿ãããªãã®ãã ããæèãã¦ããã§ããªãã¨è¨ããæ§é ï¼é層ãåç´ãªãã§ããã
Konfabã ã¨åºæ¬çã«å¤§æµã®ãã®ã¯åºç¤ã«ãªãã¨ããï¼widgetï¼ã®ç´ä¸ã«ãããªãã¸ã§ã¯ãã¨ãã¦æ±ããã§*3
- widget
- window
- image
- text
ã£ã¦ãªæãã
ããã«å¯¾ãã¦Dashboardã ã¨windowããã¼ã¹ã«ãã¦
- window
- document
- image*4
- element
- document
ã§ãimageãããããã¨æã£ããKonfabã§ã¯
- image
- src
- width
- hOffsetï¼å·¦ç«¯ã®ä½ç½®ï¼cssã§ããleftï¼
ã§Dashboardã§ã¯
- image
- src
- width
- style*5
- left
ã§ãããã²ããããªããªã«Konfabæå©ãªã³ã¼ããä¸ã¤ãããã¨
hogeImg.src = "hoge.png"; hogeImg.width = 100; hogeImg.hOffset = 10;
ã
document.images["hogeImg"].src = "hoge.png"; document.images["hogeImg"].width = 100; ï¼document.images["hogeImg"].style.width = "100px";ï¼ document.images["hogeImg"].style.left = "10px";
ã£ã¦ãªç¨åº¦ã«ã¯*6ãããããã§ãããã
ãã ãä¸å ¬å¹³ã¯ã¤ã¯ãã¤ã®ã§ãtextã¨elementã®æ¯è¼ãã¤ãã¨ãã
hogeTxt.data = "HOGEHOGE"; hogeTxt.style = "bold";
ã
document.getElementById("hogeTxt").innerHTML = "ï¼Bï¼HOGEHOGEï¼/Bï¼";
ãã¡ããå¾è
ã¯cssçã¨ã¯è¨ãããããã©ããããããã¨ãåºæ¥ãããã§ãè¦ãããã¯ã¨ãããããã¯ããããåºæ¥ãããªäºæã
document.writeã¨ããããããwidget/gadgetä½ãã«ããã¦ã¯ãå¤åHTML+CSSã®æ¹ãã¯ããã«å¤æ
çãªã³ã¼ããããä½ããã§ããã*7
ã¾ãKonfabulatorã«æ
£ãã¡ãã£ãç«å ´ããè¨ãã¨ãwidgetã¯HTMLã¨éã£ã¦ãææ¸ããããã£ã¦ãããããªãã®ã«ããææ¸æ§é ã¨è¦ãç®ãåé¢ãããã£ã¦ä½ãï¼ãã¨ãããªãã§imageã®srcã¨left(=hOffset)ã®é層ãéãã®ãï¼ãã¨ãããã¨ã¬ã¬ã³ãã«è¦ããªãé¨åã«ãªã£ã¦ãã®ã¯ç¢ºããªãã ãã©ãã§ãå
±éè¦æ ¼ã¨æ´åæ§ãã¨ããã¨ããæ½å¨éçºè
æ°ãç¡è¶è¦è¶å¢ããã¨ããã¡ãªããã¨å¤©ç§¤ã«ããããªããåååãå
¥ããçç±ã«ã¯ãªãã¨æãã®ã§ãã
ãã ãããã¡ãã£ã¨å¥ã®è¦ç¹ããããã¨RSSã®ããã«XMLã§æåãã¦ãä¾ãããããã§ãKonfabããã£ã¡ãç®æãã¨ããã®ã¯ååã«ãæããã ã¨ãæãã®ã§ãããã ããã®ããã«ã¯ã¯ãã¹ãã©ãããã¼ã åãé²ãã¦ãwidget markup langaugeãã¨ã§ãè¨ãã¹ããã®ã®ãããã¡ã¯ãã¹ã¿ã³ãã¼ãã¨ãã¦ã®ç«å ´ãåã¡åãããã©ããã¨ããã®ãä»å¾ã¾ãã¾ã大äºãªã®ã§ã¯ãªããã¨ã
*1:ãã®äººãææ°ã®ç»é²è ãhttp://www.widgetgallery.com/?author=559
*2:ãä¸å¿ã¯Konfabulatorã¨webç¨ã®JavaScriptã®ä¸¡æ¹ã§éãã ãã¨ã®ãã人ãã£ã¦ä½ç½®ã¥ãã§
*3:ãã®æ§é ã®ããããç¾ãã¼ã¸ã§ã³ã§ã¯widgetã«ããå ¨ãªãã¸ã§ã¯ãæ°ã調ã¹ããã£ã¦ã®ãåºæ¥ãªãã£ããããã¨ããä¸æºãããã®ãã
*4:ä¸ã¨ã®å¯¾æ¯ã®ããããã¦elementã¨ä¸¦è¨ãã¦ã¾ã
*5:ããã§ãstyle.widthã¨ããããããã ããâ¦
*6:æ £ããã°å¤§å·®ãªãã¨æããã©ãXMLã§ãHTML+CSSã§ãããããä¸ããè¦ããªãã¨ãããªãåå¿è ã«ã¨ã£ã¦ã¯å·®ãåºãããªï¼
*7:ããããã®ã«å¼±ããã ããªãï¼ä¿º