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

WP REST API + Universal JSで WordPressサイトを作ってみた

WP REST API + Universal JSで WordPressサイトを作ってみた

WordBench男木島夏合宿 セッションスライドです。

Hidetaka Okamoto

August 21, 2016
Tweet

More Decks by Hidetaka Okamoto

Other Decks in Technology

Transcript

  1. W P R E S T A P I +

    U n i v e r s a l J S Ͱ Wo rd P re s s αΠ τ Λ ࡞ ͬͯ Έ ͨ Wo rd B e n c h உ ໦ ౡ Ն ߹ ॓
  2. H i d e t a k a O k

    a m o t o • Digitalcube developer • WordBenchژ౎ϞσϨʔλ WP REST API / WP - CLIɹɹ ίΞίϯτϦϏϡʔλʔ • WP/React/AWS SDK/Alexa • ࠓே্཮
  3. U n i v e r s a l J

    a v a S c r i p t
  4. ϑ ϩ ϯ τ Τ ϯ υ ͔ Β ό

    ο Ϋ Τ ϯ υ · Ͱ ͢΂ ͯ J a v a S c r i p t Ͱ ߏ ங ͢ Δ
  5. U N I V E R S A L J

    AVA S C R I P T • API௨৴ɿFetch API / SuperAgent / jQuery / Angular • αʔόʔɿExpress • ϨϯμϦϯάɿReact / Angular / Riot / View.js / jQuery • ΠϕϯτॲཧɿRedux / Angular / jQuery • ωΠςΟϒΞϓϦɿionic / Cordova / React Native
  6. J a v a S c r i p t

    ͕ ѻ ͑ Ε ͹ ɺ • w e b s i t e • w e b A p p • N a t i v e A p p • I o T • e t c . . ͩ ͍ ͨ ͍ ͷ ͜ ͱ ͕ Ͱ ͖ Δ Α ͏ ʹ ͳ Δ
  7. w p - k y o t o • αʔόʔɿExpress

    ( JS ) • ϨϯμϦϯάɿReact ( JS ) • APIॲཧܥ౳ɿRedux ( JS ) http://dev.wp-kyoto.net/
  8. ι ʔε ί ʔ υ 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
  9. M e t a ৘ ใ ͸ R e a

    c t H e l m e t
  10. U R L ઃ ఆ ͸ R e a c

    t R o u t e r
  11. R e d u x ͔ Β R e a

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

    c t ͷ S t a t e ΁
  13. R e a c t ͸ s t a t

    e ͔ Β ஋ Λ औ Δ ͩ ͚
  14. ͳ ͥ ϑϧ J S + W P R E

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

    S T A P I ͸ ਏ ͔ ͬ ͨ ͷ ͔ PHP / WordPressؔ਺Ͱ౰ͨΓલͷΑ͏ʹͰ͖Δ͜ͱΛɺ ͢΂ͯJavaScriptͰ࡞Γͳ͓͢ඞཁ͕͋ͬͨɻ
  16. ྫ ͑ ͹ M E TA λ ά <?php wp_head();

    function wpdocs_theme_name_scripts() { wp_enqueue_style( 'style-name', get_stylesheet_uri() ); wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true ); } add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );
  17. ͢ Ͱ ʹ Wo rd P re s s ։

    ൃ Ͱ ͖ Δ ਓ ʹ ͸ ɺ ं ྠ ͷ ࠶ ։ ൃ ײ ͕ ১ ͑ ͳ ͍ ͔ ΋
  18. 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 ͸ ଟ ෼ ͢ ͝ ͘ ศ ར
  19. Wo rd P re s s ؔ ਺ Λ ֮

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

    ϯ Ͱ ΍ ͬͯ Δ ਓ ͸ W P R E S T A P I Λ Ͳ ͏ ͭ ͔ ͏ ʁ
  21. Ҋ ݅ ʹ Ԡ ͡ ͯ W P A P

    I ͷ ى ༻ Λ ݕ ౼ ͢ Δ • ωΠςΟϒΞϓϦ౳ɺΦϜχνϟωϧʹల։͢ΔϝσΟΞ • ෳࡶͳϥΠλʔ؅ཧ͕ٻΊΒΕΔwebαΠτ • খن໛ϒϩάαΠτͷߏங • ୹ೲظɾ௿ίετͰߏங͢Δඞཁ͕͋ΔҊ݅ ै དྷ ͷ ߏ ங ํ ๏ ͕ ޮ ཰ త ͳ έ ʔε ͷ ྫ W P R E S T A P I ͕ ׆ ༂ ͢ Δ έ ʔε ͷ ྫ
  22. Wo rd P re s s a s a M

    i c ro s e r i c e +BWB4DSJQU )5.- "1* "1* "1*
  23. ݕ ࡧ ͸ E l a s t i c

    s e a rc h Ϛʔ έ ςΟ ϯ ά ͸ M a u t i c +BWB4DSJQU )5.- "1* "1* "1*
  24. 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 / Ի੠ೝࣝαʔϏεͱͷ࿈ܞ
  25. 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 …
  26. h t t p s : / / g i

    t h u b . c o m / w c - a p p / w c - a p p Cordova΍React NativeΛ༻͍ͨ ωΠςΟϒΞϓϦ
  27. b a c k b o n e . j

    s ʢ W P ʹ i n c l u d e ʣ <?php wp_enqueue_script( 'wp-api' ); // Create a new post var post = new wp.api.models.Posts( { title: 'This is a test post' } ); post.save(); J a v a S c r i p t Wo rd P re s s ( f u n c t i o n s . p h p ) http://ja.wp-api.org/extending/javascript-client/
  28. 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
  29. n o d e - w p a p i

    Ͱ ه ࣄ Λ औ ಘ ͢ Δ wp.posts().get( function( err, data ) { if ( err ) { // handle err } do_something(); }); wp.posts().then( function( data ) { do_something(); }).catch(function( err ) { // handle error }); C a l l b a c k P ro m i s e
  30. w p - a n g u l a r

    j s $ npm install wp-angularjs --save <have-posts api-root="http://example.com/wp-json/wp/v2" post-type="posts" per-page="5"> <the-post-thumbnail></the-post-thumbnail> <h1 class="entry-title"><the-title href="#/posts/:id"></the-title></h1> </have-posts> J a v a S c r i p t N P M https://github.com/miya0001/wp-angularjs
  31. 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
  32. ͍ · · Ͱ ͷ Wo rd P re s

    s ߏ ங • PHP / WordPressؔ਺ • MySQL • HTML • JavaScript • CSS W P R E S T A P I Λ ࢖ ͬ ͨ ߏ ங • HTML • JavaScript • CSS
  33. ֮ ͑Δ ͜ ͱ ͕ ݮ ͬ ͨ Θ ͚

    Ͱ ͸ ͳ ͍ • React • AngularJS / Angular2 • Riot • Vue • Meteor • Service Worker • Express • ES6 • babel • flux • Redux • fetch API