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

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

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