$30 off During Our Annual Pro Sale. View Details »

WP REST APIとReact Nativeを使ってマガジンアプリを作る

September 01, 2017

WP REST APIとReact Nativeを使ってマガジンアプリを作る

2017年9月3日に開催されたREST祭 - WordBench Osaka & Kyoto & Naganoの発表内容です。
補足記事はこちら。
https://blog.mismithportfolio.com/web/wb20170903

September 01, 2017
Tweet

More Decks by ▲

Other Decks in Programming

Transcript

  1. 813&45"1*ͱ3FBDU/BUJWFΛ
    ࢖ͬͯϚΨδϯΞϓϦΛ࡞Δ

    8PSE#FODIେࡕژ౎௕໺

    View Slide

  2. ࣗݾ঺հ
    ϛεϛɹλΫϚ
    5XJUUFS!NJTVNJ@UBLVNB
    (JU)VC!NJTNJUI
    CMPHIUUQTCMPHNJTNJUIQPSUGPMJPDPN
    *OTUBHSBN!NJTNJUI

    View Slide

  3. ΧϯύΠຊொ΍ͬͯ·͢
    IUUQTLOQIPONBDIJOFU
    5XJUUFS!LBOQBJIPONBDIJ

    View Slide

  4. ࠓ೔ͷ࿩
    w 3FBDU/BUJWF
    w 3FBDU/BUJWFΛָ͠Ήίπ
    w φϏήʔγϣϯ
    w /BUJWF#BTFͰݟͨ໨Λ࡞Ζ͏
    w 813&45"1*ͱ૊Έ߹ΘͤΔͱ໘ന͍͔΋
    ΄ͱΜͲ݄ͷ3FBDU,ZPUPͰ஻ͬͨ಺༰Ͱ͢
    ʢࢀՃͯͨ͠ਓ͍ͨΒ͍͢·ͤΜʜʣ

    View Slide

  5. 3FBDU/BUJWF

    View Slide

  6. 3FBDU/BUJWF
    w 3FBDUKTͰΞϓϦΛ࡞Δ͜ͱ͕Ͱ͖Δ
    w ͭͷίʔυͰJ04ͱ"OESPJEͰಈ͘ʢجຊతʹ͸
    w $44Ͱݟͨ໨Λ࡞ΔɻqFYCPY࢖͏
    w ࠾༻ࣄྫ͸'BDFCPPLɺ*OTUBHSBNɺ"JSCOCɺ4LZQFͳͲ

    IUUQTGBDFCPPLHJUIVCJPSFBDUOBUJWFTIPXDBTFIUNM

    View Slide

  7. 3FBDU/BUJWFΛָ͠Ήίπ

    View Slide

  8. 3FBDU/BUJWFΛָ͠Ήίπ
    w ΞϓϦ࡞ͬͨ͜ͱ͕ͳ͍ͱԿ͔ΒखΛ͚͍͍͔ͭͯ෼͔
    Βͳ͍
    w ΞΠσΟΞ΋ු͔͹ͳ͍͠ʜ
    w ͱΓ͋͑ͣɺͳΜ͔αϯϓϧίʔυ໛ࣸͬͯΈΔʜʁ

    View Slide

  9. 3FBDU/BUJWFΛָ͠Ήίπ
    w ΞϓϦ࡞ͬͨ͜ͱ͕ͳ͍ͱԿ͔ΒखΛ͚͍͍͔ͭͯ෼͔
    Βͳ͍
    w ΞΠσΟΞ΋ු͔͹ͳ͍͠ʜ
    w ͱΓ͋͑ͣɺͳΜ͔αϯϓϧίʔυ໛ࣸͬͯΈΔʜʁ
    ͍΍ɺ·ͣ͸ܗ͔ΒೖͬͯΈΑ͏ʂʂ

    View Slide

  10. 3FBDU/BUJWFΛָ͠Ήίπ
    ܗ͔ΒೖͬͯΈΔʜʁ
    w Α͘ΞϓϦͰ࢖ΘΕͯΔ6*΍ಈ͖ΛਅࣅͯΈΔ
    w ϞοΫ͚ͩ࡞ΔΠϝʔδ
    w υϩϫʔϝχϡʔ΍λϒɺεϫΠϓૢ࡞ͳͲ
    w ػೳ͸ޙճ͠ʢࢥ͍͔ͭͳ͚Ε͹

    View Slide

  11. 3FBDU/BUJWFΛָ͠Ήίπ
    w 3FBDU/BUJWFͷ৔߹ϥΠϒϥϦΛ૊Έ߹
    ΘͤΕ͹ɺϝχϡʔ΍6*͸؆୯ʹ࣮૷Ͱ
    ͖Δ
    w ޙͰ঺հ͠·͕͢ɺϥΠϒϥϦ͚ͭͩ
    Ͱେ࿮͸࢖͍ͬͯΔ
    w Լ෦ͷλϒϝχϡʔ
    w ্෦ͷλϒ͸λοϓͰ΋εϫΠϓͰ΋੾
    ΓସΘΔ
    w ϦετΛΫϦοΫ͢Δͱɺݸผϖʔδ΁
    w σϞ͸ޙ΄Ͳ

    View Slide

  12. 3FBDU/BUJWFΛָ͠Ήίπ
    w ͜ͷശ͑͞࡞ΕΕ͹ɺ͋ͱ͸ػೳΛ৐ͤ
    Δ͚ͩ
    w 5PEPαϯϓϧ΍Կ͔ͷϦʔμʔΞϓϦΛ
    ೖΕͯΈͯ΋ɺಈ͖͕͋ΔͷͰΞϓϦײ
    ͕ग़ͯɺ͓΋͠ΖΈ͕૿͢
    w ಛʹΞΠσΟΞ΋ͳ͍ͳΒɺܗ͔ΒೖΔ
    ͷ΋ख
    w Կ΋ͳ͍ঢ়ଶΑΓɺܗ͚ͩͰ΋࡞ΔͱΞ
    ΠσΟΞු͔ͼ΍͘͢ͳΔ͔΋ʁ
    w ͍͟ΞΠσΟΞු͔Μͩ࣌ʹεϜʔζ

    View Slide

  13. 3FBDU/BUJWFΛָ͠Ήίπ
    w ඞཁͳͷ͸ΞϓϦʹ΄΅ؒҧ͍ͳ͋͘Δ
    φϏήʔγϣϯ
    w ͱɺΑ͋͘ΔσβΠϯ΍ಈ͖

    View Slide

  14. φϏήʔγϣϯ

    View Slide

  15. φϏήʔγϣϯ
    ΞϓϦͷφϏήʔγϣϯ͍Ζ͍Ζ
    4UBDL
    ্ʹॏͳ͍ͬͯ͘
    %SBXFS
    ࠨӈ͔Βग़ͯ͘Δ
    5BC
    Α͘Լ෦ʹ͋Δ΍ͭ
    εϫΠϓͰ੾Γସ͑ΒΕΔ
    λϒ΋

    View Slide

  16. φϏήʔγϣϯ
    ϥΠϒϥϦ໊ΧΦε
    w 3FBDU/BWJHBUJPO
    w 3FBDU3PVUFS/BUJWF
    w /BUJWF/BWJHBUJPOʢ"JSCOC੡ʣ
    w 3FBDU/BUJWF3PVUFS'MVY
    w 3FBDU/BUJWF/BWJHBUJPOʢ8JY੡ʣ
    ͍Ζ͍Ζ͋ΔͷͰ͓ࢼ͋͠Ε

    View Slide

  17. φϏήʔγϣϯ
    ྑͦ͞͏ͩͬͨ΍ͭ
    w 3FBDU/BWJHBUJPOͱ3FBDU/BUJWF3PVUFS'MVY
    w ͲͪΒ΋ൺֱతಋೖ͕؆୯
    w Α͋͘ΔφϏήʔγϣϯ͸༻ҙͯ͘͠ΕͯΔ
    w υΩϡϝϯτ΍αϯϓϧίʔυΛݟΕ͹͍͚Δ
    ࠓճ͸3FBDU/BWJHBUJPO࢖ͬͯ·͢

    View Slide

  18. 3FBDU/BUJWFΛָ͠Ήίπ
    w ඞཁͳͷ͸ΞϓϦʹ΄΅ؒҧ͍ͳ͋͘Δ
    φϏήʔγϣϯ
    w ͱɺΑ͋͘ΔσβΠϯ΍ಈ͖

    View Slide

  19. /BUJWF#BTFͰݟͨ໨Λ࡞Δ

    View Slide

  20. /BUJWF#BTFͰݟͨ໨Λ࡞Δ
    w 3FBDU/BUJWF༻ͷ6*ίϯϙʔωϯτू
    w 3FBDU/BUJWF͸$44࢖͑Δ͚ͲɺҰ͔ΒΞϓϦͬΆ͍ݟ
    ͨ໨ͷ$44ॻ͘ͷେม
    w J04΋"OESPJE΋͜ΕҰͭͰ0,
    w ଞʹ΋ࣅͨΑ͏ͳͷ͚͋ͬͨͲɺTUBSͷ਺Ͱ͜ΕΛ࢖ͬ
    ͍ͯ·͢

    View Slide

  21. /BUJWF#BTFͰݟͨ໨Λ࡞Δ
    ͸͡Ίํ
    OQNJOTUBMMOBUJWFCBTFŠTBWF
    SFBDUOBUJWFMJOL
    Πϯετʔϧ
    ωΠςΟϒͱͷґଘؔ܎ΛϦϯΫ

    View Slide

  22. /BUJWF#BTFͰݟͨ໨Λ࡞Δ
    ࢖͍ํ
    JNQPSU\)FBEFS $POUBJOFS^GSPNbOBUJWFCBTF
    dলུd
    SFOEFS
    \
    SFUVSO
    $POUBJOFS
    )FBEFS
    )FBEFS
    $POUBJOFS


    ^
    dলུd

    View Slide

  23. /BUJWF#BTFͰݟͨ໨Λ࡞Δ
    Α͋͘ΔϦετ΋
    dলུd
    -JTU
    -JTU*UFNJUFN%JWJEFS
    5IVNCOBJMTRVBSFTJ[F\^
    TPVSDF\SFRVJSF ը૾ύε
    ^
    #PEZ
    5FYUԘλϯম͖5FYU
    #PEZ
    3JHIU
    *DPOOBNFBSSPXGPSXBSE
    3JHIU
    -JTU*UFN
    -JTU

    View Slide

  24. /BUJWF#BTFͰݟͨ໨Λ࡞Δ
    ଞʹ΋͍Ζ͍Ζ
    w Ϙλϯ
    w ϑΥʔϜؔ࿈
    w ΧʔυϨΠΞ΢τ
    w λϒ
    w εϐφʔ
    w %FDL4XJQFS

    View Slide

  25. ϞοΫ׬੒
    w 3FBDU/BWJHBUJPOͱ/BUJWF#BTFΛ૊Έ
    ߹ΘͤΔͱ͖ͬ͞ͷϞοΫ͕Ͱ͖͕͋ͬ
    ͨ
    w ͜͜·ͰͰ͖Ε͹͋ͱ͸ػೳΛͷ͚ͬ
    Ε͹ɺΞϓϦ׬੒
    w ָ͍͠

    View Slide

  26. 813&45"1*Λ૊Έ߹ΘͤΔ

    View Slide

  27. 813&45"1*Λ૊Έ߹ΘͤΔ
    w ͓·ͨͤ͠·ͨ͠813&45"1*Ͱ͢
    w ࠓճ͸هࣄͷσʔλΛऔಘͯ͠ɺ͖ͬ͞ͷϞοΫʹ৐ͬ
    ͚·͢
    w ࣗ෼ͷϒϩάΛϚΨδϯΞϓϦʹ
    w ʢଞʹ΋௥ՃͰϥΠϒϥϦ࢖ͬͯ·͢ʣ

    View Slide

  28. %&.0

    View Slide

  29. 813&45"1*Λ૊Έ߹ΘͤΔ
    w هࣄҰཡϖʔδ͸ɺ͢΂ͯͷهࣄͱΧ
    ςΰϦผͷϦετ͕λϒͰ෼͔ΕͯΔ
    w هࣄΛΫϦοΫ͢Δͱɺݸผͷهࣄϖʔ
    δ΁ભҠ

    View Slide

  30. 813&45"1*Λ૊Έ߹ΘͤΔ
    w ͢΂ͯͷهࣄɺΧςΰϦͷ੾Γସ͑͸ɺ
    λϒΛλοϓ͢Δ͔ɺهࣄͷΤϦΞΛ
    εϫΠϓૢ࡞Ͱ
    w 4NBSU/FXT΍(VOPTZΈ͍ͨʹλϒͷ
    ෦෼͸ԣεΫϩʔϧͰ͖ΔͷͰɺΧς
    ΰϦ͕૿͑ͯ΋େৎ෉

    View Slide

  31. 813&45"1*Λ૊Έ߹ΘͤΔ
    w ݕࡧϖʔδ͸ɺϫʔυݕࡧͱλάݕࡧ
    ʢ͜͜͸$PEF(SJEΞϓϦͬΆ͘ʣ
    w ݕࡧ͸813&45"1*Λ࢖ͬͯΔ
    w ݕࡧ͢ΔͱݕࡧϫʔυʹҾ͔͔ͬͬͨ
    هࣄҰཡɻλάΛλοϓ͢ΔͱλάҰ
    ཡ΁

    View Slide

  32. 813&45"1*Λ૊Έ߹ΘͤΔ
    w ࠷ॳ͸ͦΕͧΕ݅දࣔ
    w Լ·Ͱ౸ୡ͢Δͱ௥ՃͰ݅ͣͭಡΈ
    ࠐΈʢແݶεΫϩʔϧʣ

    View Slide

  33. 813&45"1*Λ૊Έ߹ΘͤΔ
    w هࣄϖʔδͷελΠϧ·ͩ·ͩͰ͢
    ͕ʜ
    w αϜωΠϧͱλΠτϧΛॏͶΔࠓ෩ͳ
    ײ͡
    w ԼʹҾͬுΔͱഎܠͷαϜωΠϧ͕͏
    ʹΐͬͱ֦େ͢ΔΞϓϦͬΆ͍ײ͡ʹ
    ʢ5XJUUFSΞϓϦͷϓϩϑΟʔϧഎܠΈ
    ͍ͨͳͷʣ
    w ͜͏͍͏ͪΐͬͱͨ͠ಈ͖޷͖Ͱ͢

    View Slide

  34. 813&45"1*Λ૊Έ߹ΘͤΔ
    w ͜Μͳײ͡Ͱ3FBDU/BUJWFͱ813&45"1*Λ૊Έ߹Θͤ
    Ε͹ΞϓϦ͕Ͱ͖ͪΌ͍·͢
    w ࡉ͔͍ͱ͜͸·ͩͰ͖ͯͳ͍͚Ͳ
    w ׬੒ͨ͠Βਃ੥ͯ͠Έ·͢ʂʢճ໨

    View Slide

  35. ·ͱΊ

    View Slide

  36. ·ͱΊ
    w 3FBDU/BUJWFָ͍͠Αʂ
    w ΞΠσΟΞ͸ͳ͍͚ͲษڧͷͨΊʹ৮ͬͯΈ͍ͨͱ͍͏
    ਓ͸ɺݟͨ໨΍ಈ͖ʢϞοΫʣ͚ͩ௅ઓͯ͠ΈΔͱΞϓ
    ϦײͰָ͍͔ͯ͠΋Ͷʂ
    w ϞοΫ͑͞࡞ΕΕ͹ɺ͋ͱ͸ΞΠσΟΞ͕߱Γ͖ͯͨͱ
    ͖ʹɺػೳΛ௥Ճ͢Ε͹0,

    View Slide

  37. ͓·͚

    View Slide

  38. ͓·͚
    813&45"1*࢖ͬͯ͜Μͳͷ΋࡞Γ·ͨ͠
    IUUQTZPNFEBOOBOFUMJGZDPN

    View Slide

  39. ͓ΘΓ

    8PSE#FODIେࡕژ౎௕໺

    View Slide