PSDからテキスト抽出してみる(xmp)

8 min readSep 24, 2017

デザインをする時、コーディングをする時などに、校閲が済んでいる文章をいただくことが多い。が、デザインをしながら文章・単語を適切なものに変更することもある。

この時に困るのが、誤植や誤字を確認するための校閲・校正作業（原稿との突き合わせ等）です。

どの原稿が最新で、何が正しい文章なのか、単語なのか？
デザインを見ながら変更を重ねているので、デザイン（PSDファイル）が最新かつ正しいケースがありますねー

ということで、PSDからテキスト抽出することができれば、デザインしたあとの作業が効率化できそう。

どのような作業を想定するか？

校正（原稿との突き合わせ）
コーディング（文章の流し込み）

PSDからテキスト抽出を試みる

まずはPSDファイルを用意する

では、以下を試す
メニューバー＞ファイル＞ファイル情報…
すると何かでてきた。

この画面のテンプレートフ とか書いてあるところを押下
書き出し… を選択。すると拡張子.xmp のファイルが書き出された。

テキストエディターで開いてみます。

<?xpacket begin=" " id="W5M0MpCehiHzreSzNTczkc9d"?>
<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c138 79.159824, 2016/09/14-01:09:01        ">
   <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
      <rdf:Description rdf:about=""
            xmlns:xmp="http://ns.adobe.com/xap/1.0/"
            xmlns:dc="http://purl.org/dc/elements/1.1/"
            xmlns:xmpMM="http://ns.adobe.com/xap/1.0/mm/"
            xmlns:stEvt="http://ns.adobe.com/xap/1.0/sType/ResourceEvent#"
            xmlns:photoshop="http://ns.adobe.com/photoshop/1.0/"
            xmlns:tiff="http://ns.adobe.com/tiff/1.0/"
            xmlns:exif="http://ns.adobe.com/exif/1.0/">
         <xmp:CreatorTool>Adobe Photoshop CC 2017 (Macintosh)</xmp:CreatorTool>
         <xmp:CreateDate>2017-08-21T00:58:08+09:00</xmp:CreateDate>
         <xmp:MetadataDate>2017-08-21T01:06:37+09:00</xmp:MetadataDate>
         <xmp:ModifyDate>2017-08-21T01:06:37+09:00</xmp:ModifyDate>

よく分からない文字がツラツラと書いてありますね。
その中で、<photoshop:TextLayers> と書いてある部分があります。その部分を抜き出してみます。

<photoshop:TextLayers>
   <rdf:Bag>
      <rdf:li rdf:parseType="Resource">
         <photoshop:LayerName>Text</photoshop:LayerName>
         <photoshop:LayerText>Text</photoshop:LayerText>
      </rdf:li>
      <rdf:li rdf:parseType="Resource">
         <photoshop:LayerName>Psd</photoshop:LayerName>
         <photoshop:LayerText>Psd</photoshop:LayerText>
      </rdf:li>
   </rdf:Bag>
</photoshop:TextLayers>

おおー、ぽいですね。テキストエディター上で整形して<photoshop:LayerText> だけにしてみます。

<photoshop:LayerText>
Text<photoshop:LayerText>
Psd

これで完成です。抽出できました。
僕の考える完成形となるのですが、いくつかクセがあるので、それを理解して正しく抽出したい。なので以下はそのクセの紹介です。

いくつか気になる部分があるので、調べてみます。

レイヤー構造と出力結果の関係性
改行はどうなる
スマートオブジェクト（.psbファイル）はどうなる
リンク配置されたpsdはどうなる

レイヤー構造と出力結果の関係性

左のデザインを、右のレイヤー構造で作ってみた。
それを.xmp で抽出してみる。

<photoshop:LayerName>Footer</photoshop:LayerName>
<photoshop:LayerText>Footer</photoshop:LayerText>
<photoshop:LayerName>text</photoshop:LayerName>
<photoshop:LayerText>Section B</photoshop:LayerText>
<photoshop:LayerName>text</photoshop:LayerName>
<photoshop:LayerText>Section A</photoshop:LayerText>
<photoshop:LayerName>text</photoshop:LayerName>
<photoshop:LayerText>Section Side</photoshop:LayerText>
<photoshop:LayerName>Header</photoshop:LayerName>
<photoshop:LayerText>Header</photoshop:LayerText>

<photoshop:LayerName> と<photoshop:LayerText> だけにするとこんな感じになります。Photoshopのレイヤーの重なり順とは逆の状態で出力されるようですね。

改行はどうなる

上図の.xmpを出力しました。画像では分かりにくい改行やスペースがどのようになるのか。結果は以下の通り。

<photoshop:LayerName>
1行のテキスト
<photoshop:LayerText>
Lorem ipsum dolor sit amet.<photoshop:LayerName>
2行のテキスト
<photoshop:LayerText>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.<photoshop:LayerName>
半角スペース、全角スペース混ぜたテキスト
<photoshop:LayerText>
半角 全角 半角全角  半角半角  全角全角<photoshop:LayerName>
その他気になる文字
<photoshop:LayerText>
行末に半角スペースと改行  改行を連続   絵文字や記号❗♥『〒』①②③■△◯◎●・…

レイヤー名に知りたいことを、レイヤーテキストにそのテスト文字列を入力してみました。不可視文字がMediumでどのように処理されるか心配なので、テキストエディターのスクリーンショットも添付します。

スマートオブジェクト（.psbファイル）はどうなる

…調査を先送りします。

リンク配置されたpsdはどうなる