スクリプト制作から公開まで-制作過程と気をつけたこと
先日CropMoverというスクリプトを公開しました。おおよそ1年ほどかけて準備しましたが、その過程を残して置こうと思います。最後にスクリプトに関する資料もまとめました。スクリプトを作成したいと考えている方に参考になるかもしれません。
はじまり
私は、仕事で困ったことがあればそれを解決できるような機能を、スクリプトで作れたらと考えていました。例えば、差し替えや急な対応が必要になった場合でも、ボタンを押すだけで簡単にアニメーションを作成できるようにしたいと思っています。同じような作業が繰り返されるのであれば、もっと簡単になれば、もっと楽ができるのではないかと、今回のスクリプト制作は、そんな思いから始まりました。
リサーチ
まず、既存のプラグインやテンプレートで要望を実現できるのか調査しました。ワンボタンで「テキストをクロップして出現するアニメーション」を作成するような機能を考えています。検索してみると、プラグインやスクリプトを使えばマスクを作ったりプリコンポーズしたり、テンプレートを使えば文字を挿入するだけで表示できたり、プリセットからテキストアニメータとマスクを追加できるような方法がたくさん見つかりました。
しかし、どれもタイムラインやエフェクトパネルでの操作が必要で、ワンボタンでの追加は難しいように感じました。テキストの場合はテキストアニメータとマスクを組み合わせる方法が一般的であり、画像などの場合はプリセットからモーションを適用するツールがよく使われているようです。
マスク効果をエフェクトの組み合わせで実現する方法も考えましたが、直接トランスフォームの値にキーフレームを作る必要がありそうです。私はトランスフォームエフェクトを使って動きをつける方が好みです。なので、今回はトランスフォームエフェクトを使用してアニメーションを考えてみようと思います。
制作
まず、やりたい機能をメモして、必要な項目を洗い出して、UIの作成方法を考えます。便利なウェブサイトであるhttps://scriptui.joonas.me/を利用して、使いやすいメニューを探りながら試行錯誤します。他のUIと並んだ際にシンプルで調和した、操作感が良い構造を目指します。
作成は約1ヶ月ほどで、キーフレームを打つ際に位置Fxを考慮し、同時にマスクを作成するスクリプトが完成しました。あっという間です。素晴らしいスピード感で進捗しましたが、chatGPTを利用したからです。
以前にオートモーションスクリプトを書いた経験も役立ちましたが、コードやアイデアを入力するとすばやく参考コードを提供してくれるChatGPTの提案速度には驚きます。
そのまま利用することはありませんでしたが、非常に近い内容の参考例を提供してくれるため、他のリファレンスと一緒に質問することが日常化しました。現在はAPIを利用していますが、参考例を得るだけであれば無料プランでも十分です。
やりたいことの無限ループ
位置モーションを作成できたので、デュレーションを変更できたらいいな..、イージングを設定できないか、ランダムにモーションを設定できないか。。
業務で使用しながら調整をして、もっと良くなる、もっと欲しいを追加して、そのうちにどんどん機能が増えていきました。
IN-OUTを別に選択できるように
スケール、回転、逆回転テンプレートの追加
モーションの移動距離を最大辺に合わせる
複数テキストレイヤーのシェイプ化、分解
シフター
要素ごとの削除
プログレスバーの追加
画像、シェイプ、テキストでの処理
フェード、エラスティック、エラスティックコントローラー作成
イージングの選択
マスク、シェイプの拡張
マスク、バウンディングサイズでシェイプ作成..
試行錯誤の日々が続き、「これはどうだろう」と何度もテストを繰り返しました。小さなメダルを探すように一歩ずつ前に進み、マップを調べていた子どもの頃を思い出す作業でした。ちまちまとした作業が嫌いではないので、ついついダラダラと続けてしまいます。
少しでも使いを勝手よく
機能は増えましたが、使い勝手にも気を配りました。予期しない操作を防ぐために、予防線を張り、条件分岐を設け、動作が絶え間なく続けられるように整えました。Macでの動作検証には、少し古いMacMiniを引っ張り出して最新のOSをインストールし、検証用に設定しました。検証でWin/Mac間で、多少UIが崩れることがわかったため、なるべく同じ見た目になるように微調整しました。UIボタンも100パターンほど作り、表示もコンパクトかつすぐ手が届くような作りを目指しました。コンパクトなスクリプトが好みです。プログレスバーも追加しましたが、処理時間が目で追えないと、操作をしてしまう可能性があり、処理中のタップによる問題を減らしたかったので実装しています。
エラー対処
いくつかのエラーを解決するために時間を要しました。すごく単純なものだったり、勘違いだったり、仕様だったりその都度手が止まりました。調べていくとコーディングに問題があると、他のスクリプトに影響することもわかりました。たしかに実際以前購入したスクリプトで、ほかのツールの起動に影響が出るものがありました。自分はまだようやく形を作れる程度スキルだと思います。自分の認識、知識と配慮不足で他の方にまで影響がでるのは心苦しいのです。なるべく問題は排除したつもりですが、まだ気づけていない問題があるかもしれましれません。スクリプトはバグとの戦いという書かれ方をしますが、問題を知り何度も手入れをする胆力が求められているように思います。
懸念と今後
スクリプトはマシンをハングさせたり、他の処理に影響がでたり、問題が大きくなる可能性があることを注意しながら制作したつもりです。自分の業務で作業中に予期しないトラブルで書き出しができない、終わらない、帰れない、何度も泣かされてきました。便利なツールですが信頼されないと使われないことを理解しています。時間をかけてリスクを減らしたつもりですが、これからでるであろう問題に長く付き合いながら改善、調整ができればと思います。
またChatGPTについても、コードの引用先がわからないという問題があるため、そのままの利用はコード制作者様の権利の侵害にあたる可能性があります。出所が明らかな場合はその明記やライセンスの確認が必要になりそうです。一般的な書き方についての提案を受け入れて改変するのであればリスクは減りそうです。特定の処理を提案して貰う場合には注意が必要です。
まとめ
気を配って作成したスクリプトです。単純作業で物量がある場合、シェイプで支給された素材を捌かないといけない場合、テキストアニメータのような動きが作りたい場合に力を発揮します!よかったら使って見てください!
気にかけてもらえたら嬉しいというのと、宣伝記事でした。長文失礼しました。
資料
制作にあたって参考にした、サイトや書籍、ツールなどをまとめました。
情報を公開されている、制作者様に大変感謝しております。
スクリプト制作をされている方に、参考になればと思います。
JavaScript Tools Guide CC - 公式ExtendScriptsのリファレンスガイド
Common properties - 公式各プロパティが扱える値一覧
Adobe Support Community - わからないことはすでに質問されている
https://aejsx.hiroshisaito.net/home- After Effects スクリプトリファレンス
Adobe JavaScriptリファレンス (NextPublishing) - 各コマンドの説明が一覧で羅列されています。やれることを知れる
After Effects自動化サンプルプログラム 上下 - ドッキング可能なUIの処理など、作例がわかりやすいです。
スラスラ読める JavaScript ふりがなプログラミング - JS覚え始めにちょうど良かった。
JavaScript[完全]入門 - 手数が引き出しが増える。JS本で読んで一番よかった。
How I Create Tools for After Effects - AEスクリプトのワークフローを分かりやすくまとめてくださっています
https://scriptui.joonas.me - プロトタイプ作成
さかもとのサイト - なぜかうまく行かないときに救われる
DTPab - はてなブログ - Tipがたくさん。学びが多いです
The Power of Expression Book - Expression解説
compCode - プロジェクトのJS化
Dojo Scripting Utility 選択パラメーターの表示、バイナリ化
https://hyperbrew.co/blog/ - 読むべき内容がたくさんあります
Beginning scriptUI - UI関連
この記事が気に入ったらサポートをしてみませんか?