2017年12月25日
_ [computer] 文字のマスキング置き換え作業を支援してみる
「原書データがビットマップの図版しかない」「しかしその英文箇所を日本語文にしたい」という案件がたまに発生する。というか今まさに発生していて160点ほど必死に作成しなければならない状況に置かれている。
比較的単純で単色の図版が多いので、Illustratorでの作業自体はさほど難しいわけではない。
- ①大きすぎる原書図版を版面幅に合わせる。
- ②-A レイヤーを上に乗せて適切な書体・サイズの日本語文を置き、英文箇所は下地の色でマスクする。
- ②-B 不透明なアミボックスに適切な書体・サイズの日本語文を乗せ、英文の近くに配置する。
（②でAかBかどちらになるかは指示があるので悩む必要がないものとする。）
しかし、手順が難しくなければ手間がかからないのかというとまた別の話で、これをちまちまやるのは正直かなり精神に来るものがある。
ということで、ざくっとした支援スクリプトを作った。いつか機械学習でそのうちかっこいいのができるのだろうけれども、今必要なのは当座の問題の解決である。
操作説明
InDesign Hacking with JavaScriptのlibCommon.jsx・dialogConfigureFigureStringSupport.jsx・dialogFigureStringSupport.jsxの3つのファイルで構成される。スクリプト用に適当なフォルダを作り、SPAiで呼び出すのがよいだろう。なお、macOS＋CC 2017環境での挙動しか確認していない。
SPAiの画面はこんな感じ。IllustratorでもInDesignのスクリプトウィンドウのように一覧からスクリプトを簡単に呼び出せる。
dialogConfigureFigureStringSupport.jsxで各種の設定を行う。先の①に相当する規定最大幅や、②のA・Bそれぞれのパターンを定義する。アミにチェックを入れると文字の下にアミ/マスクが置かれるようになる。色や余白は右側の欄で設定する。グループ化にチェックを入れると、文字とアミがグループ化される。②-Aのようにマスクの場合はグループ化しないほうが使いやすいが、②-Bのように文字の背景として使う用途ではグループ化したほうが移動などの際に便利だろう。「保存」のクリックで設定が保存される。
まずは画像ファイルをIllustratorで開く。ここではブログ用の例示サンプルとしてDATA USA Los Angeles Countyのデータを使う（ここだと生データやPDFも取れるので本当は必死に上書きする必要もないけれども）。
デフォルト紙面サイズでも余裕ではみ出していることがわかる。画像が選択されている状態（開いた時点でそうなっているはず）で、dialogFigureStringSupport.jsxを実行する。
画像のリサイズ、アートボードのフィットが行われ、画像レイヤーはロックされて文字乗せ用の新しいレイヤーができる。
置き換え用のテキストを用意し、適当なテキストエディタで開いておく。1行1項目にしておく必要がある。
テキストエディタからIllustratorにコピーペーストする。デフォルトの書体・サイズでとりあえず貼り込まれる。
テキストが選択されている状態でdialogFigureStringSupport.jsxを実行すると、先に設定した文字定義1、2どちらを使うか尋ねられる。なぜ「はい」「いいえ」にしたかというと専用ダイアログではなくてJavaScriptのconfirmを使っているからなのだが、1つ利点として、OSのショートカットを有効にしておけばEnter（はい）とスペース（いいえ）とマウスを使うことなく簡単に1キーで選択できる。
「はい」を選び、上記設定（デフォルト）の定義1が使われるとこんな感じ。文字が指定の書体・サイズとなり、各行にバラされる。やや大きめの白いマスクが付随しているが、グループ化はしていない。
たとえばこのように文字とマスクを上乗せしたいところに移動し、必要なら書体やサイズを調整して、マスクで英文を隠す。マスクを選択している状態でスポイトツールで地の色をクリックすれば、マスクの出来上がり。
デフォルトの定義2設定（②-B相当）だと、文字とアミがグループ化されており、簡単に配置したいところに移動できる。
私感で当社比5〜10倍ほどの精神的健康と生産性向上が見られている。
コーディング
InDesignに比べるとIllustratorはまだスクリプト開発の手習い中で、無駄なことをしている可能性が高い。
- document.fitArtboardToSelectedArtは引数オプショナルとなっているが、なしにしたらクラッシュした。
- ElementPlacement enumの情報がオブジェクモデルビューアにないような……？ Webで探してかねむさんの記事を参考にした。
- 合成フォントの名前はTextFont.nameでは引き出せず、familyのほうに入っている。ATCだったら合成フォントと見なしてfamilyを取る、というロジックにしてみた。プレフィクスに「(合成)」としたのはソートしたときに合成フォントが頭になるようにしたかったから。
- しかし、ScriptUIでフォントやカラーのピッカーコンポーネントがほしいものである。
- 座標系は全部ptに統一する必要がある。
- 行分割はテキストばらしAIを流用させていただいた。
- グループ登録の処理、マジわかりにくい。ElementPlcementが必要なのにその情報が見つけにくいというのはどうなのか……。
- 設定のシリアライズはもっとうまい方法はありそうだけれども、ひとまずこれでも簡潔なので。
- 使い手を選ぶだろうから、UIのエラーチェックはほとんどしていない。
- ScriptUIの座標設定ツラい。
いろいろわかったこともあったので、社内で困っている事案があればAIのスクリプティング開発も進めてみよう。