3DCGを用いたwebサービス開発の過程において、PSDファイルをTypeScriptにより効率的に編集するライブラリを開発いたしました。

Webサービス開発における、PSD編集の非効率

マルチレイヤを扱うことが可能な各種画像形式の中で、PSDは対応グラフィックソフトが多い点において優れている一方、Web上のコードによりファイルを編集する方法が不足しておりました。結果として、3DCGを用いたwebサービスを開発する上で、テクスチャ編集を自動的に行う方法がなく、効率的なサービス運用の方式を描くことが困難な状況にありました。

PSDを扱う機能を網羅した、Web開発向けライブラリ

PSDファイルの公開仕様に基づき、Web開発向けPSD編集ライブラリを開発いたしました。バイナリファイルの読み書きから、画像変換・画像合成に至るまで、web上でPSDを取り扱う際に必要な機能を網羅しております。

バイナリ読み込み

PSDファイルのバイナリを読み込み、データ構造をメモリに格納します。または、メモリ内のデータ構造をバイナリ化し、PSDファイルを作成します。

レイヤー・フォルダ構造構築

PSDファイルに格納されている個別データを構造化し、実際のレイヤー構造を再現します。PSDファイルがない場合は、Webインターフェイス上の画像編集によりレイヤー構造を構築します。

Web形式への画像変換

PSDにて表現されている画像を、Web閲覧可能な形式に変換します。単純な画像を生成するため、そのままダウンロードすることが可能です。

レイヤー・フォルダ構造のPSD形式変換

作成したレイヤー・フォルダ構造を、PSD形式のファイル構造に変換します。

バイナリ書き出し

作成したPSDファイル構造を、実際のバイナリとして書き出します。PSDファイルの取得が可能です。