こちらのツイートがきっかけで、便利そうなアイディアが思いつきましたので、記事に残します。動くスクリプトを作るところまで完結しません。
JSON形式のデータ構造とは
JSON形式というのは、「{ データ名：値}」のようにシンプルな型でデータを格納する、とても汎用性が高い記述方法です。
筆者の個人情報を一部JSON形式にすると、
var shadeco_data=
{
name : "kazuaki" ,
age : 37
}このように「shadeco_data」という変数に、名前と年齢を一覧でセットすると、
shadeco_data.name // -> kazuaki
//もしくは
shadeco_data.age // -> 37<変数>.<アクセスしたいデータの名前>で該当の値を呼び出すことができるようになります。
データの受け渡し方法の特性を考えると、After Effectsで再現性の高いアイディアが生まれそうです。
どんな場合に活かせそうか
例えば棒グラフのaepをテンプレートとして作っておき、グラフの値をエクスプレッションで呼び出せれば、JSONデータを書き換えるだけで値の異なるグラフを簡単に作れそうです。
また例えばテキストの配置が決まっていて、何種類ものタイトルを文字書き換えだけで作る場合などは、統括して編集できると順番間違いやモレが減らせて便利そうです。
そしてセルで区切られたエクセルならデータ名の右セルに値を入力することで、テキストエディタで編集するよりも楽でしょうし、そのままテキストデータであるcsv(コンマ区切りのテキスト)やtsv(タブ区切りのテキスト)に変換すれば、After Effects内のスクリプトやエクスプレッションでの参照にも使えそうです。
ここから、例えばJSON形式で対応させた該当のレイヤー名とソーステキストを一覧できるエクセルを、After Effects効率化に利用できないかということで…これはもうスクリプトを開発していきましょう。
アイディア出し
棒グラフの案は対応するデータと名前を紐付ければ仕組みは簡単そうなので、より複雑なテキスト書き換えの案を開発してみることとします。
aepまるごとをテンプレートとして、コンポジションをまたがった様々なテキストレイヤーが一つのJSONデータを参照するようにしておき、aep内の変更可能にしておいたテキストをエクセルなどで一括管理→スクリプトで全置き換えというのはいかがでしょうか。
After Effectsで文字を扱う動画を作った経験があればわかるでしょうが、テキストの変更は、該当のテキストレイヤーまでコンポジションを開いていって、ダブルクリックで文字列を打ち替えれば済みます。
ただ、これが何度も出てくる商品名の変更だったり、同じデザイン、形式のタイトルが10個20個ある場合だったりと、表で管理したいケースがあると思います。複数人いるキャラクターのプロフィール紹介画面の量産や、テンプレートプロジェクトファイルなど。そんな場合に有効です。
こんな不満を解消できそう
実務では書き換え箇所はエクセルなどで管理し、結局After Effectsに打ち直したりと、もう少しなんとかならないものかと思っていました。これを解消できそうなアイディアです。
ジャストアイディアとしては、エクセルに変更可能なレイヤー名が列挙されていて、隣のセルにソーステキストを打ち込み、After Effectsに一気に読み込ませられないかというイメージです。
仕組みの言語化
効率化できそうな仕組みを言葉にしていきます。
- エクセルでデータを一覧で編集する
- それをaeになんとかして読み込ませる
- ae内該当レイヤーがエクセルの通りに書き換わる
素晴らしいの一言です。
具体的な仕様
使い勝手を想像しながら、具体的な仕様を固めてみます。
- エクセルでデータを一覧で編集する
- それをaeになんとかして読み込ませる
aeと連携できる仕組みにしておく必要があります。エクセルで準備するJSON風データとae内テキストレイヤーがリンクする仕掛けとして、ae内の編集可能テキストレイヤーのレイヤー名をトリガーに使います。エクセルにそれらのテキストレイヤー名を全部抜き出し、値を入力すれば良さそうです。
- ae内該当レイヤーをエクセルの通りに書き換える
エクセルのデータ名とae内のテキストレイヤー名を全検索し、一致すればエクセルの該当テキストで置換する、を繰り返す。で良いでしょう。
具体的な仕様まとめ
- aeレイヤー名をトリガーにする
- エクセルに該当レイヤー名を列挙する
- それらの一つ右の各セルが入力用セル
- ae内全レイヤーを検索する
- エクセルの該当レイヤー名と一致するaeレイヤー名があればソーステキストを入力テキストに書き換える
- アルファベット大文字指定や月名を「1月→January」などいろいろ変換できると面白そう(便利かは別)
特に最後の変換機能は、自分で入力する場合の他、間違いのないようにクライアントに記入してもらった台本をコピペするような案件で大幅な効率化が図れそうです。要は効率化されたテンプレートシステムを作るなら盛り込みたいアイディアというレベルです。実務では「それくらい手打ちしろや」のレベルで、機能の練習という名目でやってみたいと思います。
テキストレイヤーよりもエクセルで管理する方がはるかに効率が良いので、そうなるとエクセルデータをaeで扱える形式にまず変換せねばなりません。
csvかtsvに変換するというのがすぐ思いつくことなのですが、テキスト内でコンマは使う可能性がありそうなので、テキストレイヤーに入力することはまずないであろう、タブを区切りにするtsvを採用したいと思います。
これはコンマが含まれたテキストをaeに持っていく際に、csvだとそのコンマがデータの区切りなのか、テキスト内に必要な文字列なのか判断する面倒な処理を入れなくてはならない為で、今回はtsvに逃げます。
エクセル→aeへの受け渡し方
まずはtsvの内容をスクリプトに読み込ませなくてはいけません。
適当にGUI準備してtsvのパスを指定して開くとなるとこんなイメージ。未完成のためGUI部分はもう省きます。
var TAB = String.fromCharCode(9),
filename = tsv,
fileObj = new File(filename),
cellData = [],
rowCount = 0,
brTxt="",
gyou="";
function f_tsvToCell(wobj.pathPnl.ed.tsvPath.text){
if (fileObj.open("r")){//ファイル開けたら
txt = fileObj.read();//まるごと取り込み
brTxt=txt.replace(/[\r\n](?!(([^"]*"){2})*[^"]*$)/g,"<br>");//""内改行を<br>に置換
gyou=brTxt.split(/\r\n|\r|\n/);//改行毎にsplit
for(i=0;i<gyou.length;i++){
cellData[i] = gyou[i].split(TAB);//splitの次は水平タブでsplit
rowCount=i;
}
}else{
alert("tsvファイルが見つかりません");
}
}うーん、実際に手を動かすと、スクリプトから読み込みダイアログを表示してtsvを開く、は実は面倒なことがわかります。
データの準備の段階でエクセルを開いているので、わざわざディレクトリを指定してtsvデータを開くより、そのままコピペ出来るなにかがあれば…。おとなしく正攻法でテキストエディタでJSON形式データを準備する手法で行くか…？
ここで冒頭のツイートであるTerrible Junk Show氏とのやりとりの中で、筆者が以前経験のある、テキストレイヤーに記述したエクスプレッションをeval()という関数でJavaScriptとして実行できてしまう方法を使ったシステムを思い出します。
コピペでいける。
セルをコピーして、テキストエディタなどにペーストするとタブ区切りになる特性を利用して、ae内に準備しておく「tsvコピペ用テキストレイヤー」にペーストすれば、ae内にtsvをコピペしたのと同じことになります。
このソーステキストをスクリプトでタブを区切り文字にsplitしてやればJSON風の配列が取得できます。
筆者のプログラミングレベルでは、この力技で押し通る外なさそうなのが悲しいですが、勉強の一貫として割り切り、突き進みます。
改良する
実際さわりだけでも作り始めると、具体的な方向性が見えてきました。
ひらめきは冒頭のツイートをヒントに「JSONデータでaepを管理するグラフ」なんてものを連想しましたが、実際に筆者が欲しいものと作れるもののレベルを考慮し軌道修正。「エクセルからコピペでtsvを準備し、aep内テキストレイヤーを一気に書き換えるスクリプト」を作ってみようと思います。
ちょっと思ったより設計に時間かかりそうなので、続きます。
次→JSON形式データをスクリプトでaeに反映するアイディア【置換テキストを表計算で管理】2
この記事へのコメントはありません。