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

Node.js + WP-API でつくるウェブアプリケーション

Node.js + WP-API でつくるウェブアプリケーション

2016/08/27に大阪イノベーションハブで開催されたGRAND FRONTEND OSAKA 2016の資料です。

Takayuki Miyauchi

August 27, 2016
Tweet

More Decks by Takayuki Miyauchi

Other Decks in Programming

Transcript

  1. /PEFKT81"1*Ͱͭ͘Δ

    ΢ΣϒΞϓϦέʔγϣϯ

    (3"/%'30/5&/%04","
    !NJZB

    View full-size slide

  2. http://vccw.cc/

    View full-size slide

  3. w 8PSE1SFTT͔Β࣮૷͞Εͨ৽ػೳ
    w 8PSE1SFTTΛ+40/3&45"1*Ͱ͝ʹΐ͝ʹΐɻ
    $ curl http://wp-api.dev/wp-json/wp/v2/posts | jq .
    [
    {
    "id": 1,
    "date": "2016-05-17T07:28:32",
    "date_gmt": "2016-05-17T07:28:32",
    "guid": {
    "rendered": "http://wp-api.dev/?p=1"
    },
    "modified": "2016-05-17T07:28:32",
    "modified_gmt": "2016-05-17T07:28:32",
    "slug": "hello-world",
    "type": "post",

    View full-size slide

  4. w ݱ࣌఺ͰϑϧػೳΛ࢖͏ʹ͸81"1*ϓϥάΠϯΛΠ
    ϯετʔϧ͢Δඞཁ͕͋Δɻ
    w 8PSE1SFTTͰίΞʹϚʔδ͞ΕΔ༧ఆɻ
    https://wordpress.org/plugins/rest-api/

    View full-size slide

  5. 8PSE1SFTTͷ৽ػೳ͸ࣄલʹϓϥάΠϯͱͯ͠ϦϦʔε͞Εɺ

    4MBDL΍(JU)VCͰͷٞ࿦ΛܦͯίΞʹϚʔδ͞Ε·͢ɻ
    https://make.wordpress.org/core/features-as-plugins/

    View full-size slide

  6. https://github.com/WP-API

    View full-size slide

  7. w ਖ਼౷೿3&45GVMͳ"1*ɻ
    w ϓϥάΠϯʹΑΓ֦ுՄೳɻͨͱ͑͹ϝλσʔ
    λΛ+40/ʹ௥Ճͨ͠Γͱ͔ɻ
    w औಘ͍ͨ͠هࣄͷύϥϝʔλΛΫΤϦʔจࣈྻ
    Ͱࢦఆ͢Δ͜ͱ͕Մೳɻ

    View full-size slide

  8. /wp-json/wp/v2/posts
    ౤ߘͷҰཡΛऔಘ
    *%͕ͷݻఆϖʔδΛऔಘ
    /wp-json/wp/v2/pages/234
    /wp-json/wp/v2/:object/:id

    View full-size slide

  9. ?filter[s]=hello
    IFMMPؚ͕·ΕΔهࣄΛऔಘ
    ΧςΰϦʔ͕GSVJUTͷهࣄΛऔಘ
    ?filter[category]=fruits
    https://codex.wordpress.org/Class_Reference/WP_Query
    8PSE1SFTTͷ81@2VFSZͷύϥϝʔλ͕࢖༻Մ

    View full-size slide

  10. 81"1*ʹΑΔมԽ

    View full-size slide

  11. 8PSE1SFTTͷςʔϚγεςϜ͔Β

    ϑϩϯτΤϯυΛղ์
    w εϚϗΞϓϦɺσεΫτοϓΞϓϦͳͲͷόοΫΤϯυ
    ͱͯ͠ͷ8PSE1SFTT

    View full-size slide

  12. ϚΠΫϩαʔϏεͷҰ෦ͱͯ͠ͷ
    8PSE1SFTT
    w ଞͷ$.4΍ϑϨʔϜϫʔΫ౳ͱͷ༰қͳ࿈ܞ͕Մೳɻ
    Lambda API Gateway

    View full-size slide

  13. ຊ൪Ͱ΋εςʔδϯάͰ΋
    ϥΠϒσʔλ
    w ͩͬͯ"1*ͩ΋Μɻ
    w ϚΠάϨʔγϣϯແ͠Ͱ։ൃΛ࢝ΊΔ͜ͱ΋Մೳɻ

    View full-size slide

  14. εέʔϦϯά ͳʹͦΕʁ
    w ͱʹ͔͘Ωϟογϡͪ͠Ό͑ʂ
    w "84ͷ$MPVE'SPOU΍"1*(BUFXBZ͸௒ศརɻ
    CloudFront CDN

    View full-size slide

  15. ϫʔΫϑϩʔͷվળ
    w όοΫΤϯυͱϑϩϯτΤϯυͷ׬શͳ෼ۀɻ
    w ϑϩϯτΤϯυσΟϕϩούʔ͸όοΫΤϯυ͕
    8PSE1SFTTͰ͋Δ͜ͱΛ஌Δඞཁ͑͞ͳ͍͔΋ɻ

    View full-size slide

  16. w όοΫΤϯυ͸8PSE1SFTTʴ81"1*
    w ϑϩϯτΤϯυ͸ɺ/PEFKT3FBDUɻ
    w ϑϩϯτΤϯυͷΠϯϑϥʹ͸%PDLFSΛ࢖༻ɻ
    w 044Ͱެ։͞Ε͍ͯ·͢ɻ

    View full-size slide

  17. w 81"1*͔Βऔಘͨ͠σʔλΛ/PEFKTαʔόʔܦ༝
    Ͱग़ྗ͢Δ͜ͱͰɺඇಉظॲཧʹΑΔߴ଎ԽΛ࣮ݱɻ
    w /PEFKTαʔόʔଆͰϨεϙϯε͕Ωϟογϡ͞Εͯ
    ͓Γ8PSE1SFTT͕μ΢ϯͯ͠΋αΠτ͸Քಇɻ
    w 8PSE1SFTTͷ؅ཧը໘Λ࢖͏͜ͱͰɺίϯςϯπϥ
    ΠλʔͷֶशίετΛ௿ݮɻ

    View full-size slide

  18. w ଞͷ$.4͔Β8PSE1SFTTʹҠߦɻ
    w ಠ࣮ࣗ૷ͷϓϥάΠϯΛ։ൃͯ͠"1*Խɻ
    w όοΫΤϯυͷ։ൃνʔϜ͸ϑϩϯτΤϯυʹ΄ͱ
    ΜͲؔ༩͓ͯ͠ΒͣɺҠߦίετΛ௿ݮ͢Δ͜ͱʹ
    େ͖͘ߩݙɻ

    View full-size slide

  19. ͦͷଞͷࣄྫ
    w 5IF/FX:PSL5JNFT
    w 8JSFE
    w )BQQZUBCMFT
    w /PNBEPCBTF

    View full-size slide

  20. ࠓ೔ͷϋϯζΦϯͷ

    αϯϓϧ

    View full-size slide

  21. • https://github.com/wckansai2016/node-wp-api
    • https://github.com/miya0001/ionic-starter-
    wordpress

    View full-size slide