CLIP STUDIO の .clip ファイルを読み取れる JavaScript ライブラリを公開した

はじめに

こんにちは、さぃと (@saitoeku3) です。
コロナの影響で春休みの予定がことごとくなくなり、暇な大学生です。

ずっと引きこもっていてあまりにも暇だったので、何かしたいという気持ちが高ぶり、以下のツイート思い出して .clip ファイルの解析をしていました。

そこから色々考えた結果、Photoshop や CLIP STUDIO を持っていなくても .psd や .clip を見て楽しめるといいなと思い始めてサービスを作りたくなりました。

最近は FANBOX などの支援型プラットフォームを通して、多くの方がプロのイラストデータを入手できるようになりましたが、その全員が有料のイラストソフトを持っているわけではないため、楽しめるのは一部の限られた方です。もし、今考えているサービスが完成すると新しい楽しみ方が生まれそうで良くないですか。

ということで、下準備としてライブラリを書きました。

作ったもの

clipstudio.js - 📎A JavaScript library for using CLIP STUDIO .clip file on browsers and Node.js

ブラウザでも Node.js でも同様の API で .clip ファイルを読み取れるライブラリです。
既に実装されている機能について使用例を紹介します。

Node.js でサムネイル画像を生成する

Node.js は ClipStudio.load にファイルの Buffer を渡すことで初期化できます。 改行を含めて 8 行で .clip ファイルのサムネイル画像を生成できます。便利ですね。

import { ClipStudio } from 'clipstudio'
import { promises as fs } from 'fs'

const file = await fs.readFile('path/to/clip-file')
const clip = await ClipStudio.load(file)

const thumbnail = clip.getThumbnail()
await fs.writeFile('thumbnail.png', thumbnail)

ブラウザでレイヤーの情報を取り出す

ブラウザでは ClipStudio.load に input で受け取った File オブジェクトを渡すことで初期化できます。 インスタンスに生えている getLayers() でレイヤーの情報を取り出せます。

import { ClipStudio } from 'clipstudio'

const input = document.querySelector('input')

input.onchange = event => {
  const [file] = event.target.files
  const clip = await ClipStudio.load(file)
  const layers = clip.getLayers()
  console.log(layers)
}

レイヤーの型

残念ながら各レイヤーの画像データは .clip 上には保存されていない？ので、現在はちょっとしたデータしか扱えません。

type Layer = {
    id: string // uuid
    index: number
    name: string
    opacity: number
    isVisible: boolean
    isFolder: boolean
}

課題と展望

実は .clip ファイルを読み取るために SQLite を使用しているのですが、ブラウザでも動作させるために sql.js というライブラリを使っています。これは「SQLite を Wasm にしてブラウザでも動くようにした」という頭のおかしいもの (褒め言葉) なので、以下のような少々面倒なことがあります。

  • そもそもの実行速度が遅い
  • Jest でテストをすると .wasm の読み込みに失敗する

今後は処理を Worker に逃したり、Jest や Node.js と Wasm の関係について学んだりする必要がありそうです。このままだとテスト環境を自作する必要がありそうで面倒です(何か解決策はあるはず)。

また、ライブラリを充実させたくても僕一人で .clip を解析して API の仕様を考えるのはかなり大変です。将来的にドキュメントや議論の場を整備して複数人でやっていけると嬉しいです。

おわりに

今回は CLIP STUDIO の .clip ファイルを読み取れる JavaScript ライブラリの紹介をしました。

機能はまだまだ少ないので用途は限られてきますが、このライブラリの登場によって可能性は広がったと思います。今後も開発は続けていくので興味のある方は watch やスターをして暖かく見守っていただけると励みになります。