Hotwire or React? ~Reactの録画機能をHotwireに置き換えて得られた知見~ / hotwire_or_react

1. )BSVOB
   5TVKJUB
   
   !IBSVOBUTVKJUB
   
   
   ,BJHJ
   PO
   3BJMT
    )PUXJSF
   PS
   3FBDU
   d3FBDUͷ࿥ըػೳΛ)PUXJSFʹஔ͖׵͑ͯಘΒΕͨ஌ݟd
2. ࣗݾ঺հ
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   !IBSVOBUTVKJUB
   ✦
   
   
   
   
   
   
   
   
   ˠ
   גࣜձࣾΩϟλϧʢӳޠक़ΛӡӦʣ
   ✦
   όοΫΤϯυΤϯδχΞʢ3BJMTͱɺͨ·ʹ3FBDUʣ
   ✦
   ϥΠςΟϯάͷఴ࡟αʔϏεΛ։ൃ
3. ࠓ೔ͷςʔϚ ✦
   ϝΠϯ͸)PUXJSFɺಛʹ4UJNVMVTͷ࿩Ͱ͢
   ✦
   ٕज़બఆʹؔ͢Δ࿩΋͠·͢
   w ࢲ͸3FBDU΋޷͖Ͱ͢
   w ຊ୊ͷલʹϓϩμΫτ΍νʔϜͷঢ়گΛ؆୯ʹڞ༗͠·͢
4. ϥΠςΟϯάͷఴ࡟αʔϏεͱ͸ʁ w ӳޠक़Ωϟλϧʹ௨͏ੜెʹఏڙ͍ͯ͠Δখن໛ͳΞϓϦέʔγϣϯ
   w 3VCZ
   PO
   3BJMT
   
   ෦෼తʹ3FBDUͰ41"Λ࣮ݱ ڭࢣ ੜె ӳޠͰϥΠςΟϯάΛॻ͘ɾఏग़ ఴ࡟ɾϑΟʔυόοΫ
5. 3FBDUɺຊ౰ʹඞཁʁ ͜ͷ͘Β͍ͷن໛ͷαʔϏεʹ
6. w 3BJMTͷํ͕ಘҙͳόοΫΤϯυΤϯδχΞ໊͕։ൃ
   w ޠ਺Χ΢ϯτɾςΩετΤϦΞͷϋΠϥΠτͳͲͪΐͬͱͨ͠ՕॴΛ41"ʹ͍ͨ͠
   ‣3FBDUͰॻ͔ΕͨՕॴ͕ঃʑʹෛ࠴Խ
   
   ‣ϝΠϯͷػೳ։ൃʹ͕͔͔࣌ؒͬͯ͠·͏
   
   
   w ΍Γ͍ͨ͜ͱ͸)PUXJSFͰे෼࣮ݱͰ͖ΔͷͰ͸ʁ 3FBDUؔ࿈ͷ՝୊
   .Z
   OBNF
   JT
   )BSVOB
   
   *`N
   GSPN
   5PLZP
    େֻ͔Γͳ͜ͱ͸͍ͯ͠ͳ͍ʝ
7. 3FBDUΛ΍Ίͯ)PUXJSFʹ͢Δͷ͸ා͍ʂʂʂ
8. ා͞ͷਖ਼ମʢͱࢥΘΕΔ΋ͷʣ 3FBDU
   ΤίγεςϜ΍஌ݟ͕ॆ࣮ʢͱ͘ʹ$IBLSB
   6*Λ࢖͍͍ͨʣ
   
   ॊೈʹ6*Λ࣮૷Ͱ͖Δ )PUXJSF
   5VSCPͷΠϝʔδɾ$36%ૢ࡞Λ/P
   +4Ͱ41"ϥΠΫʹͰ͖Δ
   

   ؅ཧػೳ͘Β͍ͷϓϩμΫτʹϑΟοτʁ 

   4UJNVMVTͷ৘ใ͕͋·Γͳͯ͘ະ஌਺ )PUXJSFͷΈͰे෼։ൃͰ͖Δʁ
   3FBDUΛख์ͯ͠ຊ౰ʹ͍͍ͷʁ
9. ٕज़ݕূ͢ΔՁ஋͸͋Γͦ͏ʂ w ݒ೦ͷҰͭ͸4UJNVMVT
   ‣͜Ε͕ϑΟοτ͠ͳ͚Ε͹)PUXJSFஔ͖׵͑ͷબ୒ࢶ͕ফ͑Δ
   w 3FBDUΛؤுΖ͏ʂͱܾҙͰ͖Δͷ͸νʔϜʹͱͬͯϓϥεͳ͸ͣ
10. ࿥ըػೳΛஔ͖׵͑ͯΈΔ w ϑΟʔυόοΫಈըͷ࿥ըػೳ
    ‣ಈըσʔλͷอଘɾ࠶ੜɾ࡟আ
    ‣1$ͷΧϝϥɾϚΠΫͷૢ࡞͕ೖΔͨΊ ࣮֬ʹ4UJNVMVTΛ࢖͏
    ‣ػೳվળ͕׆ൃʹߦΘΕͳ͍Օॴ 3FDPSE $MFBS
11. ஔ͖׵͑ͷલఏ৚݅ w 3FBDUͱ)PUXJSFͷҧ͍Λݕূ͢Δ͜ͱ͕໨త
    ‣طଘͷ6*69Λҡ࣋͠ɺ࢓༷͸มߋ͠ͳ͍
12. 3FDPSE $MFBS
13. 3FDPSE $MFBS 4UPQ $MFBS )J 3FDPSE
    ˠ
    4UPQ ࿥ըελʔτ
14. 3FDPSE $MFBS 4UPQ $MFBS )J 4UPQ $MFBS (PPE
    MVDL
15. 3FDPSE $MFBS 4UPQ $MFBS )J 4UPQ $MFBS (PPE
    MVDL 3FDPSE $MFBS ಈը࠶ੜ EJTBCMFE
    ղআ EJTBCMFE
    USVF 1045
16. 3FDPSE $MFBS 4UPQ $MFBS )J 4UPQ $MFBS (PPE
    MVDL 3FDPSE $MFBS 1045 %&-&5&
17. 3FBDUͰͷ࣮૷Λݟ͍͖ͯ·͠ΐ͏
18. ݱঢ়ͷ࣮૷ 3FBDU ఴ࡟ϖʔδ 3FDPSE $MFBS // app/views/summaries/feedbacks/edit.html.haml -# লུ #summary-video-recorder{data: {'summary-id': @summary.id}} = javascript_include_tag ‘SummaryVideoRecorder' -# লུ w ఴ࡟ϖʔδͷWJFX͔Β3FBDUΛݺͼग़͢
19. w ಈըͷදࣔɾ3FDPSEϘλϯɾ$MFBSϘλϯ͕ίϯϙʔωϯτԽ
    w ϘλϯͷΫϦοΫΠϕϯτΛى఺ʹॲཧ͕࣮ߦ͞ΕΔ return ( <> <Video theme='large' videoUrl={videoUrl} mimeType='video/webm' /> <p> <RecordButton startRecording={startRecording} stopRecording={stopRecording} id={summaryId} videoUrl={videoUrl} /> <ClearButton onClick={handleClear} isDisabled={isPosting || !videoUrl} /> </p> </> ) } ݱঢ়ͷ࣮૷ 3FDPSE $MFBS
20. )PUXJSF4UJNVMVTͱ͸ʁ <!--HTML from anywhere--> <div data-controller="hello"> <input data-hello-target="name" type="text"> <button data-action="click->hello#greet"> Greet </button> <span data-hello-target="output"> </span> </div> // hello_controller.js import { Controller } from "stimulus" export default class extends Controller { static targets = [ "name", "output" ] greet() { this.outputTarget.textContent = `Hello, ${this.nameTarget.value}!` } } Ҿ༻ɿ)PUXJSF
    )BOECPPL 5VSCPͱ૬ੑͷΑ͍
    +BWB4DSJQUϑϨʔϜϫʔΫ
21. )PUXJSF4UJNVMVTͱ͸ʁ <!--HTML from anywhere--> <div data-controller="hello"> <input data-hello-target="name" type="text"> <button data-action="click->hello#greet"> Greet </button> <span data-hello-target="output"> </span> </div> // hello_controller.js import { Controller } from "stimulus" export default class extends Controller { static targets = [ "name", "output" ] greet() { this.outputTarget.textContent = `Hello, ${this.nameTarget.value}!` } } Ҿ༻ɿ)PUXJSF
    )BOECPPL
22. )PUXJSF4UJNVMVTͱ͸ʁ <!--HTML from anywhere--> <div data-controller="hello"> <input data-hello-target="name" type="text"> <button data-action="click->hello#greet"> Greet </button> <span data-hello-target="output"> </span> </div> // hello_controller.js import { Controller } from "stimulus" export default class extends Controller { static targets = [ "name", "output" ] greet() { this.outputTarget.textContent = `Hello, ${this.nameTarget.value}!` } } Ҿ༻ɿ)PUXJSF
    )BOECPPL ΠϕϯτͰൃੜ͢ΔΞΫγϣϯΛࢦఆ
23. )PUXJSF4UJNVMVTͱ͸ʁ <!--HTML from anywhere--> <div data-controller="hello"> <input data-hello-target="name" type="text"> <button data-action="click->hello#greet"> Greet </button> <span data-hello-target="output"> </span> </div> // hello_controller.js import { Controller } from "stimulus" export default class extends Controller { static targets = [ "name", "output" ] greet() { this.outputTarget.textContent = `Hello, ${this.nameTarget.value}!` } } Ҿ༻ɿ)PUXJSF
    )BOECPPL )BSVOBͱೖྗͯ͠(SFFUϘλϯΛԡ͢ͱz)FMMP
    )BSVOBz͕ग़ྗ
24. )PUXJSF΁ஔ͖׵͑ // app/javascript/controllers/video_recorder_controller.js export default class extends Controller { static targets = ["video"] static values = { summaryId: Number } } -# app/views/summaries/feedbacks/edit.html.haml %div{data: {controller: "video-recorder", video_recorder_summary_id_value: @summary.id}} %video{data: {video_recorder_target: "video"}, controls: true, autoplay: true, muted: true} %button{data: {action: "click->video-recorder#startRecording"}} Record %button{data: {action: "click->video-recorder#stopRecording"} Stop %button{data: {action: "click->video-recorder#clearVideo"} Clear
25. )PUXJSF΁ஔ͖׵͑ ࣮૷్தͳͷʹɺͳΜ͔+BWB4DSJQU ͍ͬͺ͍ॻ͍ͯΔͧɾɾʁ // app/javascript/controllers/video_recorder_controller.js import { Controller } from "@hotwired/stimulus" // Connects to data-controller="feedback-video" export default class extends Controller { static targets = ["video", "recordButton", "stopButton", "clearButton"] static values = { summaryId: Number } async connect() { console.log(this.summaryIdValue) this.chunks = [] const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true }) this.videoTarget.srcObject = stream this.videoTarget.play() this.mediaRecorder = new MediaRecorder(stream) this.mediaRecorder.ondataavailable = (event) => this.chunks.push(event.data) } startRecording() { try { console.log('start recording') this.mediaRecorder.start() } catch(error) { console.error('Error accessing media devices.', error) } } stopRecording() { console.log('stop recording') this.mediaRecorder.stop() this.mediaRecorder.onstop = this.handleStop.bind(this) } handleStop() { const blob = new Blob(this.chunks, { type: 'video/webm' }) const url = URL.createObjectURL(blob) this.videoTarget.src = url this.uploadVideo(blob) } async uploadVideo(blob) { const formData = new FormData() formData.append( 'summary_video[video]', blob, `summary_video_id${this.summaryIdValue}.webm` ) const response = await fetch(`/api/summaries/${this.summaryIdValue}/summary_feedback_videos`, { method: 'POST', body: formData, headers: { 'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content } }) if (response.ok) { await response.json() console.log('Video uploaded') } else { console.error('Failed to upload video', await response.text()) } } clearVideo() { try { fetch(`/api/summaries/${this.summaryIdValue}/summary_feedback_videos`, { method: 'DELETE', headers: { 'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content } }) } catch(error) { console.error('Error deleting video', error) } } } ˞த਎͸ಡ·ͳͯ͘େৎ෉ͳͷͰɺ
    ࠞಱͱͨ͠ײ͡Λ἞Έऔ͍͚ͬͯͨͩΔͱخ͍͠Ͱ͢ɻ
26. 4UJNVMVTΛ৮ͬͯΈͨॴײ w ಈ࡞͸࣮ݱͰ͖ͦ͏ɻ
    w 4UJNVMVTࣗମʹॻ͖ͮΒ͞͸ͳ͍ɻ
    w Ͱ΋ɺͬ͘͠Γ͜ͳ͍ɻ
    ͱɺࢥ͍ͭͭνʔϜϝϯόʔʹ్தܦաΛڞ༗ͨ͠ͱ͜Ζɾɾɾ
27. ΰϦΰϦʹ+BWB4DSJQUॻ͘͜ͱʹͳͬͪΌ͏Ͷ
    ͜ΕͳΒ3FBDUͰྑ͍ͷͰ͸ʁ
28. ϓϩϙʔβϧఏग़࣌͸͜͏݁࿦Λग़͍ͯͨ͠
29. ຊ౰ʹ͜ΕͰɺྑ͍ͷ͔ɾɾʁʁʁ
30. ʢ࠶ܝʣ4UJNVMVTΛ৮ͬͯΈͨॴײ w ಈ࡞͸࣮ݱͰ͖ͦ͏ɻ
    w 4UJNVMVTࣗମʹॻ͖ͮΒ͞͸ͳ͍ɻˠ
    
    w Ͱ΋ɺͬ͘͠Γ͜ͳ͍ɻ
    ͱɺࢥ͍ͭͭνʔϜϝϯόʔʹ్தܦաΛڞ༗ͨ͠ͱ͜Ζɾɾɾ
31. w 3FBDUʹؔ͢Δ஌ࣝʢVTF4UBUFͳͲͷ)PPLTʣ͕ඞཁͳ͍
    ‣)PPLT͕Α͠ͳʹॲཧ͍ͯͨ͠ՕॴΛࣗ෼Ͱ࣮૷͢Δ͜ͱʹ
    w ָʹϑϩϯτΤϯυΛॻ͖͔ͨͬͨ͸ͣͳͷʹ
    ‎3FBDUΛ࢖༻͢ΔΑΓ΋+BWB4DSJQUͷίʔυ͕૿Ճ ॻ͖ͮΒ͕͞ͳ͍ɺͷਖ਼ମ͸ʁ
32. վળͷ༨஍Λ୳Δ w 4UJNVMVTίϯτϩʔϥʔʹա౓ͳ+BWB4DSJQUͷϩδοΫ͕ूத
    ‣ͦΕͳΒ͹3FBDU͕ྑ͍ w ͔͠͠ɺผͷՕॴͰ5VSCPΛ࢖࣮ͬͯ૷ͨ͠ͱ͖
    ‣5VSCP͸νʔϜͰ޷ධͩͬͨ
33. ࣮૷ํ਑Λݟ௚͢ w Ծઆ̍ɿ)PUXJSFͷࢫΈ͸5VSCPͳͷͰ͸
    ‣5VSCPʹدͤΔ͜ͱͰɺ4UJNVMVTʹॻ͘+BWB4DSJQU͕ݮΔ͸ͣ
    w Ծઆ̎ɿ4UJNVMVTͷίϯτϩʔϥʔΛ੔ཧ͢Δͱҹ৅͕ҧ͏ͷͰ͸
34. )PUXJSF5VSCPͱ͸ʁ w $36%ૢ࡞Λத৺ͱͨ͠41"ϥΠΫͳମݧΛ+BWB4DSJQUΛॻ͔ͣʹ ࣮ݱͰ͖Δπʔϧ ങ͍෺ʹߦ͘ ݘʹ㕒Λ͋͛Δ
35. )PUXJSF5VSCPͱ͸ʁ w ϦΫΤετʹରͯ͠ɺαʔόʔ͸ࢦఆͨ͠Օॴͷ)5.-ΛϨεϙϯε
    ‣ը໘શମΛ࠶ඳը͠ͳ͍ͷͰ41"ϥΠΫͳಈ࡞Λ࣮ݱͰ͖Δ ങ͍෺ʹߦ͘ ݘʹ㕒Λ͋͛Δ
36. ࿥ըػೳͷͲ͜Ͱ5VSCPΛ࢖͑Δʁ
37. 
    ˞ҎԼ
    ,BJHJ
    PO
    3BJMT
    
    αΠτ͔ΒҰ෦ൈਮ
    
    41"ͱ)PUXJSFͰ͸ɺΞϓϦΛߏ੒͢ΔͨΊͷ෺ͷߟ͑ํ͕େ͖͘ҟͳΓ·͢ɻ
    
    )PUXJSFΛॎԣແਚʹ࢖͍౗ͨ͢Ίʹ͸ɺ)PUXJSFతͳߟ͑ํͰ࡞Δඞཁ͕͋ΔͷͰ͢ɻ
    
    
    
    ͜ͷɺ)PUXJSFతͳߟ͑ํʹઃܭࢦ਑ʹࢲ͸ʮ8FCࢴࣳډʯͱ͍͏໊લΛ͚ͭ·ͨ͠ɻ
38. 3FDPSE $MFBS 4UPQ $MFBS )J 4UPQ $MFBS (PPE
    MVDL 3FDPSE $MFBS 1045 %&-&5& ը໘ͷྲྀΕʹԊ࣮ͬͯ૷͢Δͷ͸μϝͩͬͨɾɾ
39. ߟ͑ํΛม͑ͯΈΔʂ
40. 3FDPSE $MFBS 4UPQ $MFBS (PPE
    MVDL 4UPQ $MFBS )J 3FDPSE $MFBS 1045 %&-&5& ʢ࠶ܝʣϘλϯͷΫϦοΫͰঢ়ଶ͕ભҠ͢Δ
41. 3FDPSE $MFBS 4UPQ $MFBS (PPE
    MVDL 4UPQ $MFBS )J 3FDPSE $MFBS 1045 %&-&5& %#ʹಈը σʔλͳ͠ %#ʹಈը σʔλ͋Γ ࿥ը։࢝
    
    ऴྃ
42. 3FDPSE $MFBS 4UPQ $MFBS (PPE
    MVDL 4UPQ $MFBS )J 3FDPSE $MFBS 1045 %&-&5& ᶃಈըσʔλͳ͠ ᶄಈըσʔλ͋Γ
43. 3FDPSE $MFBS 4UPQ $MFBS (PPE
    MVDL 4UPQ $MFBS )J 3FDPSE $MFBS 1045 %&-&5& ᶃಈըσʔλͳ͠ ᶄಈըσʔλ͋Γ 5VSCPΛར༻Ͱ͖ͦ͏
44. ࢴࣳډͱͯ͠ߟ͑ͯΈΔ 3FDPSE ᶃ
    ಈըσʔλͳ͠ $MFBS ᶄ
    ಈըσʔλ͋Γ 1045 %&-&5& $MFBS 3FDPSE w $36%ૢ࡞͕͖͔͚ͬͰൃੜ͢Δը໘ͷ੾Γସ͑͸5VSCPʹ೚ͤΔ ˞ʰ8FCࢴࣳډʱͷτʔΫ͸ը໘શମΛຕͷࢴࣳډͱͯ͠ଊ͑Δ͓࿩ͳͷͰɺ
    τʔΫ͔ΒώϯτΛಘͨ͏͑ͰҟͳΔΞϓϩʔνΛ͍ͯ͠·͢
45. 3FDPSE $MFBS 4UPQ $MFBS (PPE
    MVDL 4UPQ $MFBS )J 3FDPSE $MFBS 1045 %&-&5& ᶃಈըσʔλͳ͠ ᶄಈըσʔλ͋Γ ʁʁʁ ࿥ը։࢝ऴྃ
    Ϙλϯͷ%0.ૢ࡞ͳͲ
46. ࢴࣳډͱͯ͠ߟ͑ͯΈΔᶄ 4UPQ ᶃ $MFBS 3FDPSE w lࢴࣳډͷ࢓ֻ͚zͱଊ͑ͯΈΔ
    ‣3BJMTଆͰ੍ޚ͢Δͷ͸೉͍͠
    ‣4UJNVMVTͰ࣮૷͢Δ
47. 3FDPSE $MFBS 4UPQ $MFBS (PPE
    MVDL 4UPQ $MFBS )J 3FDPSE $MFBS 1045 %&-&5& ᶃಈըσʔλͳ͠ ᶄಈըσʔλ͋Γ 5VSCPͰ࣮૷
48. )PUXJSF΁ஔ͖׵͑
    d5VSCPΛ࢖͏d // app/views/summaries/feedbacks/_summary_feedback_video.html.haml = turbo_frame_tag 'summary-feedback-video' do %div{data: {controller: "video-recorder", {//stimulusίϯτϩʔϥ΁σʔλ౉͠}}} .is-flex.is-flex-direction-column.is-align-items-start - if summary_feedback_video.present? // ϏσΦσʔλ͕͋Δ࣌ͷॲཧ - else // ϏσΦσʔλ͕ͳ͍࣌ͷॲཧ // ఴ࡟ϖʔδͷview = render partial: 'summaries/feedbacks/summary_feedback_video', locals: { // লུ } ˣ
    bTVNNBSZGFFECBDLWJEFP` ఴ࡟ϖʔδͷWJFX
49. // app/views/summaries/feedbacks/_summary_feedback_video.html.haml = turbo_frame_tag 'summary-feedback-video' do %div{data: {controller: "video-recorder", {// ίϯτϩʔϥʔ΁σʔλड͚౉͠}}} .is-flex.is-flex-direction-column.is-align-items-start - if summary_feedback_video.present? %video %source{src: summary_feedback_video.video_url, type: "video/webm"} = link_to 'Clear', summary_summary_feedback_videos_path(summary), data: { turbo_confirm: "ຊ౰ʹ࡟আ͠·͔͢ʁ", turbo_method: :delete } - else // ϏσΦσʔλ͕ͳ͍࣌ͷॲཧ ˞εϖʔεͷؔ܎ͰࢿྉͰ͸Ұ෦লུ͍ͯ͠ΔՕॴ͕͋Γ·͢ # app/controllers/summaries/summary_feedback_videos_controller.rb def destroy @summary = Summary.find(params[:summary_id]) @summary_feedback_video = @summary.summary_feedback_video @summary_feedback_video.destroy! end ˢ҉໧తʹUVSCP@TUSFBNΛSFOEFS ˠ
    5VSCPϦΫΤετ
    ˠ
    3BJMTίϯτϩʔϥʔ
50. // app/views/summaries/summary_feedback_videos/destroy.turbo_stream.haml = turbo_stream.replace 'summary-feedback-video', partial: 'summaries/feedbacks/summary_feedback_video', locals: { summary: @summary, summary_feedback_video: nil } ˠ
    5VSCPϦΫΤετ
    ˠ
    3BJMTίϯτϩʔϥʔ
    ˠ
    UVSCP@TUSFBN ˣ
    bTVNNBSZGFFECBDLWJEFP` ఴ࡟ϖʔδͷWJFX ˞εϖʔεͷؔ܎ͰࢿྉͰ͸վߦΛೖΕ͍ͯ·͢
51. // app/views/summaries/summary_feedback_videos/destroy.turbo_stream.haml = turbo_stream.replace 'summary-feedback-video', partial: 'summaries/feedbacks/summary_feedback_video', locals: { summary: @summary, summary_feedback_video: nil } ˠ
    5VSCPϦΫΤετ
    ˠ
    3BJMTίϯτϩʔϥʔ
    ˠ
    UVSCP@TUSFBN // app/views/summaries/feedbacks/_summary_feedback_video.html.haml = turbo_frame_tag 'summary-feedback-video' do %div{data: {controller: "video-recorder", {// ίϯτϩʔϥʔ΁σʔλड͚౉͠}}} .is-flex.is-flex-direction-column.is-align-items-start - if summary_feedback_video.present? // ϏσΦσʔλ͕͋Δ࣌ͷॲཧ - else // ϏσΦσʔλ͕ͳ͍࣌ͷॲཧ ઌ΄Ͳ·Ͱ͸σʔλ͕
    ͋ͬͨͷͰͪ͜Β
52. // app/views/summaries/summary_feedback_videos/destroy.turbo_stream.haml = turbo_stream.replace 'summary-feedback-video', partial: 'summaries/feedbacks/summary_feedback_video', locals: { summary: @summary, summary_feedback_video: nil } ˠ
    5VSCPϦΫΤετ
    ˠ
    3BJMTίϯτϩʔϥʔ
    ˠ
    UVSCP@TUSFBNˠ // app/views/summaries/feedbacks/_summary_feedback_video.html.haml = turbo_frame_tag 'summary-feedback-video' do %div{data: {controller: "video-recorder", {// ίϯτϩʔϥʔ΁σʔλड͚౉͠}}} .is-flex.is-flex-direction-column.is-align-items-start - if summary_feedback_video.present? // ϏσΦσʔλ͕͋Δ࣌ͷॲཧ - else // ϏσΦσʔλ͕ͳ͍࣌ͷॲཧ σʔλ͕࡟আ͞Εͨ
    ͷͰͪ͜Β͕࣮ߦ͞ΕΔ ˣ
    bTVNNBSZGFFECBDLWJEFP` ఴ࡟ϖʔδͷWJFX
53. 3FDPSE ᶃ
    ಈըσʔλͳ͠ $MFBS ᶄ
    ಈըσʔλ͋Γ 1045 %&-&5& $MFBS 3FDPSE ʢ࠶ܝʣࢴࣳډͷجૅ͕ग़དྷ্͕Δ
54. 3FDPSE $MFBS 4UPQ $MFBS (PPE
    MVDL 4UPQ $MFBS )J 3FDPSE $MFBS 1045 %&-&5& ᶃಈըσʔλͳ͠ ᶄಈըσʔλ͋Γ 4UJNVMVTͰ࣮૷
55. ࿥ըʹؔ͢Δॲཧ͸τʔΫͷຊےͰ͸ͳ͍ͷͰɺ
    ίʔυΛ੔ཧͨ͠ํ๏ʹ͍͓ͭͯ࿩͠͠·͢
56. ʢ࠶ܝʣ࣮૷ํ਑Λݟ௚͢ w Ծઆ̍ɿ)PUXJSFͷࢫΈ͸5VSCPͳͷͰ͸
    ‣5VSCPʹدͤΔ͜ͱͰɺ4UJNVMVTʹॻ͘+BWB4DSJQU͕ݮΔ͸ͣ
    w Ծઆ̎ɿ4UJNVMVTͷίϯτϩʔϥʔΛ੔ཧ͢Δͱҹ৅͕ҧ͏ͷͰ͸
    ‣ϦϑΝΫλϦϯάํ๏͸·ͩ໛ࡧதͰ͕͢ɾɾ
57. // app/javascript/controllers/video_recorder_controller.js import { Controller } from "@hotwired/stimulus" import { // ར༻͢Δؔ਺ } from “./video_recorder_utils" export default class extends Controller { static targets = ["video", "recordButton"] static values = { writingId: Number, writingType: String, feedbackVideo: String, uploadUrl: String } async connect() { // ઀ଓ࣌ͷॲཧ } async startRecording() { // ࿥ը։࢝ͷॲཧ } stopRecording() { // ࿥ըऴྃͷॲཧ } }
58. // app/javascript/controllers/video_recorder_controller.js import { Controller } from "@hotwired/stimulus" import { initializeMediaStream, setupMediaRecorder, setStopButton, uploadData } from “./video_recorder_utils" // Connects to data-controller="video-recorder" export default class extends Controller { static targets = ["video", "recordButton"] static values = { writingId: Number, writingType: String, feedbackVideo: String, uploadUrl: String } async connect() { if (!this.feedbackVideoValue) { this.mediaStream = await initializeMediaStream() } } async startRecording() { if (!this.mediaStream) { this.mediaStream = await initializeMediaStream() if (!this.mediaStream) return } this.mediaRecorder = setupMediaRecorder(this.mediaStream) this.mediaRecorder.start() setStopButton(this.recordButtonTarget) this.mediaRecorder.ondataavailable = (event) => uploadData(event, this.writingTypeValue, this.writingIdValue, this.uploadUrlValue) } stopRecording() { this.mediaRecorder?.stop() this.mediaStream.getTracks().forEach(track => track.stop()) this.recordButtonTarget.disabled = true }} 5PUBM
    ߦ
59. ͜ΕͰஔ͖׵͑͸׬ྃͰ͢ʂ
60. 13͸Ϛʔδ͞Ε·ͨ͠🎉 ٞ࿦ͷ݁Ռʜ
61. 13͸Ϛʔδ͞Ε·ͨ͠🎉 ˞ࠩ෼
    
    
    Ͱ͕͢ɺఴ࡟ը໘ͷ࿥ըػೳՕॴͷஔ͖׵͑Λ͓͜ͳ͍ɺ
    3FBDUଆͰڞ௨Խ͞Ε͍ͯͳ͔ͬͨՕॴ͕ࠓճڞ௨Խ͞Εͯͷ݁ՌͳͷͰ
    Օॴͷ৔߹ɺݮগྔ͸ఔ౓ʹऩ·Γ·͢
62. )PUXJSF
    PS
    3FBDU
    ʁ
63. $36%ͷΈ $36%
    
    +4 $36%ͳ͠
    
    +4 )PUXJSF
    PS
    3FBDUʁ w $36%ૢ࡞͕ओମ
    
    ิॿతͳ+BWB4DSJQU͕ඞཁͳը໘
    ‣ࢴࣳډ
    
    ͪΐͬͱͨ͠࢓ֻ͚͕͋Δ৔߹
    w )PUXJSFͰे෼ରԠͰ͖Δɺੵۃతʹ࢖͍͖͍ͬͯͨ
64. w $36%ૢ࡞Λ൐ΘͣϦονͳΠϯλϥΫγϣϯ͕ඞཁͳը໘
    ‣FY
    ෳࡶͳεςʔτ؅ཧ͕ඞཁ
    w ࢲͷ୲౰ϓϩμΫτʹ͸֘౰͠ͳ͍
    ‣3FBDUͷಘҙ෼໺ $36%ͷΈ $36%
    
    +4 $36%ͳ͠
    
    +4 )PUXJSF
    PS
    3FBDUʁ
65. w $36%ΛؚΉߴ౓ͳ41"࣮૷͕ඞཁͳը໘
    w $36%ͳ͠Ͱγϯϓϧͳ41"࣮૷͕ඞཁͳը໘
    ‣୲౰ϓϩμΫτͰ͸ςΩετΤσΟλ͕֘౰
    ‣͜ͷ͋ͨΓ͸ҙݟ͕෼͔ΕΔ )PUXJSF
    PS
    3FBDUʁ $36%ͷΈ $36%
    
    +4 $36%ͳ͠
    
    +4
66. w $36%ͳ͠Ͱ41"࣮૷͕ඞཁͳը໘
    ‣
    
    ଟ͘͸Ϣʔβʔ͕௕࣌ؒ଺ࡏ͢Δϖʔδ
    ‣ຕͷࢴࣳډͷதʹ࢓ֻ͚͕ͨ͘͞Μ͋Δ৔ॴ )PUXJSF
    PS
    3FBDUʁ $36%ͷΈ $36%
    
    +4 $36%ͳ͠
    
    +4
67. )PUXJSF
    PS
    3FBDUʁ $36%ͳ͠ͷ
    41"࣮૷Λ͢Δ৔߹ ✦
    3FBDU
    w )PPLT΍ΤίγεςϜͷਅՁΛൃش࢝͠ΊΔ
    ‣͔͠͠3FBDUʹର͢Δਂ͍ཧղ͕ඞཁ
    ✦
    )PUXJSF
    w αʔόʔαΠυʹ࣮૷ΛدͤΒΕͯѻ͍΍͍͢
    ‣࣮૷ͷ޻෉ɾ)PUXJSFతઃܭ
    ‎࣮૷Λ$36%ʹམͱ͠ࠐΉඞཁ͕͋Δ $36%ͷΈ $36%
    
    +4 $36%ͳ͠
    
    +4
68. )PUXJSF
    PS
    3FBDUʁ w 3FBDUͱ)PUXJSFɺͲͪΒ΋Ұ௕Ұ୹͋Γɺબ୒͢Δͷ͸೉͍͠
    w ͨͩ͠ɺʰ)PUXJSFͰ࣮૷Ͱ͖ͦ͏͔ʁʱͱ͍͏ࢹ఺ͩͱ
    w ࣮૷Λ$36%ʹू໿Ͱ͖Δ͔Ͳ͏͔ɺ͕େ͖ͳϙΠϯτ
69. ✦
    )PUXJSFతͳઃܭ͕Ͱ͖Ε͹ɺద༻ՄೳͳྖҬ͸૝૾ΑΓ޿͍
    ✦
    )PUXJSFΛ࢖ͬͯΈΑ͏͔ͳɺͱࢥ͏ํ͕૿͑ͨΒخ͍͠Ͱ͢ʂ ·ͱΊ
70. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
71. ࢀߟ w )PUXJSF
    )BOECPPL
    IUUQTIPUXJSFEEFW
    w 5VSCP
    )BOECPPLʢ೔ຊޠ༁ʣIUUQTFWFSZMFBGHJUIVCJP IPUXJSF@KBUVSCPIBOECPPLJOUSPEVDUJPO
    w ೣͰ΋Θ͔Δ)PUXJSFೖ໳
    5VSCPฤ
    IUUQT[FOOEFWTIJUB CPPLTDBUIPUXJSFUVSCP
    w )PUXJSFతͳઃܭΛ௥ٻͯ͠ʮ8FCࢴࣳډʯʹߦ͖ண͍ͨ࿩
    IUUQT LBJHJPOSBJMTPSHUBMLTOBZ