Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML6 でも CSS4 でもない Web 技術のゆくえ

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers.
Avatar for Ayumu Sato Ayumu Sato
December 12, 2015

HTML6 でも CSS4 でもない Web 技術のゆくえ

WCAN 2015 Winter http://wcan.jp/event/2015winter/ で使用したスライドです。本編60分。

参考フォローアップ記事: https://havelog.ayumusato.com/news/e688-wcan_2015_winter.html

Avatar for Ayumu Sato

Ayumu Sato

December 12, 2015
Tweet

More Decks by Ayumu Sato

Other Decks in Programming

Transcript

  1. <svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" fill="yellow"

    /> <circle cx="150" cy="100" r="80" fill="blue" /> <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text> </svg> 47( https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Getting_Started
  2. .box .blue .yellow .red <div class="box"> <div class="blue"></div> <div class="yellow"></div>

    <div class="red"></div> <div> .box { display: flex; flex-direction: row; } .blue { flex: 1; } .yellow { flex: 1; } .red { flex: 1; }
  3. .box .blue .yellow .red .box { display: flex; flex-direction: row;

    } .blue { flex: 1; order: 1; } .yellow { flex: 1; order: 3; } .red { flex: 1; order: 2; } <div class="box"> <div class="blue"></div> <div class="yellow"></div> <div class="red"></div> <div>
  4. .box .blue .red .yellow <div class="box"> <div class="blue"></div> <div class="yellow"></div>

    <div class="red"></div> <div> .box { display: flex; flex-direction: row; } .blue { flex: 1; order: 1; } .yellow { flex: 1; order: 3; } .red { flex: 2; order: 2; }
  5. .box .blue .red .yellow <div class="box"> <div class="blue"... <div class="yellow"...

    <div class="red"... <div> .box { display: flex; flex-direction: column; } .blue { flex: 1; order: 1; } .yellow { flex: 1; order: 3; } .red { flex: 2; order: 2; }
  6. ‣ WX WI WNJO WNBY  植㖈ך7JFXQPSUח䘔ׄ׋㣐ֹׁ׾爙ׅٖأهٝءـז⦼ ‣ DBMD 

     $44ך⚥ד㔊⵱怴皾דֹ׷ٌظծ⽃⡘ָ麩׏ג׮䎂孡 ‣ ⢪ִזְـٓؐؠ  *&⟃⵸  "OESPJE⟃⵸ $ISPNFכ㣐♱㣗 7JFXQPSU6OJUT DBMD
  7. body <div class="outer"> <div class="inner"></div> </div> .outer { width: 800px;

    } .inner { /* ͸Έग़ͤ͞Δ෼Λࠨӈ magin ʹ༩͑Δ */ margin: 0 calc((100vw - 100%)/2 *-1); /* ͸Έग़ͨ෼ͷ༨നΛࠨӈ padding Ͱิ͏ */ padding: 0 calc((100vw - 100%)/2); } 100vw (਌ͷ)100% 100vw - 100% (100vw - 100%) / 2
  8. QJDUVSF  TPVSDF   NFEJB NJOXJEUIQY   

    TJ[FTWX   TSDTFUPQFSBGVMMTIPUKQHX     PQFSBGVMMTIPUKQHX     PQFSBGVMMTIPUKQHX     PQFSBGVMMTIPUKQHX  JNH   TSDPQFSBDMPTFVQKQHBMU0QFSB)PVTF   TJ[FT NJOXJEUIQY WX WX   TSDTFUPQFSBDMPTFVQKQHX     PQFSBDMPTFVQKQHX     PQFSBDMPTFVQKQHX     PQFSBDMPTFVQKQHX QJDUVSF NFEJBQY⟃♳ך7JFXQPSU䌴ז׵ֿ׏׍ TJ[FTֿךהֹ歗⫷ך邌爙䌴כWX TSDTFU邌爙䌴ח䘔ׄגTSDTFUⰻדⴓ䀄 NFEJBQY劢弫ז׵ֿ׏׍ TJ[FTQY⟃♳ך7JFQXPSU䌴ז׵ 邌爙䌴כWXծ׉׸⟃㢩כWX TSDTFU邌爙䌴ח䘔ׄגTSDTFUⰻדⴓ䀄
  9. .button.button--info <div class="button button--info"> INFO </div> <div class="button button--warn"> WARNING

    </div> .button { border: 1px solid currentColor; } .button--info { color: blue; } .button--warn { color: yellow; } INFO WARNING .button.button--warn
  10. )5514ז׵ⰻ㺁ָ农〾⻉ׁ׸ג ְ׷ךד怩峾׮何甑׮꣇־׷ ) 㼰זֻה׮鸐⥋ⰻ㺁ָ农〾⻉ׁ׸גְ׸ל㸜䗰 8FC ꒲➰ֹ 8J'J % 䝤䠐 %

    )5514 ♧䘔ծ)551ד֮׏ג׮搀简鸐⥋荈⡤ָ 农〾⻉ׁ׸גְ׸לإ٦ؿ׌׏׋׶׉ֲדזַ׏׋׶ ˟8&1כ傀ח腚䓲ծ81"דװ׏ה㸜䗰 ␡
  11. function sosMorse() { // ৼಈ࣌ؒɾٳࢭ࣌ؒΛަޓʹࣔ͢ύλʔϯΛ༩͑Δ navigator.vibrate([ 300, 100, 300, 100,

    300, // S 500, 600, 100, 600, 100, 600, // O 500, 300, 100, 300, 100, 300 // S ]); }
  12. window.addEventListener('userproximity', function(event) { var emoji = document.getElementById('emoji'); var text =

    document.getElementById('text'); // ۙ͘ʹ෺ମ͕͋Δ͔Ͳ͏͔Λ൑ఆ if (event.near) { emoji.textContent = ''; text.textContent = '͍ͳ͍ͳ͍ʙ'; } else { emoji.textContent = ''; text.textContent = '͹͊ʂ'; } });
  13. var status = document.getElementById('status'); var ghost = document.getElementById('ghost'); // ؀ڥޫͷมԽΛΠϕϯτͰऔಘ

    window.addEventListener('devicelight', function(event) { var lux = event.value; var alpha = Math.min(1, 1 - (lux / 100)); // convert to alpha if (alpha < 1) { body.style.backgroundColor = 'rgba(0, 0, 0, ' + alpha + ')'; } ghost.style.visibility = lux <= 1 ? 'visible' : 'hidden'; status.textContent= 'lux: ' + lux + '/ alpha: ' + alpha; });
  14. var dialogue = document.getElementById('dialogue'); var recognition = new SpeechRecognition(); var

    synthesis = new SpeechSynthesisUtterance(); recognition.addEventListener('result', function(event){ var text = event.results.item(0).item(0).transcript; // Ի੠Λऔಘ var data = { utt : text }; $.ajax({ /* docomo ࡶஊର࿩ API ʹϦΫΤετͯ͠Ԡ౴ΛऔΔ */ }) .then(function(resp) { synthesis.text = resp.utt; speechSynthesis.speak(synthesis); // BOTΛ஻ΒͤΔ }); }, false); synthesis.addEventListener('end',function(){recognition.start();}); recognition.start();
  15. ‣ 4FSWJDF8PSLFS ֿ׸ָ)5514דזְה⹛ְגֻ׸זְ   $BDIF"1* 8FC"QQ.BOJGFTU 1VTI"1* #BDLHSPVOE4ZODFUD ‣

    1FSGPSNBODFPG3"*- 3FTQPOTF "OJNBUJPO *EMF -PBEך걧俑㶵   ػؿؓ٦وٝأ剑黝⻉ך罋ִ倯Ⱗ⡤涸ז䪮遭דזֻظؐعؐ ‣ 3FTQPOTJWF8FC%FTJHO  وٕثأؙٔ٦ٝծوٕثرغ؎أ儗➿ך䌢陎 18"ך➿邌涸ז䪮遭銲稆
  16. ‣ ؎ٝأز٦ٕ׃זֻג׮⢪ִ׷ ‣ Ⰻגךٔا٦أכ63-ד✼ְחؙٔٝדֹ׷ ‣ J04 "OESPJEך״ֲחⴽղד،فٔ׾盖椚ׅ׷䗳銲ָזְ ‣ 植朐ծַז׶⡲׶鴥תזְה،فٔ״׶׮鹼ְ ‣

    ،فٔأز،ךؒ؝ءأذيחכ⿫⸇דֹזְ  ؖٙط؎ذ؍ـֺׅ׷הفٓحزؿؓ٦يח䙫׵׸תׅ 8FCז׵דכךًٔحزرًٔحز
  17. ( (PPHMF嗚稊 5XJUUFSזו ".1㼎䘔 8FCل٦آ ".1 )5.- ِ٦ؠ٦ ΍".1㼎䘔8FCل٦آךⰻ㺁׾ խفٓحزؿؓ٦يָٍؗحءُ

    Ύ嗚稊穠卓װة؎يٓ؎ַٝ׵ խ8FCل٦آך邌爙ؙٔؒأز Ώ".1㼎䘔8FC؟؎زחؙׅٔٝ׷➿׻׶ח խٍؗحءׁُ׸׋ⰻ㺁׾ِ٦ؠ٦ח넝鸞ד䲿⣘
  18. <!doctype html> <html amp lang="en"> <head> <meta charset="utf-8"> <title>Hello, AMPs</title>

    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" /> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "NewsArticle", "headline": "Open-source framework for publishing content", "datePublished": "2015-10-07T12:02:41Z", "image": [ "logo.jpg" ] } </script> <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></ noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body> <h1>Welcome to the mobile web</h1> </body> </html>