Skip to content

README_ja.md

Latest commit

 

History

History
323 lines (247 loc) · 18.2 KB

README_ja.md

File metadata and controls

323 lines (247 loc) · 18.2 KB
Raw

psdtext

English version

最近の更新: CHANGELOG_ja.md

PSD のテキストレイヤを一覧して書き換えるローカルツール。 Photoshop を開かずに、翻訳・校正・表記ゆれ修正といったテキストの再編集を行う。

  • レイヤツリーとテキスト一覧を並べて表示し、その場で本文を編集
  • CSV 書き出し / 読み込みで一括置換 (翻訳やレビューの外注に使える)
  • 編集していないレイヤはバイト単位でそのまま保存される
  • ブラウザが UI。exe 1 つで動き、閉じれば自動で終了する
psdtext                  ファイル選択から始める
psdtext foo.psd          起動と同時に開く
psdtext foo.psd --repl   REPL つき (エージェント / 自動テスト用)

構成:
UI / フレームワーク wamsoft/appserve — ローカル HTTP サーバ + ブラウザ UI
PSD 読み書き wamsoft/psdparse — pure C++17 PSD reader/writer

画面

ペイン 役割
左 レイヤツリー。階層の折り畳みと、フォルダ / 個別レイヤの表示 ON/OFF
中央 表示 ON/OFF を反映した合成プレビュー
右 選択したテキストレイヤの編集 (書式マーク・本文・位置)

表示 ON/OFF はプレビュー専用で PSD には保存されない。「元に戻す」で PSD が 持っている表示状態へ戻る。

合成はブラウザの canvas 上で行うので、ON/OFF の切り替えはサーバ往復なしで 即座に反映される。ブレンドモードと不透明度、クリッピングレイヤに対応している (グループのブレンド・調整レイヤ・レイヤ効果は未対応)。最終確認は Photoshop で 行う前提の作業用プレビューという位置づけで、その旨と、開いている PSD で 実際に影響が出ている箇所は画面下に常時表示される。

UI は英語と日本語に対応している。既定はブラウザの言語で、ツールバーから切り替え られる。

使い方は本体内に組み込んである (? ボタン / F1)。

ズームの 100% は実ドット等倍 (画像 1px = 画面 1 デバイス px)。システムの 表示スケールが 200% でも倍サイズにならないよう逆補正している。

テキストの仮描画

PSD に入っているテキストの描画済み画像は Photoshop でしか作れないので、 編集したテキストレイヤは canvas に描き直して重ねる(「テキスト仮描画」で切替)。 組版 (字詰め / 禁則 / 縦書き / 変形) までは再現しないので、内容と位置の確認用。 フォントもこの PC に入っているものしか使えない (無い場合は編集欄に注記が出る)。

Photoshop で開いたあと

保存した PSD を Photoshop で開くと、テキストの中身は編集後になっているが、 画面に出る絵は編集前のままになる。Photoshop はファイルを開いただけでは テキストを描き直さないため。

同梱の tools/update-text-layers.jsx を「ファイル > スクリプト > 参照...」から 実行すると、Photoshop 自身が全テキストレイヤを描き直す。組版も書式も行揃えも そのまま正しく出るので、あとは上書き保存すればよい。テキストツールでレイヤを 一度触っても同じことが起きる。

使い方

  1. psdtext を起動するとブラウザ (Edge / Chrome のアプリモード) が開く
  2. 「開く…」で PSD を選ぶ。psdtext.exe やそのショートカットへ PSD をドロップ しても開ける。ダイアログは前回開いたフォルダから始まる
  3. 左のツリーからテキストレイヤを選び、右のペインで編集
  4. 反映 (Ctrl+Enter) で文書に取り込み、保存 (Ctrl+S) でファイルへ書き出す

Ctrl+Shift+Enter で反映してそのまま次のテキストレイヤへ移る (本文は全選択 された状態になるので、続けて打ち替えられる)。Alt+↑/↓ で前後のテキスト レイヤへ。左ペインの「一覧」でテキスト / 未保存 / 表示中に絞り込める。

書式は書式マークで編集する。編集欄にタグは出てこない代わりに、書式の 変わり目に ◆ の札が入っている。編集の対象はカーソルが属しているマークで、 本文のどこかにカーソルを置けば、そこに効いているマークがパネルに出る。 手前にマークが無ければ「基準」= レイヤ全体の初期書式で、そこを変えると 書式指定の無いところがまとめて変わる (ふだんはこれだけで済む)。

札はクリックで選べて、Backspace で 1 文字のように消せる。本文を範囲選択 すればその範囲だけに書式を付けられる。書式の変更はその場で反映される (本文の打ち替えだけ「反映」が要る)。

レイヤは複数選べる (Ctrl+クリックで足す/外す、Shift+クリックで範囲)。2 枚 以上選ぶと右ペインが一括操作に変わり、初期書式 (フォント / サイズ / 色 / B・I・U / 行揃え) の一括変更、書式のコピー & 貼り付け、名前に prefix を付けたまとめて 複製、選択ぶんだけの CSV 書き出しができる。複製ではマスクも一緒に複製される ので、言語別レイヤの下地づくりに使える (複製したものがそのまま選択状態になるので、 続けてフォントを一括で変えられる)。

左ペイン下の ▲▼ は同じ階層の中での並べ替え (フォルダは中身ごと動く)。 複製 は名前と本文をその場で決められるので、本文を書き換えれば実質 「新規テキストレイヤの追加」になる。

テキストレイヤの位置と流し込み枠は、右ペインの数値欄・プレビュー上の ドラッグ・矢印キー (Shift で 10px) のどれでも変えられる。位置を動かすと PSD 内蔵のラスタも一緒に動くので、Photoshop で描き直すまでの間も見た目が ずれない。

レイヤ名の変更は、ツリーの名前をダブルクリックするか、選択して F2 (または「名前」ボタン)。Enter で確定、Escape で取り消し。テキストレイヤ以外 にも使える。

フォント選択の一覧は日本語名で出る (フォントファイルから読んでいる)。 右側に PSD が実際に指す PostScript 名が並び、どちらの名前でも検索できる。 ★ を押すとよく使うフォント (プリセット) に入り、次から一番上に出る。 プリセットは名前を付けて増やせるので、案件ごとに分けられる。

ウィンドウの大きさと位置は覚えていて、次に開いたとき同じ場所に出る (ブラウザがすでに起動している場合は、窓を作るのがブラウザ側なので効かない ことがある)。

psdtext を終了するとブラウザ側の画面も自動で閉じる (閉じられないブラウザでは 「終了しました」と大きく出す)。開きっぱなしの画面が溜まって、どれが生きている のか分からなくなるのを防ぐため。

保存時、元ファイルは <name>.psd.bak へ退避される (既存の .bak は上書きしない)。 別名で保存したい場合は保存ダイアログでパスを入れる。

CSV での一括編集

「CSV 書き出し」の既定の書き出し先は PSD と同じフォルダ の <名前>_texts.csv。読み込むときも同じパスが最初から入っているので探さなくて よい (ブラウザにダウンロードすることもできる)。CSV は画面へドロップしても 読み込める。

書き出しは UTF-8 (BOM 付き / CRLF) で Excel でそのまま開ける。読み込みは Excel が既定で保存する Shift-JIS もそのまま読める (どちらとして読んだかは 結果に出る)。「反映する」は変更のある行が無いと押せず、その理由も表示される。

形式は次のとおり:

lyid,path,font,size,color,align,text,tags
2,"dialog/名前",NotoSansJP-Bold,48,#202020,left,"こんにちは",
4,"dialog/本文",NotoSansJP-Regular,32,#202020,center,"1 行目
2 行目",
  • 初期書式は列に分かれている (font / size / color / align)。本文と同じセルに タグが混ざらないので、Excel 上で列ごと掴んで一括で扱える
  • text 列は素の本文。セル内改行がそのまま PSD の段落区切りになる
  • tags 列は本文の途中に書式指定がある行だけ埋まる (従来のタグ表現)。 読み込むとき、本文を書き換えていない行は途中の書式もそのまま残り、 書き換えた行は「初期書式 + 素の本文」になる
  • 空欄の列は「今のまま」。align は left / right / center のほか 「左」「右」「中央」でも書ける
  • 昔の形式 (text にタグを畳んだ CSV) もそのまま読める
  • 照合は lyid (Photoshop の永続レイヤ ID) が主キー。レイヤの並べ替えや 改名をしても対応が壊れない。lyid が無い行は path 列で照合する (同名レイヤが複数あるときは曖昧なので未解決として報告する)
  • 列の順序は自由で、余分な列があっても無視される

「CSV 読み込み」は最初に確認だけを行い、変更 / 同一 / 未解決の件数と内訳を 表示する。内容を確認してから「反映する」を押すと文書へ取り込まれる (この時点ではまだメモリ上。ファイルへ書くのは「保存」)。

書式付きテキスト (タグ表現)

PSD のテキストレイヤは「ラン (連続する文字に同じ書式)」の並びで書式を持つが、 CSV のセルには構造を入れられない。そこで本文の中にタグを埋め込む形で 1 本の 文字列に畳んでいる。編集欄ではこのタグを ◆ の札として見せているので、 タグを直接目にするのは CSV と API だけ。

text test [color=#F6005D]テキスト
[align=right][b]TEST[font=SourceHanSansJP-Normal][size=33.3333][color=#0017F6][/b]フォント[size=50]変更
[align=center][font=HGPKyokashotai]別のフォント

閉じタグは無い。 タグはその位置から先の状態を変え、次の指定まで効き続ける。 PSD のランは入れ子ではなく平坦な並びなので、この形が構造にそのまま対応し、 翻訳者が入れ子を壊す事故も起きない。

タグ 効果
[font=名前] そこから先のフォント。PSD に無い名前は FontSet へ追記される
[size=48] 文字サイズ (px)。小数可
[color=#FF0000] 文字色
[b] [i] [u] 太字 / 斜体 / 下線を on
[/b] [/i] [/u] 同じく off
[/font] [/size] [/color] その属性を基準 (先頭ランの書式) へ戻す
[reset] 全属性を基準へ戻す
[align=left|right|center] 段落の行揃え。段落の先頭に置く
[[ リテラルの [
  • 書式が一様なテキストにはタグが 1 つも付かないので、普通の翻訳作業では タグを意識しなくてよい
  • 基準は読み込んだ時点の先頭ランの書式で、編集しても動かない。[/color] は いつでも「開いたときの色」を指す。初期書式を変えるというのは、この基準の上に 先頭のマークを重ねること (だから「元に戻す」で必ず元の書式へ帰れる)
  • 範囲に書式を付けるときも閉じタグは作らず、**範囲の終わりに「元の書式へ戻す マーク」**を置く。戻し先は直後に効いていた書式そのものなので、地の書式が 何であっても壊れない
  • 未知のタグはそのままの文字として残る (壊れた入力で本文を失わない)
  • 生成された表現は往復で完全に安定 (編集 → 保存 → 開き直しで同じ文字列)

CSV では初期書式が列に分かれ、この形式が入るのは tags 列 (本文の途中に書式が ある行だけ) になる。

ビルド

CMake 3.16+ と C++17 コンパイラだけあればよい。依存 (appserve / psdparse / zlib) は CMake が自動で取得する。

cmake --preset windows          # MSVC (Developer Command Prompt から)
cmake --build --preset windows-rel

appserve や psdparse に手を入れながら開発する場合、../appserve / ../psdparse にチェックアウトがあれば自動でそちらが使われる (取得より優先)。 明示するときは:

cmake --preset windows -DPSDTEXT_APPSERVE_DIR=D:/test/appserve \
                       -DPSDTEXT_PSDPARSE_DIR=D:/test/psdparse

web/ を編集した場合はブラウザをリロードするだけで反映される (開発中はカレント/exe 隣の web/ が、リリース時は exe 埋め込み zip が使われる)。

API (派生ツール / 自動化向け)

すべて X-App-Token ヘッダが要る (起動時に払い出され、UI へは URL 経由で渡る)。

ルート 説明
POST /api/psd/open {path} を開く。文書情報 + ツリー + テキスト一覧を返す
GET /api/psd/info 開いている文書の概要 (パス / レイヤ数 / 未保存件数)
GET /api/psd/tree 全レイヤ (index / lyid / parent / depth / kind / rect)
GET /api/psd/texts テキストレイヤ一覧 (本文 / 基準の書式 (フォント・サイズ・色・B/I/U) / 行揃え / dirty)
POST /api/psd/text {index, text} で本文を差し替える
POST /api/psd/revert {index} を読み込み時の内容へ戻す
POST /api/psd/name {index, name} でレイヤ名を変更
POST /api/psd/align {index, paragraph?, align} で行揃えを変更 (paragraph 省略で全段落)
POST /api/psd/duplicate {index, name?, text?} でレイヤを複製 (本文を変えれば新規追加)
POST /api/psd/move {index, direction} で同じ階層内をひとつ上/下へ (フォルダは中身ごと)
POST /api/psd/place {index, dx, dy} で移動 / {index, width, height} で流し込み枠
POST /api/psd/save {path?, backup?} で保存 (path 省略で上書き)
GET /api/psd/image?index=N レイヤの見た目を生 RGBA で返す (X-Image-Width/Height)
GET /api/psd/export テキストを CSV でダウンロード
POST /api/psd/export {path?, indices?} で CSV をファイルへ書き出す (既定は PSD の隣)
POST /api/psd/import CSV を取り込む。生バイト / {csv} / {path} のどれでも可。?apply=0 で確認のみ
GET /api/app/settings 画面をまたいで残す設定 (前回のフォルダ等)
POST /api/app/settings 渡したキーだけ上書きする

ファイル選択用に appserve 標準の /api/fs/* も使える。

REPL

--repl (対話) / --replfile=DIR (エージェント) / POST /_app/repl (curl)。

コマンド 説明
.psd 開いている文書の情報
.texts テキストレイヤ一覧 (* が未保存)
.settext <index> <text> 本文を差し替える
.b state ブラウザ側 UI の状態を覗く
.b call select 3 UI の選択を動かす
.b call lang ja 表示言語を切り替える
.b call marks 書式マークの構成 (基準 / 本文 / マーク一覧) を覗く
.b call marksel base 書式パネルの編集対象を選ぶ ({"mark":2} / {"range":[5,9]} / {"at":10})
.b call fmt {"color":"#FF0000"} いまの対象へ書式を入れる (値 / null = 基準へ戻す / "keep" = 指定を消す)

詳細は appserve の docs/REPL.md。

制限

  • 対象は既存のテキストレイヤの本文。新規テキストレイヤの追加は行わない
  • テキストレイヤの追加は既存レイヤの複製が土台 (Photoshop が受け付ける構造を 確実に保つため)。書式と位置は複製元を引き継ぎ、テキストレイヤが 1 枚も無い PSD には追加できない
  • 位置と流し込み枠を変えられるのはテキストレイヤだけ。画像レイヤの移動や 拡大縮小は Photoshop 側で行う
  • テキストの回転・変形はできない (変換行列のうち移動成分だけを扱う)
  • 重ね順の変更は同じ階層の中だけ。フォルダへの出し入れはできない
  • 合成プレビュー画像は編集後も古いまま。Photoshop で開き直すと再合成される
  • テキストの流し込み枠 (bounds) は変えないので、長くすると枠からはみ出る

配布とリリース

appserve_package() (appserve 提供) で zip / インストーラを作る。タグを打つと GitHub Actions が Release を自動生成する。

cmake --build --preset windows-rel
cpack --config build/windows/CPackConfig.cmake -C Release -B dist   # 手元で作る
git tag v0.3.0 && git push origin v0.3.0                            # リリースする

配布物は psdtext.exe + README + LICENSE の 3 つだけ。UI は exe に埋め込まれ、 依存 (appserve / psdparse / zlib) は静的リンクされるので DLL は要らない。

リリースの再現性を確保したいときは依存をタグに固定する:

cmake -B build -DPSDTEXT_APPSERVE_TAG=v0.1.0 -DPSDTEXT_PSDPARSE_TAG=v0.9.0

詳細は appserve の docs/RELEASE.md。

ライセンス

MIT