見出し画像

スクリプト制作から公開まで-制作過程と気をつけたこと

02_composite

先日CropMoverというスクリプトを公開しました。１年ほどかけて準備しました。その過程を残して置きます。スクリプトに関する資料も最後にまとめました。

はじまり
日常の業務で困ったことがあればそれを解決できるような機能を、自分で作れたらと、スクリプト勉強を重ねていました。急な対応で困ることが多かったので、ボタンを押すだけで簡単にアニメーションを作成したい。これで急な差し替え対応でも、楽に対応ができます。お決まりの作業であれば、もっと単純に、簡単にしたいと、今回のスクリプト制作をはじめました。

リサーチ
今回作成した機能は、ワンボタンで ”クロップして出現するアニメーション” です。検索してみると、プラグインやスクリプトを使えばマスクを作ったりプリコンポーズしたり、テンプレートを使えば文字を挿入するだけで表示できたり、プリセットからテキストアニメータとマスクを追加できるような方法がたくさん見つかりました。

しかし、どれもタイムラインやエフェクトパネルでの操作が必要で、ワンボタンでの追加は難しいように感じました。テキストの場合はテキストアニメータとマスクを組み合わせる方法が一般的であり、画像などの場合はプリセットからモーションを適用するツールがよく使われているようです。

私はトランスフォームエフェクトを使って動きをつけるやり方が好みです。レイヤーが1つで作業可能なのでシンプルな構成にできます。今回はトランスフォームエフェクトを使用してアニメーションを考えてみようと思います。

制作
まず、やりたい機能、必要な項目を洗い出して、UIについて考えます。プロトタイプ作成で役に立つhttps://scriptui.joonas.me/を利用して作成していきます。他のスクリプトUIと並んだ際にシンプルで浮きすぎない、操作感が良い構造を目指しました。

UIが完成したら、次はボタンの動作時の実行するスクリプトに取り掛かります。やりたい事は、トランスフォームエフェクトを適用し、同時にマスクを作成するスクリプトです。制作にはChatGPTのコードの提案を利用しました。
ChatGPTの提案速度はとても早く、コードやアイデアを入力するとすばやく参考コードを提供してくれます。そのままの利用はほぼできず、大きく改善する必要がありましたが、アイデアとしての方向性を示してくれるので、トライ＆エラーの時間の短縮につながりました。

以前にオートモーションスクリプトというスクリプトを作成していました。この経験も役立ちましたが、ChatGPTのおかげでやりたい事を形にする速度が上がりました。

現在はAPIを利用していますが、参考例を得るだけであれば無料プランでも十分です。そのままコードを利用することはありませんが、非常に近い内容の参考例を提供してくれるため、開発に必須なツールだと感じました。

やりたいことの無限ループ
モーション作成するスクリプトが完成したので、さらにデュレーションを変更したい、イージングを設定したい、ランダムにモーションを設定できないかと次々と思い浮かんだアイデアを実現するために試行錯誤していきました。

また業務で使用しながら調整もしました。もっと良くなるように、欲しい機能を追加して、何度もアップデートしていきました。メイン機能から、サブの調整機能まで多くの機能を詰め込みました。

  • IN-OUTのモーションを個別に選択可能に

  • スケール、回転、逆回転プリセットの追加

  • モーションの移動距離を最大辺にの距離に合わせる機能

  • 複数テキストレイヤーのシェイプ化、分解

  • レイヤーのシフター

  • 要素ごとの削除

  • プログレスバーの追加（誤操作抑止のため）

  • 画像、シェイプ、テキストでの処理分け

  • フェード、エラスティック、エラスティックコントローラー作成

  • イージングの選択、変更

  • マスク、シェイプの拡張

  • マスク、バウンディングサイズでシェイプ作成など

”これはどうだろう”と何度もテストを繰り返しました。小さなメダルを探してマップを全部調べていた子どもの頃を思い出す作業でした。ちまちまとした作業が嫌いではないので、ついついダラダラと続けてしまいます。

少しでも使いを勝手よく
機能は増えましたが、使い勝手にも気を配ったつもりです。予期しない操作を防ぐために、条件分岐を設け、動作が絶え間なく続けられるように整えました。Macでの動作検証には、少し古いMacMiniを引っ張り出して最新のOSで検証用に設定しました。検証でWin/Mac間で、多少UIが崩れることがわかったため、なるべく同じ見た目になるように微調整しました。UIボタンも100パターンほど作り、コンパクトで小さな動きで操作できるUI作りを目指しました。プログレスバーも追加しましたが、処理時間が目で追えないと、操作をしてしまう可能性があり、処理中の誤操作による問題を減らしたかったので実装しています。

たくさんの機能を追加したので、非常に説明が難しくドキュメントを別に作成しています。各項目についてNotionで公開しているので、随時更新などできればと思っています。

エラー対処
いくつかのエラーを解決するために時間を要しました。すごく単純なものだったり、勘違いだったり、仕様だったりその都度手が止まりました。調べていくとコーディングに問題があると、他のスクリプトに影響することもわかりました。たしかに実際以前購入したスクリプトで、ほかのツールの起動に影響が出るものがありました。自分はまだようやく形を作れる程度スキルだと思います。自分の認識、知識と配慮不足で他の方にまで影響がでるのは心苦しいです。なるべく問題は排除したつもりですが、まだ気づけていない問題があるかもしれましれません。スクリプトはバグとの戦いという書かれ方をしますが、問題を知り何度も手入れをする胆力が求められているように思います。

懸念と今後
スクリプトは他の処理に影響がでたり、マシンをハングさせたり、問題が大きくなる可能性があります。その点を注意しながら制作したつもりです。業務で作業中にトラブルで書き出しができない、終わらない、帰れない、自分も何度も泣かされてきました。スクリプトは便利なツールですが信頼されないと使われないことを理解しています。時間をかけてリスクを減らしたつもりですが、まだ気づけていない問題があるかと思います。これから出るであろう問題に長く付き合いながら改善、調整ができればと思います。

またChatGPTについても、コードの引用先がわからないという問題があるため、そのままの利用はコード制作者様の権利の侵害にあたる可能性があります。今回の制作でも記載できるコードは明記しましたが、出所が明らかな場合はその明記やライセンスの確認が必要になりそうです。一般的な書き方についての提案を受け入れて改変するのであればリスクは減りそうです。具体的な特定の処理を提案して貰う場合には注意が必要です。

まとめ
制作に時間をかけとても大変でしたが、とても楽しい経験でした。
単純作業で物量がある場合や、グラフィック素材で支給されたデータを捌かないといけない場合、シェイプデータからテキストアニメータのような動きが作りたい場合に力を発揮します！よかったら使って見てください！
気にかけてもらえたら嬉しいです。合わせて宣伝記事でした。長文失礼しました。

資料
制作にあたって参考にした、サイトや書籍、ツールなどをまとめました。
情報を公開されている、制作者様に大変感謝しております。
スクリプト制作をされている方に、参考になればと思います。


この記事が気に入ったらサポートをしてみませんか？