便利なスクリプトが多数公開されている、 Affinity Hub の使い方について解説します。
Affinity Hub
https://affinityhub.js.org/
有志が投稿したスクリプト（プログラム）をまとめているという、コミュニティ型のサイトなので、そのスクリプトを使ったことで何かしらトラブルが起きたとしても、なんの保証もされません(´・ω・`)
自己責任での使用をお願いします。上級者向け。
ページの左上で言語が選べるので、「JA」をクリックして日本語にしておきましょう。
事前準備
ページの右上にこんな感じのエラーメッセージが表示されている場合は、事前準備が必要です。Affinity HubはMCP（Model Context Protocol）を使います。
MCPは、アプリとＡＩ（ChatGPTなど）を接続する機能です。パソコンと機器を繋ぐUSBケーブルみたいなイメージ。
AffinityソフトとAffinity HubをMCPを使って接続し、プログラムを動かす形になります。
ちなみにブラウザが「Safari」だと使えないので、Firefox、Edge、Chromeなどを使ってください。
また、AffinityのバージョンがAffinity Hubと一致しているかも確認してください。
今回解説するときの対応バージョンはv3.2になります。3.1だと使えない可能性があります。
日々更新されてくと思うので、Affinityのバージョンアップを忘れずに(=・ω・=)
1.Affinityを開き、メニューの「編集」－「設定」をクリック
2.「モデルコンテキストプロトコル」から「Affinity MCPを有効にする」にチェックを入れる。
その時、「ネットワークへのアクセス」にもチェックを入れて下さい。
ネットワーク接続していいの？ っていう確認のダイヤログが出るので、はいを押してください。
また、ファイルの保存や上書きをするスクリプトを入れたいときは、「デスクトップ上のファイルへのアクセス」にもチェックを入れて下さい。
同じように許可を求めるメッセージが表示されます。
不安に思う人は、こっちにはチェック入れなくてＯＫです。
ファイル保存にかかわるスクリプトを使うよーって時だけＯＮにして下さい。
僕は両方ともチェック入れちゃってます(=・ω・=)
3.ついでに「スクリプト」から「Affinityスクリプティングを有効化」にもチェックを入れる
同じようにファイルシステムとネットワークへのアクセスをどうするか確認する項目があるので、お好みでチェックを入れて下さい。僕は両方ともチェックを入れてます。
4.Affinityを閉じて再起動する
設定を有効にするため、Affinityを閉じて開き直します。
5.Affinity Hubを開く
Affinity HubをSafari以外のブラウザで開きます。Affinity Hub
https://affinityhub.js.org/
Chromeだと、サイトを開いたときにこんな感じのメッセージが表示されるので、「許可する」を押してあげて下さい。
他のブラウザでも、似たような感じのメッセージが出ると思います。
「うっかりブロック押しちゃった～」って人は、ＵＲＬの横にある調整アイコンをクリックするとサイトの詳細を開けるので、「デバイス上のアプリ」の権限をＯＮにしてあげて下さい。
「権限をリセット」を押してもう一度やり直してもＯＫ。
6.右側の表示が「Affinityに接続しました」になるのを待つ
右側にある表示が「Affinityに接続しました」になったら、接続成功です。
もしエラーメッセージが表示されたままなら
- Safariを使っていないか
- WEBブラウザの権限で拒否していないか
- セキュリティソフトでブロックしていないか
- Affinityを開いているか
- MCPを有効、ネットワーク許可を有効にしたか
確認してみて下さい。
また、ChromeがだめならEdgeで試してみるなど、ブラウザを変えるのもオススメです。
スクリプトをインストールして使ってみる
それでは実際にスクリプトをインストールして使ってみましょう。1.Affinityのメニューから「ウィンドウ」－「スクリプト」－「スクリプトライブラリ」にチェックを入れる
チェックを入れるとスクリプトライブラリパネルが表示されます。
ＤＬしたスクリプトはここに表示されます。
サンプルには、Affinityが用意したいくつかのスクリプトが入っています。
これも使えそうなのがあったら使ってみてもいいかも。
2.AffinityHubから「Zigzag」を探してクリックする
今回は選択したカーブをジグザグにできる、便利なスクリプトを入れてみたいと思います。作者のBlackMortimer-13さんありがとーーー！！！
3.「Affinityにインストール」をクリックする
「Affinityにインストール」というボタンを押せば、インストールされます。簡単！一応下に、インストールする予定のスクリプトが表示されます。
変なスクリプトとか入っていないか確認できるので安心ですね。
今まで何回インストールされているかも見えます。
インストールされると、スクリプトパネルに表示されます。
ドラッグ＆ドロップで移動したり、右クリックで削除したりできます。
ちなみに、カテゴリがない状態だとインストールできないので、右上の「∨」を押して何かしらのカテゴリを作っておいてください。
（消していなければデフォルトカテゴリが最初からあるはず）
早速ジグザグスクリプトを使ってみましょう。
4.ペンツールで適当な線を書く
ペンツールや図形ツールで、ジグザグにしたい線を書きます。
5.線を選択した状態でZigzagスクリプトをクリックする
6.表示されるパネルで詳細を決める
Amplitude（振幅）でギザギザの大きさを、Ridges（尾根、波の山）で折り返しの数を指定します。
Smooth waveにチェックを入れると波線になります。
その他にも便利なスクリプトがいっぱい紹介されているので、いろいろと使ってみて下さい。
個人的に
- SwapObjects…選択したオブジェクトの位置を入れ替える
- ReColorFill…選択したオブジェクトの塗りの色を変更。イラレで言う「オブジェクトを再配色」（文字の色は変更できない）
- ReColorStroke…ReColorFillの境界線版。
- オブジェクトをランダム化…選択したオブジェクトをランダムに変形。イラレの「オブジェクトを個別に変形」でランダムにチェック入れた感じ。
らへんがお気にいり。
かゆいところに手が届くぅ～！！
Githubが使えれば自分が作成したスクリプトも公開できるので、プログラム得意な人は挑戦してみるのも面白いんじゃないでしょうか。
https://github.com/JiriKrblich/Affinity-script-manager
日本式トンボの作成スクリプトも誰か、是非に……！！
Github、いい加減使い方覚えなきゃな……(´・ω・`)
少しでも参考になれば！(=・ω・=)
投稿
