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

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 Λୟ͚ͩ͘
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