沖縄のバスがつらすぎて自分でバスアプリ作った話 / ngk2018b-okinawabus

NGK2018B 昼の部（LT大会）
沖縄のバスがつらすぎて自分でバスアプリ作った話

Transcript

1. 沖縄のバスがつらすぎて 自分でバスアプリ作った話 2018/12/22 NGK2018B னͷ෦ʢLTେձʣ @girigiribauer
2. \ 沖縄から来ました /
3. コミュニティの紹介 • Nagoya Frontend User Group ʹ͍ͭͯ • ඇӦརͷίϛϡχςΟͳͷʹ
 γϧόʔεϙϯαʔʢʁʁʁʣ • ςʔϚ: ӡӦ͕Μ͹Βͳ͍
5. みんなで金を出す流れ
6. みんなで金を出す流れ
7. 運営頑張らない
8. 運営頑張らない • ΋͘΋͘ձͱ
 ӡӦ͕Μ͹Βͳ͍͸
 ͘͢͝߹͏
9. 勉強会の会場を 貸してくれる会社は 良い会社！
10. 勉強会の会場を貸してくれる 会社は良い会社！ • 2018೥͸ʰגࣜձࣾMisocaʱ
 ʰ༗ݶձࣾ དྷ੘઒ిࢉʱʰגࣜձࣾελϝϯʱ
 ͷ3ࣾΛ͸͡Ίͱͨ͠ձ৔Λ͓आΓ͠ɺ
 ΋͘΋͘ձΛଓ͚Δ͜ͱ͕ग़དྷ·ͨ͠ • དྷ೥͸ΑΓͨ͘͞ΜͷձࣾΛཔΒͤͯ΄͍͠ɺ
 ษڧձձ৔Λି͍͚ͯͨͩ͠Δձࣾɾஂମ͞Μ
 େืूͩΑʂ
11. Slack 誰でも入れます • Slack ্ͰϑϩϯτΤϯυपΓͷ࿩΍ɺ
 ษڧձ։࠵ͷ࿩΋ͯ͠·͢ • ࠓ೥͸ʰӡӦ͕Μ͹Βͳ͍ʱग़དྷͨ
 དྷ೥΋Ҿ͖ଓ͖ʰӡӦ͕Μ͹Βͳ͍ʱ
12. TypeScript
 やりたくないです？？？ • ݸਓతʹ͸ TypeScript ͷษڧձΛ
 ΍ͬͨํ͕ྑ͍ͷͰ͸ʁͱࢥ͍ͬͯΔ
 ʢͱ͍͏͔΍Γ͍ͨʣ • ΍Γํ೰·͍͠ɾɾɾ
 ৭ΜͳεϖγϟϦετͷํ͍Δͱࢥ͏ͷͰ
 ஌ܙΛ͓आΓ͍ͨ͠ • ଓ͖͸ Slack Ͱʂ
13. ここから趣味の話
14. 沖縄のバスがつらすぎて 自分でバスアプリ作った話 ＿人人人人人人人人人人人人人＿ ＞ 時間ぎりぎりまで話します ＜ ￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^￣
15. 沖縄のバスが分からない
16. 沖縄のバスが分からない • ԭೄຊౡʢnot Ϧκʔτ஍ʣͷ࿩ • ެڞަ௨ػؔɺಹ೼ࢢ಺ͷϞϊϨʔϧ
 ʢΏ͍Ϩʔϧʣͱόε͘Β͍͔͠ͳ͍ • ಹ೼ࢢ಺ͷौ଺௒΍͹͍ɺ
 ஌Βͳ͍؍ޫ٬͸ϨϯλΧʔฦ࣌͢ʹࢮ͵ • మಓ͕ͳ͍෼ɺ૬ରతʹόεͷॏཁ౓͕ߴ͍
17. 分からないから乗ってみた • ࠓ೥2݄ʹॳΊͯ৐ͬͨ • ಹ೼ࢢͷόελʔϛφϧ͔Β
 ίβʢԭೄࢢʣ෇ۙ·Ͱ diff औΓʹߦ͖͍ͨ • Wikipedia ͷ ”ԭೄຊౡͷόε࿏ઢ” ʹ
 ൺֱత៉ྷʹ·ͱ·͍ͬͯΔ • https://ja.wikipedia.org/wiki/ԭೄຊౡͷόε࿏ઢ
18. 分からないから乗ってみた
19. 分からないから乗ってみた
21. 分からないから乗ってみた • ʮΑʔ͠ɺ23൪ͷ۩ࢤ઒ઢͱ΍Βʹ
 ৐Ε͹ྑ͍ͷͩͳʁʯ →結果爆死
22. なるほど分からん
23. なるほど分からん
24. なるほど分からん
25. なるほど分からん
26. 行って利用してみないと
 分からないこと • ࠓ೥෼ͷௐࠪΛ
 શ෦આ໌͍ͯ͠Δͱ͖Γ͕ͳ͍ɾɾɾ • ҰݴͰ·ͱΊΔͱૉਓ͓அΓͳαʔϏε • ஍ݩຽͱʮԭೄͷόεͻͲ͍ΑͶʔʯͬͯ
 ࿩Λ͢Δͱൺֱత͙͢ʹଧͪղ͚Δઆ
27. 困った・・・
28. ならば、エンジニアリングで
 解決しよう！
29. 自分の困っていることを
 エンジニアリングで解決する
30. 自分の困っていることを
 エンジニアリングで解決する • ๻͸όεϚχΞʹͳΓ͍ͨΘ͚͡Όͳ͍ • ๻͸ͨͩ໨త஍ʹ޲͔͏όεͷ൪߸͕
 ஌Γ͍͚ͨͩͳͷʹɺ
 ͳͥ͜Μͳۤ࿑͠ͳ͍ͱ͍͚ͳ͍ͷ͔ɾɾɾ • ࠓ͍Δόεఀͱ໨త஍ͷόεఀ͚ͩ
 ஌ͬͯΕ͹࢖͑ΔόεΞϓϦ
31. 自分の困っていることを
 エンジニアリングで解決する
32. データさえ取って来れれば
 こっちで作れる • puppeteer Ͱ ΫιΞϓϦɾΫιαʔϏε͔Β εΫϨΠϐϯά • HTML ϨϕϧͰσʔλ͕දࣔ͞Ε͍ͯΕ͹ɺ
 ௨৴աఔ͸ؾʹ͠ͳͯ͘ྑ͍ • Ajax ͰϞʔμϧͷத਎Λ HTML ͝ͱ΍ΓͱΓͯ͠Δ
 αʔϏεʢʁʣͰ΋ɺൺֱత৺Ժ΍͔ʹऔͬͯ͜ΕΔ • ୁั͞Εͳ͍Α͏ɺϦΫΤετස౓ʹؾΛ͚ͭΔ • લྫ: Ԭ࡚ਤॻؗࣄ݅ • ษڧձձ৔΍ίϫʔΩϯάεϖʔεͳͲͷ Wi-Fi Ͱ͸
 ۃྗεΫϨΠϐϯά͠ͳ͍ʢ໎࿭͔͚ͳ͍ʣ
33. { "4887bda7-0731-4396-ae92-4aae41d7c32d": { "courseId": "4887bda7-0731-4396-ae92-4aae41d7c32d", "courseName": "टཬ຀ࢤઢ", "courseNo": "1", "courseGroupId": "63b39b63-dbf6-413d-912c-60e65acd3d25", "courseGroupName": "टཬ຀ࢤઢ", "routes": [ { "id": "852af1bb-ba27-442b-b570-006161feb166", "name": "टཬ຀ࢤઢ॥؀टཬ຀ࢤઢ" } ], "stations": [ { "id": "0649244c-4c74-4314-9f27-d8cbe9d14f07", "name": "৽઒Ӧۀॴ", "hiragana": "ΞϥΧϫΤΠΪϣ΢γϣ", "lat": 26.204163565332134, "lon": 127.72591024154555, "certain": true }, { データさえ取って来れれば
 こっちで作れる [ { "ja": "੎ཧ٬", "en": "Jitchaku", "candidates": [ "੎ཧ٬", "Jitchaku", "ͬͪ͡Ό͘" ] }, { "ja": "ୈҰ஥੢", "en": "Daiichi Nakanishi", "candidates": [ "ୈҰ஥੢", "Daiichi Nakanishi", "͍͍ͩͪͳ͔ʹ͠" ] }, { "ja": "஥੢", "en": "Nakanishi",
34. 取ってきたデータを元に
 雑に作る • React Native ͷͪ React • React Native ͷͳΜͪΌͬͯ CSS ͕ͭΒͯ͘ɺ
 ΋͏ Web Ͱྑ͘Ͷʁͬͯͳͬͨ • औ͖ͬͯͨ࿏ઢ৘ใ͕ 8MB ͩͬͨͷͰɺ
 API ʹ͠Α͏͔໎͏ • ·ͣ͸ࣗ෼͕࢖͍͍͚ͨͩͩ͠·͍͍͔͋ • ී௨ʹखݩʹஔ͍ͯ import ͪ͠Ό͏
35. \ もくもくできた /
36. 実際に使ってみた
37. あえて普段行かないような
 ところへ移動計画を立てる • ಹ೼ࢢ͔Β༩ಹݪொ΁ߦ͘όε࿏ઢΛ
 ׆༻ͯ͠ΈΔ • ߦͬͨ͜ͱͳ͍͠શવ෼͔Βͳ͍
 ʢͦ΋ͦ΋؍ޫ஍Ͱͳ͍ʣ
38. あえて普段行かないような
 ところへ移動計画を立てる
39. 那覇バスターミナル、
 番号だらけで
 分からないが・・・
40. 分かる、分かるぞ・・・！
41. 分かる、分かるぞ・・・！
42. • ಹ೼৽։ઢͱ͔๐੉౦ઢͱ͔ɺ
 ࿏ઢશવ෼͔Βͳ͍͚Ͳɺ
 ͲΕ͕དྷͯ΋৐͍͍ͬͯͬͯ෼͔Δʂ • όεձࣾ͢Β஌Βͳ͍͚Ͳɺ
 ݱࡏ஍ͱ໨త஍ͷόεఀ͑͞஌ͬͯΕ͹৐ΕΔʂ • ಹ೼όελʔϛφϧ͸৭Μͳόε͕དྷΔ͚Ͳ
 ࣗ෼ͷ࡞ͬͨ Web ΞϓϦͷ͓͔͛Ͱɺ
 Ͳ͜Ͱ଴ͬͯΕ͹͍͍͔͕෼͔ͬͨ 分かる、分かるぞ・・・！
43. まとめ
44. まとめ • ࠔ͍ͬͯΔ͜ͱΛΤϯδχΞϦϯάͰղܾ͢Δ
 ʢΤϯδχΞͳͷͰʣ • ΋͘΋͘ձʹࢀՃͯࣗ͠Β࡞Δ • ࠔ͍ͬͯΔ͜ͱΛݟ͚ͭΔʹ͸ɺ
 ੵۃతʹ diff ΛऔΓʹߦ͘
 ͭ·Γ͸ diff ΛऔΔ
45. ※なお注意点 • ͨͿΜ͜͜·Ͱ LT Ͱ஻Εͦ͏ʹͳ͍͚Ͳ
 ҰԠॻ͍͓͖ͯ·͢ • ݱࡏɺ·ͩܥ౷͝ͱͷରԠ͕׬શͰ͸ͳ͍όʔδϣϯͰ͢
 ʢ༵೔΍࣌ؒʹΑͬͯϧʔτ͕एׯҧ͏΍ͭʣ • ্هͷܥ౷໰୊͕ղܾ͔ͯ͠Βਖ਼ࣜϦϦʔε͠·͢
 Ͱͳ͍ͱۤ৘ରԠ͠ͳ͍ͱ͍͚ͳ͘ͳΔͷͰɾɾɾ
 ʢͨͩ͠΋͏ຊ൪ެ։͸͞Ε͍ͯͨΓʣ • Ͳ͔͔͜Β͓ۚΛ΋Βͬͯ΍͍ͬͯΔΘ͚Ͱ͸͋Γ·ͤΜ
 झຯͷ࿩Ͱ͢
46. ご静聴
 ありがとうございました！