Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

ֿ׿ח׍כ BIPNVדׅ

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

BIPNV IUUQ 䎃꟦笝䭯顤d

Slide 6

Slide 6 text

8FCך䪮遭ז鑧

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

)5.-ה$44ך朐䡾

Slide 13

Slide 13 text

䎃剢傈 虊周

Slide 14

Slide 14 text

䎃剢傈 ⹻デ

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

‣ )5.-ָ勻䎃ךוַֿד⹻デׁ׸׷✮㹀 ‣ )5.-הְֲ➬圫כ8FC垥彊ך⚥ד׮暴חرְؕ )5.-.PEVMBSJTBUJPOהְֲ䲿周׮֮׏׋׶כׅ׷ ‣ 8$ה8)"58(ָ)5.-ך➬圫׾׉׸׊׸䭯׏גְ׷ 8$晛8FC垥彊ה׃גغ٦آّٝ׾⼒ⴖ׏ג⹻デׅ׷׮ך 8)"58(晛ـٓؐؠكٝتח鵚ְ甧㜥ַ׵傈ղ刿倜׃竲ֽ׷׮ך )5.-

Slide 19

Slide 19 text

HTML 5.1 - W3C Working Draft http://www.w3.org/TR/html51/

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

)5.-ך杞纏ה䎢纏

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

HTML5 Please http://html5please.com/

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

SVG 47( https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Getting_Started

Slide 37

Slide 37 text

Vector (SVG1.1) images vs. Raster (PNG) images in HTML5 http://www.compatt.com/lab/IandA/IandA_00-00-02.htm

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

‣ EJTQMBZFY תׁ׃ֻؿٖؗءـٕזٖ؎،ؐز׾〳腉חׅ׷눤岀 ؔفءָّٝ㢳ֻגծװװꨇ鍑זךָ桪ח榡 ‣ ⢪ִזְـٓؐؠ *&⟃⵸ כغؚ֮׷ֽוծז׿הזֻ⢪ִ׷ "OESPJEY⟃⵸ FYCPY

Slide 41

Slide 41 text

.box .blue .yellow .red
.box { display: flex; flex-direction: row; } .blue { flex: 1; } .yellow { flex: 1; } .red { flex: 1; }

Slide 42

Slide 42 text

.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; }

Slide 43

Slide 43 text

.box .blue .red .yellow
.box { display: flex; flex-direction: row; } .blue { flex: 1; order: 1; } .yellow { flex: 1; order: 3; } .red { flex: 2; order: 2; }

Slide 44

Slide 44 text

.box .blue .red .yellow
.box { display: flex; flex-direction: column; } .blue { flex: 1; order: 1; } .yellow { flex: 1; order: 3; } .red { flex: 2; order: 2; }

Slide 45

Slide 45 text

‣ WX WI WNJO WNBY 植㖈ך7JFXQPSUח䘔ׄ׋㣐ֹׁ׾爙ׅٖأهٝءـז⦼ ‣ DBMD $44ך⚥ד㔊⵱怴皾דֹ׷ٌظծ⽃⡘ָ麩׏ג׮䎂孡 ‣ ⢪ִזְـٓؐؠ *&⟃⵸ "OESPJE⟃⵸ $ISPNFכ㣐♱㣗 7JFXQPSU6OJUT DBMD

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

body
.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

Slide 48

Slide 48 text

‣ ٖأهٝءـ؎ً٦آהㄎל׸׷38%ך歍׃㶨 7JFXQPSU؟؎ؤװرغ؎أؾؙإٕ嫰זוד铣׫鴥׬歗⫷׾ⴓ䀄 ꬊ㼎䘔ـٓؐؠד׮鸐䌢ךJNHחؿؓ٦ٕغحؙׅ׸ל搀㹱 ‣ ⢪ִזְـٓؐؠ *&׾ろ׬Ⰻג "OESPJEY⟃⵸ $ISPNFכ㣐♱㣗 4BGBSJ⟃⵸כך׫QJDUVSF׮剑鵚8FC,JUח㹋鄲 QJDUVSFծ

Slide 49

Slide 49 text

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ⰻדⴓ䀄

Slide 50

Slide 50 text

Ϣʔεέʔεͱೖ໳༻ͷίʔυαϯϓϧ - Dev.Opera https://dev.opera.com/articles/ja/responsive-images/

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

.button.button--info
INFO
WARNING
.button { border: 1px solid currentColor; } .button--info { color: blue; } .button--warn { color: yellow; } INFO WARNING .button.button--warn

Slide 53

Slide 53 text

➙⢪ִ׷堣腉׾ثؑحؙ׃ג 剑黝ז㹋鄲倯岀ך㢌⻉ח⪒ִ׷

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

% ΍ِ٦ؠ٦ָ)551ד鸐⥋ Ώ⦐➂䞔㜠ך怩峾ծꠘ鋮ⰻ㺁ך何甑FUD խהחַֻ䝤ְֿה׃佝겗 ) )551׮⡂׋״ֲז鑧噰畭חؠְٕ⢽ 8FC Ⱅ遚 8J'J % 䝤䠐 )551 Ύ䝤䠐֮׷余䷼罏ָ խ搀简鸐⥋׾⩸「׃׋׶何甑׃׋׶

Slide 60

Slide 60 text

)5514ז׵ⰻ㺁ָ农〾⻉ׁ׸ג ְ׷ךד怩峾׮何甑׮꣇־׷ ) 㼰זֻה׮鸐⥋ⰻ㺁ָ农〾⻉ׁ׸גְ׸ל㸜䗰 8FC ꒲➰ֹ 8J'J % 䝤䠐 % )5514 ♧䘔ծ)551ד֮׏ג׮搀简鸐⥋荈⡤ָ 农〾⻉ׁ׸גְ׸לإ٦ؿ׌׏׋׶׉ֲדזַ׏׋׶ ˟8&1כ傀ח腚䓲ծ81"דװ׏ה㸜䗰 ␡

Slide 61

Slide 61 text

Ⰻגך8FC׾ )5514חׅ׷⹛ֹ

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

Let's Encrypt https://letsencrypt.org/

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

‣ رآةٕ؟؎ط٦آ ‣ أو٦زذٖؽծؕ٦شؽ ‣ $ISPNF04 'JSFGPY04 8JOEPXT4UPSF"QQT ‣ &MFDUSPOך״ֲז،فٔؽٕت٦ ‣ *P5זו➭ְ׹ְ׹ ـٓؐؠ⟃㢩ך8FC䪮遭

Slide 71

Slide 71 text

ؔ٦فٝז8FC䪮遭ָ 〳腉䚍׾䭁־׷

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

‣ (14ך㖑椚䞔㜠(FP-PDBUJPO"1* ‣ رغ؎أך⫘ֹ%FWJDF0SJFOUBUJPO&WFOU ‣ ًؕٓծو؎ؙ.FEJB$BQUVSFBOE4USFBNT ‣ 橆㞮⯔إٝ؟٦"NCJFOU-JHIU&WFOUT ‣ 㼎暟꟦騃ꨄإٝ؟٦1SPYJNJUZ&WFOUT ‣ غ؎ـٖ٦ءّٝ7JCSBUJPO"1* ‣ غحذٔ٦䞔㜠#BUUFSZ4UBUVT"1* ‣ 갈㡮؝ٝزٗ٦ٕ8FC4QFBDI"1*

Slide 75

Slide 75 text

SOS! - Morse (DEMO: Vibrate API) http://codepen.io/ahomu/full/bEGOQg

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

Peek a boo! (DEMO: Proximity Events) http://codepen.io/ahomu/full/mVdaYV

Slide 78

Slide 78 text

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 = '͹͊ʂ'; } });

Slide 79

Slide 79 text

in the Dark (DEMO: Ambient Light Events) http://codepen.io/ahomu/full/LGYMww

Slide 80

Slide 80 text

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; });

Slide 81

Slide 81 text

Chat Please! (DEMO: WebSpeach API) http://codepen.io/ahomu/full/eJYxNP

Slide 82

Slide 82 text

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();

Slide 83

Slide 83 text

What Web Can Do Today https://whatwebcando.today/

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

‣ ًؕٓזוךرغ؎أ堣腉׾⢪ִ׷ ‣ 1VTI鸐濼דؒٝ؜٦آًٝز杆ִ׷ ‣ "QQ4UPSFװ1MBZ4UPSFח꤫⴨דֹ׷ ‣ 剑穄涸זؙؔٔذ؍ָ♳ָ׶ב׵ְ ‣ ꠹ָ帾ְ ؖٙط؎ذ؍ـהְֲ周 ـٓؐؠ 8FC7JFX ط؎ذ؍ـ،فٔ

Slide 90

Slide 90 text

αΠόʔΤʔδΣϯτ͕AmebaࣄۀͷେվֵɺਓһΛ൒ݮ͠ ωΠςΟϒΞϓϦ΍ԻָετϦʔϛϯάͳͲ৽ྖҬʹ http://jp.techcrunch.com/2014/07/24/jp20140724cyberagent/

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

Pokedex.org https://www.pokedex.org/

Slide 94

Slide 94 text

‣ 4FSWJDF8PSLFS ֿ׸ָ)5514דזְה⹛ְגֻ׸זְ $BDIF"1* 8FC"QQ.BOJGFTU 1VTI"1* #BDLHSPVOE4ZODFUD ‣ 1FSGPSNBODFPG3"*- 3FTQPOTF "OJNBUJPO *EMF -PBEך걧俑㶵 ػؿؓ٦وٝأ剑黝⻉ך罋ִ倯Ⱗ⡤涸ז䪮遭דזֻظؐعؐ ‣ 3FTQPOTJWF8FC%FTJHO وٕثأؙٔ٦ٝծوٕثرغ؎أ儗➿ך䌢陎 18"ך➿邌涸ז䪮遭銲稆

Slide 95

Slide 95 text

‣ ؎ٝأز٦ٕ׃זֻג׮⢪ִ׷ ‣ Ⰻגךٔا٦أכ63-ד✼ְחؙٔٝדֹ׷ ‣ J04 "OESPJEך״ֲחⴽղד،فٔ׾盖椚ׅ׷䗳銲ָזְ ‣ 植朐ծַז׶⡲׶鴥תזְה،فٔ״׶׮鹼ְ ‣ ،فٔأز،ךؒ؝ءأذيחכ⿫⸇דֹזְ ؖٙط؎ذ؍ـֺׅ׷הفٓحزؿؓ٦يח䙫׵׸תׅ 8FCז׵דכךًٔحزرًٔحز

Slide 96

Slide 96 text

"DDFMFSBUFE .PCJMF1BHF 2 ٌغ؎ٕ8FCך넝鸞⻉

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

( (PPHMF嗚稊 5XJUUFSזו ".1㼎䘔 8FCل٦آ ".1 )5.- ِ٦ؠ٦ ΍".1㼎䘔8FCل٦آךⰻ㺁׾ խفٓحزؿؓ٦يָٍؗحءُ Ύ嗚稊穠卓װة؎يٓ؎ַٝ׵ խ8FCل٦آך邌爙ؙٔؒأز Ώ".1㼎䘔8FC؟؎زחؙׅٔٝ׷➿׻׶ח խٍؗحءׁُ׸׋ⰻ㺁׾ِ٦ؠ٦ח넝鸞ד䲿⣘

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

Hello, AMPs { "@context": "http://schema.org", "@type": "NewsArticle", "headline": "Open-source framework for publishing content", "datePublished": "2015-10-07T12:02:41Z", "image": [ "logo.jpg" ] } body {opacity: 0}body {opacity: 1} noscript>

Welcome to the mobile web

Slide 101

Slide 101 text

8FCָ䲿⣘דֹ׷ ⡤꿀ך〳腉䚍ָ䭁ָ׷

Slide 102

Slide 102 text

&YUFOTJCMF8FC

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

زحفتؐٝז ➬圫瘻㹀ךꣲ歲

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

"QQMJDBUJPO$BDIF 㹀纏ؿ؋؎ٕךⰻ㺁ח㛇בְג ٍؗحءُ堣腉׾⢪欽דֹ׷ .appcache ⚠ًحثٍ⢪ְחְֻךד ׅדח侁葿ָ慬⾨ז➬圫 ▻ խխխ4FSWJDF8PSLFS 歗⫷זוך鸐⥋ؙٔؒأزח ⶴ׶鴥׿דⳢ椚דֹ׷堣腉 ⚙ խխխ$BDIF"1* ر٦ة׾ٍؗحءُ׃ג 荈歋ח《׶⳿ׇ׷堣腉 ✓ ֿ׸׵ך堣腉ָ֮׸ל ずׄ㉏겗׾鍑寸דֹ׷

Slide 111

Slide 111 text

铩׮ָ陽锷ח⿫⸇דֹ׷ ؔ٦فٝז➬圫瘻㹀

Slide 112

Slide 112 text

‣ GFUDI ‣ 8FC"OJNBUJPOT ‣ $VTUPN&MFNFOUT ‣ $44)PVEJOJ ‣ FUD 嗚鎢ׁ׸גְ׷⡚ٖكٕ"1*ך⢽

Slide 113

Slide 113 text

https://github.com/w3c https://github.com/whatwg https://github.com/tc39

Slide 114

Slide 114 text

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

Slide 115

Slide 115 text

תה׭

Slide 116

Slide 116 text

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

Slide 117

Slide 117 text

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

Slide 118

Slide 118 text

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

Slide 119

Slide 119 text

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

Slide 120

Slide 120 text

5IBOLT IUUQBIPNV !BIPNV HJUIVCDPNBIPNV ! " ⌂