CSS Filtersã§åçå å·¥ããWebApp - CSS PhotoEditor
iOS6ãçºè¡¨ããã¦ããã¨ã¯New iPhoneã®ãªãªã¼ã¹ãå¾
ãããå£ç¯ã§ãããç§ã¯3Gã®çºå£²æã«è²·ãæ¿ãã¦ã2å¹´å¾iPhone4ã«ããã¾ã2å¹´ãçµã¨ãã¨ãã¦ããã®ã§ä»å¹´ã¯æ°ããã®ã«è²·ãæãããã¨ããæ°æã¡ã§ãã
ä¸éã§ã¯Appleã®ãããã§ããããã¨é¨ãã§ããããã¾ãããOSãã¢ãããã¼ãããããã³ã«ç§ããã§ãã¯ãããã¨ã¨ããã°ãã©ã¦ã¶ã®ä»æ§ãæ©è½ã®å¤æ´ã§ãã
å»å¹´ã¯WebAppãã¹ãããµã¤ããä½ãã«ã¯å¬ããå¤æ´ãããã¾ãããposition:fixedãiframeã®æ
£æ§ã¹ã¯ãã¼ã«ãä»ã«ãSVGã縦æ¸ããææãã©ã³ãã®ãµãã¼ããããã¾ããã
ãã®è¾ºãã¯iOS5ã®Mobile Safariãã使ããããã«ãªã£ãHTML5ã»CSSã試ãã¦ã¿ã¾ãããåç·¨ãã¨ãå¾ç·¨ãã¨ããã¨ã³ããªã¼ã§ã¾ã¨ãã¦æ¸ãã¦ãã¾ãããã®ã¨ãããã¢ç¨ã«ãã«ã¹ã¯ãªã¼ã³ã§ä½¿ããWebAppãä½æãã¾ããã
ä»åã¯CSS Filtersã®å¯è½æ§ã試ãããã«ãã¢ãä½ã£ã¦ã¿ã¾ããã
CSS PhotoEditorã«ã¤ãã¦
ã¾ãã¯è¦ã¦ãã ããï¼ãâ¦ã¨è¨ãããã¨ããã§ãããéè¦ãªinput type="file"ãCSS Filtersã¯iOS5ã§ã¯åãã¾ãããPCãã©ã¦ã¶ã§ãç¾å¨ï¼2012/07/26ï¼æç¹ã§CSS Filtersãåä½ããã®ã¯ææ°ã®Chromeã¨æ¬æ¥å ¬éãããSafari6ã§ãããªã®ã§ä»ã¯Chromeãææ°ã®Safariã§è¦ã¦ããã ãã®ãè¯ããã¨æãã¾ãã
DEMOï¼CSS PhotoEditor
ï¼Supported : Chrome20, Safari6ï¼
CSS PhotoEditorã¨ã¯è¨ã£ã¦ãããã®ã®ãçµæ§ãªJSãæ¸ãã¦ã¾ãããªã®ã§CSS PhotoEditorã®CSSã£ã¦ããã®ã¯ã»ã¨ãã©CSS Filtersã®é¨åã®ãã¨ã®ã¿ãè¨ã£ã¦ãã¾ãããSlider UIã使ãã«ããã£ã¦ã©ããã¦ãJSã§Valueãåã£ã¦ããªãã¨ã©ãã«ããªããªãã®ã§ããããããCSSã«ãã ãããªãã§JSãã°ãã°ãæ¸ããã¨ãªã£ãã®ã§ãããã®ãããã§ããªããªãããªä»æ§ã«ä»ä¸ããã¾ããã
Ajax file upload
CSS PhotoEditorã§ã¯AJAXã§ã¢ãããã¼ããã¦ãã®ã¾ã¾ç·¨éã§ããããã«ãã¦ãã¾ãããã DEMOç¨ã®WebAppãªã®ã§ãã¾ãæå¾ ããªãã§ãã ãããããã¯ã¨ã³ãã¯PHPã§æ¸ãã¦ãã¾ããããªãã¡ãã£ã¦ã³ã¼ããªã®ã§ãã¾ãå¤ãªç»åã¨ãä¸ãããã¨ããªãã§ãã ããããAjaxã¢ãããã¼ãã«ã¯jQuery.uploadã使ããã¦ããã ãã¾ããã
Slider UI
Slider UIã¯input type="range"ã使ãã¾ãããä»ã¾ã§ã ã¨Slider UIã¯ã¤ã³ã¿ãã§ã¼ã¹ããã¹ã¦JSã§æ¸ãå¿
è¦ããã£ãã®ã§ãããinput type="range"ã使ãã°valueãåã£ã¦ããã ãã§ããã®ã§é常ã«ä¾¿å©ã§ãããinput type="range"ã«ã¯name/valueå±æ§ã®ä»ã«ãå
¥åã§ããæ大ã»æå°å¤ãè¨å®ããmax/minå±æ§ãå
¥åã¹ãããå¤ãè¨å®ã§ããstepå±æ§ãªã©ãè¨å®ã§ãã¾ãã
Styleã¯CSSã§å¤æ´ãããã¨ãã§ãã¾ããã¹ã©ã¤ãã¼ã®è»¸ã¨ãªãé¨åã®ã°ã©ãã£ãã¯input[type='range']ã§ããã³ãã«ã®é¨åã®ã°ã©ãã£ãã¯ã¯::-webkit-slider-thumbãã¤ããã»ã¬ã¯ã¿ã§å¤æ´ãããã¨ãã§ãã¾ããå
·ä½çã«ã¯ãããªæãã§ãã
input[type='range'] { width:270px; height:52px; margin:0; -webkit-appearance: none !important; background:url(images/slider-line.png) no-repeat 10px 20px; -webkit-background-size:250px 11px; } input[type='range']::-webkit-slider-thumb { -webkit-appearance: none !important; background:url(images/slider-handle.png) no-repeat 0 7px; width:41px; height:52px; border:0; -webkit-background-size:410px 40px; cursor:-webkit-grab; }
ä»åã¯ä½¿ã£ã¦ãã¾ãããborder-imageã使ãã°ãªãããã«å¯¾å¿ããã¹ã©ã¤ãã¼UIãä½ããããªæ°ããã¾ããã
Flip transition
å³ä¸ã®ã¤ã³ãã©ã¡ã¼ã·ã§ã³ãã¿ã³ãæ¼ããæã®ã¯ã«ãã¨ãããã©ã³ã¸ã·ã§ã³ã¯ããã¤ãã®CSS Transitionã使ç¨ãã¦ãã¾ããiOS5ã®Mobile Safariãã使ããããã«ãªã£ãHTML5ã»CSSã試ãã¦ã¿ã¾ãããå¾ç·¨ããCSS3ã«ããTransition Effects 30ã§ãç´¹ä»ãã¾ãããããã£ããåèã«ãã¦ã¿ã¦ãã ããã
Media queries & Landscape mode
å®ãè¨ãã¨å½åã¯iPhoneã§è¦ãããã®ãã¢ãµã¤ããä½ãã ãã®äºå®ã§ãããChromeã§ç¢ºèªããªããä½ã£ã¦ãããç¨åº¦ã§ãã段éã§iPhoneã§ç¢ºèªããæãã§ä½ã£ã¦ãã¾ãããã»ã¨ãã©åºæ¥ä¸ãã£ã¦ããChromeã§è¦ã¦ããç»é¢ãå¯ãããªã£ã¦ããããPCç¨ã®ç»é¢ãä½ããã¨ãªã£ã¦ããã§Media queriesã§ãããã¨ã«ãã¾ããã
ãªã®ã§Chromeã§è¦ã¦ããç»é¢ã¯Overviewãã¼ã¸ã®ããã§ãããªãããWindowã縮ãã¦ããã¨ãã«ã¹ã¯ãªã¼ã³WebAppã«ãªãã¨ãããããããæãã«ãªãã¾ãããone sourceãªã®ã§ãããã¯ããããããã¦ããã£ãã§ãã
iPhoneãLandscape Viewã§ä½¿ã£ã¦ãã人ããã¾ãè¦ãããªãã®ã§æãæããã¡ã«ãªããããã§ãããä»åã¯PCã§ãè¦ããããã«ã¨ããäºã§Landscape Modeããã£ã¤ã対å¿ãã¾ããã
Chromeã§è¦ã¦ããå ´åã¯Windowãµã¤ãºã縮ãã¦WebAppã¢ã¼ãã«ãã¤ã¤ã横é·ã®ç»é¢ã«ããã¨Landscape Modeã§è¦ããã¨ãã§ãã¾ãã縦ãçããªãã®ã§ã¡ãã¥ã¼ã®ä½ç½®ã横ã«ç§»ãã¦åçé åã大ããè¦ããã¬ã¤ã¢ã¦ãã«ãã¦ãã¾ãã
CSS Filtersã«ã¤ãã¦
CSS Filtersã¯W3Cã®Filter Effects 1.0ãå ã«å®è£ ããã¦ããããã§ãã7. Filter Functionsã«ä½¿ç¨ã§ããã¨ãã§ã¯ãã®è©³ç´°ã«ã¤ãã¦æ¸ããã¦ãã¾ããopacityãdrop-shadowãªãããå«ã¾ãã¦ãã¾ããããããã¨CSSã®ããããã£ã®opacityãªã©ã¨ã¯ã©ãéãããããã§ããããããæç»æ¹æ³ã«å·®ããã£ããããã®ã ãããã
ã·ã³ãã«ãªãã¢ãã¼ã¸ãä½ã£ãã®ã§å¾¡è¦§ãã ãããã¯ãªãã¯ã§ãã£ã«ã¿ã¼ããã°ã«ãã¾ãã
CSS Filters Demo
以ä¸ã«ããããç°¡åãªèª¬æãæ¸ãã¦ã¿ã¾ãã
grayscale( | )
ã°ã¬ã¼ã¹ã±ã¼ã«ã¯åç´ã«å½©åº¦ãè½ã¨ãã ãã®ãã£ã«ã¿ã¼ã§ããã0ã100ï¼ ã®å¤ã§æå®ã§ãã0%ãdefaultã§100%ã§å®å ¨ãªã°ã¬ã¼ã¹ã±ã¼ã«ã«ãªãã¾ãã
.grayscale { filter: grayscale(50%); -webkit-filter: grayscale(50%); }
sepia( | )
ã»ãã¢ãã°ã¬ã¼ã¹ã±ã¼ã«ã¨åãæãã®å¤ã®è¨å®ã»defaultå¤ã§ãã100%ã§å®å ¨ãªã»ãã¢ã«ã©ã¼ã«ãªãã¾ãã
.sepia { filter: sepia(80%); -webkit-filter: sepia(80%); }
saturate( | )
saturateã¯å½©åº¦ãå¤æ´ã§ãããã£ã«ã¿ã¼ã§ã0%以ä¸ã®å¤ãè¨å®ã§ãã¾ããdefaultå¤ã¯100%ã§ã0%ã§ã¢ãã¯ãã«ãªãã¾ãã彩度ãé«ããããå ´åã¯100%以ä¸ã®å¤ãè¨å®ãã¾ãã
.saturate { filter: saturate(240%); -webkit-filter: saturate(240%); }
hue-rotate()
hue-rotateã¯è²ç¸ãå¤æ´ã§ãã¾ããå¤ã¯-90degã45degã®ããã«è§åº¦ã§æå®ãã¾ããdefaultå¤ã¯0degã§ãã
.hue-rotate { filter: hue-rotate(120deg); -webkit-filter: hue-rotate(120deg); }
invert( | )
invertã¯è²ã®å転ãã£ã«ã¿ã¼ã§ãã100%ã§å®å ¨ã«å転ãã¦ãdefaultå¤ã¯0%ã§ãã
.invert { filter: invert(80%); -webkit-filter: invert(80%); }
opacity( | )
ééãã£ã«ã¿ã¼ã§ãã0%ã§å®å ¨ã«éæã«ãªããdefaultå¤ã¯100%ã§ãã
.opacity { filter: opacity(50%); -webkit-filter: opacity(50%); }
brightness( | )
brightnessã¯æ度ãå¤æ´ãããã£ã«ã¿ã¼ã§ãã-100%ã100ï¼ ã®å¤ã§æå®ã§ãã0%ãdefaultã§100%ã§çã£ç½ã«ãªãã¾ãã-100%ã«ããã¨çã£é»ã«ãªãã¾ãã
.brightness { filter: brightness(30%); -webkit-filter: brightness(30%); }
contrast( | )
ã³ã³ãã©ã¹ãã¯saturateã¨åãæãã®å¤ã®è¨å®ã»defaultå¤ã§ããã³ã³ãã©ã¹ããé«ããããå ´åã¯100%以ä¸ã®å¤ãè¨å®ãã¾ãã
.contrast { filter: contrast(120%); -webkit-filter: contrast(120%); }
blur()
blurã¯ã¼ãããã£ã«ã¿ã¼ã§ããã¼ããç¯å²ãpxãªã©ã§æå®ãã¾ããdefaultã¯0ã§ãã
.blur { filter: blur(10px); -webkit-filter: blur(10px); }
drop-shadow()
ããããã·ã£ãã¦ã¯CSSããããã£ã®box-shadowã¨åãã§ããå¤ã®æå®æ¹æ³ãåãã§ãã
.drop-shadow { filter: drop-shadow(8px 8px 10px rgba(0,0,0,0.5)); -webkit-filter: drop-shadow(8px 8px 10px rgba(0,0,0,0.5)); }
å人çã«ã¯custom functionã試ãã¦ã¿ããã£ãã®ã§ãããã¾ã å®è£
ããã¦ããªãããã§ããcustom filterã«ã¯Programmable shaderããã£ã«ã¿ã¼ã¨ãã¦ä½¿ç¨ãããã¨ãã§ãã¾ããvertex-shaderã¨ããè¤éãªtransformããããã¨ãã§ããå¤ãfragment-shaderã¨ãããã¯ã»ã«ã«ã¨ãã§ã¯ãããããå¤ãè¨å®ããããã¾ããWebGLãOpenGLã®è¡¨ç¾ãCSSã§å©ç¨ã§ããã®ã§ããããã¨æãã°ãããã¤ãããã¯ãªã°ã©ãã£ãã¯è¡¨ç¾ãã§ãã¾ãã説æã ãã ã¨ããããªãã¨æãã¾ãã以ä¸ã®ãµã¤ãã§ãã¢ãç´¹ä»ãã¦ãã¾ãã
ãã¾ã
é±æ«ï¼æ¥éã§ã²ã¨éãä½ã£ãã®ã§ããããã£ã¦ãããã¡ã«ã©ãã©ããªããã«ãªã£ã¦ããã¾ãããä»ã«ãå®ã¯æè¼ããã¦ããæ©è½ãç´¹ä»ãããã¨æãã¾ãã
WebApp Mode
ããã¯ãã¢åç»ã§ãç´¹ä»ããã¦ããããå½ããåã¨ããã°å½ããåã§ããããã¼ã ç»é¢ã«ç»é²ãã¦Native Appã½ãèµ·åãããã¨ãã§ãã¾ãã
Capture Mode
ããç¨åº¦ã¤ãã£ã段éã§å人ãªã©ã«è¦ãã¦ããã®ã§ãããä¿åã¯ã§ããªãã®ï¼ãã¨ãã£ãæè¦ãããã¾ãããããããããã¢ã ããã¨æ¿ãã¦ããã®ã§ãããããã¦ã¹ã¯ãªã¼ã³ãã£ããã£ã§æ®ã£ã¦ããããããã«ãã¦ã¿ããã¨ããæè¦ãããã ãã¦ä½ãã¾ãããåçãããã«ã¿ãããããã¨ã§ãã¼ã«ãã¼ãªã©ãæ¶ãã¦ãåçãè¯ãæãã«ãã«ã¹ã¯ãªã¼ã³ã«ãªãã¾ãããã¼ã ç»é¢ããèµ·åããWebAppã§ã¯Status Barãæ¶ããªãã®ããã©ãããã§ãã
Force WebApp Mode
Overviewã¢ã¼ãã§è¦ã¦ããã¨ãã«å¼·å¶çã«WebAppã¢ã¼ãã«åãæ¿ããã¹ã¤ããã§ããOverviewã¢ã¼ãã§ã¤ã³ãã©ã¡ã¼ã·ã§ã³ãã¿ã³ãæ¼ãã¦è¡¨ç¤ºããããWebApp Mode by Forceãã¨ããé ç®ã§ãªã³ã«ãããã¨ãã§ãã¾ããWindowå¹ ã縮ãã¦ããã¨ãã¯è¡¨ç¤ºããã¾ããã
Filter Param List
ããã¯æ¬å½ã«ãã¾ããªæ©è½ã§ãOverviewã¢ã¼ãã§è¦ã¦ããã¨ãã ãã®æ©è½ã§ããOverviewã¢ã¼ãã§è¡¨ç¤ºãã¦ããã¨ãã«ãç½ãiPhoneã®ãã¼ã ãã¿ã³ãæ¼ãã¨è¨å®ããã¦ãããã£ã«ã¿ã¼ã®å¤ã®ãªã¹ãã表示ããã¾ãã
ã¾ã¨ã
iOS6ã§ã¯ãã¡ã¤ã«ã¢ãããã¼ãã«å¯¾å¿ããã¨ããAppleã®çºè¡¨ã§SNSãªã©ã®WebAppãåçæ稿ãªã©ã«å¯¾å¿ãã¦ãããã¨ã ã¨æãã¾ããç°å¢ãéããã¦ããã¨ã¯ãããCSS Filtersã使ãããã«ããã°å¹æçãªè¡¨ç¾ãã§ããããã«æãã¾ãã
NativeAppã®ã»ãã使ããããã«æ±ºã¾ã£ã¦ããããWebAppã¯ãããªã«éè¦ãããªãã¨æãããããã¾ããããã¹ãã¼ããã©ã³ããWebãè¦ãæ©ä¼ã¯æ¡å¤å¤ãã§ããTwitterãFacebookãªã©ã§æµãã¦ããURLãã²ããã¨ãã¯ãã¢ããªå
ã¨ã¯ããWebViewã§è¦ã¦ããã®ã§ããããå½ããåã§ãããWebãããNativeAppã¨å¤ãããªãä½é¨ãæä¾ãããã¨ã¯æ¬ ãããªããã¨ã ã¨èãã¾ãã
追è¨
ä¸é¨NDAã«è§¦ããå¯è½æ§ã®ããé¨åãããã¾ããã®ã§ç·¨éãã¾ããã