GSAP Loader for WordPress

WordPressサイト全体で共通利用する「GSAP（GreenSock Animation Platform）」のコアファイルおよび各種拡張プラグインを、一括管理・最適化して読み込むための基盤（Base）プラグインです。

このプラグインを導入することで、自作プラグイン（AFFIChartなど）やテーマ間でGSAPの二重読み込みやバージョン競合が発生するのを完全に防ぎます。

✨ 主な機能 (Features)

• GUIによる直感的な管理: WordPressの管理画面から、サイト全体で読み込みたいGSAPプラグインをチェックボックスで選択可能。
• 依存関係の自動解決: ScrollSmoother を選択すると親の ScrollTrigger が自動でONになるなど、安全なUIロジックを搭載。
• 圧倒的なパフォーマンス: minified（圧縮版）ファイルを最優先（Priority 5）で出力し、無駄なレンダリングブロックを防止。
• 自動レジストリ: フロントエンド出力後、読み込まれたプラグインを検知して自動で gsap.registerPlugin() を実行します。

✨ プラグインの種類

• Gsap core
• CustomBounce
• CustomEase
• CustomWiggle
• Draggable
• DrawSVGPlugin
• EasePack
• Flip
• GSDevTools
• InertiaPlugin
• MorphSVGPlugin
• MotionPathHelper
• MotionPathPlugin
• Observer
• Physics2DPlugin
• PhysicsPropsPlugin
• ScrambleTextPlugin
• ScrollSmoother
• ScrollToPlugin
• ScrollTrigger
• SplitText
• TextPlugin

📁 ディレクトリ構造

gsap-loader/
├── gsap-loader.php         # メインプラグインファイル
├── package.json            # npmパッケージ設定
├── webpack.config.js       # @wordpress/scripts 拡張設定
├── vendor-gsap/            # GSAP公式ファイル群（※別途ダウンロードして配置）
│   ├── core/
│   │   └── gsap.min.js
│   └── plugins/
│       ├── CustomBounce.min.js
│       ├── CustomEase.min.js
│       ├── CustomWiggle.min.js
│       ├── Draggable.min.js
│       ├── DrawSVGPlugin.min.js
│       ├── EasePack.min.js
│       ├── Flip.min.js
│       ├── GSDevTools.min.js
│       ├── InertiaPlugin.min.js
│       ├── MorphSVGPlugin.min.js
│       ├── MotionPathHelper.min.js
│       ├── MotionPathPlugin.min.js
│       ├── Observer.min.js
│       ├── Physics2DPlugin.min.js
│       ├── PhysicsPropsPlugin.min.js
│       ├── ScrambleTextPlugin.min.js
│       ├── ScrollSmoother.min.js
│       ├── ScrollToPlugin.min.js
│       ├── ScrollTrigger.min.js
│       ├── SplitText.min.js
│       └── TextPlugin.min.js
├── build/                  # ビルド生成ディレクトリ（自動出力）
└── src/                    # 開発用ソースコード
    ├── includes/           # PHPクラス群 (PSR-4準拠)
    ├── templates/          # 管理画面HTMLテンプレート (BEM記法)
    ├── js/                 # JavaScript (Admin / Frontend)
    └── scss/               # SCSS

🚀 開発環境のセットアップ (Installation & Build)

本プラグインは @wordpress/scripts を使用してビルドを行います。

1. パッケージのインストール

   npm install

2. ビルドの実行

   # 開発用（ファイル保存時に自動コンパイル）
   npm run dev
   
   # 本番出力用
   npm run build

💡 テーマや他のプラグインからの利用方法

このプラグインを有効化している場合、他の自作プラグインやテーマ側で wp_enqueue_script を使ってGSAPを読み込む必要は一切ありません。 直接フロントエンドのJSファイル内でアニメーションを記述できます。

const gsap = window.gsap;

if (typeof gsap !== "undefined") {
  gsap.to(".box", { x: 100 });
}

const { gsap, ScrollTrigger } = window;

if (typeof gsap !== "undefined" && typeof ScrollTrigger !== "undefined") {
  gsap.to(".box", {
    x: 100,
    scrollTrigger: {
      trigger: ".box",
      start: "top 85%",
      once: true,
    }
  });
}

❓ FAQ

グローバル変数をローカル変数に代入する理由は？

リンター（ESLintなど）の静的解析エラーを防ぐためです。（無視しても動作上は問題ありません。） モジュール内でimportせずに、宣言されていない変数（gsap）にアクセスするとno-undef（未定義変数にアクセスしています）という解析エラーが発生します。 反対に、windowのプロパティにアクセスする場合は、ローカル（モジュール内）で定義していなくてもリンターは警告をだしません。この特性を利用して、ローカルで変数gsapに対して、全く同じプロパティを持つwindow.gsapを代入することでリンターの警告を回避することができます。

同じ変数名で定義しても問題ないのですか？

はい、問題ありません。JavaScriptはスコープチェーンという仕組みを持っており、まずスコープ内での変数宣言を探します。そして、スコープ内に変数がない場合のみ、スコープの外側に変数宣言を探しに来ます。つまり、スコープの外にある変数と同様の変数名を定義しても、スコープ内の変数が優先され、スコープ内の変数と同名のスコープ外の変数はスコープ内からは見えなくなります。これを変数のシャドーイングと呼びます。

📄 ライセンス

GPL v2 or later