Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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

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

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>