Photoshopのpsdファイルを解析しHTMLで表示させるJSライブラリ「psd2img.js」をGitHubに公開！

javascript、www、、、

HTMLを構築中、psdファイルをPhotoShopで修正する毎に画像を書き出しすんの面倒だな…。と思ったことはありますか？ありますよね！（ないか？）

とコピペ文章で始まった今回、発表するのはJSライブラリ「psd2img.js」です。もちろんこの後もコピペ文章が続きます！。

「psd2img.js」で出来ること

「psd2img.js」は<img>タグのsrc属性（もしくはname属性）に直接psdファイルを指定して画像を表示させることができます。

または、セレクタ指定した<img>タグに同じpsdファイルを表示させること出来ます。「psd2img.js」はpsdファイルを解析して表示させるため、キャッシュを利用できないので同一のpsdファイルを多数表示させる場合は、効率的に読み込むことが出来ます。

download：GitHub「psd2img.js」

「psd2img.js」の使用方法

Step1.「psd2img.js」を読み込みます。

<script src="psd2img.js"></script>

Step2.<img>タグを読み込んだ後にscriptを実行

◎id指定・src属性にファイルパス

...
    <img src="PhotoShopFile.psd" id="img01">
</body>
▲ここまでHTMLタグ▲
<script>
    psd2img({
        target:"#img01",
        attr:"src"
    });
</script>

◎class指定・name属性にファイルパス

...
    <img name="PhotoShopFile.psd" class="imgs">
</body>
▲ここまでHTMLタグ▲
<script>
    psd2img({
        target:".imgs",
        attr:"name"
    });
</script>

◎id、class無し・src属性にファイルパス

...
    <img src="PhotoShopFile.psd">
</body>
▲ここまでHTMLタグ▲
<script>
    psd2img({
        target:"img",
        attr:"src"
    });
</script>

スポンサーリンク

name属性の用意について

なんでわざわざname属性の用意をしたかというと、srcに記述するともしかしてブラウザが読みに行き読み込み速度が遅くなると思ってのことです。まぁ既にpsdファイルの方がjpgファイルより格段に容量はありますけどね。

サンプルページ

上記ページの<img>タグはpsdファイルを使用しています。

「psd2img.js」を動作させる２つのコツ

１点はURLスキームは「http」または「https」である必要があります。つまり作成したHTMLファイルをブラウザに突っ込んでも動作しません。コーディングツールなどでHTMLプレビューさせる等してください。

Uniform Resource Locator（URL）
（出典: フリー百科事典『ウィキペディア（Wikipedia）』）

もう１点は必ず、HTML要素タグを読み込んだ後に実行することです。コードは上から順に読み込んでいきますので</body>終了タグが終わった後に実行して下さい。

同一psdファイルの効率的読み込み

同一psdファイルを同じページ上で複数表示させる場合、通常のimg表示と違いキャッシュを使えないので一つ一つ読み込み直すことになり非常に非効率です。同じpsdファイルを複数表示させる場合はこちらをお使い下さい。

...
    <img class="readLaters">
    <img class="readLaters">
    <img class="readLaters">
    <img class="readLaters">
</body>
▲ここまでHTMLタグ▲
<script>
    psd2img({
        target:".readLaters",
        src:"PhotoShopFile.psd"
    });
</script>

引数srcにファイルパスを指定して下さい。ターゲットに対して１つのファイル解析で画像を表示させることができます。

対応ブラウザについて

今回、読み込みを【fetch】オンリーにしていて、対応ブラウザにIE11+は入ってません。「ai2img.js」は【fetch】が使用できないブラウザは【XMLHttpRequest】を使用してテキスト読込をしていました。

Photoshopファイルはバイナリを解析していて、【XMLHttpRequest】はバイナリ読込の同期・非同期の切替ができず複数ファイル読み込むと、よく分らんようになってしまったので諦めました（未だに同期・非同期、どっちがどっちか分かっていない）。

ブラウザ名 対応状況 読込方法
Chrome ○ fetch
Firefox ○ fetch
Edge ○ fetch
Safari ○ fetch
IE 11+ × –

配置psdファイルについて

対応している形式は下記表参照

カラーモード 8bit 16bit 32bit
白黒２階調 × × ×
グレースケール ○ ○ ×
RGB ○ ○ ×
CMYK ○ ○ ×
Lab × × ×

解析されるpsdファイルは以下の特徴があります。

  • 解像度は無視されピクセルサイズで表示される
  • アートボードも無視される
  • 透明も無視され白になる

psdファイルをそのまま読み込むのでモチロンjpgやpngファイルより容量は大きいです。

下記、サンプル画像（500×500ピクセル・RGB・8bitチャンネル）のファイル容量の概算

ファイル容量の違い
.psd 758KB（776,964byte） 標準的なpsd
.jpg 200KB（203,849byte） 画質12（ベースライン：標準）
.psd 1,484KB（1,528,244byte） 調整レイヤー（トーンカーブ）付きpsd

500×500ピクセル＝250,000byteそれに×1byte（8bit）がRGB各要素３枚ありますので、750,000byte！キロバイトに換算（1,024で割る）すると約732KB（計算合ってますよね？）。諸々付加データ込みで、大体あってますね。

調整レイヤーってチャンネル１枚よりも容量あるんだな。

読む必要のないハナシ

最初にバイナリでファイル解析を行っていたのは確か2013年くらいだったと思いますがこのサイトを参考にさせて頂きました。

最初はVisual Basicで作ってたんですよね。ファイル収集の機能とかもつけたアプリケーション開発していて…、未公開ですが。それをjavascriptに移植して【あどびノ夜叉】・【あどびぷれびゅー】のwebサービスを立ち上げたのが2016年。

なので今では自分でも、どうやってPhotoShopファイルを解析していたのか分からなくなってしまいました。勘で数値変えてたら出来た感じです、しかし32bitのファイルとカラーモードがLab形式のファイルはどうしても解析出来ませんでした…。

ダウンロードは「GitHub」から

興味のある方はダウンロードをどうそ。今回もGitHubにて公開しています、世界の皆様！使って下さい。

しかしイラレaiファイルと違って容量ありすぎて使い物にならないだろうな…。

→download：GitHub「psd2img.js」

便利だと思う度　★★☆☆☆

PhotoShop使いません★☆☆☆☆

スポンサーリンク

More from my site

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です