【v3.3保存版】Affinityの公開スクリプトの実行方法
Affinityバージョン3.3から、スクリプトの配布が可能になりました。今まではClaudeでAffinityのスクリプトを作っても配布する公式の手段がなく、せっかくスクリプトを作っても自分で使うしかありませんでした。非公式の手段はありましたが、専用のプログラムをインストールしなければならなかったためハードルが高く普及していません。
それが、公式にスクリプトのインポート/エクスポート機能がサポートされたため、今後いろいろなスクリプトが公開されるものと思います。なお、バージョン3.3で大きく仕様が変わったため、バージョン3.2までのスクリプトはそのままでは動かないケースが多いです。バージョン3.3がリリースされて半月ほどたちますので、そろそろ公開され始めるのではないかと思います。
この記事では公開されているスクリプトの使用方法について解説します。
スクリプトの公開方法は主に3つあります。
- 実行ファイル(.afscript)の公開
- ソースコードのみでの公開
- ソースコードのファイル(.js)での公開
それぞれの公開方法によってインポートして実行する方法が異なりますのでひとつひとつ説明していきます。
なお手順はWindowsでの方法で、Macでは確認していません。ほぼ同じだと思います。
最初にやっておくこと
実行するスクリプトにもよりますが、まず[設定]のスクリプトタブを確認しておきましょう。
- Affinityスクリプティングを有効化:必ずオンにします
- ファイルシステムにアクセス:Claudeでスクリプトを作成する場合や、この記事の最後にあるおまけのスクリプトを使う場合も必須です。ここをオンにした場合にはフォルダを指定しなければなりません
- ネットワークにアクセス:任意の項目です。Google Spreadsheetのデータを読んだりできます
- Canva AIスタジオの機能を使用:任意ですが、課金していないと使えません(課金しない場合有効にできないかは試していません)
- ファイルシステムへのアクセス:MCPを使う場合、デスクトップの記述は必須です(MCPはデスクトップしかアクセスできない)。それ以外にAffinityのスクリプトからアクセスを許可するフォルダを指定します
実行ファイルの公開
これには2種類あります。
- スクリプト単独で公開しているもの:拡張子afscript
- 複数のスクリプトをまとめて公開しているもの:拡張子afscripts
拡張子の最後に「s」があるかないかで大きく違います。ここでは拡張子が.afscriptの単独ファイルで説明します。例えばこちらになります。
ダウンロードしたZIPファイルを解凍すると「ダイアログ要素ショーケース.afscript」というファイルが作成されます。これは何かというと前の記事のダイアログを表示するものです。
手順1
[ウィンドウ]→[スクリプト]→[スクリプトライブラリ]を開きます。
「デフォルト」と「サンプル」のカテゴリがあります。サンプルはCanvaで作ったサンプルになります。結構役立つものが多いので試してみることをお勧めします。パネル右上にある[パネル環境設定]アイコンをクリックするとカテゴリを追加したりできます。カテゴリはスクリプトの数が多くなった場合に整理するためのものです。
手順2
「デフォルト」カテゴリのメニューから[スクリプトをインポート]をクリックします。
なお、パネル環境設定にも[スクリプトをインポート]がありますが、こちらからはスクリプトカテゴリファイルを選ぶものになります。カテゴリをインポートするため、単独のスクリプトはインポートできません。
手順3
[スクリプトをインポート]をクリックするとファイル選択ダイアログが表示されるので、ファイルを開きます。
注意マークがついているのは「害を及ぼすものかそうでないか確認できていない」という意味です。
クリックするとスクリプトが実行されますが、注意マークのあるものは次のウィンドウが表示されます。
[信頼して実行]もしくは[エディターで表示]をクリックします。
手順4-1
誰が作ったか分かっていて信頼できるものであれば[信頼して実行]をクリックします。このように実行されます。
実行後は注意マークが消えます。
手順4-2
出所があやしい、となれば[エディターで表示]をクリックします。
スクリプトエディターパネルが開きます。ここで[悪意のあるスクリプトアドバイザー]をクリックします。
スクリプトが検証され、結果が表示されます。
実行内容が、配布元の記述と一致していれば問題ないでしょう。[OK]をクリックします。
なお、悪意のあるスクリプトの場合にどうなるかは調べていません。そもそもそんなスクリプト作れないし。
問題がなければスクリプトエディターを閉じてかまいません。(後程説明しますが、スクリプトエディターからスクリプトを実行することもできます)
スクリプトライブラリパネルに戻ったら、今度はクリック後[信頼して実行]をクリックしてください。
なお、明らかに信頼できるものであれば、右クリックして「信頼済みとしてマーク」をクリックします。注意マークが消えます。
手順5
実行後、不要であれば右クリックから[スクリプトを削除]で削除できます。なお、スクリプトはスクリプトライブラリパネル内でドラッグすることにより、順番を入れ替えたり、別のカテゴリに移動したりできます。
ソースコードのみでの公開
次のようにソースコードだけ掲載しているケースもあります。
スクリプトから猫形シェイプを作成する方法は3種類あります。
- createDefault()で作り、setShape() で形を変える
const { app } = require('/application'); const { ShapeNodeDefinition } = require('/nodes.js'); const { Shape, ShapeType } = require('/shapes.js'); const doc = app.documents.current; if (!doc) { app.alert('猫形シェイプを作成するドキュメントを開いてください'); } else { doc.addNode(ShapeNodeDefinition.createDefault().setShape(Shape.create(ShapeType.Cat4))); } - { x, y, width, height } のオブジェクトを渡す
const { app } = require('/application'); const { ShapeNodeDefinition } = require('/nodes.js'); const { Shape, ShapeType } = require('/shapes.js'); const doc = app.documents.current; if (!doc) { app.alert('猫形シェイプを作成するドキュメントを開いてください'); } else { doc.addNode(ShapeNodeDefinition.create(Shape.create(ShapeType.Cat4), { x: 0, y: 0, width: 100, height: 100 })); } - new Rectangle(x, y, 幅, 高さ) を渡す
const { app } = require('/application'); const { ShapeNodeDefinition } = require('/nodes.js'); const { Shape, ShapeType } = require('/shapes.js'); const { Rectangle } = require('/geometry.js'); const doc = app.documents.current; if (!doc) { app.alert('猫形シェイプを作成するドキュメントを開いてください'); } else { doc.addNode(ShapeNodeDefinition.create(Shape.create(ShapeType.Cat4), new Rectangle(0, 0, 100, 100))); }
この場合、スクリプトエディターを使います。
手順1
[ウィンドウ]→[スクリプト]→[スクリプトエディター]を開き、[新規スクリプト]をクリックします。
手順2
コードをコピーして、スクリプトエディターにペーストします。上の例の1.のコードをコピー&ペーストしました。元のコードの掲載方法によってはこのように改行がなくなってしまう場合もありますが、これでも問題ありません(JavaScriptというプログラミング言語の仕様で、改行なしでも実行できます)。
手順3
[実行]をクリックすると実行されます。
スクリプトによっては、歯車アイコンから設定を変更しないと実行できない場合があります。これは公開しているサイトに指示があるはずですので、サイトの説明をよく読んでください。
手順4
スクリプトライブラリに表示したい場合は[名前を付けて保存]をクリックします。スクリプト名とカテゴリの選択、説明文章を入力するウィンドウが表示されます。
[保存]をクリックするとライブラリに登録されます。
ソースファイルでの公開
Affinityのスクリプト本体はJavaScriptというプログラミング言語で作成されており、その中身はテキストです。スクリプトエディターで表示・編集できますが、メモ帳やテキストエディットなど、一般的なテキストエディタでも表示・編集できます。実行ファイル(afscript)はスクリプトライブラリに表示するためにタイトル名や説明などを加えたものになります。
通常はソースファイルで公開されることは少ないと思いますが、次のようにあえてソースコードを読んでほしい場合があります。
grid_and_guides.zip(解凍すると「grid_and_guides.js」ファイルが作成されます)
これはサンプルに収録されている「フレームを分割」と「ガイドを追加」を合体し、長方形を分割した後にその周囲にガイドを引くようにしたものです。そのため、一部の邪魔な機能は省いています。(このスクリプトの説明は次の記事で行います)
ここで問題になってくるのが、スクリプトのライセンスです。元々のスクリプトにはCanvaによって「BSD 3-Clause License」というライセンスが付与されています。ライセンス内容は次のとおりです(Claudeによる要約です)。
BSD 3-Clause License(Copyright (c) 2026, Canva Pty Ltd.)
- 改変・合体・再配布・商用利用はできる
- 条件:ソースで配布するときは、著作権表示・条件・免責事項をそのまま残す/ソース以外(.afscript など)で配布するときは、同じ表記を付属の文書などに含める/Canva や貢献者の名前を、許可なく宣伝・推奨に使わない
実行形式で配布する場合、別途ライセンスを記載した文書を同梱しなければなりません。そのため、1つのファイルとして配布したいためにあえてソースファイルとして置いているわけです。
手順1
解凍したJSファイルをメモ帳などで開きます。
手順2
Ctrl+Aキーを押してすべてのテキストを選択し、Ctrl+Cキーを押してコピーします。コピーしたらメモ帳などは閉じてかまいません。
手順3
Affinityのスクリプトエディターで[新規スクリプト]をクリックし、Ctrl+Vキーを押してペーストします。
あとは「ソースコードのみでの公開」の手順3以降と同じです。
おまけ
ソースファイルで公開されているものは手順が少し面倒です。そのため、わざわざメモ帳などで開かなくても、とりあえず実行できるスクリプトを作りました。
scriptlauncher.zip(解凍すると「スクリプトランチャー.afscript」ファイルが作成されます)
これを実行すると、ファイル選択ダイアログが表示されます。そこで.jsファイルを選択すると、そのファイルを読み込んで実行するものです。わざわざコピペしなくてもソースファイルで公開されたスクリプトを実行できるため、確認のために動かしてみたい、というときに使えます。
注意点があります。jsファイルの置き場所は、Affinityの[設定]の中で指定した場所に限られます。それ以外の場所にあるjsファイルにはアクセスできません。
作った目的は、スクリプトの修正を繰り返すのに毎回ライブラリに登録するのが面倒なので、ライブラリに登録しなくても実行できるものが欲しいと思ったからです。ですから逆に、ライブラリに登録して繰り返し使いたいという場合には使えません。あくまでも開発者向けのものです。よければ使ってください。
10月1日 追記
dialog_showcase.zipを10月1日 12:50に差し替えました。境界線の設定を変更しようとするとクラッシュする不具合を修正しています。それ以前にダウンロードされた方は再ダウンロードをお願いします。
10月9日 追記
dialog_showcase.zipを10月9日 9:18に差し替えました。ドキュメントを開いていない状態で境界線の設定を変更しようとするとクラッシュする不具合を回避しています。それ以前にダウンロードされた方は再ダウンロードをお願いします。



















