REST API な WordPress テーマについて考える。

Slide 1

Slide 1 text

REST API ͳ WordPress ςʔϚʹͭ ͍ͯߟ͑Δɻ Toro_Unit @2017.09.03/RESTࡇΓ 1

Slide 2

Slide 2 text

Toro_Unit ઎෦ ߛ (͏Β΂ ͻΖ͠) ϑϦʔϥϯε Frontend Engineer / Web Designer Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit Blog: https://torounit.com 2

Slide 3

Slide 3 text

Plugin and Theme Developer. • Custom Post Type Permalinks • Vanilla • and more... 3

Slide 4

Slide 4 text

Contribution • WordBench ௕໺ ϞσϨʔλʔ • WordCamp Kyoto 2017 ࣮ߦҕһ • VCCW Team • etc... 4

Slide 5

Slide 5 text

௕໺ݝদຊࢢ͔Β͓ૹΓ͠· ͢ɻ1 • ϫΠϯ͓͍͍͠Αɻ • ͦΖͦΖڶഴ΋͓͍͍͠Αɻ 1 https://commons.wikimedia.org/wiki/File: 130608_Matsumoto_Castle_Matsumoto_Nagano_pref_Japan02bs4.jpg Author: 663highland. License: CC BY 2.5 5

Slide 6

Slide 6 text

೔ຊҰඒຯ͍͍͔͕͋͢͠Δͱ͔ແ͍ͱ͔ɻ 6

Slide 7

Slide 7 text

ຊ೔ͷऴిҊ಺ 7

Slide 8

Slide 8 text

REST API Λ׆༻ͯ͠ɺWEBαΠτΛ ͭ͘Δɻ 8

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

طʹ࣮༻Խ͞Ε͍ͯΔέʔε͸͚ͬ͜ ͏͋Δɻ 12

Slide 13

Slide 13 text

Slide 14

Slide 14 text

• ಠཱͨ͠ΞϓϦέʔγϣϯ͕ɺWordPressΛόοΫΤϯυͱ ͯ͠ѻ͏ɻ • WordPressͷ໾ׂ = σʔλ؅ཧٴͼɺJSONͰͷσʔλग़ ྗɻ 14

Slide 15

Slide 15 text

WordPressͷςʔϚͰ΋࣮ݱͰ͖ͳ͍ ͩΖ͏͔ʁ 15

Slide 16

Slide 16 text

• WordPressͷςʔϚͰ΋ϦονͳϢʔβʔମݧ • ϦονͳϖʔδભҠɻ • ϦΞϧλΠϜͳσʔλߋ৽ɻ • REST API Λ׆༻͢Δ͜ͱͰɺPWA౳΁ͷରԠ΋εϜʔζʹɻ • ΦϑϥΠϯϑΝʔετͷ࣮ݱɻ • طଘͷWordPress͔ΒͷҠߦɻ • ϓϨϏϡʔͰαΠτͷݟͨ໨Λ֬ೝɻ 16

Slide 17

Slide 17 text

Slide 18

Slide 18 text

೉͍͠ͱ͸ݴΘΕ͍ͯΔɻ ςʔϚͷ৔߹͸ϧʔςΟϯάͳͲɺWordPressͰߦ͍ͬͯΔ͜ͱ Λ࡞Γ௚͢ඞཁ͕͋ΓɺͪΐͬͱτϦοΩʔͱίϝϯτɻ ΠϕϯτϨϙʔτɿWordPress Meetup Tokyo #34 - AMA Session with Joe Hoyle and Bryce Adams - Capital P 18

Slide 19

Slide 19 text

Wallace Wallace WordPress Theme • A next-generation* WordPress theme built with the Rest API and Angular 19

Slide 20

Slide 20 text

ࣗ෼΋΍ͬͯΈͨɻ 20

Slide 21

Slide 21 text

torounit/vuepress 21

Slide 22

Slide 22 text

DEMO 22

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Ͱ͖ͯΔ! 24

Slide 25

Slide 25 text

ͦΜͳʹ؁͘ͳ͍ɻ ՝୊͕ࢁੵΈɻ 25

Slide 26

Slide 26 text

URLͷύʔεʹ͍ͭͯ 26

Slide 27

Slide 27 text

• WEBαΠτ͸ඞͣ͠΋TOPϖʔδ͔ΒΞΫηε͞ΕΔΘ͚Ͱ ͸ͳ͍ɻ • URL͔Βදࣔ͢Δίϯςϯπɺঢ়ଶʢهࣄϖʔδʁΧςΰϦ ʔʁʣΛݕࡧ͢Δඞཁ͕͋Δɻ • ͦͯ͠ύʔϚϦϯΫ͸؅ཧը໘͔Βࣗ༝ʹઃఆՄೳ!!! 27

Slide 28

Slide 28 text

Vue Router Λ࢖͏έʔεɻ URLͷύεϕʔεɻ 28

Slide 29

Slide 29 text

Category, Tag, Date λΫιϊϛʔ͸ɺURLͷϕʔεɺ/category/, /tag/ Λ WordPress͔Β౉͢ɻ ೔෇ϕʔεͷURL͸ɺURLߏ଄Λ WP_Rewrite::get_date_permastruct ͔ΒऔಘɻJSʹ౉͠ਖ਼ نදݱʹม׵ɻ 29

Slide 30

Slide 30 text

WordPress͔ΒJSʹ஋Λ౉͢ wp_localize_script Λ࢖͑͹ग़དྷΔɻʢຊདྷͷ࢖༻๏ͱ͸ͣ ΕΔؾ΋͢Δ͚Ͳʣ wp_localize_script( 'vuepress-script', 'WPSettings', [ 'root' => esc_url_raw( rest_url() ), 'nonce' => wp_create_nonce( 'wp_rest' ), 'date_permastruct' => $wp_rewrite->get_date_permastruct(), 'page_on_front' => get_option('page_on_front'), 'page_for_posts' => get_option('page_for_posts'), 'category_base' => get_option('category_base') ? get_option('category_base') : 'category', 'tag_base' => get_option('tag_base') ? get_option('tag_base') : 'tag' ] ); 30

Slide 31

Slide 31 text

౤ߘܥ 31

Slide 32

Slide 32 text

http://example.com/sample-page/ (ݻఆϖʔδ) http://example.com/hello-world/ (౤ߘ) ΛͲ͏΍ͬͯ۠ผ͢Δʁ 32

Slide 33

Slide 33 text

ࠓճ͸ɻ 1. /wp-json/vuepress/v1/post/ ͱ͍͏APIΛ࡞੒ɻ 2. category, tag, date, ౳ͷ৚݅ʹϚον͠ͳ͔ͬͨશͯͷURL Λ͜ͷAPIʹ౤͛Δɻ 3. url_to_postid ͰURL͔Β postID Λݕࡧ 4. get_post Ͱ౤ߘσʔλΛऔಘ͠ฦ٫ɻ 33

Slide 34

Slide 34 text

add_action( 'rest_api_init', function () { register_rest_route( 'vuepress/v1', '/post/(?P.*)', array( 'methods' => 'GET', 'callback' => function ( $request ) { $post_id = url_to_postid( $request['url'] ); if ( ! $post_id ) { return []; } $post = get_post( $post_id ); $post_type = get_post_type_object( $post->post_type ); $request['id'] = $post_id; $response = new WP_REST_Posts_Controller( $post->post_type ); return $response->get_item( $request ); } ) ); } ); 34

Slide 35

Slide 35 text

ͳ͔ͳ͔ແཧ໼ཧͳ࣮૷ɻ 35

Slide 36

Slide 36 text

͔͜͠͠ΕͰ΋଍Γͳ͍ɻ 36

Slide 37

Slide 37 text

σϑΥϧτͷ WordPressʹ౥ࡌ͞ ΕΔRewrite Rule͸ ໿90ݸ 37

Slide 38

Slide 38 text

"Clean URL"Ͱͳ͍URL΁ͷରԠ • /?s=hoge /search/hoge ͱ౳ՁͰ͋Δ͕ϦμΠϨΫτ͞Εͳ͍!!! • /?cat=1 ͸ϦμΠϨΫτ͞ΕΔ͕ɺ/?cat=1&cat=2 • /?p=123౳ͷɺ"Clean URL"Λ࢖༻͍ͯ͠ͳ͍έʔεɻ • ৽ن౤ߘͷϓϨϏϡʔ͸ɺ/?p=123&preview=true ܗࣜʹͳΔɻ • URL ͔Β /caregory/ Λফ͍ͨ͠ͱ͔͍͏ෆಧ͖ऀ΋ଟ͍ 38

Slide 39

Slide 39 text

Ͳ͏͠Α͏ʁ • WP_Rewirte / WPΫϥεͷ Α͏ͳϞϊΛJavaScriptͰ࠶࣮૷ ͢Δʁ • ͦ΋ͦ΋΋ͬͱΑ͍Ξϓϩʔν͕͋Δʁ 39

Slide 40

Slide 40 text

Let's think together 40

Slide 41

Slide 41 text

Thanks! Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit Blog: https://torounit.com 41