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

microCMSを使ってほぼノーコストでフォーム作成機能を追加する

d-suke
February 22, 2022
740

 microCMSを使ってほぼノーコストでフォーム作成機能を追加する

d-suke

February 22, 2022
Tweet

Transcript

  1. microCMSΛ࢖ͬͯ ΄΅ϊʔίετͰ ϑΥʔϜ࡞੒ػೳΛ ௥Ճ͢Δ

  2. ɾͰ͌ʔ͚͢ʢ@d_suke_09ʣ ɾ৽ଔˠΩϡʔίʔϙϨʔγϣϯגࣜձࣾ ɾϚελʔσϡΤϧ ʹϋϚͬͯ·͢ ࣗݾ঺հ

  3. microCMSͷ׆༻ΞΠσΟΞ ͷ1ͭΛ͝঺հ͠·͢

  4. microCMS্Ͱ ϑΥʔϜΛ࡞੒͢ΔػೳͰ͢

  5. ར఺ • ࣄલʹੜ੒Ͱ͖Δ • ͢ͰʹmicroCMSΛར༻͍ͯ͠Δ৔߹͸௥Ճ͕༰қ

  6. ྲྀΕ 1. ϑΥʔϜͷ؅ཧը໘Λ֬ೝ 2. σϞαΠτͰͷදࣔΛ֬ೝ 3. ଞϓϩδΣΫτʹ௥Ճ͢Δํ๏ 4. ࠓճ࣮૷ͨ͠ํ๏

  7. ϑΥʔϜͷ؅ཧը໘Λ֬ೝ

  8. σϞαΠτͰͷදࣔΛ֬ೝ

  9. σϞαΠτͰͷදࣔΛ֬ೝ σϞαΠτ https://custom-forms-with-micro-cms.vercel.app/

  10. ଞϓϩδΣΫτʹ௥Ճ͢Δํ๏

  11. ଞϓϩδΣΫτʹ௥Ճ͢Δํ๏ APIεΩʔϚͷΤΫεϙʔτػೳͰऔಘͨ͠JSONϑΝΠϧͰ APIΛ࡞੒͢Δɻ https://github.com/dc7290/custom-forms-with-microCMS/blob/main/api.json

  12. ݩͷιʔείʔυ͔ΒϑΥʔϜʹඞཁͳϑΝΠϧΛίϐʔɺ ΋͘͠͸git clone͢Δ ଞϓϩδΣΫτʹ௥Ճ͢Δํ๏ https://github.com/dc7290/custom-forms-with-microCMS

  13. ଞϓϩδΣΫτʹ௥Ճ͢Δํ๏ microCMSͷserviceDomain΍API-KEYΛมߋɺ ඞཁʹԠͯ͡ελΠϧΛௐ੔͢Δɻ

  14. ࠓճ࣮૷ͨ͠ํ๏

  15. ࠓճ࣮૷ͨ͠ํ๏ 1. ΧελϜϑΟʔϧυΛෳ਺࡞੒͠ɺࣗ༝ʹϑΥʔϜΛ࡞੒ Ͱ͖ΔAPIΛ༻ҙ͢Δ 2. ͦͷAPI͔Βऔಘͨ͠৘ใΛ΋ͱʹɺϑϩϯτΤϯυଆͰ ϑΥʔϜΛੜ੒͢Δ

  16. ࠓճ࣮૷ͨ͠ํ๏ ӈͷΑ͏ͳΧελϜϑΟʔϧυΛ࡞੒ɻ autocompleteଐੑͷࢦఆ͕Ͱ͖ΔϑΟʔϧυ ͸ݸผʹɺ ͦΕҎ֎͸ΧελϜͱͯ͠௥ՃͰ͖Δઃܭɻ

  17. ࠓճ࣮૷ͨ͠ํ๏ ϑΥʔϜͷੜ੒ίʔυΛ̍෦ൈਮɻ

  18. None
  19. ࠓճ࣮૷ͨ͠ํ๏ େมͩͬͨͱ͜Ζ 1. ͦΕͧΕͷϑΟʔϧυʹҰҙͳIDΛ෇༩͢Δඞཁ͕͋Δɻ 2. autocompleteଐੑͷ౎߹্ɺϑΟʔϧυͷඃΓʹ͍ͭͯΤϥʔΛग़͢ඞཁ ͕͋Δɻ 3. ελΠϧ͸ϓϩδΣΫτ͝ͱʹมߋ͠΍͍͢Α͏ʹ͓͖͍͕ͯͨ͠ɺa11y Λ͓͟ͳΓʹ͸ͨ͘͠ͳ͍ɻ

  20. ࠷ޙʹ • microCMSͷAPIεΩʔϚΤΫεϙʔτ͸΄ΜͱʹศརͩΑ • APIεΩʔϚͷJSONϑΝΠϧ͚ͩྲྀ༻͢Δͷ΋ΞϦͩΑ

  21. ͓ΘΓ