LoginSignup
5
6

More than 5 years have passed since last update.

jQuery ExternでjQueryのプラグインを使う

Last updated at Posted at 2014-03-16

背景

jQueryのプラグインを使おうと思ったものの、jQueryExternを使ってる場合に
どうやってextern定義を作ればいいのか途方にくれたので。

どうするの?

https://github.com/andyli/jQueryExternForHaxe/wiki/Haxe-3#pluginHaxe-3
に、jQueryのプラグインを使う場合のexternのやり方が書いてありました。エイゴコワクナイ。

とりあえずextern定義を作ってみる。

とりあえず、使いたいjQueryプラグインを用意する。
今回の生贄はTextEffects
http://team.fourdesire.com/playgrounds/texteffects

定義をゴリゴリ書く。

plugins/TextEffects.hx
package plugins;

import jQuery.*;

extern class TextEffects implements jQuery.haxe.Plugin {
    public function textEffect(?arg:Dynamic):jQuery.JQuery;
    public function textEffectLoop(?arg:Dynamic):jQuery.JQuery;
}

簡単ですね。

ディレクトリ構造はこんな感じになります。

┬ Main.hx
└ plugins ─ TextEffects.hx

呼び出すときはこんな感じで呼び出せます。

new JQuery("#hoge").textEffect();

もちろん、オプション指定したい場合は

new JQuery("#hoge").textEffect({fps:20});

で行けます。

脳みそコネコネ、コンパイル・・・のその前に

定義も終わってゴキゲンにコンパイルをしようとすると、

jQuery.JQuery has no field textEffect

textEffect?知らない子ですね・・・

とか言われます。

マメにimportしてる人でも

Warning : JQuery plugin being imported without compiler option: --macro jQuery.haxe.Config.addPlugin('plugins.TextEffects')

Hey!コンパイル定義が足りないヨ!

と言われます。

なので、コンパイル定義にマクロを追加しましょう。

build.hxml
--macro jQuery.haxe.Config.addPlugin('plugins.TextEffects')

これで無事にコンパイル出来るようになります。

あれ?オーバーロードは?

Haxeでは本来オーバーロードは許されていないため、メタデータと呼ばれる仕組みを利用して
オーバーロードを行います。

オーバーロードを行う際は次のようにすればオーバーロードの定義が行えます。

@:overload(function(str:String,num:Int):String{})
public function foo(?arg:Dynamic):jQuery.JQuery;

複数のオーバーロードを定義する場合は、メタデータの記述を関数の上に積み重ねていけばOKです。
また、次の点に気をつけましょう。

  • メタデータには行末のセミコロンは必要ありません。
  • オーバーロードの最後の空ブロック記述は必須です。

-

と、ここまで書いておきながら、jQueryExternでのプラグイン定義は話が別です。

最新のjQueryExternではマクロでうまいことやってくれてるため、他言語と同じように定義することが出来ます。

前述のextern定義ですが、jQueryExternを使った場合はこんな風にもかけます。

plugins/TextEffects.hx
package plugins;

import jQuery.*;

extern class TextEffects implements jQuery.haxe.Plugin {
    public function textEffect():jQuery.JQuery;
    public function textEffect(arg:Dynamic):jQuery.JQuery;
    public function textEffectLoop():jQuery.JQuery;
    public function textEffectLoop(arg:Dynamic):jQuery.JQuery;
}

@:overloadが何故か効かない効かないと思って色々探しまわって途方に暮れてました。
ソース読めって話ですね。

5
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
6