VTuber の LOD をみんなで作るための取り組み / Initiatives for an environment where anyone can contribute to vlueprint

Transcript

1. 2020.4.25 Sat
   VTuber ͷ LOD ΛΈΜͳͰ࡞Δ
   ͨΊͷऔΓ૊Έ
   @saitoeku3
   Kanazawa.js Remote Meetup #02
   

   View Slide

2. ࣗݾ঺հ
   ͌͞ͱ
   ۚ୔޻ۀେֶ
   pixiv Inc.
   Gaiax Co. Ltd.
   UI/UX νʔϜ ΞϧόΠτ
   ۀ຿ҕୗ
   ϝσΟΞ৘ใֶՊ
   Tadao Iseki
   #Web #JavaScript #TypeScript
   #Ruby #Baseball #DTM @saitoeku3
   

   View Slide

3. ࠓ೔࿩͢͜ͱ
   1. Linked Open Data ͱ͸
   2. vlueprint ʹ͍ͭͯ
   3. ࠓճͷऔΓ૊Έ
   4. ·ͱΊ
   

   View Slide

4. ࠓ೔ͷΰʔϧ
   1. LOD ٴͼ vlueprint ʹ͍ͭͯ஌ͬͯ΋Β͏
   2. Turtle ϑΝΠϧ (ޙड़) Λ JavaScript Ͱѻ͏
   3. Git Data API (ޙड़) ʹ͍ͭͯগ͚ͩ͠஌Δ
   

   View Slide

5. Linked Open Data ͱ͸
   ग़య: https://lod-cloud.net/
   ΢Σϒ্Ͱίϯϐϡʔλॲཧʹదͨ͠
   σʔλΛެ։ɾڞ༗͢ΔͨΊͷٕज़ͷ૯শ
   ߏ଄Խ͞Εͨσʔλಉ࢜ΛϦϯΫ
   ίϯϐϡʔλ͕ར༻Մೳͳʮσʔλͷ΢Σϒʯ
   ͷߏஙΛ໨ࢦ͢
   ηϚϯςΟοΫ΢Σϒͷܗ੒ʹॏཁͳٕज़
   (Wikipedia)
   

   View Slide

6. View Slide

7. Linked Open Data ͱ͸
   ؆୯ʹݴ͏ͱɺଞͷσʔλͱඥ෇͚ΒΕΔܗͰެ։͞Εͨσʔλͷ͜ͱ
   ઌߦࣄྫ:
   - PrismDB (ϓϦςΟʔγϦʔζͷ LOD)
   - im@sparql (ΞΠυϧϚελʔγϦʔζͷ LOD)
   

   View Slide

8. Linked Open Data ͱ͸
   Ͱ͖Δ͜ͱ:
   - ೚ҙͷσʔλϕʔεͷߏஙɾެ։
   - ଞͷ LOD ͱؔ࿈ͷ͋Δσʔλͷऔಘ
   خ͍͜͠ͱ:
   - ެ։͞ΕͨσʔλΛ༻͍ͨ։ൃ͕׆ൃʹͳΔ
   prickathon ΞΠϚεϋοΧιϯ
   

   View Slide

9. vlueprint ʹ͍ͭͯ
   VTuber ͷ LOD (Virtual + Blueprint)
   https://github.com/vlueprint
   VTuber ؔ࿈ͷ૑࡞Λࢧ͑ɺ੝Γ্͛Δ
   ΈΜͳͰ
   ๻ͷࢥ͍
   https://vlueprint.org
   

   View Slide

10. vlueprint ʹ͍ͭͯ
    Turtle (.ttl) ϑΝΠϧͰσʔλΛ؅ཧ Web ͔ΒӾཡՄೳ
    

    View Slide

11. ࠓճͷऔΓ૊Έ
    

    View Slide

12. ࠓճͷऔΓ૊Έ
    
    

    View Slide

13. ࠓճͷऔΓ૊Έ
    1. ΫϥΠΞϯτ͔Βߋ৽σʔλΛड͚औΔ
    2. .ttl ܗࣜͰอଘ͞Ε͍ͯΔσʔλΛॻ͖׵͑Δ
    3. มߋͷ PR Λ࡞੒ (GitHub ΞΧ΢ϯτͳ͠Ͱ)
    4. ϝϯςφ͕ϨϏϡʔ
    

    View Slide

14. ࠓճͷऔΓ૊Έ
    1. ΫϥΠΞϯτ͔Βߋ৽σʔλΛड͚औΔ
    2. .ttl ܗࣜͰอଘ͞Ε͍ͯΔσʔλΛॻ͖׵͑Δ
    3. มߋͷ PR Λ࡞੒ (GitHub ΞΧ΢ϯτͳ͠Ͱ)
    4. ϝϯςφ͕ϨϏϡʔ
    Nuxt.js ੡ͷ Web ΞϓϦ
    ύʔαΛ࣮૷
    GitHub API
    શ෦ JavaScript ͰͰ͖Δ͡ΌΜ
    

    View Slide

15. ࠓճͷऔΓ૊Έ
    1. ΫϥΠΞϯτ͔Βߋ৽σʔλΛड͚औΔ
    2. .ttl ܗࣜͰอଘ͞Ε͍ͯΔσʔλΛॻ͖׵͑Δ
    3. มߋͷ PR Λ࡞੒ (GitHub ΞΧ΢ϯτͳ͠Ͱ)
    4. ϝϯςφ͕ϨϏϡʔ
    ࠓճ͸͜͜ͷ࿩
    ύʔαΛ࣮૷
    GitHub API
    

    View Slide

16. .ttl ܗࣜͰอଘ͞Ε͍ͯΔσʔλΛॻ͖׵͑Δ
    N3.js ͱ͍͏ϥΠϒϥϦͰύʔεͰ͖ͦ͏
    

    View Slide

17. .ttl ܗࣜͰอଘ͞Ε͍ͯΔσʔλΛॻ͖׵͑Δ
    ֤ଐੑΛϊʔυʹύʔεͯ͘͠ΕΔ
    

    View Slide

18. .ttl ܗࣜͰอଘ͞Ε͍ͯΔσʔλΛॻ͖׵͑Δ
    ྑ͍ײ͡ʹ࢖͑ΔΑ͏ʹͨ͠
    https://github.com/saitoeku3-sandbox/vlueprint-experimental
    

    View Slide

19. มߋͷ PR Λ࡞੒ (GitHub ΞΧ΢ϯτͳ͠Ͱ)
    Q. ͦΜͳ͜ͱͰ͖Δͷʁʁ
    A. GitHub API ʹੜ͍͑ͯΔ Git Data API Λ࢖͑͹
    B. ͦΕͬΆ͍͜ͱ͕Ͱ͖·͢
    

    View Slide

20. มߋͷ PR Λ࡞੒ (GitHub ΞΧ΢ϯτͳ͠Ͱ)
    ࠓճ͸ @octkit/rest Ͱ࣮૷
    

    View Slide

21. มߋͷ PR Λ࡞੒ (GitHub ΞΧ΢ϯτͳ͠Ͱ)
    Git Data API ͔Β PR Λ࡞ΔͨΊʹඞཁͳ͜ͱ
    1. GitHub ͷΞΫηετʔΫϯ (public_repo) Λ༻ҙ
    2. มߋ͍ͨ͠ϒϥϯνͱ blob Λऔಘ
    3. มߋޙͷ blob ͱ tree Λ࡞੒
    4. commit ͱ push ઌͷ ref Λऔಘ
    5. PR Λ࡞੒
    

    View Slide

22. มߋͷ PR Λ࡞੒ (GitHub ΞΧ΢ϯτͳ͠Ͱ)
    Git Data API ͔Β PR Λ࡞ΔͨΊʹඞཁͳ͜ͱ
    1. GitHub ͷΞΫηετʔΫϯ (public_repo) Λ༻ҙ
    2. มߋ͍ͨ͠ϒϥϯνͱ blob Λऔಘ
    3. มߋޙͷ blob ͱ tree Λ࡞੒
    4. commit ͱ push ઌͷ ref Λऔಘ
    5. PR Λ࡞੒
    

    View Slide

23. ׬੒ͨ͠ϓϩτλΠϓ
    https://github.com/saitoeku3-sandbox/auto-pr-creator/pulls
    https://auto-pr-creator.herokuapp.com/
    

    View Slide

24. ·ͱΊ
    - VTuber ͷ LOD Ͱ͋Δ vlueprint ͷ։ൃ͕ߦΘΕ͍ͯΔ
    - N3.js Λ࢖͑͹ .ttl ܗࣜͷϑΝΠϧΛ JavaScript ͔Βར༻Ͱ͖Δ
    - Git Data API ʹΑͬͯΞΧ΢ϯτ͕ͳͯ͘΋ PR ΛૹΕΔΑ͏ʹͳΔ
    ͋ͳͨͷ Contribution Λ଴͍ͬͯ·͢ʂ
    

    View Slide