React+Redux+Node.js+Raspberry Piで ビデオプレイヤーを作りたかった話

2016年6月30日にレバレジーズさんで行われた『【ヒカ☆ラボ】JavaScriptの情報交換LT会』での発表資料です。

Transcript

1. F I C C B X C R E A T I V E T E A M P U B L I S H E D B Y H I K A - L A B O D A T E 2 0 1 6 . 0 6 . 3 0 P R O J E C T HIKA-LABO LIGHTNING TALK 3FBDU 3FEVY /PEFKT 3BTQCFSSZ
   1JͰ
   ϏσΦϓϨΠϠʔΛ࡞Γ͔ͨͬͨ࿩ GVLVPLB!pDDKQ
   
   '*$$
   JOD
   
   
   #9ΫϦΤΠςΟϒࣄۀ෦ 2016.06.30 ෱Ԭ
   ཅ
   
   BLJSBGVLVPLB
2. F I C C B X C R E A T I V E T E A M P U B L I S H E D B Y D A T E P R O J E C T H I K A - L A B O 2 0 1 6 . 0 6 . 3 0 ϓϩϑΟʔϧ  גࣜձࣾ'*$$
   ۈ຿
    ϒϥϯυΤΫεϖϦΤϯεΫϦΤΠςΟϒࣄۀ෦γχΞσΟϨΫλʔ
    ࡏ੶೥͘Β͍ʢΑ֮͑ͯ͘ͳ͍ʣ
    اըɺσβΠϯɺ੍࡞ɺϑϩϯτɺαʔόʔαΠυɺ͍Ζ͍Ζ΍ΔͰ☺ ෱Ԭ
   ཅ akirafukuoka
3. F I C C B X C R E A T I V E T E A M P U B L I S H E D B Y D A T E P R O J E C T H I K A - L A B O 2 0 1 6 . 0 6 . 3 0 ࠷ۙͷ࡞඼  ݸࣨτΠϨͷυΞ։ดΛ3BTQCFSSZ
   1JΛ࢖ͬͯηϯγϯά
    /PEFKTͰ࡞ΒΕͨαʔϏεʹσʔλΛૹ৴ɺϦΞϧλΠϜʹۭ͖৘ใΛ഑৴
    ݁ՌτΠϨͷࠞࡶ཰ͷѹ౗తվળ͕ݟΒΕͨ
    ໋໊͸νʔϜϥϘ͞Μͷಉ༷ͷγεςϜΑΓ௖ଷ͠·ͨ͠
    IUUQUZQFKQFUMPHBSUJDMF@NBLF@NBLF FICC Heavensdoor (2015.04) IUUQpDDIFBWFOTEPPSIFSPLVBQQDPN
4. F I C C B X C R E A T I V E T E A M P U B L I S H E D B Y D A T E P R O J E C T H I K A - L A B O 2 0 1 6 . 0 6 . 3 0 ensdoor (2015.04)
5. F I C C B X C R E A T I V E T E A M P U B L I S H E D B Y D A T E P R O J E C T H I K A - L A B O 2 0 1 6 . 0 6 . 3 0 ਖ਼௚ϕʔεͰਃ্͛ͯ͠ ࠷ۙͷϑϩϯτΤϯυͷ࿩୊Λฉ͍ͯΔ࣌ͷϫΠ
6. F I C C B X C R E A T I V E T E A M P U B L I S H E D B Y D A T E P R O J E C T H I K A - L A B O 2 0 1 6 . 0 6 . 3 0 ٕज़Λ਎ʹ͚ͭΔͨΊʹ ϒϥϯΫΛղফ͢ΔͨΊʹ͸
   ͱΓ͋͑ͣ࡞Δ͔͠ͳ͍΍Μ͚ Θ͔Δ
7. F I C C B X C R E A T I V E T E A M P U B L I S H E D B Y D A T E P R O J E C T H I K A - L A B O 2 0 1 6 . 0 6 . 3 0 ·ͣ
   lԿΛ࡞Δʁz .*%*
   'JHIUFS (*1): (*1):ͷ(*'ΞχϝͰ
   .*%*
   'JHIUFSΈ͍ͨʹ༡΂Δ
   7+πʔϧ͕ཉ͍͠ ͦΕͳ
8. F I C C B X C R E A T I V E T E A M P U B L I S H E D B Y D A T E P R O J E C T H I K A - L A B O 2 0 1 6 . 0 6 . 3 0 ͜͏ͨ͠Β͑͑ΜͪΌ͏ʁ Raspberry Pi Node.js Express React Redux HDMI ؅ཧը໘ (*'࠶ੜը໘ ϓϩδΣΫλ ωοτϫʔΫ ϒϥ΢β MIDI "SEVJOP
9. F I C C B X C R E A T I V E T E A M P U B L I S H E D B Y D A T E P R O J E C T H I K A - L A B O 2 0 1 6 . 0 6 . 3 0 ͱΓ͋͑ͣ Ͳ͔͜Βख͚͍͍͔ͭͯΘ͔ΒΜ͠
   /PEFKT͔ΒͱΓ͋͑ͣ৮ͬͨΖ ώΣʙο
10. F I C C B X C R E A T I V E T E A M P U B L I S H E D B Y D A T E P R O J E C T H I K A - L A B O 2 0 1 6 . 0 6 . 3 0 ͔͠͠  Ͳ͔͜ΒखΛ͚͍͍͔ͭͯΘ͔Βͳ͍
     ࠓ·Ͱ࢖͍ͬͯͨ'MVYYPS͸͍ͭͷؒʹ͔ࢮΜͰ͍ͨ
     ࣌୅͸3FEVYͱ͔ݴΘΕͯ΋ͩͳʜ ϒϥϯΫ͔Βࢁੵ͢Δ໰୊ ԿΛ͍͍ͯ͠ͷ͔શ͘Θ͔Βͳ͍ঢ়گοʜ
11. F I C C B X C R E A T I V E T E A M P U B L I S H E D B Y D A T E P R O J E C T H I K A - L A B O 2 0 1 6 . 0 6 . 3 0 ͜͏͍͏࣌͸ ܕ
    ϘΠϥʔϓϨʔτ
    Ͱ֮͑Δ
12. F I C C B X C R E A T I V E T E A M P U B L I S H E D B Y D A T E P R O J E C T H I K A - L A B O 2 0 1 6 . 0 6 . 3 0 ͍͍ײ͡ͷϘΠϥʔϓϨʔτɺೖ৔ react-webpack-node IUUQTHJUIVCDPNDIPPOLFOEJOHSFBDUXFCQBDLOPEF  ۃΊͯࠓͬΆ͍ϘΠϥʔϓϨʔτʢݱࡏ
    WFS
    ʣ
     &4&4
    3FBDUKT
    3FEVY
    3FBDU
    3PVUFS
    3FBDU
    3PVUFS
    3FEVY
    )PU
    SFMPBEJOH
    $44
    NPEVMFT
    &YQSFTT
    Yʜ Este.js IUUQTHJUIVCDPNFTUFFTUF redux-webpack-es6-boilerplate IUUQTHJUIVCDPNOJDLTQSFEVYXFCQBDLFTCPJMFSQMBUF ଞʹ΋৭ʑ ࠾༻͍ͯ͠Δٕज़͕ࡉ͔͘ҧ͏Μ͡Ό
13. F I C C B X C R E A T I V E T E A M P U B L I S H E D B Y D A T E P R O J E C T H I K A - L A B O 2 0 1 6 . 0 6 . 3 0 SFBDUXFCQBDLOPEF৮ͬͯΈͨ Ұ௨Γͷ஌ࣝΛ࢓ೖΕΔʹ͸΋͍ͬͯ͜͡Ό  3FBDU3PVUFSɺαʔόʔαΠυϨϯμϦϯάରԠ
     ϗοτϩʔσΟϯάରԠʢSFBDUUSBOTGPSNINSʣ
     ϩάΠϯೝূαϯϓϧ෇͖
     )FSPLV΍%JHJUBM
    0DFBOʹ͙͢ʹσϓϩΠͰ͖Δ
     ͱΓ͋͑ͣࠓ·ͰͰ͖ͨ͜ͱΛ࠷৽ͷ؀ڥͰ࣮ݱͰ͖ͦ͏ SFBDUXFCQBDLOPEFͰײͨ͡ศརϙΠϯτ
14. F I C C B X C R E A T I V E T E A M P U B L I S H E D B Y D A T E P R O J E C T H I K A - L A B O 2 0 1 6 . 0 6 . 3 0 1PTU$44 ൿີ݁ࣾΈ͍ͨͳϚʔΫ͕ා͍  ͍·άΠάΠ͖ͯΔ$44ϓϦϓϩηοα
     ϞδϡʔϧΛͲΜͲΜ࡞ΕΔ
     ωετ͸ඪ४Ͱ͸ඇରԠɺͰ΋QPTUDTTOFTUFEΛ࢖͑͹
     $44
    /&95ʹରԠ͢Δʹ͸QPTUDTTDVTUPNQSPQFSUJFT
     3FBDUͱ૊Έ߹ΘͤΔͱίϯϙʔωϯτ୯ҐͰελΠϧ͕ద༻Ͱ͖Δ PostCSS IUUQQPTUDTTPSH
15. F I C C B X C R E A T I V E T E A M P U B L I S H E D B Y D A T E P R O J E C T H I K A - L A B O 2 0 1 6 . 0 6 . 3 0 1PTU$44 3FBDU࣮ԋ MJTU
    \
    
    
    
    CPSEFSUPQ
    $$$$$$
    TPMJE
    QY
    
    
    IPWFS
    \
    
    
    
    
    CBDLHSPVOE
    
    
    
    
    
    DPMPS
    ''''''
    
    
    ^
    
    
    UJUMF
    \
    
    
    
    
    GPOUTJ[F
    QY
    
    
    ^
    
    
    EBUF
    \
    
    
    
    
    GPOUTJ[F
    QY
    
    
    ^
    ^
    JNQPSU
    DMBTT/BNFT
    GSPN
    DMBTTOBNFTCJOE
    JNQPSU
    TUZMFT
    GSPN
    DTTDPNQPOFOUTTUZMF
    DPOTU
    DY
    
    DMBTT/BNFTCJOE TUZMFT 
    DPOTU
    -JTU
    
    \EBUB^
    
    \
    
    
    SFUVSO
    
    
    
    
    
    EJW
    DMBTT/BNF\DY MJTU ^
    
    
    
    
    
    
    Q
    DMBTT/BNF\DY UJUMF ^\EBUBUJUMF^Q
    
    
    
    
    
    
    Q
    DMBTT/BNF\DY bEBUF ^\EBUBEBUF^Q
    
    
    
    
    EJW 
    ^
    
    
    
    
    
    
    
    
    
    
    
    
     TUZMFDTT 
    
    
    
    
    
    
    
    
    
    
    
     -JTUKTY DMBTTOBNFTΛ࢖͏͜ͱͰɺίϯϙʔωϯτ୯ҐͰελΠϧΛద༻Մೳ
16. F I C C B X C R E A T I V E T E A M P U B L I S H E D B Y D A T E P R O J E C T H I K A - L A B O 2 0 1 6 . 0 6 . 3 0 ݁ہͷͱ͜Ζ Raspberry Pi Node.js Express React Redux HDMI ؅ཧը໘ (*'࠶ੜը໘ ϓϩδΣΫλ ωοτϫʔΫ ϒϥ΢β MIDI "SEVJOP
17. F I C C B X C R E A T I V E T E A M P U B L I S H E D B Y D A T E P R O J E C T H I K A - L A B O 2 0 1 6 . 0 6 . 3 0 ݁ہͷͱ͜Ζ ࠓ೔·Ͱʹ׬੒͠·ͤΜͰͨ͠ʜ
18. F I C C B X C R E A T I V E T E A M P U B L I S H E D B Y D A T E P R O J E C T H I K A - L A B O 2 0 1 6 . 0 6 . 3 0 ͜Ε͔Βͷ࿩Λ͠Α͏ ͜͜Ͱر๬ͷͳ͍࿩Λ͠Α͏
19. F I C C B X C R E A T I V E T E A M P U B L I S H E D B Y D A T E P R O J E C T H I K A - L A B O 2 0 1 6 . 0 6 . 3 0 ͜Ε͔Βͷ࿩Λ͠Α͏ গͳ͘ͱ΋͜Ε͔Β8FCαΠτ͸
    lཪ௨Γz
    ʹͳΔ AMP Facebook Instant Articles Apple News … ๻Β͸ϓϥοτϑΥʔϜʹٯΒ͏͜ͱ͕ग़དྷͳ͍ɻऑΈΛѲΒΕ͍ͯΔʜ
20. F I C C B X C R E A T I V E T E A M P U B L I S H E D B Y D A T E P R O J E C T H I K A - L A B O 2 0 1 6 . 0 6 . 3 0 ͜Ε͔Βͷ࿩Λ͠Α͏ ҰํͰ૿େ͢ΔϑϩϯτΤϯυٕज़शಘίετ ೔ޙͷϑϩϯτΤϯυͷ࿩୊͸ҰମͲ͏ͳ͍ͬͯΔʁ
    ʢिޙ͸ݴΘͣ΋͕ͳʜʣ
21. F I C C B X C R E A T I V E T E A M P U B L I S H E D B Y D A T E P R O J E C T H I K A - L A B O 2 0 1 6 . 0 6 . 3 0 ͜Ε͔Βͷ࿩Λ͠Α͏ ࢧ෷͏΋ͷ͸ଟ͘ɺಘΔ΋ͷ͸গͳ͍ ٕज़शಘ ੒Ռ
22. F I C C B X C R E A T I V E T E A M P U B L I S H E D B Y D A T E P R O J E C T H I K A - L A B O 2 0 1 6 . 0 6 . 3 0 େ੾ͳͷ͸
    lԿΛ࡞Δ͔z शख़ͱฒߦͯ͠ʮԿΛ࣮ݱ͢Δ͔ʯΛߟ͑Δ ʜͱ͍͏͜ͱ͕ݴ͍͔ͨͬͨΜ΍
23. F I C C B X C R E A T I V E T E A M P U B L I S H E D B Y D A T E P R O J E C T H I K A - L A B O 2 0 1 6 . 0 6 . 3 0 3FBDU 3FEVY /PEFKT 3BTQCFSSZ
    1JͰ
    ϏσΦϓϨΠϠʔΛ࡞Γ͔ͨͬͨ࿩ HIKA-LABO LIGHTNING TALK ऴ ੍࡞ɾஶ࡞ ෱
    
    Ԭ
    
    ཅ