CLIP STUDIO のファイルを解析して JavaScript から読めるライブラリを作った / I made a JavaScript library to read .clip file

CLIP STUDIO のファイルを解析して JavaScript から読めるライブラリを作った / I made a JavaScript library to read .clip file

F2efbf06e1ada70dc431f6c31a5a399d?s=128

Tadao Iseki

June 12, 2020
Tweet

Transcript

  1. @saitoeku3 CLIP STUDIO ͷϑΝΠϧΛղੳͯ͠ JavaScript ͔ΒಡΊΔϥΠϒϥϦΛ࡞ͬͨ 2020.6.12 ΤϯδχΞษڧձ

  2. ࣗݾ঺հ ͌͞ͱ ۚ୔޻ۀେֶ pixiv Inc. Gaiax Co. Ltd. UI/UX νʔϜΞϧόΠτ

    Rails / ϑϩϯτΤϯυ ϝσΟΞ৘ใֶՊ Tadao Iseki #Web #TypeScript #React #Baseball #DTM @saitoeku3 #VTuber 447 Records Web ΤϯδχΞ
  3. ࠓ೔࿩͢͜ͱ 1. CLIP STUDIO ͱ͸ 2. എܠ 3. clipstudio.js ͷ঺հ

    4. ཪͰ΍͍ͬͯΔ͜ͱ 5. ࠓޙ
  4. ࠓ೔࿩͞ͳ͍͜ͱ 1. ׆༻ྫ (·ͩͳ͍)

  5. CLIP STUDIO ͱ͸ https://www.clipstudio.net/ ϐΫγϒϢʔβʔʹҰ൪બ͹Ε͍ͯΔ (Β͍͠) ຊ֨తͳϖΠϯτπʔϧ ਓؾͷϖϯλϒʹ෇ଐ Windows macOS

    iPad iPhone ʹରԠ ฉ͍ͯΔਓͷதʹ΋Ϣʔβʔ͕͍Δ͸ͣ
  6. എܠᶃ

  7. എܠᶄ FANBOX Ͱ .psd ΍ .clip ͕഑෍͞Ε͍ͯΔͷΛݟ͔͚Δ ϓϩͷ࡞඼ΛखݩͰݟΕ͍͍ͯΑͶ

  8. എܠᶄ ࢧԉऀશһ͕ Photoshop ΍ CLIP STUIO Λ ͍࣋ͬͯΔΘ͚Ͱ͸ͳ͍ ͍࣋ͬͯͳ͍ਓͰ΋ָ͠ΊΔͱ͍͍ΑͶ FANBOX

    Ͱ .psd ΍ .clip ͕഑෍͞Ε͍ͯΔͷΛݟ͔͚Δ ϓϩͷ࡞඼ΛखݩͰݟΕ͍͍ͯΑͶ
  9. CLIP STUDIO ͕ͳͯ͘΋ .clip ΛಡΊΔ JavaScript ϥΠϒϥϦΛ࡞Γ·ͨ͠ https://github.com/saitoeku3/clipstudio.js

  10. clipstudio.js ͰͰ͖Δ͜ͱ 1. .clip ϑΝΠϧͷαϜωΠϧऔಘ 2. શϨΠϠʔͷ৘ใऔಘ

  11. ࢖༻ྫ Browser Node.js

  12. ࢖༻ྫ https://www.clipstudio.net/ja/dl/sample_data/ ͜ΕͰࢼ͢

  13. ཪͰ΍͍ͬͯΔ͜ͱ 1. .clip ͷதͷϨΠϠʔʹؔ͢ΔσʔλΛൈ͖औΔ 2. σʔλΛύʔε͢Δ 3. ు͖ग़͢

  14. ཪͰ΍͍ͬͯΔ͜ͱ 1. .clip ͷதͷϨΠϠʔʹؔ͢ΔσʔλΛൈ͖औΔ 2. σʔλΛύʔε͢Δ 3. ు͖ग़͢ ࣮͸ SQLite

    ͷܗࣜͰอଘ͞Ε͍ͯΔʂ SQL Λୟ͚ͩ͘
  15. None
  16. ཪͰ΍͍ͬͯΔ͜ͱ (SQLite ෦෼ΛऔΓग़͢) ͜͜ʹ஫໨

  17. ཪͰ΍͍ͬͯΔ͜ͱ (SQL Λୟ͘) ͜͜ʹ஫໨

  18. ࣮͸ϒϥ΢βͰ΋… SQLite ͕ಈ͚͹Ͳ͜Ͱ΋ϑΝΠϧΛಡΊΔʂ ͡Ό͋ϒϥ΢βͰ΋ SQLite Λಈ͔ͦ͏ (ʁʁʁ)

  19. https://github.com/sql-js/sql.js

  20. ࣮͸ϒϥ΢βͰ΋… SQLite ͕ಈ͚͹Ͳ͜Ͱ΋ϑΝΠϧΛಡΊΔʂ ͡Ό͋ϒϥ΢βͰ΋ SQLite Λಈ͔ͦ͏ (ʁʁʁ) sql.js (Web Assembly

    ʹͨ͠ SQLite) Ͱ࣮ߦ
  21. ࠓޙ ֤ϨΠϠʔͷը૾Λൈ͖औΔ͜ͱ͸Ͱ͖͍ͯͳ͍ ࢥͬͨΑΓͰ͖Δ͜ͱ͕গͳͯ͘൵͠ΜͰ͍Δ Կ͔໘ന͍͜ͱ͕Ͱ͖ͳ͍͔ΞΠσΞ଴ͬͯ·͢ʂ

  22. ࢀߟ ΠϥετΛ Git Ͱ؅ཧ͔ͨͬͨ͠ͷͰπʔϧΛͭͬͨ͘ - blog.syfm https://syfm.hatenablog.com/entry/2016/10/25/183044 calmery/ExtractClipStudio: Extract sqlite

    from ClipStudio file https://github.com/calmery/ExtractClipStudio