jsdo.itで書いたWizard.jsを利用したアニメーションガイドを書きました。
アニメーションの処理が完了する度に、ガイドのパネルを切り替えることによってガイドを実現しています。

人にアニメーションの説明するときに楽なのではないかと思います。

アニメーションのガイド
http://jsdo.it/holydesign/cOyt

続きを読む >>

前のMootoolsのプラグインImageDrawer1.0をリリースしました。で書きましたが、前のバージョンのGradually 1.0が汎用性がなくて新しく設計しなおしました。
今回は、画像の描画部分の実装をImageDrawer1.0で実装し、それ以外の機能をGraduallyに実装するようにしました。

これにより、利用方法が少しだけ柔軟になり、機能拡張が容易になった為、新しい機能も比較的に早く対応できそうです。

ダウンロード
http://mootools.net/forge/p/gradually
続きを読む >>

前回、Mootools Forgeの使い方 – 登録する前にすることでMootools Forgeの使うまでの準備について解説しましたが、今回は肝心のプラグインの登録部分です。
簡単に登録できるので、非常に楽です。

では、実際にやってみましょう。

続きを読む >>

Mootools Forgeはプラグインを開発者が公開できるサービスです。
githubにプラグインのリポジトリがある場合、インポートするだけなのですぐに公開することができます。
但し、必要なファイルやリポジトリのディレクトリ構成が決まっています。

なので、登録する前にすることをすでに、公開できるプラグインがある場合を想定して解説していきます。
続きを読む >>

jsdo.itで、コンテンツを切り替えるスクリプトを書きました。
書いたやつは、Webサイト制作などで、コンテンツを切り替えるようにするやつです。
タブなんかが一般的ですね。

それを、スタイルシートを最大限に使ってできるだけ使いまわせるようにしたものです。
パターンは4パターンになります。

基本的にメニューの位置が違うだけですが、一つのスクリプトを使うだけで、後はスタイルシートで済ませられるのでかなり楽になるはず。

メニューの位置を変えるだけで、劇的に使いやすくなったりするので、こういうのはなるべく考えてサイトに反映させていきたいですね。
続きを読む >>

私が作成したMootoolsのスライドショープラグインでGraduallyというものがあるのですが、画像の描画部分を自由に変更できなくて非常に汎用性がなくて困っていました。

なのでGraduallyの新バージョン開発のために、純粋に画像の描画部分だけを抽出しようと思いました。

それが、今回のImageDrawerになります。
単体で使用してもいいですし、自作の画像ギャラリープラグインにも組み込めます。

続きを読む >>

Mootoolsのオフィシャルサイトで、Developer Toolsとうモジュールを選択してカスタマイズダウンロードできるものがあるのですが、Mootoolsを使用したことのない人にとってはどれを選択していいかわからないですよね？
なのでどういう構成になっているのかと、どうゆうケースの場合どれを選択すべきかを今までの経験を元にまとめてみました。
続きを読む >>

通常どうしても、MootoolsとjQueryを両方利用しなければならない場合、jQueryのnoConflict()メソッドで
コンフリクト(conflict)を避けるような記述をしなければなりませんでした。
今回はjQueryのnoConflict()を使用してなくても、両方使用できる方法について書きます。
続きを読む >>

Consider:Openというサイトで30 Days of Mootools 1.2 TutorialsというMootools初心者向けのチュートリアルがありましたが、本日、日本語訳されたサイトを発見しました。

30日でmootoolsをマスターする初心者向け講座

日本語ドキュメントは高橋さんが日本語訳してくださった1.2系のものがありますが、APIドキュメントと違い、このチュートリアルはデモもあるので、掲載されているソースコードと実際の挙動を確かめながら学習できます。
なので、今からMootoolsを勉強しようと思っている方にはお勧めです。

APIドキュメントに関してはよく書籍で販売されているポケットリファレンス的な利用方法が大きくなると思いますので、ある程度チュートリアルで、Mootoolsの勉強してからの方が理解しやすいと思います。
続きを読む >>

前回までのForm.Validater.Inlineの使い方では、class属性に入力チェックの記述を直接することで、入力チェックを行いましたが、
今回は動的に行う方法のご紹介です。

class属性を利用するとコーディングしながら、入力チェックの設定をできて楽なんですが、class属性が煩雑になるのでフォームのスタイル付けが面倒であったり、可読性が下がったりする時があります。

そんな場合、入力チェックを設定をjavascriptを利用して行うとすっきりとしたフォームにできます。

具体的には設定部分を別途定義しておき、各要素に対して入力チェックを適用していく形になります。

続きを読む >>