sharedhat - Personal blog of Noritaka Horio » Mootools

Mootools Photo Galleryテンプレート1.0をリリースしました。

horry — Tue, 15 Feb 2011 04:01:39 +0000

PC/iPadに対応したフォトギャラリーテンプレートを作成しました。
Mootools、PowerTools、OOCSSを利用しています。
バージョンは1.0です。

Mootools Photo Gallery Template 1.0をダウンロードする

ギャラリーのメカニズム

ソースコードを改造する場合は、コードを読む前に下記の内容を一通り見てもらえると理解度が変わると思います。

この画像ギャラリーは下記のControl、Gallery、Controller、Serverの4つの構成で成り立っています。
各項目についての役割は下記の通りになっています。

コントロール(Control)

コントロールはギャラリー上でのイベントを監視し、ギャラリーに適切なコンテンツを要求します。
又、それに伴う表示の更新を行います。

ギャラリー(Gallery)

画像ギャラリーの機能を提供します。
具体的な処理はコントローラーに委譲します。

コントローラー(Controller)

コントローラーは画像コンテンツの最適化、画像の切り替えの制御などの画像ギャラリーのすべての処理を行います。
コンテンツの最適化はWebサーバーにAHAHを利用して要求します。

サーバー(Server)

サーバーはコントローラーからの要求を受け取り、適切な画像コンテンツを応答として返します。
画像コンテンツはHTMLの断片です。

テンプレートの今後

今後はテンプレートのバグを修正しつつ、サーバーの処理部分をPHPのコードに置き換えたいと思います。
特定のディレクトリに画像をアップロードすると、サーバーサイドで画像を最適するようにしたいです。
最終的にはテンプレートではなくなります。
Similar Posts:

MootoolsとPowerToolsでPC、iPadに対応したギャラリーサイトのテンプレートを作りました。

horry — Thu, 03 Feb 2011 17:04:48 +0000

MootoolsとPowerToolsでPC、IPadに対応したギャラリーサイトのテンプレートを作成しました。
閲覧するデバイスに最適な形式で表示するようにしています。
もちろんiPadの傾き変更にも対応済みです。
PowerToolsはMootoolsのコアデベロッパーのChristoph Pojerが開発したMootoolsベースのライブラリです。
Mobileデバイス用イベント、クラスユーティリティ、ツリーUIなどのコンポーネントを配布しています。

サイトとソースコード

Mootools Photo Gallery

http://gallery.sharedhat.com/

ソースコード

http://code.google.com/p/mootools-photo-gallery/source/checkout

ライブラリ

ライブラリは下記のサイトから入手できます。

Mootools

http://mootools.net

PowerTools

http://cpojer.net/PowerTools/

PowerToolsの使用したコンポーネント

今回iPadに対応するために、PowerToolsの下記のコンポーネントを使用しました。

Custom-Event

名称	説明
Element.defineCustomEvent	カスタムイベントを定義できる機能を提供する。

Mobile

名称	説明
Browser.Mobile	Mootools CoreのBrowserにiPad/iPhone/iPodのモバイルデバイスの情報を追加する。
Browser.Features.Touch	Mootools CoreのBrowserにTouchイベントのサポート情報を追加する。
Mouse	Touchイベントに対応していないデバイスの際に、イベントmousedown, mousemove, mouseupをベースにtouchstart, touchmove, touchendイベントをカスタムイベントで提供する。これによりモバイルデバイスを使用しなくてもPCで動作テストをすることができる。
Touch	touchendイベントをベースにカスタムTouchイベントを提供する。
Click	Touchイベントをサポートしている場合に、ClickイベントをカスタムTouchイベントに置換する。これによりモバイルデバイスを使用しなくてもPCで動作テストをすることができる。
Pinch	Touchイベントをサポートしている場合に、カスタムPinchイベントを提供する。
Swipe	Touchイベントをサポートしている場合に、カスタムSwipeイベントを提供する。
Touchhold	Touchイベントをサポートしている場合に、カスタムTouchholdイベントを提供する。

Interface

名称	説明
Interface	Javaのようなインターフェース定義機能を提供する。

便利だったコンポーネント

通常、iPad対応のサイトを制作する際に、iPadで途中の状態を表示して確認する必要があると思うのですが、
Mobile/Mouse、Mobile/Clickの二つはTouchイベントの対応していないPCでの動作確認ができて非常に便利でした。

iPadの場合、Clickイベントの変わりにTouchイベントを使用してイベントを処理をする必要があり、コードもそのように書く必要がありました。
しかし、Mobile/Clickを使用するとiPadの時だけ、ClickイベントをTouchイベントに置き換えてくれるので、通常のPCサイトのようにコードを書くことができます。
それに、Mobile/MouseでMouseイベントをTouchイベントに置き換えるので、Swipeイベントもマウスをクリックして画面をなぞるだけで実行できます。

試しに、ギャラリーサイトを表示し、ページ上でマウスをクリックしてをなぞって見てください。
写真がイベントに反応して切り替わると思います。

サイトのスクリーンショット

縦表示(portrait)の場合

横表示(landscape)の場合

最後に詳しいドキュメントを作成している途中ですので、完了次第ブログに記事として書きます。
PHPの軽量なフレームワークを使用して、画像をアップロードするだけで最適表示する感じにしてもいいと思っています。Similar Posts:

Concrete5のパッケージ、Frontend Developer 1.1.0をリリースしました。

horry — Wed, 19 Jan 2011 12:39:09 +0000

久しくメンテナンスしていなかったパッケージFrontend Developerの新バージョンをリリースしました。
基本的にはバグ修正と対応していなかった部分の対応を行いました。

ダウンロード

今回のバージョンでの対応は下記の通りです。

バージョン 1.1.0

GithubのAPIライブラリを2.11から2.12へアップグレード
ブロック、Github Repogitory, Github Tags, Github Isuue用のテンプレートのバグを修正。
Mootoolsプラグインのダウンロードファオームのバグを修正。
Mootoolsプラグインの取り込み処理のリファクタリング。
日本語翻訳の不足部分の追加
日本語翻訳ファイルの追加

もしパッケージで問題があればご連絡ください。
なるべく早く修正します。Similar Posts:

MootoolsのGoogle Mapsプラグイン、MMap 0.2.1をリリースしました。

horry — Thu, 06 Jan 2011 17:42:35 +0000

MootoolsのGoogle Maps プラグインMMapの最新バージョン0.2.1をリリースしました。
バグと若干の仕様変更があります。

ソースコードはMMapからダウンロードしてください。
BuildディレクトリにビルドしたファイルとYUI Compresserで軽量化したソースが含まれています。

0.2.1の変更点

MMap.BaseMarkerをMMap.Marker.Coreにリネーム
MMap.MarkerをMMap.Marker.HTMLにリネーム
MMap.MarkerLoaderでHTMLマーカーが正しく読み込めないバグを修正
MMap.MarkerLoaderのオプションとloadメソッドの仕様を変更
MMap.MarkerManagerのactive/visibleメソッドを修正
MMap.MarkerManagerにactiveAll, activeByBounds, visibleAll, visibleByBoundsを追加

ビルドの仕方

自分でビルドしたい場合は下記のコマンドを参考にビルドしてください。
事前にpackagerをインストールした後、MMapをパッケージとして登録してください。

MMapのみビルドしたい場合

[shell]
php packager build MMap/* +use-only MMap > mmap.js
[/shell]

MMapと必要なMootoolsコンポーネントをビルドする場合

[shell]
php packager build MMap/* > mmap-with-mootools.js
[/shell]

後は少しずつ、使い方を書いていこうと思います。

Similar Posts:

MootoolsのGoogle Mapsプラグイン、MMap0.2をリリースしました。

horry — Sat, 25 Dec 2010 13:06:59 +0000

最新バージョンである0.2をリリースしました。
旧バージョン0.1とは互換性がありません。

又、旧バージョンでドキュメントを作成していなかったので、別途APIリファレンスを作成しました。

MMap 0.2ドキュメント

MMap 0.2ドキュメントページ

MMap 0.2デモページ

0.1からの変更点

マーカーを読み込むマーカーローダーの追加(MMap.MarkerLoader)
マーカーを管理するマーカーマネージャの追加(MMap.MarkerManager)
画像マーカーにスライドの再生／停止機能を追加
MVCObjectを利用したプロパティ監視に対応
描画座標の指定をgoogle.maps.Latlngに統一
MMapオブジェクトの削除
Mootools1.3(1.2下位互換無し、完全な1.3)に正式対応

次期バージョンの0.2.1について

マーカーマネージャ(MMap.MarkerManager)の仕様変更

マーカーマネージャのactive/visibleメソッドの仕様を変更します。

現在、active/visibleメソッドにマーカーや短形オブジェクトを指定して、表示状態の変更、マーカーのアクティブ化の切り替えを実現しています。
しかし、今のAPI仕様だとメソッドの名称から具体的な振る舞いがわかりづらいので、0.2.1からは下記のように変更を加えます。

[javascript]
//0.2(現在の最新バージョン)での実行
markerManager.visible()
markerManager.visible(marker) //MMap.Marker.Coreを継承したマーカー
markerManager.visible(bounds) //google.maps.LatlngBounds

markerManager.active()
markerManager.active(marker) //MMap.Marker.Coreを継承したマーカー
markerManager.active(bounds) //google.maps.LatlngBounds

//0.2.1での実行はこうなります。
markerManager.visibleAll()
markerManager.visible(marker) //MMap.Marker.Coreを継承したマーカー
markerManager.visibleByBounds(bounds) //google.maps.LatlngBounds

markerManager.activeAll()
markerManager.active(marker) //MMap.Marker.Coreを継承したマーカー
markerManager.activeByBounds(bounds) //google.maps.LatlngBounds
[/javascript]

マーカーローダー(MMap.MarkerLoader)の仕様変更

マーカーローダーのオプション指定をRequest.JSONと同じようにします。
つまり、インスタンス生成時のオプションにurlやmethodオプションが使えるようになります。
これでインスタンスを生成した後に、loadメソッドでurlやmetohdを指定しなくてもよくなります。
具体的には下記のようになります。

[javascript]
var loader = new MMap.MarkerLoader({
url: ‘/markers/’,
method: ‘get’
});

loader.load({
‘username’: ‘mootools’,
‘keyword’: ‘interface’
});
[/javascript]

MMapのこれから

0.2.1をリリースした後に、Google Mapsの地図上に配置できるリッチなウィジットを作成していく予定です。
地図上に配置できるコントロールや住所検索ができる小さな小窓などです。
その後、デモ用としてウィジットを利用したアプリを公開します。Similar Posts:

Mootoolsをコマンドラインを使用してビルドする方法

horry — Tue, 16 Nov 2010 04:35:27 +0000

Mootoolsのビルドツールにkamicaneの作成したpackagerというビルドライブラリがあります。
このライブラリはphpで書かれていて、packager-webでも使用されているとても便利なライブラリです。

このライブラリを使用すると簡単なコマンドでMootoolsをビルドすることができます。

今回はこのライブラリを使用してMootoolsをビルドする方法を解説します。
まず下記から必要なものをダウンロードします。

必要なものリスト

packagerライブラリ
https://github.com/kamicane/packager
Mootools Coreのソース
https://github.com/mootools/mootools-more
Mootools Moreのソース
https://github.com/mootools/mootools-core

packagerとMootoolsソースの配置

ダウンロードが完了したら、packagerを展開します。
展開したら適当なディレクトリにコピーします。
ここでは、C:\var\www\toolsにコピーすることにします。

次にcomponentsというディレクトリをpackagerディレクトリ内に作成します。
作成できたら、Mootoolsのソースを展開してこのディレクトリにコピーします。

ここではCoreをmootools-coreへ、Moreをmootools-moreにコピーすることにします。
ディレクトリの構造は下記のような形になります。

packager
- components
  - mootools-core
    - Source
    - Docs
    - …
  - mootools-more
    - Source
    - Docs
    - …
- help
- helpers
- libs

Windowsユーザーの人

Windowsでpackagerを利用する場合は、packagerを少し修正する必要があります。
packager内のソースコードpackager(拡張子なし)をテキストエディタで開き下記のコードを追加してください。(15行目付近)
[php]
$home = exec(‘echo $HOME’);
if ($home == ‘$HOME’) $home = array_get($_SERVER, ‘USERPROFILE’);
[/php]

packagerのコマンド

packagerが配置できたので、packagerの説明に入ります。

packagerでは下記のコマンドが使用できます。

コマンド一覧

register – パッケージを登録します。
unregister – パッケージの登録を解除します。
list – 登録されているパッケージの一覧を表示します。
build – パッケージの依存関係を解決した上で、コンポーネントを一つのファイルに出力します。

registerコマンド

registerコマンド利用するとパッケージを登録することができます。
登録されたパッケージは依存関係を解決する際に利用されます。

試しに下記のコマンドを利用してMootools CoreとMoreを登録してみます。

コマンドラインでpackagerディレクトリまで移動します。

[shell]
cd C:\var\www\tools\packager

php packager register C:/var/www/tools/packager/components/mootools-core
the package Core has been registered as C:\var\www\tools\packager\components/mootools-core/package.yml

php packager register C:/var/www/tools/packager/components/mootools-more
the package More has been registered as C:\var\www\tools\packager\components/mootools-more/package.yml
[/shell]

listコマンドで確認

registerコマンドの説明でパッケージを登録したので、無事登録されているか確認するためにlistコマンドを使って登録されているリストを表示してみます。
無事登録されていれば、登録されたMootoore CoreとMoreが表示されるはずです。

[shell]
php packager list
Core: C:\var\www\tools\packager\components/mootools-core\package.yml
More: C:\var\www\tools\packager\components/mootools-more\package.yml
[/shell]

無事表示されれば登録はされています。

buildコマンドでMootoolsをビルド

buildコマンドを利用すると、パッケージをビルドすることができます。
試しに、Core/Request、Core/Request.HTMLをビルドしてみます。

[shell]
php packager build +components Core/Request Core/Request.HTML > mootools.js
Build using: Core, More
Included Files/Components:
- Core/Core: [Core, MooTools, Type, typeOf, instanceOf, Native]
- Core/Object: [Object, Hash]
- Core/Array: [Array]
- Core/Function: [Function]
- Core/Number: [Number]
- Core/String: [String]
- Core/Browser: [Browser, Window, Document]
- Core/Slick.Parser: [Slick.Parser]
- Core/Slick.Finder: [Slick.Finder]
- Core/Element: [Element, Elements, $, $$, Iframe, Selectors]
- Core/Class: [Class]
- Core/Class.Extras: [Class.Extras, Chain, Events, Options]
- Core/Request: [Request]
- Core/Request.HTML: [Request.HTML]
[/shell]

実行するとビルドに使用したパッケージと組み込まれたコンポーネントのリストが表示されます。
このように指定したコンポーネントの依存関係も解決してくれます。

次のような方法でも同様です。

[shell]
php packager build +files Core/Request Core/Request.HTML ART/ART > mootools.js
[/shell]

又、下記のように省略して実行することもできます。

[shell]
php packager build Core/Request Core/Request.HTML > mootools.js
[/shell]

ワイルドカード

まるまるパッケージをビルドしたい場合は下記のようにワイルドカードを利用します。
下記の例ではARTパッケージをすべてビルドします。

[shell]
php packager build ART/* > mootools-with-art.js
[/shell]

パッケージの追加

時には登録していてないパッケージも一緒にビルドしたい場合もあるでしょう。
そんな時は+packagesオプションを使用します。

下記の例では3rdpartyパッケージを追加でビルドするよう指定しています。

[shell]
php packager build 3rdparty/Request.Iddy +packages C:\var\www\tools\packager\components\3rdparty > mootools.js
[/shell]

パッケージの除外

パッケージの追加だけでなく、逆にビルド時に特定のパッケージを除外することもできます。
下記の例では、ビルドに時にCoreパッケージのコンポーネントをすべて除外します。

[shell]
php packager build 3rdparty/Request.Iddy -packages Core > mootools.js
[/shell]

パッケージの指定

パッケージのビルド時に追加／除外以外に特定のパッケージのみ指定することも可能です。
下記の例ではARTパッケージのコンポーネント以外はビルドしません。

[shell]
php packager build ART/ART ART/Base +use-only ART
[/shell]

又、次のようなこともできます。
下記の例では、+packagesで指定したコンポネート以外はビルドしません。

[shell]
php packager build 3rdparty/Request.Iddy +use-only +packages C:\var\www\tools\packager\components\3rdparty
[/shell]

ブロックの除外

コンポーネント内に//<ブロック名>のような書式のブロックがある場合、ビルド時に-blocksオプションを利用することで、指定したブロックで囲まれる範囲のソースコードを除外することができます。
下記の例ではMootools1.2の互換コードをビルド時にソースコードから除外し、ピュアなMootools 1.3バージョンをビルドします。

[shell]
php packager build Core/Request Core/Request.HTML -blocks 1.2compat
[/shell]

packagerを利用すると、自分で作成したパッケージや、他のユーザーが作成したパッケージを一緒にMootoolsに組みこんでビルドしたり、特定のパッケージのみ指定した条件でビルドできるので非常に便利であることが分かると思います。

以上で、ビルドの方法の解説は終了です。Similar Posts:

Mootools Forgeで使用されているPluginsKitをインストールしてみた

horry — Sat, 06 Nov 2010 04:24:05 +0000

githubのリポジトリにあって、前から気になっていたのですが試しに自分のレンタルサーバーに設置してみました。
PluginsKit自体はsymfonyベースのアプリケーションでgithubのリポジトリからMootoolsのプラグインをチェックアウトして公開できるようにするアプリケーションです。

Twitterアカウントでの認証機能も利用できます。

デモページは下記の通りです。
PluginsKit on sharedhat.com

ユーザー登録もできるようになっているので、サインアップして実際に自分のプラグインを取り込むことが可能です。
Mootools Forgeを試す前のお試しだと思って自由に利用してください。

今回は設置方法を解説します。

PluginsKitのダウンロード

Guillermo Rauchのgithubリポジトリからダウンロードしてきます。
ダウンロードしたアーカイブを解凍して適当なディレクトリに展開します。

必要なものをビルドする

下記のコマンドを実行して、アプリケーションに必要なものをビルドします。
それぞれ、sqlファイル、モデル、フォームが生成されます。
[shell]
C:\var\www\git\PluginsKit\lib\vendor\symfony\data\bin\symfony propel:build-sql
C:\var\www\git\PluginsKit\lib\vendor\symfony\data\bin\symfony propel:build-model
C:\var\www\git\PluginsKit\lib\vendor\symfony\data\bin\symfony propel:build-forms
[/shell]

データベースの作成と設定

MySQLでデータベースを作成して、ビルドしたsqlファイルを実行して必要なテーブルを作成します。
テーブルの作成が完了したら、configディレクトリ内の設定ファイルを編集します。

databases.yml

dsn、username、passwordを作成したデータベースにあわせます。
[text]
all:
propel:
class: sfPropelDatabase
param:
classname: PropelPDO
dsn: mysql:dbname=mooforge;host=localhost
username: root
password: 1234
encoding: utf8
persistent: true
pooling: true
[/text]

フロントコントローラーの修正

webディレクトリ内のフロントコントローラーを修正します。
index.phpを開きrequire_onceでファイルを読み込んでいる部分のパスをmooforge/configに修正します。

[php]
require_once(dirname(__FILE__).’/../mooforge/config/ProjectConfiguration.class.php’);

$configuration = ProjectConfiguration::getApplicationConfiguration(‘frontend’, ‘prod’, false);
sfContext::createInstance($configuration)->dispatch();
[/php]

ファイルのアップロード

すべてのファイルをアップロードします。
webディレクトリが公開ディレクトリですので、webディレクトリの中身をすべてドキュメントルートにアップロードします。
それ以外のファイルは、パスをmooforgeに設定したので、ドキュメントディレクトリの一つ上の階層にmooforgeディレクトリを作成してそこにアップロードします。

これでPluginsKitを利用できるようになります。

Similar Posts:

StaticMapsとMicroformat(hCalender)をセットで利用する

horry — Sat, 30 Oct 2010 18:24:00 +0000

リリースしたStaticMaps0.1.1とMicroformatをパースできるjavascriptライブラリSumoを利用して、動的に地図を描画するサンプルコードをjsFiddleで書きました。

Sumoは他のjavascriptフレームワークと一緒に利用することができます。

javascriptでページ内に埋め込まれているhCalenderを解析し、その結果を元に地図を描画します。
地図を表示する項目はMicroformat(hCalender)の位置情報のlocationプロパティと、より詳細な座標情報のgeoプロパティ、latitudeプロパティ、longitudeプロパティを利用します。

Sumoのデフォルトでは解析対象にhCalenderのgeoプロパティ、latitudeプロパティ、longitudeプロパティが解析対象に含まれていなかったので、別途解析対象にしました。
元のソースコードはDaniel MorrisonのSumoリポジトリにあります。

Microformatを利用したサンプルはMMapのデモページでも書いたのですが、一度記述しておけばテキストを修正するだけで対応が可能なのでメンテナンスが楽ですね。

javascriptでパースするので、無効にされていると動作しないのが厄介ですが、非常に便利なテクニックです。
Microformatのうまみは機械と人間にやさしいことと、再利用できることだと思っているので、もっと普及すればいいと思います。Similar Posts:

MootoolsのプラグインStaticMaps0.1.1をリリースしました。

horry — Sat, 30 Oct 2010 05:28:22 +0000

StaticMapsはMootoolsのプラグインで、javascriptを利用して静的な地図を描画します。
地図の描画にはStatic Maps API V2を利用します。

地図に描画できるものはマーカーのみで、このバージョンではパスの描画のサポートをまだしていません。
次期バージョンでサポートする予定です。

Mootools1.2以上で動作します。

ダウンロードはこちらから可能です。
MootoolsプラグインStaticMapsのダウンロード

ではこのプラグインの簡単な利用方法を解説します。

特定の場所の地図を指定する方法

まず、StaticMapsのインスタンスを生成した後、地図のサイズや地図の中心を指定します。
その後、マーカーを生成して、地図に追加します。

地図のURLを取得する

toQueryString()メソッドを利用して地図のURLを取得できます。
リンクのhref属性を変更して、地図へのリンクを設定することが可能です。

オプションを利用して地図の描画を簡略化する

インスタンス生成時のオプションを指定するとコードを簡略化することができます。
オプションを指定して、renderToメソッドで地図を挿入する要素を指定します。

以上が簡単な解説です。Similar Posts:

Mootoolsのビルドツールに自作パッケージを追加する方法

horry — Wed, 20 Oct 2010 14:15:20 +0000

Mootools Forgeの使い方 – 登録する前にすることで書きましたが、MootoolsではMootools Forgeにプラグイン登録するときにディレクトリ構造、必要なファイルがあらかじめ定められています。

その中で、package.yml(パッケージ定義ファイル)とソースヘッダーの話を書いたと思いますが、packager-webはビルドの際にこれらを参照し、ルールに則ってビルドを行います。
若干、Mootools Forgeの使い方 – 登録する前にすることで説明した内容のほかにファイルに記述する必要があります。

今回説明するパッケージ定義ファイルとソースヘッダーを記述したファイルを用意しましたので参考にしてください。
解凍して、componentsにアップロード、config.ymlの書き換えを行ってください。
packger-webにアップロードしたパッケージが表示されるはずです。

サンプルデータ
サンプルファイルのダウンロード

具体的な内容はおさらいをかねて再度説明します。

パッケージ定義ファイル(package.yml)の作成

1～8番までがpackagerで必要になる項目で9～14番がMootools Forgeで必要になる項目です。
packager-webだけの場合、1～8番までの記述でOKです。

No.	キー	項目名	内容
1	name	モジュール名	モジュールの名称
2	exports	出力ファイル名	出力するファイル名。packager利用時にこのファイル名でビルドされる。packager-webの場合はconfig.ymlで定義する
3	web	プロジェクトサイトURL	このプラグインのプロジェクトサイトのURL
4	description	プラグイン説明	プラグインの説明文
5	authors	著作者	プラグインの著作者。複数いる場合は列挙する。
6	license	ライセンス	ライセンスの説明
7	copyright	著作権	著作権の表記
8	sources	ソースコードのリスト	ソースコードのリスト。複数ある場合は列挙する
9	author	著作者	Mootools Forgeのユーザー名を記述する
10	category	Mootools Forgeのカテゴリ	Effects、Forms、Interface、Media、Native、Realtime、Request、Utilities、Widgetsのどれかひとつ
11	tags	タグ	このプラグインを分類するタグ
12	current	最新バージョン	現在の最新バージョンを記述する
13	docs	ドキュメントのURL	ドキュメントのあるURL
14	demo	デモのURL	デモページのあるURL

実際のサンプルは下記のような感じになります。

[text]
#——————————————–
# Here is a section of Mootools Forge.
#——————————————–

name: Example Plugin Module

author: your forge username here

category: Interface

tags: [animation, canvas]

#docs: http://url.to.docs

#demo: http://url.to.demo

#current: 0.5

#——————————————–
# Here is a section of packager.
#——————————————–

exports: “plugin.js”

web: “[http://sharedhat.com](http://sharedhat.com)”

description: “This is plugin sample”

authors: “[Noritaka Horio](http://sharedhat.com)”

license: “[public domain](http://en.wikipedia.org/wiki/Public_domain)”

sources:
– “Source/Plugin.js”
– “Source/Plugin.ModuleA.js”
– “Source/Plugin.ModuleB.js”
– “Source/Plugin.ModuleC.js”
[/text]

ソースヘッダーの記述

ソースヘッダーはMootools Forgeの使い方 – 登録する前にすることで書いた通りです。
ここの記述は依存関係の解決に大きく影響するので注意が必要です。

No.	キー	項目名	内容
1	name	モジュール名	モジュールの名称
2	description	モジュール詳細	モジュールの詳細を記述する。
3	license	ライセンス	ライセンスを記述する。
4	authors	著作者	著作者を記述する。複数人いる場合は列挙する。
5	requires	依存関係モジュールリスト	依存関係のあるモジュールをリストとして列挙する
6	provides	サブモジュール	このモジュールに含まれるサブモジュール

実際のソースヘッダーは下記の通りになります。

[javascript]
/*
—
name: Plugin

description: This plugin is a sample.

license: public domain

authors:
- Noritaka Horio

requires:
– Core/Core
– Core/Array
– Core/String
– Core/Number
– Core/Function
– Core/Object
– Core/Event
– Core/Browser
– Core/Class
– Core/Class.Extras
– Core/Slick.Parser
– Core/Slick.Finder
– Core/Element
– Core/Element.Style
– Core/Element.Event
– Core/Element.Dimensions
– Core/Fx
– Core/Fx.Transitions
– More/Assets
– ImageDrawer/ImageDrawer
– ImageDrawer/ImageDrawer.Grid
– ImageDrawer/ImageDrawer.Expand

provides: Plugin

…
*/
[/javascript]

packager-webの設定ファイル変更

準備ができたら、packager-webのconfig.ymlを編集してpackagesに組み込みたいプラグインを追加します。

[text]
packages:
– “components/mootools-core/”
– “components/mootools-more/”
– “components/example-package/”
[/text]

これで、自作プラグインをpackager-webに組み込むことができます。
packager-webにアクセスして、問題なくプラグインが表示されていれば終了です。
簡単ですね。
Similar Posts: