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

1644fba8a219c89987390ef4f23d06bf?s=47 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

1644fba8a219c89987390ef4f23d06bf?s=128

Ayumu Sato

December 12, 2015
Tweet

Transcript

  1. )5.-ד׮$44ד׮זְ 8FC䪮遭ךײִֻ 8$"/8JOUFS !BIPNV"ZVNV4BUP

  2. ֿ׿ח׍כ BIPNVדׅ

  3. ‣ ⡟谏娄ׁהֲ֮ײ׬ ‣ せ〢㾊ה幪靼׾⿾䗁埆騥ן⚥ך8FCؒٝآص، ‣ 吳䒭⠓爡؟؎غ٦ؒ٦آؑٝز㖈硂⚥  欰佝鷏ז厤⹛歗أزٔ٦ىؚٝ؟٦ؽأךꟚ涪⚥  8FCؿٗٝزؒٝس،٦ؗذؙز

     ؙٓ؎،ٝز؟؎سػؿؓ٦وٝأ琑⨳崢 فٗؿ؍٦ٕ
  4. None
  5. BIPNV IUUQ 䎃꟦笝䭯顤d 

  6. 8FCך䪮遭ז鑧

  7. 葿ղ8FC䪮遭ָ⳿גְ׷׫׋ְ׌ֽו ⡦ָ➙⢪ִגծ⡦ָוֲז׏גְֻך ⟎

  8. 秈鹈꟦׀החًآٍ٦،حفر٦ز 秈䎃׀החًآٍ٦،حفر٦ز ˟鵚䎃ך鑧דծ⟃⵸כ׮׏ה꟦ꥫָ֮׏׋ ˟*OUFSOFU&YQMPSFS儗➿״׶כ傍ֻז׷عؤ

  9. 䎃剢ךءؑ، )5.-虊周涪邌ך䎃 IUUQHTTUBUDPVOUFSDPNBMMCSPXTFSXXNPOUIMZCBS

  10. 䎃剢ךءؑ، )5.-⹻デַ׵䎃䖓 IUUQHTTUBUDPVOUFSDPNBMMCSPXTFSXXNPOUIMZCBS

  11.  )5.-ה$44ך朐䡾  勻䎃ך8FCⵖ⡲ח䕦갟׾♷ִ׉ֲז鑧׻׶ה㹋⹡  劢勻ך8FCך〳腉䚍׾䭁־׷䪮遭׻׶הꨜ㔲孡  &YUFOTJCMF8FC ،آؑٝت

  12. )5.-ה$44ך朐䡾

  13. 䎃剢傈 虊周

  14. 䎃剢傈 ⹻デ

  15. )5.-ה$44כ ְאװ׏גֻ׷ך 2

  16. )5.-כ䔲ⴓזְ $44כ勻זְ "

  17. 8FC䪮遭ך嚊屣 ְ׻ײ׷)5.-הַ$44הַ

  18. ‣ )5.-ָ勻䎃ךוַֿד⹻デׁ׸׷✮㹀 ‣ )5.-הְֲ➬圫כ8FC垥彊ך⚥ד׮暴חرְؕ  )5.-.PEVMBSJTBUJPOהְֲ䲿周׮֮׏׋׶כׅ׷ ‣ 8$ה8)"58(ָ)5.-ך➬圫׾׉׸׊׸䭯׏גְ׷  8$晛8FC垥彊ה׃גغ٦آّٝ׾⼒ⴖ׏ג⹻デׅ׷׮ך

     8)"58(晛ـٓؐؠكٝتח鵚ְ甧㜥ַ׵傈ղ刿倜׃竲ֽ׷׮ך )5.-
  19. HTML 5.1 - W3C Working Draft http://www.w3.org/TR/html51/

  20. ‣ ➙䖓ך$44ָ-FWFM׾䭯אֿהכ搀ְה僇鎸ׁ׸גְ׷  $44UIFMBOHVBHFOPMPOHFSIBTMFWFMTWJB$444OBQTIPU ‣ $44-FWFM$44װ$44ה⼒ⴽׅ׷׋׭ך铂䔲儗 ‣ $44כ)5.-ה麩׏גٌآُ٦ٕ׀הח➬圫瘻㹀ָ鹌׬ $44

  21. CSS Specifications http://www.w3.org/Style/CSS/current-work.en.html

  22. ‣ +BWB4DSJQUך鎉铂➬圫כ&$."4DSJQU ‣ 8$װ8)"58(דכ瘻㹀׃גְזְ ‣ &$."4DSJQU׏ג耀ְ׋ֿה֮׏׋׶  嫣䎃➬圫׾תה׭׷״ֲחז׶ծغ٦آّٝ殢〾׾膴׃׋ ‣ &$."*OUFSOBUJPOBMך5$הְֲ㨻㆞⠓ָ瘻㹀׃גְ׷

    +BWB4DSJQU
  23. ECMAScript® 2016 Language Specification http://tc39.github.io/ecma262/

  24. )5.-ך杞纏ה䎢纏

  25. HTML5 - W3C Recommendation http://www.w3.org/TR/html5/

  26. The Web Platform: Browser technologies https://platform.html5.org

  27. 䎢纏ך)5.-ח➿邌ׁ׸׷ 8FC䪮遭כ䭁㣐׃竲ֽגְ׷

  28. 勻䎃ך8FCⵖ⡲ח 䕦갟׾♷ִ׉ֲז鑧

  29. Internet Explorer αϙʔτϙϦγʔมߋͷॏཁͳ͓஌Βͤ https://www.microsoft.com/ja-jp/windows/lifecycle/iesupport/

  30. 䎃剢傈ַ׵ ぐ04ד⢪ִ׷剑倜غ٦آّٝך׫׾؟ه٦زׅ׷ את׶*&_ָ؟ه٦ز㢩חז׷

  31. ׁ׵ח䎃剢傈ַ׵כ 7JTUBך؟ه٦ز穄✪ח⠵ְծ*& _ ָ؟ه٦ز㢩 㹋ꥷכ،ؙإأ鍑匿דⵃ欽罏ך朐屣׾鋅זָ׵ⴻ倖ׅ׷׻ֽדָׅせ湡♳כ

  32. Can I use... http://caniuse.com/

  33. HTML5 Please http://html5please.com/

  34. /FX 'FBUVSFT ׉׸קו倜׃ֻ搀ְֽו ״ֲװ׏ה⢪ִ׉ֲז暟 ⋆

  35. ‣ وٕثأؙٔ٦ٝ儗➿ח剑黝זكؙة٦歗⫷䕎䒭 9.-   $44װ+4ה湱䚍ָ葺ֻծ،ؙإءؽٔذ؍ח׮劍䖉  ،صً٦ءّٝⵖ䖴ך䩛媮ָ鞢㺡 ‣ ⢪ִזְـٓؐؠ

     *&⟃⵸  "OESPJEY⟃⵸ 47(
  36. <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
  37. Vector (SVG1.1) images vs. Raster (PNG) images in HTML5 http://www.compatt.com/lab/IandA/IandA_00-00-02.htm

  38. ೔ຊܦࡁ৽ฉͷ͋ͷϩΰ΋ SVG http://www.nikkei.com/

  39. SVG ΞχϝʔγϣϯͷσϞ (Snap.svg ΑΓ) http://snapsvg.io/demos/

  40. ‣ EJTQMBZFY  תׁ׃ֻؿٖؗءـٕזٖ؎،ؐز׾〳腉חׅ׷눤岀  ؔفءָّٝ㢳ֻגծװװꨇ鍑זךָ桪ח榡 ‣ ⢪ִזְـٓؐؠ  *&⟃⵸

     כغؚ֮׷ֽוծז׿הזֻ⢪ִ׷   "OESPJEY⟃⵸ FYCPY
  41. .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; }
  42. .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>
  43. .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; }
  44. .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; }
  45. ‣ WX WI WNJO WNBY  植㖈ך7JFXQPSUח䘔ׄ׋㣐ֹׁ׾爙ׅٖأهٝءـז⦼ ‣ DBMD 

     $44ך⚥ד㔊⵱怴皾דֹ׷ٌظծ⽃⡘ָ麩׏ג׮䎂孡 ‣ ⢪ִזְـٓؐؠ  *&⟃⵸  "OESPJE⟃⵸ $ISPNFכ㣐♱㣗 7JFXQPSU6OJUT DBMD
  46. None
  47. 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
  48. ‣ ٖأهٝءـ؎ً٦آהㄎל׸׷38%ך歍׃㶨  7JFXQPSU؟؎ؤװرغ؎أؾؙإٕ嫰זוד铣׫鴥׬歗⫷׾ⴓ䀄  ꬊ㼎䘔ـٓؐؠד׮鸐䌢ךJNHחؿؓ٦ٕغحؙׅ׸ל搀㹱 ‣ ⢪ִזְـٓؐؠ  *&׾ろ׬Ⰻג

     "OESPJEY⟃⵸ $ISPNFכ㣐♱㣗   4BGBSJ⟃⵸כ<TSDTFU>ך׫QJDUVSF׮剑鵚8FC,JUח㹋鄲 QJDUVSFծ<TSDTFU>
  49. 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ⰻדⴓ䀄
  50. Ϣʔεέʔεͱೖ໳༻ͷίʔυαϯϓϧ - Dev.Opera https://dev.opera.com/articles/ja/responsive-images/

  51. ‣ DPMPSך䭷㹀׾⯋ח葿׾寸㹀דֹ׷⤑ⵃז䭷㹀  ַז׶⵸ַ׵֮׷׿׌ֽוծ娖〷涸穗箮ח״׶و؎ش٦׏שְ ‣ ⢪ִזְـٓؐؠ  *&⟃⵸ DVSSFOU$PMPS

  52. .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
  53. ➙⢪ִ׷堣腉׾ثؑحؙ׃ג 剑黝ז㹋鄲倯岀ך㢌⻉ח⪒ִ׷

  54. )5514 &WFSZXIFSF Ⰻ8FCل٦آ农〾⻉ך儗➿

  55. ➙䎃כ)5514⻉ָ زحفتؐٝד䚈鸞ח鹌遤

  56. 剑鵚ך噟⹡ד '51⢪׏גתַׅ

  57. ⽯ⵟծ农〾⻉ׁ׸׋ 倯岀ח㢌ִת׃׳ֲ 4'51װ'514דقٕف؟؎ز׾嗚稊׃גֻ׌ְׁ

  58. % ΍䠬厩罏ָ'51דطحزٙ٦ؙ،ؙإأ Ύوٕؐؑ،ָ'51ך鸐⥋ⰻ㺁׾ խ䝤䠐֮׷余䷼罏ח鯄鷏 Ώ余䷼罏ָΎך䞔㜠׾⯋ח խ؟٦غ׾⛦׏《׏ג䝤ְֿה׾ׅ׷ 䝤䠐 䠬厩 ( 닢

    䔲儗崧遤׏׋(VNCMBSך余䷼ءشٔؔ
  59. % ΍ِ٦ؠ٦ָ)551ד鸐⥋ Ώ⦐➂䞔㜠ך怩峾ծꠘ鋮ⰻ㺁ך何甑FUD խהחַֻ䝤ְֿה׃佝겗 ) )551׮⡂׋״ֲז鑧噰畭חؠְٕ⢽ 8FC Ⱅ遚 8J'J %

    䝤䠐 )551 Ύ䝤䠐֮׷余䷼罏ָ խ搀简鸐⥋׾⩸「׃׋׶何甑׃׋׶
  60. )5514ז׵ⰻ㺁ָ农〾⻉ׁ׸ג ְ׷ךד怩峾׮何甑׮꣇־׷ ) 㼰זֻה׮鸐⥋ⰻ㺁ָ农〾⻉ׁ׸גְ׸ל㸜䗰 8FC ꒲➰ֹ 8J'J % 䝤䠐 %

    )5514 ♧䘔ծ)551ד֮׏ג׮搀简鸐⥋荈⡤ָ 农〾⻉ׁ׸גְ׸לإ٦ؿ׌׏׋׶׉ֲדזַ׏׋׶ ˟8&1כ傀ח腚䓲ծ81"דװ׏ה㸜䗰 ␡
  61. Ⰻגך8FC׾ )5514חׅ׷⹛ֹ

  62. HTTPS ΛϥϯΩϯάγάφϧʹ࢖༻͠·͢ http://googlewebmastercentral-ja.blogspot.jp/2014/08/https-as-ranking-signal.html

  63. Deprecating Non-Secure HTTP https://blog.mozilla.org/security/2015/04/30/deprecating-non-secure-http/

  64. ‣ ׅץגך8FCل٦آָ)5514ח״׏ג㸜Ⰻד֮׷ץֹ ‣ ⚺銲ז䊬㣐؟؎زכ㼎䘔幥׫ ‣ )5514ד֮׷ֿהָ(PPHMFؚٓٝؗٝ銲㔓⻉ ‣ ֿ׸ַ׵ך倜׃ְ8FC䪮遭כ)5514䗳갭ז׮ךָ㢳ְ )5514⻉ך⹛ֹ

  65. ‣ IUUQז㢩鿇؝ٝذٝخ׾꽀鷵ׅ׷䗳銲ָ֮׷  ֿ׸ָ殢ꨇ׃ְծ劤䔲ח  وأزזفؚٓ؎ٝװ䎢デָ)5514חꬊ㼎䘔׌הֶ䩛♳־ ‣ 44-鏾僇剅ך《䖤ה刿倜חծֶꆃה䩛꟦ָ䱦ַ׶ָ׍ ‣ ؟٦غ٦ծ؎ٝؿٓחꟼ׻׷ךדծ׉׮׉׮ך䩛꟦ָ֮׷

    )5514⻉ךع٦سٕ
  66. Let's Encrypt https://letsencrypt.org/

  67. )5514㼎䘔׃ג 如⚅➿8FCך鹌⻉ח⪒ִ׷

  68. 劢勻ך8FCך 〳腉䚍׾䭁־׷䪮遭

  69. 鵚䎃ך8FC䪮遭כ ـٓؐؠ׌ֽדכזְ

  70. ‣ رآةٕ؟؎ط٦آ ‣ أو٦زذٖؽծؕ٦شؽ ‣ $ISPNF04 'JSFGPY04 8JOEPXT4UPSF"QQT ‣ &MFDUSPOך״ֲז،فٔؽٕت٦

    ‣ *P5זו➭ְ׹ְ׹ ـٓؐؠ⟃㢩ך8FC䪮遭
  71. ؔ٦فٝז8FC䪮遭ָ 〳腉䚍׾䭁־׷

  72. , 暟椚⚅歲ח،ؙإأׅ׷ 8FC䪮遭ך"1*

  73. ٌغ؎ٕرغ؎أכ إٝ؟٦ך㹇䏧 "OESPJEך'JSFGPYכ暴ח麇ץ׷

  74. ‣ (14ך㖑椚䞔㜠(FP-PDBUJPO"1* ‣ رغ؎أך⫘ֹ%FWJDF0SJFOUBUJPO&WFOU ‣ ًؕٓծو؎ؙ.FEJB$BQUVSFBOE4USFBNT ‣ 橆㞮⯔إٝ؟٦"NCJFOU-JHIU&WFOUT ‣ 㼎暟꟦騃ꨄإٝ؟٦1SPYJNJUZ&WFOUT

    ‣ غ؎ـٖ٦ءّٝ7JCSBUJPO"1* ‣ غحذٔ٦䞔㜠#BUUFSZ4UBUVT"1* ‣ 갈㡮؝ٝزٗ٦ٕ8FC4QFBDI"1*
  75. SOS! - Morse (DEMO: Vibrate API) http://codepen.io/ahomu/full/bEGOQg

  76. function sosMorse() { // ৼಈ࣌ؒɾٳࢭ࣌ؒΛަޓʹࣔ͢ύλʔϯΛ༩͑Δ navigator.vibrate([ 300, 100, 300, 100,

    300, // S 500, 600, 100, 600, 100, 600, // O 500, 300, 100, 300, 100, 300 // S ]); }
  77. Peek a boo! (DEMO: Proximity Events) http://codepen.io/ahomu/full/mVdaYV

  78. 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 = '͹͊ʂ'; } });
  79. in the Dark (DEMO: Ambient Light Events) http://codepen.io/ahomu/full/LGYMww

  80. 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; });
  81. Chat Please! (DEMO: WebSpeach API) http://codepen.io/ahomu/full/eJYxNP

  82. 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();
  83. What Web Can Do Today https://whatwebcando.today/

  84. رغ؎أ"1*ד 6*װ؎ٝةؙٓءّٝך〳腉䚍ָ䭁ָ׷

  85. - 1SPHSFTTJWF 8FC"QQT 如⚅➿8FC،فٔ

  86. 8FCWT"QQ ـٓؐؠ ط؎ذ؍ـ 0 .

  87. أوم،فٔⵃ欽儗꟦ך秈כ؝ىُص؛٦ءّٝד嶊顤ծ⡘כչ-*/&պص٦ٕإٝ吳䒭⠓爡ַ׵䒷欽 IUUQXXXOFUSBUJOHTDPKQOFXT@SFMFBTF/FXTSFMFBTFIUNM ϞόΠϧʹ͓͚Δ ΞϓϦͱϒϥ΢βͷ ར༻࣌ؒͷൺ཰͸ 4:1

  88. 0 8FC ؎ٝأز٦ٕדֹזְ م٦ي歗꬗׾⽑剣׃ב׵ְ فحءُ鸐濼דِ٦ؠ٦ח鏮実דֹזְ ٌغ؎ٕדכ䔲׋׶⵸זؔؿٓ؎ٝ朐䡾ח䓲ְ ،فٔה嫰ץג⡦ַה鹼ְ ␡ ␡ ␡

  89. ‣ ًؕٓזוךرغ؎أ堣腉׾⢪ִ׷ ‣ 1VTI鸐濼דؒٝ؜٦آًٝز杆ִ׷ ‣ "QQ4UPSFװ1MBZ4UPSFח꤫⴨דֹ׷ ‣ 剑穄涸זؙؔٔذ؍ָ♳ָ׶ב׵ְ ‣ ꠹ָ帾ְ

    ؖٙط؎ذ؍ـהְֲ周 ـٓؐؠ 8FC7JFX ط؎ذ؍ـ،فٔ
  90. αΠόʔΤʔδΣϯτ͕AmebaࣄۀͷେվֵɺਓһΛ൒ݮ͠ ωΠςΟϒΞϓϦ΍ԻָετϦʔϛϯάͳͲ৽ྖҬʹ http://jp.techcrunch.com/2014/07/24/jp20140724cyberagent/

  91. Progressive Web Apps: Escaping Tabs Without Losing Our Soul https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/

  92. ‣ 剑倜8FC䪮遭דծ،فٔ⚛ך⡤꿀׾䲿⣘ׅ׷أؗ٦ي ‣ 㹋颵ծ)5514ד֮׷ֿהָ䗳갭 1SPHSFTTJWF8FC"QQTהכ 0 ؎ٝأز٦ٕ 〳腉ד ؔؿٓ؎ٝ ד׮⢪ִ׷

    넝鸞ח ⹛⡲ׅ׷׃ ،فٔ⚛ך 鏮実⸂ QVTI ⋆ ⋆ ⋆ ⋆
  93. Pokedex.org https://www.pokedex.org/

  94. ‣ 4FSWJDF8PSLFS ֿ׸ָ)5514דזְה⹛ְגֻ׸זְ   $BDIF"1* 8FC"QQ.BOJGFTU 1VTI"1* #BDLHSPVOE4ZODFUD ‣

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

    ،فٔأز،ךؒ؝ءأذيחכ⿫⸇דֹזְ  ؖٙط؎ذ؍ـֺׅ׷הفٓحزؿؓ٦يח䙫׵׸תׅ 8FCז׵דכךًٔحزرًٔحز
  96. "DDFMFSBUFE .PCJMF1BHF 2 ٌغ؎ٕ8FCך넝鸞⻉

  97. Accelerated Mobile Pages Project https://www.ampproject.org/

  98. ( (PPHMF嗚稊 5XJUUFSזו ".1㼎䘔 8FCل٦آ ".1 )5.- ِ٦ؠ٦ ΍".1㼎䘔8FCل٦آךⰻ㺁׾ խفٓحزؿؓ٦يָٍؗحءُ

    Ύ嗚稊穠卓װة؎يٓ؎ַٝ׵ խ8FCل٦آך邌爙ؙٔؒأز Ώ".1㼎䘔8FC؟؎زחؙׅٔٝ׷➿׻׶ח խٍؗحءׁُ׸׋ⰻ㺁׾ِ٦ؠ٦ח넝鸞ד䲿⣘
  99. ‣ ٌغ؎ٕד8FC؝ٝذٝخ׾넝鸞邌爙ׅ׷《׶穈׫  (PPHMF嗚稊װ5XJUUFSװ-*/&ך䫎珲חろת׸׷ַؙٔٝ׵ך钷㼪 ‣ ".1)5.-ך鋉秈ח䖞׏׋8FCل٦آך欽䠐ָ䗳銲  8PSE1SFTTך״ֲזػـٔحءٍ٦ءأذي⩎׮㼎䘔✮㹀 ‣ صُ٦أ؟؎زװـؚٗך״ֲז铣׫暟؝ٝذٝخぢֽ

    ".1הכ
  100. <!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>
  101. 8FCָ䲿⣘דֹ׷ ⡤꿀ך〳腉䚍ָ䭁ָ׷

  102. &YUFOTJCMF8FC

  103. ➬圫ך瘻㹀ה㹋鄲ָ ꣬׶גֻ׷ך׾䖉א傈ղ

  104. ΍Ⱗ⡤涸זِ٦أ؛٦أח խ׮הבְג䢅ꅾח➬圫瘻㹀 . Ύぐـٓؐؠكٝتָ խ➬圫׾⯋ח㹋鄲׃גٔٔ٦أ ΏꟚ涪罏ָ㹋ꥷח׉ך➬圫׾ խ⢪׏גⵖ⡲דֹ׷״ֲחז׷ 䎃⽃⡘ד儗꟦ָ䗳銲 –㹋כ⢪ְ⹧䩛ָ䝤ְ –׮ֲ儗➿חさ׻זְ

    1PMZMMך䲿⣘װ 7FOEPS1SFY׮֮׷ָ ⚠
  105. زحفتؐٝז ➬圫瘻㹀ךꣲ歲

  106. Ꟛ涪罏ָ8FC䪮遭ך㉏겗ד ⚺⡤䚍׾涪䳸ׅ׷׋׭ח

  107. The Extensible Web Manifesto https://extensiblewebmanifesto.org/ja/

  108. Ꟛ涪罏חぢֽג ⡚ٖكٕ"1*׾䲿⣘ׅ׷ ˟稢ְַ鿇ⴓ׾⡲׶鴥׭ל䎢ְ眔㔲ח㼎䘔דֹ׷"1*

  109. ‣ ⡚ٖكٕז"1*ָ֮׸ל1PMZMMדⱄ植דֹ׷䌴׮䎢ָ׷  1PMZMMָ֮׸ל倜׃ְ➬圫ך兛⿹כ鸞ת׷  ➬圫ך⢪ְ⹧䩛חאְגծ傍׭ךؿ؍٦سغحָؙ䖤׵׸׷ ‣ Ꟛ涪罏ָ넝ٖكٕז堣腉׾䭁䓸דֹ׷  ⼧ⴓח峤箺ׁ׸ג♧菙⻉ׅ׸ל垥彊➬圫ח׮ז׶ֲ׷

    ⡚ٖكٕ"1*׾䲿⣘ׅ׷ًٔحز
  110. "QQMJDBUJPO$BDIF 㹀纏ؿ؋؎ٕךⰻ㺁ח㛇בְג ٍؗحءُ堣腉׾⢪欽דֹ׷ .appcache ⚠ًحثٍ⢪ְחְֻךד ׅדח侁葿ָ慬⾨ז➬圫 ▻ խխխ4FSWJDF8PSLFS 歗⫷זוך鸐⥋ؙٔؒأزח ⶴ׶鴥׿דⳢ椚דֹ׷堣腉

    ⚙ խխխ$BDIF"1* ر٦ة׾ٍؗحءُ׃ג 荈歋ח《׶⳿ׇ׷堣腉 ✓ ֿ׸׵ך堣腉ָ֮׸ל ずׄ㉏겗׾鍑寸דֹ׷
  111. 铩׮ָ陽锷ח⿫⸇דֹ׷ ؔ٦فٝז➬圫瘻㹀

  112. ‣ GFUDI ‣ 8FC"OJNBUJPOT ‣ $VTUPN&MFNFOUT ‣ $44)PVEJOJ ‣ FUD

    嗚鎢ׁ׸גְ׷⡚ٖكٕ"1*ך⢽
  113. https://github.com/w3c https://github.com/whatwg https://github.com/tc39

  114. 瘻㹀倯ꆙך㢌⻉ד 8FCהꟚ涪罏ך〳腉䚍ָ䭁ָ׷

  115. תה׭

  116. ⢪ִ׷䪮遭כ 琎噰涸ח⢪׏גְֹ׋ְ

  117. 如⚅➿8FCפך⵸彊⪒ )5514㼪Ⰵך儗劍

  118. ـٓؐؠך㢩ח崞鬨ך䌴׾ 䭁־׷8FC䪮遭

  119. Frontend Weekly IUUQTGSPOUFOEXFFLMZUPLZP 㕂ⰻ㢩ךؿٗٝزؒٝسꟼ鸬صُ٦أ׾嫣鹈ֶ㾈ֽׅ׷ً٦ٕوؖآٝ

  120. 5IBOLT IUUQBIPNV !BIPNV HJUIVCDPNBIPNV ! " ⌂