Mootoolsをダウンロードする際にどれを選択していいかわからない人へ
Category: blog
Mootoolsのオフィシャルサイトで、Developer Toolsとうモジュールを選択してカスタマイズダウンロードできるものがあるのですが、Mootoolsを使用したことのない人にとってはどれを選択していいかわからないですよね？
なのでどういう構成になっているのかと、どうゆうケースの場合どれを選択すべきかを今までの経験を元にまとめてみました。
Mootools Coreのパッケージリスト
Mootools Coreの構成は下記の通りになっています。
基本的にわかりやすい構成になっています。
| パッケージ | モジュール | 説明 |
|---|---|---|
| Core | Core | Mootoolsのコアモジュール、必ず必要なもので基本的な関数を定義します。 |
| Browser | ブラウザ間の差を吸収するユーティリティ関数や列挙型を追加します。Browser.Engine.tridentなどでユーザーエージェントを判別できます。 | |
| Native | Array | ネイティブのArrayオブジェクトを拡張します。indexOf()、each()、getLast()などが実装されます。 |
| Function | ネイティブのFunctionオブジェクトを拡張します。bind()、bindWithEvent()、delay()、periodical()などが実装されます。bind()、periodical()は周りは便利です。 | |
| Number | ネイティブのNumberオブジェクトを拡張します。toInt()、toFloat()などが実装されます。toInt()はいい具合に型変換してくれます。 exp. 15px -> 15 | |
| String | ネイティブのStringオブジェクトを拡張します。camelCase()、capitalize()などが実装されます。camelCase()、capitalize()は地味に便利です。 | |
| Hash | Hashオブジェクトを拡張します。key/valueで情報を管理する時などに非常に重宝します。toQueryString()でクエリに変換できます。 | |
| Event | Eventオブジェクトを拡張します。keyプレスイベントやイベント伝播、イベントのキャンセルを実行するstop()メソッドが追加されます。 | |
| Class | Class | クラスを定義するユーティリティ関数が追加されます。クラスの継承、疑似インターフェース実装が利用可能になります。 |
| Class.Extras | ユーティリティクラスを利用できるようになります。Events、Options、Chainなど。Events、Optionはプラグイン作成時に重宝します。 | |
| Element | Element | $,$$のショートカットが追加されます。又、要素の挿入、要素の属性へのアクセス、子要素の取得など、DOM操作が簡単にできるようになります。 |
| Element.Event | 要素に対してのイベントリスナーの追加、削除、カスタムイベントの実装ができるようになります。カスタムイベントmouseenter/mouseleaveイベントが追加されます。 | |
| Element.Style | 要素のスタイルを簡単に操作できるようになります。 | |
| Element.Dimensions | 要素のサイズ、位置、スクロール情報を簡単に取得操作できるようになります | |
| Utilities | Selectors | CSSセレクタを利用して、DOMツリーから要素を検索できるようになります。又、Pseudo Selectorsが利用できるようになります。 |
| DomReady | DOMの処理完了後に処理ができるdomreadyイベントを利用できるようになります。 | |
| JSON | JSONデータをエンコード、デコードできるようになります。 | |
| Cookie | Cookieを簡単に扱えるようになります。単体ではなくmoreのHash.Cookieを利用することでCookie情報を管理しやすくなります。 | |
| Swiff | FlashのExternalInterfaceを利用してswfファイルと簡単に連携できるようになります。 | |
| Fx | Fx | アニメーションクラスの基本クラスです。このクラスを拡張して独自のアニメーションクラスを定義できます。 |
| Fx.CSS | アニメーションクラスのCSSパーサーが追加されます。Fx.Tween, Fx.Morph, Fx.Elementsでは必須になります。 | |
| Fx.Tween | アニメーションクラスで単一のCSSプロパティを利用することができます。 | |
| Fx.Morph | アニメーションクラスで複数のCSSプロパティを利用することができます。 | |
| Fx.Transitions | トランジションが追加されます。イーズイン、イーズアウト、イーズインアウトやPow、Expo、Circ、Sine、Back、Bounce、Elastic、Quad、Cubic、Quart、Quintが使用できるようになります。 | |
| Request | Request | ブラウザに左右されない非同期／同期通信が利用できるようになります。 |
| Request.HTML | 応答時に解析したHTML要素を受け取ることができます。又、load()メソッドを利用して特定の要素に読み込んだ内容を挿入することができます。 | |
| Request.JSON | 応答時に解析した内容を受けとることができます。JSONパーサーなどを利用することで、セキュアにJSONを扱えるようになります。http://www.json.org/js.html |
どれを選択すればいいのか
これに関してはケース別で説明したほうがわかりやすい良いと思いますので、ケース別で説明していきます。
1. 少しだけ楽がしたい場合
ちょっとだけ、楽がしたい場合は下記の構成で十分だと思います。
単純に要素の属性を変更したり、要素のコンテンツを置き換えるくらいなら問題ないと思います。
- CoreのCore、Browser
- NativeのArray、Function、Number、String、Hash、Event
- ClassのClass、Class.Extras
- Elementの Element、Element.Event、Element.Style、Element.Dimensions
- UtilitiesのSelectors、DomReady
2. クッキー操作するのがめんどい場合
1. とUtilitiesのCookieを選択します。
cookieの処理は地味にめんどくさいです。
Cookieモジュールを選択することで楽になります。
MoreのHash.Cookieを利用するとkey/valueで管理できるのでさらに楽になります。
3. SWFのExternal Interfaceでの処理を楽にしたい
1. とUtilitiesのSwiffを選択します。
swfファイルを埋め込んでくれるのと、コールバックを一度に指定できるので手間がかからないです。
External Interfaceの処理はめんどくさいので、Swiffを利用して手間のかからないようにします。
4. アニメーションさせたい
1. とFxのFx、Fx.CSS 、Fx.Tween、Fx.Morph、Fx.Transitionsを選択します。
表示／非表示のフェードイン・フェードアウトやコンテナ用の要素のサイズ変更時によく使うことになるのでFxパッケージのモジュールは全選択でいいです。
大体、Tweenだけ使用するケースはほとんどないと思いますし、プラグインの関係で必要になることが多いので、はじめから全選択することをお勧めします。
5. Ajaxを利用したい
1. とRequestのRequest を選択します。
読み込む内容が、テキストやXML形式の場合はこれで十分です。
6. AjaxのレスポンスがHTML形式
1. とRequestのRequest、Request.HTMLを選択します。
受け取った内容をそのままコンテナに挿入する場合、一回一回Requestオブジェクトを使用するのは面倒です。
load()メソッドを使用することで楽に実現できます。
7. AjaxのレスポンスがJSON形式
1. とRequestのRequest、Request.JSONを選択します。
受け取ったJSON形式の内容をパースしてくれるので楽です。
内容もチェックしてくれるので形式をチェックしなくても大丈夫です。(但し、軽いものです。)
ながながと書きましたが大体こんな感じです。
Related Post:
It is a list of related articles.
Trackback:
It is a comment that has been gotten before.
トラックバックを下記のURLに送ってください。
http://sharedhat.com/blog/980/trackback/
Reply:
Please give the comment to this article.