WordPress Frontend Development With WP API

by Hidetaka Okamoto

Slide 1

Slide 1 text

Wo rd P re s s D e v e l o p m e n t W i t h W P A P I G R A N D F R O N T E N D O S A K A 2 0 1 6

Slide 2

Slide 2 text

WordPressͰ࡞ΒΕͨwebαΠτ੍࡞ʹɺ WordPressͷ஌ࣝ͸ඞཁͳ͘ͳΔ͔΋͠Εͳ͍

Slide 3

Slide 3 text

H i d e t a k a O k a m o t o • Digitalcube developer • WordBenchژ౎ϞσϨʔλ • WP/React/AWS SDK/Alexa • ͨ·ʹଠޑ୲͍ͰདྷΔਓ

Slide 4

Slide 4 text

https://2016.tokyo.wordcamp.org/

Slide 5

Slide 5 text

Ta l k a b o u t … • ैདྷͷWordPressαΠτߏங • WP REST APIͱ͸ʁ • WP REST APIͰαΠτΛߏங͢Δ • Conclusion

Slide 6

Slide 6 text

Ta l k a b o u t … • ैདྷͷWordPressαΠτߏங • WP REST APIͱ͸ʁ • WP REST APIͰαΠτΛߏங͢Δ • Conclusion

Slide 7

Slide 7 text

ʮ Wo rd P re s s Ͱ αΠ τ ࡞ ͬͯ ʯ ͱ ݴ Θ Ε ͨ Β • σβΠϯ࡞੒ • HTML / CSS / JS ͰϑϩϯτΛ࡞੒ • PHP / WordPressؔ਺ͷ૊ΈࠐΈ • WordPressϓϥάΠϯɾςʔϚͷͭͳ͗͜Έ • ಈ࡞֬ೝ → ೲ඼

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Wo rd P re s s Ͱ ͸ P H P Λ ஌ Β ͳ ͍ ͱ ɺ ϑ ϩ ϯ τ Τ ϯ υ ͸ ࡞ Ε ͳ ͍ ͷ ͔

Slide 10

Slide 10 text

֮ ͑Δ ඞ ཁ ͷ ͋ Δ Wo rd P re s s ͷ ΋ Ζ ΋ Ζ • WordPressςʔϚ • WordPressϓϥάΠϯ • WordPressؔ਺ • ϑΟϧλʔϑοΫɾΞΫγϣϯϑοΫ • WordPressͷϧʔςΟϯάγεςϜ

Slide 11

Slide 11 text

গ ͠Ͱ ΋ ࣦ ഊ ͢ Δ ͱ

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Wo rd P re s s ͷ ஌ ࣝ Λ ࠷ খ ݶ ʹ Wo rd P re s s αΠ τ Λ ࡞ Γ ͨ ͍

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

W P R E S T A P I ϕʔε ͩ ͱ ɾ ɾ ɾ • σβΠϯ࡞੒ • HTML / CSS / JS ͰϑϩϯτΛ࡞੒ • WP REST APIͷ४උʢΤϯυϙΠϯτ֦ுͳͲʣ • WP REST APIͱϑϩϯτΤϯυͷͭͳ͗͜Έ • ಈ࡞֬ೝ → ೲ඼ ό ο Ϋ Τ ϯ υ ͱ ϑ ϩ ϯ τ Τ ϯ υ Λ ෼ ཭ ͯ͠ ߏ ங Ͱ ͖ Δ

Slide 16

Slide 16 text

Ta l k a b o u t … • ैདྷͷWordPressαΠτߏங • WP REST APIͱ͸ʁ • WP REST APIͰαΠτΛߏங͢Δ • Conclusion

Slide 17

Slide 17 text

W P R E S T A P I ( Ve r s i o n 2 ) • WordPressͷσʔλΛJSONͰऔಘͰ͖ΔAPI • WordPress4.4ͰҰ෦ػೳ͕ίΞ࣮૷ࡁΈ • WordPress4.7ͰίΞ౷߹ʹ޲͚ͯ։ൃਐߦத • ϓϥάΠϯ΍ίʔυ௥ՃʹΑΔػೳ֦ு΋Մೳ

Slide 18

Slide 18 text

$ c u r l h t t p : / / w p - k y o t o . n e t / w p - j s o n / w p / v 2 / p o s t s | j q .

Slide 19

Slide 19 text

/ w p - j s o n / w p / v 2 / : o b j e c t / : i d • ౤ߘͷҰཡΛऔಘ GET /wp-json/wp/v2/ posts • ID͕123ͷݻఆϖʔδΛऔಘ GET /wp-json/wp/v2/ pages/123

Slide 20

Slide 20 text

G E T w p - j s o n / p o s t s ? f i l t e r [ s ] = w o rd p re s s ɹ ɹ ʮ Wo rd P re s s ʯ Λ ؚ Ή ౤ ߘ Λ औ ಘ P O S T w p - j s o n / c o m m e n t s / 1 2 3 - d “ c o n t e n t = c o m m e n t ” ɹ ɹ I D : 1 2 3 ͷ ه ࣄ ʹ ί ϝ ϯ τ Λ ౤ ߘ

Slide 21

Slide 21 text

W P R E S T A P I υ Ω ϡ ϝ ϯ ς ʔ γ ϣ ϯ ʢ ೔ ຊ ޠ ൛ ʣ http://ja.wp-api.org/

Slide 22

Slide 22 text

Ta l k a b o u t … • ैདྷͷWordPressαΠτߏங • WP REST APIͱ͸ʁ • WP REST APIͰαΠτΛߏங͢Δ • Conclusion

Slide 23

Slide 23 text

Ϋ ϥ Π Ξ ϯ τ ϥ Π ϒ ϥ Ϧ

Slide 24

Slide 24 text

b a c k b o n e . j s ʢ W P ʹ i n c l u d e ʣ

Slide 25

Slide 25 text

n o d e - w p a p i ( s u p e r a g e n t ) $ npm install --save wpapi var WP = require( 'wpapi' ); var wp = new WP({ endpoint: ‘http://src.wordpress-develop.dev/wp-json' }); J a v a S c r i p t N P M https://github.com/WP-API/node-wpapi P ro m i s e ΋ ࢖ ͑Δ ൚ ༻ త ͳ ϥ Π ϒ ϥ Ϧ

Slide 26

Slide 26 text

w p - a n g u l a r j s $ npm install wp-angularjs --save

J a v a S c r i p t N P M https://github.com/miya0001/wp-angularjs Wo rd P re s s ς ʔ Ϛ ϥ ΠΫ ʹ ί ʔ τ ͕ ه ड़ Ͱ ͖ Δ

Slide 27

Slide 27 text

R u b y ˍ G o l a n g $ gem install wp-api-client R u b y ( h t t p s : / / g i t h u b . c o m / d u n c a n j b ro w n / w p - a p i - c l i e n t ) G o l a n g ( h t t p s : / / g i t h u b . c o m / s o g k o / g o - w o rd p re s s ) $ go get github.com/sogko/go-wordpress J S ΋ Ϡ μ ʂ ͬͯ ਓ ͸ ͥ ͻ

Slide 28

Slide 28 text

ࣄ ྫ

Slide 29

Slide 29 text

h t t p s : / / u s t w o . c o m /

Slide 30

Slide 30 text

h t t p s : / / g i t h u b . c o m / u s t w o / u s t w o . c o m - f ro n t e n d

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

http://ogijima-library.or.jp/

Slide 33

Slide 33 text

https://github.com/ogijima-library/app

Slide 34

Slide 34 text

h t t p s : / / a m i m o t o - a m i . c o m / a m i m o t o - n i n j a / Ի੠ೝࣝαʔϏεͱͷ࿈ܞ

Slide 35

Slide 35 text

A u d i o C a p t u re A u d i o P l a y b a c k Yo u r C o d e W P R E S T A P I W h a t i s Wo rd p re s s ? Wo rd P re s s i s …

Slide 36

Slide 36 text

࡞ ͬͯ Έ ͨ

Slide 37

Slide 37 text

ୈ Ұ ੈ ୅

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

https://github.com/hideokamoto/react-wordpress-template/tree/dev

Slide 40

Slide 40 text

ਏ ͔ ͬ ͨ

Slide 41

Slide 41 text

Ͳ ͜ ʹ π ϥ ͞ Λ ײ ͡ ͨ ͔ʁ • SSRαϘͬͨ݁ՌɺSEOͱOGP͕ࢮ͵ • WordPressͷػೳ͕͍Ζ͍Ζ࢖͑ͳ͍ • ʮࠓ·Ͱ௨ΓͰ͑͑΍Μʯͱ͍͏ؾ࣋ͪͱͷಆ͍

Slide 42

Slide 42 text

݁ ہ P H P ࢖ ͬ ͨ

Slide 43

Slide 43 text

2 0 1 6 ೥ 3 ݄ ϑ ϩ ϯ τ Τ ϯ υ Χ ϯ ϑ Ν Ϩϯε ؔ ੢ https://speakerdeck.com/hideokamoto/nophpdewordpresssaitowozuo-routositarafei-chang-nixin-katutahua

Slide 44

Slide 44 text

ͳ ͥ ͔ ม ଶ ѻ ͍ ͞ Ε Δ

Slide 45

Slide 45 text

Ϧ ϕ ϯ δ

Slide 46

Slide 46 text

http://dev.wp-kyoto.net/

Slide 47

Slide 47 text

શ ෦ J a v a S c r i p t

Slide 48

Slide 48 text

• αʔόʔɿExpress ( JS ) • ϨϯμϦϯάɿReact ( JS ) • APIॲཧܥ౳ɿRedux ( JS )

Slide 49

Slide 49 text

ι ʔε ί ʔ υ h t t p s : / / g i t h u b . c o m / h i d e o k a m o t o / w p - k y o t o . n e t

Slide 50

Slide 50 text

C O D E

Slide 51

Slide 51 text

Ϛ α Χ Ϧ ͸ G i t H u b ͷ i s s u e ͔ η ο γ ϣ ϯ ޙ ݸ ਓ త ʹ ͓ ئ ͍ ͠ · ͢

Slide 52

Slide 52 text

ج ຊ ͸ R e a c t

Slide 53

Slide 53 text

M e t a ৘ ใ ͸ R e a c t H e l m e t

Slide 54

Slide 54 text

U R L ઃ ఆ ͸ R e a c t R o u t e r

Slide 55

Slide 55 text

F e t c h A P I Ͱ W P A P I ʹ

Slide 56

Slide 56 text

F e t c h ͠ ͨ ৘ ใ ͸ R e d u x ΁

Slide 57

Slide 57 text

R e d u x ͔ Β R e a c t ͷ S t a t e ΁

Slide 58

Slide 58 text

R e a c t ͸ s t a t e ͔ Β ஋ Λ औ Δ ͩ ͚

Slide 59

Slide 59 text

• ReactͰදࣔ͢Δ಺༰Λఆٛ • ReduxͰσʔλॲཧΛఆٛ • ExpressͰϦΫΤετॲཧΛఆٛ • Fetch API͕APIͱ࿈ܞ͢Δ

Slide 60

Slide 60 text

΍ ͬͯ Έ ͨ ײ ૝

Slide 61

Slide 61 text

ඇ ৗ ʹ ͭ Β ͍

Slide 62

Slide 62 text

ͳ ͥ ϑϧ J S + W P R E S T A P I ͸ ਏ ͔ ͬ ͨ ͷ ͔ ं ྠ ͷ ࠶ ։ ൃ

Slide 63

Slide 63 text

ͳ ͥ ϑϧ J S + W P R E S T A P I ͸ ਏ ͔ ͬ ͨ ͷ ͔ PHP / WordPressؔ਺Ͱ౰ͨΓલͷΑ͏ʹͰ͖Δ͜ͱΛɺ ͢΂ͯJavaScriptͰ࡞Γͳ͓͢ඞཁ͕͋ͬͨɻ

Slide 64

Slide 64 text

ྫ ͑ ͹ M E TA λ ά

Slide 65

Slide 65 text

R e a c t ͩ ͱ ͜͏ ͳ Δ

Slide 66

Slide 66 text

͢ Ͱ ʹ Wo rd P re s s ։ ൃ Ͱ ͖ Δ ਓ ʹ ͸ ɺ ं ྠ ͷ ࠶ ։ ൃ ײ ͕ ১ ͑ ͳ ͍ ͔ ΋

Slide 67

Slide 67 text

Ta l k a b o u t … • ैདྷͷWordPressαΠτߏங • WP REST APIͱ͸ʁ • WP REST APIͰαΠτΛߏங͢Δ • Conclusion

Slide 68

Slide 68 text

J a v a S c r i p t ։ ൃ ϝ Π ϯ ͷ ਓ ͕ ৽ ͠ ͘ Wo rd P re s s αΠ τ ߏ ங ࢝ Ί Δ ਓ ʹ ͸ ɺ W P R E S T A P I ͸ Ί ͬ ͪ Ό ศ ར

Slide 69

Slide 69 text

Wo rd P re s s ؔ ਺ Λ ֮ ͑ ͳ ͘ ͯ ΋ W P R E S T A P I ͷ ί ʔϧ ͷ ࢓ ํ ͕ Θ ͔ Ε ͹ ɺ Wo rd P re s s ͷ αΠ τ Λ ߏ ங Ͱ ͖ Δ

Slide 70

Slide 70 text

ࠓ · Ͱ ͷ ࡞ Γ ํ ͱ W P R E S T A P I Ͱ ͷ ࡞ Γ ํ Ͳ ͬ ͪ Λ બ Ϳ ΂ ͖ ʁ

Slide 71

Slide 71 text

έ ʔε όΠέ ʔε

Slide 72

Slide 72 text

Ҋ ݅ ʹ Ԡ ͡ ͯ W P A P I ͷ ى ༻ Λ ݕ ౼ ͢ Δ • ωΠςΟϒΞϓϦ౳ɺΦϜχνϟωϧʹల։͢ΔϝσΟΞ • JavaScriptͰͷ։ൃ͕ಘҙͳΤϯδχΞ͕ଟ͍νʔϜͰͷ։ൃ • WordPressςʔϚ࡞ऀͱ͔͕͍ΔνʔϜͰͷ։ൃ • ςʔϚ΍ϓϥάΠϯͷઃఆ͚ͩͰย෇͘Ҋ݅ ै དྷ ͷ ߏ ங ํ ๏ ͕ ޮ ཰ త ͳ έ ʔε ͷ ྫ W P R E S T A P I ͕ ׆ ༂ ͢ Δ έ ʔε ͷ ྫ

Slide 73

Slide 73 text

http://www.vektor-inc.co.jp/

Slide 74

Slide 74 text

W P R E S T A P I ͳ Β ֶ श ί ε τ ͸ Լ ͕ Δ ͷ ͔ʁ

Slide 75

Slide 75 text

͍ · · Ͱ ͷ Wo rd P re s s ߏ ங • PHP / WordPressؔ਺ • MySQL • HTML • JavaScript • CSS W P R E S T A P I Λ ࢖ ͬ ͨ ߏ ங • HTML • JavaScript • CSS

Slide 76

Slide 76 text

͍ · · Ͱ ͷ Wo rd P re s s ߏ ங • PHP / WordPressؔ਺ • MySQL • HTML • JavaScript • CSS W P R E S T A P I Λ ࢖ ͬ ͨ ߏ ங • HTML •JavaScript • CSS

Slide 77

Slide 77 text

֮ ͑Δ ͜ ͱ ͕ ݮ ͬ ͨ Θ ͚ Ͱ ͸ ͳ ͍ • React • AngularJS / Angular2 • Riot • Vue • Meteor • Service Worker • Express • ES6 • babel • flux • Redux • etc…

Slide 78

Slide 78 text

web੍࡞ͷબ୒ࢶ͕૿͑Δ͜ͱ͸ ѱ͍͜ͱͰ͸ͳ͍ ͸ͣ

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

Wo rd P re s s D e v e l o p m e n t W i t h W P A P I G R A N D F R O N T E N D O S A K A 2 0 1 6 ੍࡞ɾஶ࡞ Ί૊ ऴ