スクリプト

【解決】XDにも文字の検索・置換がほしい!

XDプラグインFindReplaceSession アイキャッチ図版

Adobe XDにはテキストの検索・置換機能がありません。FigmaやSketchにも本体には文字列検索・置換機能は見当たりませんね。プロトタイピングツールには存在しないのが当たり前なのでしょうか。

ではどうするかと言うと,ユーザーの誰かが開発したプラグインを入れて解決します。例えばFigmaにはFind and Replaceのような名前のツールがいくつか公開されていて,実際に使えます。ありがたいですね。

Adobe XDでは次のプラグインが近い機能を持っています(ほかにもあるかもしれません)。

ただ全般的に,スタイルをキープしたまま置換すること,テキストフレーム内の一部分を置換すること,ドキュメント全体で検索・置換することなどが苦手です。これはAdobe XDプラグインの仕組み上,そういった機能を作るのがとてもとても難しいから仕方ありません。

今回はそれらの問題を解決したプラグインを開発しました。テキストを検索・置換するAdobe XD用プラグイン,FindReplaceSession を紹介します。

XDプラグインFindReplaceSession イメージ画像
続きを読む

【履歴】infoVector 2.3.0

infoVector 2.3.0 アイキャッチ図版

特定の形式のテキストを,日本語/英語でXMP(IPTC)メタデータに書き込み,ai・eps・jpg・pngファイルとして書き出すIllustrator用ドロップレットinfoVector 2.3.0のページです。3.0.0で仕様が変わったため,旧バージョンの情報を残しておきます。

続きを読む

【まとめ】infoVectorでICC プロファイルを扱う

infoVectorでICC プロファイルを扱う アイキャッチ図版

infoVectorは,各ストックイラストサイト用に日本語/英語のIPTC情報を埋め込んで画像を書き出す Illustrator&Photoshopスクリプト(アプリ) です。バージョン3.0.0から,書き出す画像にICC プロファイル(カラープロファイル)を埋め込めるようになりました。

ただ残念ながら「infoVectorでICC プロファイルを埋め込む設定にすれば,あとはすべてお任せ」という訳にはいきません。あなた自身が,複数の場所で適切な指定をする必要があります。

そこで今回は,infoVectorで書き出す画像にICC プロファイルを埋め込みたいときの設定方法を紹介します。

続きを読む

【解決】Photoshopにも移動ダイアログがほしい!

PhotoshopプラグインTranslateLayers アイキャッチ図版

Photoshopでレイアウト作業をしていると,指定したピクセル数だけ選択レイヤーを移動することがよくあります。そんなときは次のようにするでしょう。

  • プロパティパネルにて,XやY座標に移動したい距離の分だけ数値を足す(引く)
  • メニューの編集 > 自由変形にて,XやY座標に移動したい距離の分だけ数値を足す(引く)

ただ,毎回X座標などのテキストフィールドをクリックして+や-などを入力するのは無駄に感じます。Illustratorのようにダイアログで移動距離を入力し,returnキーで移動・option(Alt)+returnキーで複製移動,の流れにしたくなりますね。

そこで今回は,ダイアログで距離を指定して選択レイヤーを移動するPhotoshop用プラグイン,TranslateLayers を紹介します。

続きを読む

【解決】Illustratorでもテキストを行ごとに分割したい!

IllustratorスクリプトSplit Rows for Ai アイキャッチ図版

したたか企画では,テキストを行ごとに分割する機能をAdobe XD用Photoshop用にそれぞれ公開しています。しかしIllustrator用はまだでした。というのも,テキストばらしテキストばらしAIなど実用的な定番スクリプトがすでにあるからです。

ただもうXDとPhotoshop用に2つも提供しましたし,せっかくなのでIllustrator用も公開するしかないでしょう。それが今回紹介する 複数行のテキストを1行ごとに分割するIllustrator用スクリプト,Split Rows for Ai です。

既存スクリプトでも特に困っていないと思いますが,Split Rows for Ai.jsxのいいところは次の通りです。ぜひお試しください。

  • もとのフォントやサイズ,色などを保持
  • 横書き・縦書き両方に対応
  • 自動行送りや段落前後のアキありでも見た目をキープ
  • エリア内文字にも対応
  • 選択したのがグループでも,配下のテキストを自動取得して実行
  • テキストの中身を編集状態のときは,その親のテキストフレームに対して実行
続きを読む

【解決】Figmaでも⌘+spaceで範囲ズームしたい!

AreaZoom for Figma アイキャッチ図版

macOS版のFigmaデスクトップアプリでは,command+space+スクロールで画面表示の拡大・縮小ができます。しかし普段からAdobeアプリを使用しているかたは,command+space+範囲ドラッグで指定位置を拡大するくせがついていることでしょう。

Figmaでも一応その操作でズームできるときもあるのですが,タイミングがずれると発動しなかったり,何か別の機能になっていたりします。不安定で頼れません。

幸いなことに,Zキーを押しながらドラッグをすると安定して範囲ズームが可能です。つまり,Karabiner-Elementsなどのアプリを使ってcommand+spaceをZキーに変換すれば,目的の動作を実現できるわけです。

そこで今回は Karabiner-Elementsを使い,Figmaデスクトップアプリでcommand+space+ドラッグの範囲ズームを使えるようにする方法 を紹介します。

続きを読む

【解決】Photoshopでテキストを分割・結合したい!

PhotoshopプラグインSplit Rows for PS アイキャッチ図版

Photoshopでは大抵レイヤースタイルを使って見た目のデザインを指定します。そのためテロップを作るときなどは,テキストを行ごとにバラしたり,デザインの変わり目でレイヤーを分けたりします。

また1文字ずつ順番に動くアニメーションを作るため,各文字ごとに分解したい状況もあるでしょう。しかし,それを手動でやろうと思うとあまりにも手間がかかります。レイヤーを複製し,関係ない部分を削除,その後位置を揃えるという動作を延々とすることになります。

分割したあとやっぱり繋げようと思っても,複数のテキストを選択してカット&ペーストでは済みません。1つずつ中身をコピーしてペースト,いらなくなったレイヤーは削除,という流れの繰り返しです。このような作業はぜひ機械に代行してもらいたいですね。

そこで今回は,テキストを行ごと/文字ごとに分割したり,区切り文字で分割・結合するPhotoshop用プラグイン,Split Rows for PS Pro を紹介します。

続きを読む

【解決】Photoshopでもテキストを行ごとに分割したい!

PhotoshopプラグインSplit Rows for PS アイキャッチ図版

Photoshopでテロップなどを作る際,1行程度のテキストレイヤーが多く必要になります。その場合テキストエディタで入力した改行区切りのテキストを,コピペして1行ずつに分割することになるでしょう。

ただこれはかなり疲弊する作業です。Photoshopではcommand(Ctrl)+Jでレイヤーの位置はそのままに複製できますが,いったい何回繰り返せばいいのか途方に暮れます。

もしIllustratorでする場合には,テキストばらしという定番スクリプトがあります。名前の通りテキストを一瞬で1行ずつにばらしてくれます。Adobe XDならプラグインSplit Rows(【解決】XDにもテキストばらしがほしい!が定番です。

Photoshopにもこんな機能があったら嬉しいですね。

そこで今回は,複数行のテキストレイヤーを1行ごとに分割するPhotoshop用プラグイン,Split Rows for PS を紹介します。

続きを読む

【解決】XDのパネルに計算式とその結果を表示したい!

XDプラグインOfuda アイキャッチ図版

Adobe XDでは,よく使うものの直接取得できない数値があります。例えばline-heightやletter-spacingなどです。インターネットを検索すると,それらの算出方法・式を紹介しているサイトがたくさんヒットします。それだけ困っているかたがいるわけですね。

この問題はExcelやGoogleスプレッドシートなどで関数を作ればある程度解決します。単純な計算ならSpotlightやAlfredに式を入力するのも良いでしょう。

しかし,毎回Adobe XDのプロパティインスペクターから数値をコピーし,別の何かにペーストするのは手間がかかります。次のような流れにできたら最高ですよね。

  1. Adobe XDの中で式を書いておく
  2. アイテムを選択したとき,自動でそのアイテムの情報を利用して式が計算される
  3. 結果がXDのプラグインパネルに表示される

そこで今回は,リアルタイムに式を計算するプロパティパネル的Adobe XD用プラグインOfuda(おふだ) を紹介します。

続きを読む

【解決】XDで線に合わせてアイテムを回転したい!

XDプラグインAdjustAngle アイキャッチ図版

Adobe XDでフローチャートや図版を作る際,斜めに傾いているアイテム同士の角度を合わせるのに苦労します。というのも,Adobe XDでは回転軸が常に中心になり,回転しながらアンカーポイントや見た目をスナップできないからです。アイテムを近くに寄せ,目視で傾きを確認しながら何となく回転させることになります。

しかしこういった角度は,少しの違いが目立つものです。せっかくデジタルなのだから,数値で角度を取得して正確に一致させたくなりますね。

そこで今回は,直線の角度に合わせてアイテムを回転するAdobe XD用プラグイン AdjustAngle を紹介します。

続きを読む

【まとめ】Illustratorスクリプトの開発資料

【まとめ】Illustratorスクリプトの開発資料 アイキャッチ図版

プログラムの開発をしていると,技術や経験は個人に蓄積していきます。役立つ資料や道具のありかもしかりです。しかし自分の頭の中にあるだけの状態より,誰でもその情報にアクセスできたほうが世界はもっと良くなるでしょう。

そこで今回は,普段IllustratorでExtendScriptなどのスクリプトを書くときに使っている資料やWebサービスを公開します。

続きを読む

【解決】リアルファブリック用画像書き出しを一気に済ませたい!

Fabricantアプリ アイキャッチ図版

リアルファブリックは,オリジナルの布をデザインしたり販売したりできるサービスです。パターンデザインをIllustratorで制作しているかたも多いでしょう。

過去の記事「アートボードとパターンのタイルをフィットさせるリアルファブリック用 Illustrator スクリプト」により,Illustratorのパターンデザインをアートボードに揃える工程が素早く正確になりました。しかし,最も面倒なのは画像書き出しです。

リアルファブリックのデザイン登録には,次の2種類の画像がいります。

  1. デザイン提出用画像(以降,デザイン用画像と呼ぶ)
  2. サムネイル用画像(希望者のみ。なくても可)

デザイン用画像の決まりはこちらのようになっています。

形式:JPEG

カラーモード:RGB

解像度:200ppi

サムネイル用画像は特に指定がありませんが,常識的に考えるとこんなところでしょう。

形式:JPEG

カラーモード:RGB

解像度:72ppi

もうこの時点で大変そうですね。Illustratorファイルの中にデザイン用とサムネイル用アートボードが混在する場合,それぞれ解像度を変えて書き出す必要があります。

さらに言えば,デザイン用画像の解像度200ppiがくせ者です。Illustratorで普通に書き出すだけだと,パターンの継ぎ目に白い隙間ができてしまうことが多いのです。

そのため一旦隙間が出にくい解像度で書き出し,規定通りに200ppiに変更,その後Photoshopでパターンに登録して目視確認する,といった複雑な手順を辿ることになります。

つまり,リアルファブリックの決まりに基づいた形式・解像度で,白い隙間ができないよう画像を書き出し,実際隙間ができるか確認するための画像も追加で生成しなければいけません。

今回紹介するのはまさにそのためのPhotoshop & Illustrator用スクリプト, Fabricant(ファブリカント) です。

続きを読む

【解決】XDでメモをアートボードと一緒に移動したい!

XDプラグインKizuna アイキャッチ図版

Adobe XDでデザインを共有するとき,エンジニアやコーダーにメモを残したいことがあります。例えば,データを見ただけでは判断しにくいデザイナーの意図を言葉や絵で補完するときなどです。

メモ書きにはAdobe XDの共有機能/コメントを利用するなどさまざまな実現方法があります。対象アートボード付近のペーストボードに,テキストや画像を置くのもわかりやすくて良いでしょう。特に操作しなくても,書類を開けば目に入るのは大きな利点です。

しかしこの方法では,アートボードを動かしてもメモ用アイテムは一緒についてきません。毎回自力でちまちまアイテムを選択して近くに寄せることになります。せっかくの軽量高速アプリが泣きますね。

そこで今回は,ペーストボード上に置いたアイテムとアートボードを関連付け,一緒に動かせるようにするAdobe XD用プラグイン Kizuna を紹介します。

続きを読む

【解決】ファイルを書き出す前に画像のリンク切れを確認したい!

ファイルを書き出す前に画像のリンク切れを確認したい! アイキャッチ図版

Illustrator 2022(v26)からリンク画像の扱いが変わりました。それ以前のバージョンではリンク先が行方不明な画像は何も表示されませんでしたが,2022(v26)では低解像度サムネイルが必ず付きます(Illustrator 2020方式で保存した場合。参考:Illustrator2020形式ファイルフォーマットとは | Automation Skill)。

PDFなどを書き出した際は,低解像度サムネイルが見えている状態になります。リンク画像がなくても何があるかわかるようになりました。親切です。

しかしこの仕様はリンク切れを気づきにくくしてしまいました。低解像度でもまあまあ綺麗なので,異常を見逃すのです。

もし保存や書き出しの際にリンク切れを警告してくれたら,ミスを防げそうですね。ただIllustratorでは,保存や書き出しの動作を感知して警告を入れるのは難しいようです。

そこで今回は,Illustratorで画像のリンク切れを確認したあと,特定のメニューを実行するスクリプトを紹介します。

別名で保存や書き出しなど,通常のキーボードショートカットをこのスクリプトで置き換えると,特定のメニュー実行前にリンク切れ確認処理が入るという作戦です。

残念ながら手動でメニューを選んだときは発動しません。それで十分役に立つと思うかたのみご利用ください。

続きを読む

【解決】Chrome翻訳の言語をショートカットで切り替えたい!

Chrome翻訳言語トグルスクリプト アイキャッチ図版

Google Chromeでは,内容を丸ごと翻訳しながらページを開けます。英語で書かれたWebサイトを日本語で読みたいときに便利です。

ページ内の見ている部分その場で原文と日本語訳を切り替えられるので,視点が迷子になりません。両方の言語を行ったり来たりしやすく,理解が早くなります。

ところが言語を変えるには,小さな翻訳アイコンをクリックして,出てきたウインドウ上でさらに英語・日本語などを選ぶ必要があります。何回も繰り返すのはきついですね。

そこで今回は,Chrome翻訳の言語を交互に切り替える(トグルする)スクリプトを紹介します。Keyboard Maestroでスクリプトにショートカットを割り振り,キーボード操作を実現する作戦です。

今回はmacOS専用です。Windowsユーザーのかたはすみません。

本質的な部分はAppleScriptなので,Keyboard MaestroはBetterTouchToolやAlfredなど別のアプリで代替できます。

続きを読む

【履歴】infoVector 1.4.0

infoVector 1.4.0 アイキャッチ図版

アートボードに置いた特定の形式のテキストを,日本語/英語でXMP(IPTC)メタデータに書き込み,ai・eps・jpg・pngファイルとして書き出すIllustrator用ドロップレットinfoVector 1.4.0のページです。2.0.0で仕様が変わったため,旧バージョンの情報を残しておきます。

続きを読む

【解決】元データを消さずいつもの設定でPDFを書き出したい!

PDF複製書き出しスクリプト アイキャッチ図版

IllustratorファイルのPDF書き出しに[別名で保存]を使用すると,作業中の書類はPDFに変わります。元データがai/epsファイルでもPDFです。

もし書き出しオプションで[Illustrator の編集機能を保持]をOFFにしていた場合,書類を閉じた瞬間に編集可能な元データは消え去ります。大変なことですね。

そんな悲劇を避けるため,次の策が推奨されています。

  • [複製を保存]を利用する
  • [別名で保存]でPDFを書き出したあと書類を閉じるアクションを利用する

ただこれらは,ファイル名の「のコピー」を毎回削除する必要がある,使用しているIllustratorすべてのバージョンにアクションを設定しておかなければいけない,などいった理由でなかなか自分に定着しません。正しいけど面倒臭いことはすぐやらなくなるのが人間というものです。

そこで今回は,開いている書類と同じフォルダ・名前で,プリセット名を指定してPDFを複製書き出しするIllustratorスクリプトを紹介します。

続きを読む

【解決】ストックイラストのタグ付けと画像書き出しを一気に済ませたい!

infoVector アイキャッチ図版

ストックイラストのタグ付けが面倒というのは,制作者なら共通の悩みでしょう。アップロードするサイトが少なければコピー&ペーストでも何とかなりますが,増やすとその分負担も重くなってしまいます。

チャンスを広げるためには何とか販売先を多くしたいものです。

解決策として,ファイルへのメタデータ情報埋め込みが普及しています。IPTC情報やXMPメタデータなど呼び名はさまざまですが,する内容は同じです。Adobe Bridgeを利用して説明やタグの情報をファイルに入力すると,ストックイラストサイトのアップローダーがそれを自動で読む流れです。

しかしこの方法だと,次のような問題がありました。

  • 英語タグにするサイトと日本語タグにするサイトがあり,対応している画像の種類もまちまちで,大量の画像それぞれに情報を埋め込まなくてはいけない
  • PIXTAとpngの組み合わせだと説明(コメント)を正しく認識しない
  • iStock(DeepMeta),123RFが情報を何も認識しない
  • 日本語情報を埋め込むと,Adobe StockとPIXTAで文字化けする

Illustratorで数種類の画像を自動で書き出し,同時に適切な情報をメタデータに埋め込んで,さらに各社アップローダーがそれを正しく認識してくれたらありがたいですよね。

今回紹介するのはまさにそのためのIllustrator&Photoshopスクリプト,infoVector(インフォベクター)です。

続きを読む

【まとめ】XDプラグインCommono 地味な自動化詰め合わせ

XD一般的操作自動化プラグイン アイキャッチ図版

Adobe XDについて,次のような願いを見かけました。

  • テキストを中央揃えにする,塗りをOFFにするといった地味な操作をショートカットにしたい
  • パスの方向を反転したい
  • コンポーネントを解除したとき中身がバラバラになってしまうが,グループに入った状態にしたい

これらは一般的な操作なので,プラグイン制作により比較的簡単に実現できます。しかしAdobe XD用のプラグインを公開するには,プログラムを書くだけでなくアイコンをデザインしたりイメージ画像を作ったり,何かと手間がかかります。個々にリリースするのは大変すぎるのです。

そこで今回は,行揃えの変更など,一般的で地味な操作の自動化を寄せ集めた1つのAdobe XD用プラグインにしました。それが今回紹介するCommonoです。

続きを読む

【解決】XDでも線幅と効果を拡大・縮小したい!

XD線幅・効果拡大プラグイン アイキャッチ図版

Adobe XDでは,パスや四角形などのシェイプを拡大・縮小するとき,もとの線の太さを変えずに維持します。角丸の半径やシャドウ(内側)/ドロップシャドウの距離・ぼかしの数値も同様です。そのため,SVGアイコンなどベクター素材をリサイズすると見た目が変わってしまいます。

グラフィック操作はIllustrator,プロトタイピングはAdobe XDと分担するのが基本的な使いかたでしょう。IllustratorでグラフィックをCCライブラリに登録し,Adobe XDで[リンクを配置]すれば線幅・効果は比率に応じて変更してくれます。

しかし実際のところ,Adobe XDとIllustratorを行ったり来たりするのは面倒です。また,すでにXDのオブジェクトになっているものをCCライブラリに登録しても,線幅が変わらない形式になります。やはりXDで直接できたら嬉しいですね。

そこで今回は,選択アイテムのサイズと線幅・効果を,拡大率を指定して拡大・縮小するAdobe XD用プラグインTransformSessionを紹介します。

続きを読む