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

学生エンジニア、 ドキドキ初OSSコミットへの挑戦🎉

Shagamii
August 10, 2017

学生エンジニア、 ドキドキ初OSSコミットへの挑戦🎉

Nihonbashi.js #2 fix typo! でのkeynoteです。
「学生エンジニア、 ドキドキ初OSSコミットへの挑戦🎉」

Shagamii

August 10, 2017
Tweet

More Decks by Shagamii

Other Decks in Programming

Transcript

  1. ֶੜΤϯδχΞɺ
    υΩυΩॳOSSίϛοτ΁ͷ௅ઓ
    ࡔ্ ྤҰ

    View Slide

  2. ࠓ೔͸ɺ
    OSSʹίϛοτ͍͚ͨ͠ͲҰา͕౿Έग़ͤͳ͍ʂ
    ͦΜͳํʹϓϩάϥϛϯάྺ̍೥ͷֶੜΤϯδχΞͰ΋
    ίϛοτͰ͖ͨ࿩Λฉ͍ͯ
    ͖͔͚ͬʹ͍͚ͯͨͩͨ͠Βͱࢥ͍·͢ɻ

    View Slide

  3. ౦ژཧՊେֶ ޻ֶ෦ ৘ใ޻ֶՊ ̎೥
    ࡔ্ ྤҰ
    ϑϩϯτΤϯυΤϯδχΞ
    Twitter: @RyuichiSakagami GitHub: Shagamii

    View Slide

  4. גࣜձࣾ ΩϡΞɾΞοϓ Πϯλʔϯ
    JavaScript(ReactNative)
    ֶੜஂମ Unitus
    JavaScript(React)

    View Slide

  5. ઌ೔ɺOSSॳίϛοτΛୡ੒͠·ͨ͠ʂ

    View Slide

  6. ॳOSSίϛοτΛୡ੒ͯ͠ࢥͬͨ͜ͱ…
    ࢥͬͯͨΑΓϋʔυϧߴͳ͍΍Μʂ

    View Slide

  7. ॳΊͯͷOSS׆ಈ
    react-native-pathjs-charts
    ReactNativeͰνϟʔτ΍άϥϑΛѻ͏ϥΠϒϥϦ

    View Slide

  8. ίϛοτ಺༰
    ϨΠμʔνϟʔτͷϥϕϧΛΫϦοΫ͢Δͱͦͷϥϕϧ໊ͱ஋Λऔಘ
    ͢Δ

    View Slide

  9. DEMO

    View Slide

  10. ͦ΋ͦ΋ͷܦҢ

    View Slide

  11. PC΋͖ͬͯͯΔʁ
    ΩϡΞɾΞοϓʹΠϯλʔϯͷਃ͠ࠐΈ…
    ͸͡Ί·ͯ͠…ࡔ্Ͱ͢…

    View Slide

  12. ಥવϖΞϓϩ͕࢝·ΓɺϨʔμʔνϟʔτͷ࡞੒՝୊

    View Slide

  13. ޙ೔…
    npmͰϨʔμʔνϟʔτͷ
    ϥΠϒϥϦΛެ։͢Δ·Ͱ͠·͠ΐ͏ʂ

    View Slide

  14. ͑͐ʂʁnpmϥΠϒϥϦͰެ։ʂʁOSSʂʁ

    View Slide

  15. ͭΑͦ͏ͳ΍ͭ΍Μʂ

    View Slide

  16. ৭ʑͳ؍఺͔Βߟ͑ͯΈͨखॱ
    1. ྨࣅϥΠϒϥϦ͕ͳ͍͔ௐࠪ
    2. ԿΛ΍ΕΔ΋ͷͳͷ͔ΠϯλʔϑΣΠεΛܾΊΔ
    3. ໊લΛܾΊΔ
    4. githubʹϨϙδτϦࠎ֨Λͭ͘Δ
    5. ࣮૷͢Δ
    6. READMEॻ͘
    7. ެ։͢Δ
    8. ޿ใ͢Δ

    View Slide

  17. - https://github.com/nhagen/react-radar-chart
    - ໊લ͸react͚ͩͲɺී௨ͷd3.jsΛ༻͍ͨϨʔμʔνϟʔτ
    - bowerͰinstall͢ΔΜ͚ͩͲɺREADMEͷ΍ͭͰ͸installͰ͖ͳ͔ͬͨ
    - ϓϩύςΟͱ͔ͷυΩϡϝϯτෆ଍ײ
    - ઈର஋ͰϨϯμϦϯά
    - https://github.com/shauns/react-d3-radar
    - ͪ͜Β͸React.jsͷίϯϙʔωϯτ
    - width, height, padding, domainMax, highlighted
    - υΩϡϝϯτෆ଍ײ
    - σβΠϯ͸ؙ͍ײ͡
    - https://github.com/react-d3/react-d3-shape
    - https://github.com/reactjs/react-chartjs
    - chart.jsΛReactͰ࢖͑ΔΑ͏ʹͨ͠΋ͷ
    - dataͱoption͚͚ͩͩͲchart.js͕ϕʔεʹͳͬͯΔ͔ΒυΩϡϝϯτ͸ἧͬͯΔ
    - υΩϡϝϯτ௨Γʹ΍ͬͯ΋ಈ͔ͳ͍
    - ಈతʹνϟʔτΛϨϯμϦϯά͢Δ͜ͱʹ΋ରԠ
    - https://reactcommunity.org/react-chartjs/index.html
    - https://github.com/rsamec/react-pathjs-chart
    - paths.jsͰΛReactͷComponentʹͨ͠΋ͷ
    - ಈ͖΋ग़ͤΔ
    - data, options, xkey, ykey,etc...
    - https://github.com/capitalone/react-native-pathjs-charts/releases
    - react-pathjs-chartͷReactNative൛
    - ͔ͳΓ࠷ۙ΋։ൃ੝Μ
    - ϓϩύςΟ͸react-pathjs-chartͱ΄΅Ұॹ

    View Slide

  18. ͍΍ɺ͜Ε৽ͨʹϥΠϒϥϦެ։͢Δඞཁ͋Δʁ
    ͨͩͷंྠͷ࠶ൃ໌Ͱ͸…ʁ
    ͡Ό͋ɺ͍·͋ΔϥΠϒϥϦʹίϛοτ͠Α͏ʂ

    View Slide

  19. ͍͔ͭ͘ͷީิΛϦετΞοϓ
    react-pathjs-chart
    react-native-pathjs-charts
    react-d3-radar react-chartjs
    react-native-pathjs-charts
    • ελʔ਺
    • ࠷ۙͷ։ൃঢ়گ

    View Slide

  20. View Slide

  21. View Slide

  22. ԿΛ࣮૷͢Δ͔
    Կ͕͋ͬͨΒ͍͍͔…
    • ϥϕϧ෦෼ͳͲࡉ͔͍෦෼ͷΫϦοΫ࣌ͳͲͷ࣮૷
    • ΩϟϓγϣϯΛ͚ͭΔ etc…

    View Slide

  23. ISSUEΛཱͯΔ
    • ಉ͡Α͏ͳIssue͕ͳ͍͔֬ೝ
    • ͦΕʹରͯ͠ͲͷΑ͏ͳϦΞΫγϣϯ͔Λ֬ೝ
    • ӳޠͷจ๏ϛεΛ͓ͦΕͳ͍
    • ఏҊ࢟੎Ͱ
    • ࢥ͍੾ͬͯSubmitʂ

    View Slide

  24. PULL REQUESTΛૹΔ
    • ӳޠͷจ๏ϛεΛ͓ͦΕͳ͍
    • ࣗ෼͕࣮૷͢ΔҎ֎ͷίʔυΛ৮Βͳ͍
    • ͦͷOSSͷॻ͖ํΛकΔ
    • ࢥ͍੾ͬͯSubmitʂ
    • ؾ௕ʹ଴ͭ

    View Slide

  25. View Slide

  26. ͜ΕͰ͋ͳͨ΋OSSίϛολʔ!!

    View Slide

  27. ̍ճίϛοτͰ͖Δͱௐࢠʹ৐ΕΔ

    View Slide

  28. ଞʹ΋…
    • typoͷमਖ਼
    • Πϕϯτ৘ใͷߋ৽
    • υΩϡϝϯτͷॆ࣮

    View Slide

  29. ΤϯδχΞ͸༏͍͠
    ਫ਼ҰഋͷࣦഊͩͬͨΒ༏͘͠ࢦఠͯ͘͠ΕΔ

    View Slide

  30. ॳOSSίϛοτΛୡ੒ͯ͠ࢥͬͨ͜ͱ…
    ࢥͬͯͨΑΓϋʔυϧߴͳ͍΍Μʂ

    View Slide

  31. ͔͠͠ɺ΋ͪΖΜ…
    ॳOSSίϛοτͷෑډΛ௿͘ଊ͑Δ͜ͱ͕Ͱ͖Δ͚ͩ
    OSS΁ͷίϛοτࣗମ͕؆୯ͳΘ͚Ͱ͸ͳ͍

    View Slide

  32. େܕOSS΁ͷίϛοτʹඞཁͩͱײͨ͜͡ͱ
    • ίʔυͷಡΈํ
    • ࣮ͨͩ૷͢Δ͚ͩʹͱͲ·Βͳ͍ਂ͍ٕज़తͳ஌ࣝ
    • ੈͷதͰඞཁͱ͞Ε͍ͯΔػೳ
    • ͦ΋ͦ΋ͲΜͳOSS͕͋Δ͔

    View Slide

  33. ·ͱΊ
    • ॳίϛοτ͸࠷ॳͷҰาΛ;Έͩͤ͹ͳΜͱ͔ͳΔ
    • େܕOSS΁ͷίϛοτ͸΍͸Γ͔ͳΓͷ࣮ྗ͕ඞཁ
    Ίͤ͟ʂ༗໊ίϛολʔ

    View Slide

  34. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
    ·ͩ·ͩϓϩάϥϛϯάॳΊͯ̍೥ͷͻΑͬ͜Ͱ͢ɻ
    ࣗ෼ͷ࿩͢͜ͱ͕ਖ਼͍͔͠Ͳ͏͔΋Θ͔Γ·ͤΜɻ
    ࠙਌ձͰօ͞Μ͔Βҙݟ͍͚ͨͩΔͱ޾͍Ͱ͢

    View Slide