CLIP STUDIO PAINTの.lipファイルをハックして作業動画を書き出すWindowsアプリを作った

萬成 亮太
148

フロントエンド担当の萬成です。

デジタルイラストを描いていると、描いた後に作業動画を早回しで見たくなることがたまにあります。
しかし、普段使っているお絵かきソフト「CLIP STUDIO PAINT」(以下、クリスタ)にそんな機能はありません。そこで、クリスタの保存形式である.lipファイルを使って作業動画を書き出すWindowsアプリを作ることにしました。

※絵師の方は使い方へ

今回開発するアプリ

今回はクリスタで作成した.lipファイル(Photoshopで言うと.psdファイル)が更新されたタイミングでPNG画像を書き出して行き、イラストが完成したらそれらを結合してアニメーションGIFを生成するWindowsアプリを作ります。ちなみに名前は「LIP2GIF」です。

動作の流れはおおよそ以下のようになります。

LIP2GIFのアクティビティ図
# 種類 概要 C#での実装
1 処理 作業動画を作成する.lipファイルを選びます。この.lipファイルからアニメーションGIFが生成されます。 OpenFileDialogを使ってファイルを指定
2 分岐 クリスタが起動しているかどうか確認します。クリスタが終了した==イラストが完成した とみなします。クリスタが起動している間は.lipファイルが更新される可能性があるので、監視します。完成していればアニメーションGIFを書き出します。 Process.GetProcesses()で取得した起動中プロセスの中に"CLIPStudioPaint"というプロセスがあるか
3 分岐 監視対象の.lipファイルが更新されているかどうか確認します。LIP2GIFはユーザーのファイル保存をトリガにしてアニメーションGIF用のフレーム画像を保存していきます。 FileInfoでファイルの最終更新日時を取得して確認
4 処理 .lipファイルからフレーム画像用にPNGファイルを書き出します。 ??
5 処理 監視を繰り返す間隔を空けるため1秒待ちます。 Thread.Sleep(1000)
6 処理 4で書き出した複数のPNGファイルを結合し、アニメーションGIFを生成します。 Magick.NET(ImageMagickのラッパー)を使用

※2がtrueの間、3〜5を繰り返します。

さて、上の表のうち4以外の実装は、「C#での実装」の欄に書いたとおりパッと思いつきます。
4を実装するためには、.lipファイルをもう少し知る必要があります。

.lipファイルの正体

単刀直入に言うと、クリスタの.lipファイルはSQLiteデータベースです。

クリスタで絵を描き、ターミナルで以下のコマンドを打ってみましょう。

$ sqlite3 ./吹雪ちゃん.lip

すると、

$ sqlite3 ./吹雪ちゃん.lip
SQLite version 3.8.5 2014-08-15 22:37:57
Enter ".help" for usage hints.
sqlite> .table
Canvas          ElemScheme      Mipmap          ParamScheme
CanvasNode      Layer           MipmapInfo      Project
CanvasPreview   LayerThumbnail  Offscreen
sqlite> .schema
CREATE TABLE Project(_PW_ID INTEGER PRIMARY KEY AUTOINCREMENT, …

こんな塩梅です。

それっぽいテーブルがたくさん並んでいますね。CanvasPreviewなんか今回実現したい.lip→.png 変換を実現させてくれそうな香りが漂っています。

sqlite> SELECT * FROM CanvasPreview;
1|1|1|1|1000|708|�PNG

SELECTするとレコードが1行入っていました。最後のカラムはBLOB型で、PNGのバイナリが入っています。

SQLiteからBLOB型の値をバイナリで書き出すコマンドがあったのでやってみます。

やりました。
やりました。

CanvasPreview.ImageDataからPNGファイルを書き出せることが分かりました。
先ほどの手順表4が以下のように埋まったので、アプリを実装できます。

# 種類 概要 C#での実装
4 処理 .lipファイルからフレーム画像用にPNGファイルを書き出します。 .lipファイルをSQLiteとして開き、CanvasPreview.ImageDataをダンプ

アプリの実装

ここからLIP2GIFの開発の話に入ります。が、特に真新しいことはないのでWindowsアプリ開発初心者としてハマった点を書きたいと思います。

タスクトレイ常駐型のアプリケーションの作成

Visual Studioで新規にWindowsフォームアプリケーションを作成すると、空のウィンドウが一つ開くアプリケーションが作られます。

namespace WindowsFormsApplication1 {
	static class Program {
		[STAThread]
		static void Main() {
			Application.EnableVisualStyles();
			Application.SetCompatibleTextRenderingDefault(false);
			Application.Run(new Form1());
		}
	}
}

Main()はプログラムを起動した時に一番最初に走る部分です。new Form1()がこのアプリのメインのウィンドウで、通常はこのForm1にGUIや処理を書きます。

余談ですが、Macのアプリは×ボタンでウィンドウを閉じてもアプリ自体は生き残るものがほとんどなのに対し、Windowsアプリは×ボタンを押すとプロセスも終了します。この挙動は上記のひな形に現れており、Application.Run(new Form1())を実行すると、Form1ウィンドウが閉じるまでメインのスレッドはこの行で待機します。ウィンドウを閉じるとこの行を抜けるため、プロセスが終了します。

さて、今回作るアプリはウィンドウの無い、タスクトレイに常駐するタイプのアプリにしたかったので、ひな形のMain()の中をすべて消してから以下のようにプログラムを書いていました。

namespace WindowsFormsApplication1 {
	static class Program {
		[STAThread]
		static void Main() {
			// メインの処理
			// :
		}
	}
}

ところが、WindowsAPI的にApplication.Run()は必ず呼ばなければならないらしく、上のコードでは非同期処理がうまく動かないことがありました。そこで、以下のようにFormの代わりにApplicationContextに処理を書くことで、ウィンドウが立ち上がらないアプリが書けるようになりました。

namespace WindowsFormsApplication1 {
	static class Program {
		[STAThread]
		static void Main() {
			Application.EnableVisualStyles();
			Application.SetCompatibleTextRenderingDefault(false);
			Application.Run(new Processor());
		}
	}
	
	class Processor : ApplicationContext {
		public Processor() {
			// メインの処理
			// :
		}
	}
}

LIP2GIF

試行錯誤の末、クリスタの作業動画を書き出すWindowsアプリが完成しました。アプリ開発のため僕のMacは1営業日の間Boot Campでした。というのは嘘で本当はVMwareFusionでした。

LIP2GIFのアイコン

使い方

  1. クリスタを起動して新規キャンバスを作り、.lipファイルを保存します。
  2. LIP2GIFを起動して先ほど作成した.lipファイルを選択します。
  3. LIP2GIFによる監視が始まります。以降、.lipファイルを保存するたびに、.lipファイルと同じ階層に作られたディレクトリにPNGファイルが書き出されます。監視中はタスクトレイのアプリアイコンとして保存回数が表示されます。
  4. クリスタを終了すると、書き出されたPNGファイルからアニメーションGIFを生成し、デスクトップに保存します。PNGファイルを書き出していたディレクトリは削除されます。

監視対象の.lipファイルと同じ場所に「(.lipファイル名)$LIP2GIF」という名前でフォルダが作られ、その中にPNGが次々と保存されます。見られたくないタイミングで保存してしまった時は、GIFアニメーションを作成する前(クリスタを終了する前)にこのフォルダの中からファイルを消すことで、作業動画から省くことが出来ます。

デモ

記事のヘッダー用に正規空母と空也上人を描きました。

空也でお茶を濁すつもりだったけどしっくり来なかった感じです。

まとめ

この手の作業動画はPCの画面を録画する方法が一般的ですが、見られてはいけない作業が写ってしまったり、後で動画を編集したりといろいろ面倒です。
対してLIP2GIFは、自分の好きなタイミングで作業のスナップショットを撮ることが出来、書き出しが楽なのが利点です。
エンジニア的な観点では、画像を保存した時に作業記録が残るあたり git commit 感出てて面白いです。

皆さんの創作活動にお役立ていただければ幸いです。

おまけ

空也を配布します。Twitterアイコンにお役立ていただければ幸いです。

lip2gif_yuri lip2gif_hima
百合 向日葵