2年間Monacaで自社サービスを運用して学んだこと全部言います

by nbfujiwara

Slide 1

Slide 1 text

೥ؒ.POBDBͰ ࣗࣾαʔϏεΛӡ༻ͯ͠ ֶΜͩ͜ͱશ෦ݴ͍·͢ .POBDB6( Page.1

Slide 2

Slide 2 text

౻ݪ ༟࢘ גࣜձࣾχδϘοΫε ϓϨΠϯάϚωʔδϟతͳ࢓ࣄ 5ZQF 4DSJQU͕޷͖ લճ.POBDB6(ͷήʔϜσϞ͕޷ධʢͩͬͨ͸ͣʣ ϞφΧϓϨε IUUQTQSFTTNPOBDBJPNPOBDBVH ͔Βੋඇ͝ཡ͍ͩ͘͞ ʢࠓ೔ͷ಺༰ͱ͸શવҧ͍·͢ʣ Page. 2 ࣗݾ঺հ

Slide 3

Slide 3 text

8FCϒϥ΢β൛ϦϦʔε .POBDBΞϓϦ൛ϦϦʔε Page. 3 ʮϨγϙʂʯϦϦʔε

Slide 4

Slide 4 text

Page. 4 Ϩγϙͱ͸

Slide 5

Slide 5 text

ϒϥ΢β൛ͷத͔Β ࠷খݶͷΑ͘࢖͏ϝΠϯػೳΛΞϓϦ൛ͱ࣮ͯ͠૷ Page. 5 ͸͡Ίͯͷ࣮Ҋ݅.POBDB։ൃ ϗʔϜ ͓஌Βͤ ձһԾొ࿥ ձһຊొ࿥ ձһ৘ใमਖ਼ ϩάΠϯ ର৅঎඼Ұཡ ϨγʔτԠื ϙΠϯτ֬ೝ ৹ࠪ݁Ռ֬ೝ ϙΠϯτަ׵ '"2 ͓໰͍߹Θͤ ར༻ن໿ ϔϧϓ 4/4࿈ܞ ɾ ɾ ੺ࣈ͚ͩΛΞϓϦ൛Ͱ࣮૷ ͦͷଞ͸8FCͰ

Slide 6

Slide 6 text

࣌ؒͷۭ͍͍ͯͨΤϯδχΞʹ 3&45"1*Λ࡞੒ͯ͠΋Β͓͍ͬͯͨ ͍ͭͰʹυΩϡϝϯτ΋ ʢࣗՈ੡ͳΜͪΌͬͯ4XBHHFSʣ Page. 6 ͸͡Ίͯͷ࣮Ҋ݅.POBDB։ൃ

Slide 7

Slide 7 text

ؔ܎ऀશһू·ͬͯ ʮ͓͞ΘΓձʯΛෳ਺ճ࣮ࢪ Page. 7 σόοΨʔ࢖͍΍͍͢ ͦͷ৔ͰҰؾʹย෇͚Δ 商品の表示は一列？段組み？フェードイン・アウトのスピードはどれくらい？ここのマージンどれくらい？もうちょい遅く、いや遅すぎ、あーそれそれ備考が短い時表示が微妙だね

Slide 8

Slide 8 text

Page. 8 ͦͷ݁Ռ

Slide 9

Slide 9 text

ϤΧολϤΧολ ʘ ?P? ʗ Page. 9 ͸͡Ίͯͷ࣮Ҋ݅.POBDB։ൃ

Slide 10

Slide 10 text

lΫϥ΢υ*%&্Ͱ։ൃ l0OTFO 6*YK2VFSZ lը໘ʢPOTQBHFʣ୯ҐͰ)5.-ɾ+4ɾ$44 ͸ͦΕͧΕ ϑΝΠϧͣͭʹʢಠཱੑॏࢹʣ l8FC։ൃͷϊϦͰ+4ϥΠϒϥϦΛར༻ l$ISPNF%FW5PPMT͕࢖͑Δ͜ͱʹײಈ Page. 10 ͋ͷ࣌ͷॳظ։ൃΛࢥ͍ग़ͯ͠

Slide 11

Slide 11 text

lΫϥ΢υ*%& ˠ .POBDB -PDBM,JU lίʔυ͸ࣾ಺(JU؅ཧ lόοΫΤϯυ"1*ͷ઀ଓઌΛ ։ൃαʔό ˠ ϩʔΧϧ7BHSBOU l(PPHMF"OBMZUJDTͰΠϕϯττϥοΫ Page. 11 ϦϦʔεޙ͙͢ʹ΍ͬͨ͜ͱ

Slide 12

Slide 12 text

͋Γ͕͍ͨ͜ͱʹԿ౓͔57Ͱ์ө ˠΞΫηεߴෛՙͰαʔό͕མͪΔ NPOBDBΞϓϦΛ࡞Δલ΋ޙ΋ Page. 12 <༨ஊ>ΞϓϦ൛Λ࡞ͬͯΑ͔ͬͨ

Slide 13

Slide 13 text

ΞϓϦ͕͋ͬͨΒɺ์өཌ೔ͱ͔΋Ϣʔβొ࿥਺͕ ίϯελϯτʹ૿͑ͯ͘Εͨ Page. 13 <༨ஊ>ΞϓϦ൛Λ࡞ͬͯΑ͔ͬͨ アプリ後アプリなかった時

Slide 14

Slide 14 text

ΘΓͱେ͖ΊͳվमΛͨ͘͠ͳΔ lϢʔβొ࿥΋ΞϓϦͰʢػೳ௥Ճʣ lσβΠϯͷ࡮৽ Page. 14 ൒೥ޙ

Slide 15

Slide 15 text

l"OHVMBSͷ࠾༻ –0OTFO6*ϕʔε –)5.-தʹ OHΛάΠάΠຒΊࠐΈ –ը໘୯Ґ+4Λ ͦͷ··$POUSPMMFSʹͯ͠ –K2VFSZΛάΠάΠফͭͭ͠ –ϩδοΫΛ.PEFMͱ4FSWJDFʹ෼͚ͳ͕Β෼཭ l.POBDBGPS7JTVBM4UVEJPͰ։ൃ –ͨͩͷΞαΠϯΤϯδχΞͷ޷Έʢࠓ͸ར༻ͤͣʣ l௥Ճ࢓༷ͰᎍΊΔ΋࡞Γ௚ࣗ͠ମ͸εϜʔζ Page. 15 Ψϥοͱ࡞Γม͑

Slide 16

Slide 16 text

Page. 16 σΟϨΫτϦߏ੒ DPOGJH ͦͷ໊ͷ௨Γ MJCωοτ͔ΒरͬͨϥΠϒϥϦ NPEFM.PEFM4FSWJDF NZMJC ࣗࣾ੡+4ϥΠϒϥϦʢ54ʣ QBHF$POUSPMMFS

Slide 17

Slide 17 text

Page. 17 +4ϥΠϒϥϦ lQSFGJYGSFF – XFCLJU΄͛΄͛ͱ͔ॻ͘ͷ͕໘౗ͳͷͰ lNBTPOSZ – άϦουϨΠΞ΢τ lJNBHFTMPBEFE – ϩʔσΟϯάͷѻ͍Λָʹ l("-PDBM4UPSBHF – QIPOF(BQ༻("ϥούʔ lWBMJEBUF – ೖྗνΣοΫΛָʹ lODNC – /$.#ͷ"1*ΛݺͿͨΊ – ͜Ε͸.POBDBͷ+4$44ίϯϙʔωϯτ͔Β௥Ճ – QMVHJO௥ՃͰ࢖͏ͷ͸ʮXJOEPX/$.#NPOBDBIPHF ʯ ͬͪ͜͸ʮOFX/$.# ʯ

Slide 18

Slide 18 text

Page. 18 DPOGJH಺Ͱ var module = angular.module('recipoApp'); //module.constant('SYSTEM_ENVIRONMENT', 'local'); //module.constant('SYSTEM_ENVIRONMENT', 'development'); module.constant('SYSTEM_ENVIRONMENT', 'production'); switch (SYSTEM_ENVIRONMENT) { case 'local': config = { apiUrlBase:'https://local.recipo.jp/api/v2/', googleAnalyticsTrackingId: 'UA-xxxxxxxx-1', }; break; case 'development': config = { apiUrlBase:'https://dev.recipo.jp/api/v2/', googleAnalyticsTrackingId: 'UA-xxxxxxxx-1', ,,,, };

Slide 19

Slide 19 text

ετΞʹ্͛ͨΞϓϦ͕ ։ൃαʔό޲͍ͯ·ͨ͠ ʘ ?P? ʗ Page. 19 ࣦഊ͢ΔՄೳੑͷ͋Δ΋ͷ͸ࣦഊ͢Δ

Slide 20

Slide 20 text

։ൃ؀ڥ·ΘΓͷ࿩ Page. 20 ଓ͖·ͯ͠

Slide 21

Slide 21 text

جຊ-PDBM,JUΛ࢖༻ –ଞϓϩδΣΫτ͸ϝϯόʔ࣍ୈͰΫϥ΢υ*%&࢒ଘ –Ͳ͏΍ͬͨΒซ༻Ͱ͖ΔΜͩΖ͏ʁ ͨͩͷసૹπʔϧͱͯ͠࢖༻ ϓϨϏϡʔػೳ͸͋·Γ࢖Θͣ –.POBDBσόοΨʔ –ΧελϜϏϧυ൛.POBDBσόοΨʔ –ΞυϗοΫϏϧυ Ͱݕূɻ࢖͍෼͚ʹ׳Ε͕ඞཁ ʢ৽ϝϯόʔ͸࢖͍ॴΛ໎͍͕ͪʣ Ϋϥ΢υ*%&Ͱे෼ͱࢥ͍ͬͯͨ࣌΋͋Γ·ͨ͠ Ұ౓࢖͏ͱ΋͏཭ΕΒΕͳ͍ Page. 21 Ϋϥ΢υ*%& WT-PDBM,JU

Slide 22

Slide 22 text

ΤσΟλ͸ϑϦʔμϜ FEJUPSDPOGJH͚ͩ͸ઃஔ Page. 22 ΤσΟλ [*] charset = utf-8 indent_style = space insert_final_newline = true trim_trailing_whitespace = true [*.{js,css}] end_of_line = crlf indent_size = 4

Slide 23

Slide 23 text

IUUQTRJJUBDPNTPJDIJSP@OJTIJ[BXBJUFNTEFDDCE Page. 23 $*࠷ߴ

Slide 24

Slide 24 text

HJU Ͱ NBTUFSʹQVTIͨ͠Β ͦͷ࣌఺ͰͷϏϧυΛϝϯόʔશһͷ୺຤ʹ഑෍ͯ͠ ΠΣʔʔʔΟΈ͍ͨͳ ݱࡏͰ͸.POBDB$*Λར༻ͯ͠ ετΞ΁ͷΞοϓϩʔυ·Ͱ͓·͔ͤ ಋೖલ͸ջٙతͰͨ͠ Ұ౓࢖͏ͱ΋͏཭ΕΒΕͳ͍ Page. 24 $*࠷ߴ

Slide 25

Slide 25 text

DPSEPWBQMVHJOTQMBTITDSFFO DPSEPWBQMVHJODBNFSB DPSEPWBQMVHJOJOBQQCSPXTFS DPSEPWBQMVHJOXIJUFMJTU DPSEPWBQMVHJOGJMF DPSEPWBQMVHJOBQQSBUF DPSEPWBQMVHJODSPTTXBMLXFCWJFX ODNCQVTINPOBDBQMVHJO DPSEPWBQMVHJOOJGUZQVTIJDPO DPSEPWBQMVHJOSFQSP Page. 25 Քಇத1MVHJO

Slide 26

Slide 26 text

1VTI௨஌ͷͨΊ͚ͩʹར༻ ϑϦʔͷൣғͰ͔ͳΓ࢖͑Δ .POBDBϢʔβ༻ͷ৘ใଟ͠ Page. 26 /JGUZ༷

Slide 27

Slide 27 text

೚ҙநग़ͨ͠Ϣʔβͷ࢖༻ঢ়گΛ ಈըͰอଘͯ͘͠ΕΔ αϙʔτ͕਌੾ $SPTTXBML͕ର৅֎Ͱ "OESPJE͸ਅͬ҉ಈը͕ଟ͍ Page. 27 3FQSP༷

Slide 28

Slide 28 text

Page. 28 ͦͷଞͷ4%,ʢผΞϓϦʣ

Slide 29

Slide 29 text

Ͳ͏ͬͯ͜ͱͳ͍मਖ਼Ͱ ͳ͔ͥΞϓϦ͕ϏϧυͰ͖ͳ͘ͳΔ Page. 29 4%,ࣄ݅

Slide 30

Slide 30 text

$PSEPWB1MVHJOͷ63-ࢦఆ͸΍ΊΑ͏ Page. 30 4%,ࣄ݅ 1MVHJOຊՈͷ6QEBUF͕ىҼ ;*1 PS όʔδϣϯԘ௮͚ʹͨ͠ ผϦϙδτϦͷ63-ࢦఆ

Slide 31

Slide 31 text

Page. 31 4%,ࣄ݅ 4%,͕ೖΒͳ͍ ·ͨ͸ ͳ͔ͥΞϓϦ͕མͪΔ ·ͨ͸ ଞ4%,ͱͷ߹ٕͤͰෆ۩߹

Slide 32

Slide 32 text

Page. 32 4%,ࣄ݅ QMVHJOYNMͷ ίίΛٙ͏ʂ ʢશQMVHJOΛ௨ͯ͠ʣ

Slide 33

Slide 33 text

Page. 33 4%,ࣄ݅ ͦΕͰ΋ ͜ͷઓ͍͸ऴΘΒͳ͍

Slide 34

Slide 34 text

lCVJMEHSBEMF Λमਖ਼ɾ௥Ճͨ͠ lNPOBDBͷ9$PEFόʔδϣϯ΍$PSEPWBόʔδϣϯΛ֬ ೝͯ͠ɺ4%,ଆ͸ͪΐͬͱݹ͍΍ͭΛ࢖ͬͨ lQMVHJOYNMͰQMVHJOλάͷWFSTJPOΛʮʯ͔Β ʮʯʹม͑ͨ l΅ͦ࢒೦ͳ͕ΒఘΊͨ΅ͦ lमਖ਼ඞਢɻͦͷ··͍͚Ε͹ϥοΩʔ͙Β͍ͷؾ֓ Page. 34 4%,ࣄ݅&9

Slide 35

Slide 35 text

4%,͸ଘࡏ͢Δ͕ $PSEPWB1MVHJO͸ଘࡏ͠ͳ͍৔߹ Page. 35 4%,໰୊

Slide 36

Slide 36 text

NPOBDBΛ࢖Θͳ͍બ୒ࢶ΋ ߟྀͨ͠ํ͕͍͍ Page. 36 4%,໰୊

Slide 37

Slide 37 text

lଞͷ$PSEPWB1MVHJOΛࢀߟ lτϥΠΤϥʔ lϏϧυ଴ͪ࣌ؒʹ଱͑Δ l$PSEPWBٕज़ऀΛ୳͢ lωΠςΟϒΞϓϦٕज़ऀΛ୳͢ Page. 37 4%,໰୊ 辛いがくぐり抜ければマッチョになれる

Slide 38

Slide 38 text

Page. 38 $SPTTXBMLʹ͍ͭͯ 標準WebView Crosswalk パフォーマンス普通早い（※いまいち実感しなかったり、誰かの端末で逆に重かったり）端末依存たくさんある大変少ない嬉しい apkのサイズ小さい無駄に大きい

Slide 39

Slide 39 text

Page. 39 $SPTTXBMLʹ͍ͭͯ 標準WebView Crosswalk パフォーマンス普通早い（※いまいち実感しなかったり、誰かの端末で逆に重かったり）端末依存たくさんある大変少ない嬉しい apkのサイズ小さい無駄に大きい inAppBrowser 怪しくない怪しい！！

Slide 40

Slide 40 text

lηογϣϯपΓ͕ಛʹո͌͌͌͌͠ lʮϨγϙʂʯͷΑ͏ͳϒϥ΢β൛͋Γ͖ͷ΋ͷ͸Өڹ౓ ߹͍͕େ͖͍ lϒϥ΢β൛41දࣔͷͨΊʹɺ୺຤ґଘରԠ͸ผ్΍ͬͯ Δ lػೳʹΑͬͯ͸ΞϓϦ֎ϒϥ΢βʹಀ͛ͨΓ l$PSEPWBόʔδϣϯ΋Өڹ͢ΔͷͰɺະͩ݁࿦ग़ͣ Page. 40 $SPTTXBMLYJO"QQ#SPXTFS

Slide 41

Slide 41 text

ݸਓతʹ͸ଟ͘ͷ৔߹ʮ$SPTTXBMLΛ࠾༻ʯ ͕ਖ਼ղͳؾ͕͢Δ Ͱ΋ɺαʔϏεࣗମ͕8FCϒϥ΢β൛΋ ؤு͍ͬͯΔ৔߹͸ɺݕ౼Λଓ͚ͨํ͕Α͍ Page. 41 $SPTTXBMLYJO"QQ#SPXTFS

Slide 42

Slide 42 text

K2VFSZͰදݱ͢Δͱ Page. 42 ӡ༻ʹ͓͍ͯ $('.product_name').text(APIから取得した商品名); $('.product_name').html(APIから取得した商品名HTML); ౰ॳͷίʔυ ૿͍͑ͯ͘ίʔυ

Slide 43

Slide 43 text

αʔόαΠυ͔Β7JFXΛૹΔؾ࣋ͪѱ͞͸͋Δ͕ ͜Ε͸ɺ.POBDBΞϓϦͷϝϦοτͰ΋͋Δؾ͕͢Δ ΉͪΌͪ͘ΌͰ͕͢ɺ௒ԠٸॲஔͰ TDSJQUλάಥͬࠐΜͩ͜ͱ΋͋Γ·͢ Page. 43 ӡ༻ʹ͓͍ͯ

Slide 44

Slide 44 text

l1VTI௨஌ͷূ໌ॻ͕੾ΕͯͨΓ͢Δ l$PSEPWBΞοϓσʔτ͕དྷΔͷ͕ා͔ͬͨΓ͢Δ ෆఆظʹωΠςΟϒΤϯδχΞͰͳ͍ͱݫ͍͠λΠϛϯά ͕͋Δ Ͱ΋ɺωΠςΟϒͷ஌͕ࣝগͳ͍ϝϯόʔ͕୲౰ͩͬͨΓ ͢Δ Page. 44 ӡ༻ʹ͓͍ͯ

Slide 45

Slide 45 text

ʢ4FMFOJVNͰ&&ςετΛճ͢ͱ͜Ζ·Ͱ͸΍ͬͨͷͰɺ/FYU4UFQʣ "QQJVNΛ࢖ͬͯ&&ςετʹνϟϨϯδத Page. 45 ࠓޙͷల๬

Slide 46

Slide 46 text

-PXίετ .JEEMFΫΦϦςΟ ݟੵ΋Γ࣌ʹ͓͚ΔҰબ୒ࢶ ʮϒϥ΢βͳΒສɺ.POBDBͳΒສɺ ૉͷ"OESPJEJ04ͳΒສɺɺͲΕʹ͠·͢ʁʯ ϨγϙҎ߱ɺҊ݅Λ.POBDBͰ։ൃ σβΠφ্͕ΓͷϑϩϯτΤϯδχΞ΍ɺ৽ਓ͕ઓྗԽ͢Δͷ ͕ૣ͍ 1MVHJOͰࠔͬͨ࣌ɺࣗ਎Ͱ$PSEPWB΍9$PEFͰ΍Γͨ͘ͳΔ͕ɺ ΍ͬͨΒNPOBDBͷҙຯͳ͘ͳΔͱࢥ͍ɺ౿ΈͱͲ·Δ Page. 46 ฐࣾʹ͓͚Δ.POBDB

Slide 47

Slide 47 text

ܦݧΛੵΜͩ5FDIࢤ޲ΤϯδχΞʹ͸ਓؾ͕ͳ͍ ʢ෺଍Γͳ͞ʹىҼʣ .POBDBࣗମͨͩͷπʔϧɻ׳Εෆ׳Εͦ͋͜Ε ֶͿඞཁͷ͋Δ΋ͷͰ͸ͳ͍ +4ΛΨγΨγॻ͍ͯ དྷΔ͔΋͠Εͳ͍ϒϥ΢βٯऻͷ࣌୅ʹඋ͓͑ͯ͘ Page. 47 ฐࣾʹ͓͚Δ.POBDB

Slide 48

Slide 48 text

͋Γ͕ͱ͏͍͟͝·ͨ͠ Page. 48 Ҏ্Ͱ͢