DTP JavaScript jQuery MooTools MovableType PHP SEO対策 Web / PC / IT エンターテイメント 携帯サイト 政治 / 経済 / 社会 未分類

«写真を簡単に繋げてパノラマ写真を作れるICEを試してみた｜ メイン ｜MooToolsを30日でマスターするチュートリアルを試す！【2日目】»

2008年10月08日

MooToolsを30日でマスターするチュートリアルを試す！【1日目】

JavaScriptライブラリで個人的にお気に入りのMooToolsを30日でマスターするチュートリアルを発見！

MooToolsを30日でマスターするチュートリアル登場 - 現在21日目 | エンタープライズ | マイコミジャーナル

チュートリアルはJavaScript初心者でも分かるように書かれているようで難易度は易しそうです。
ただ残念ながら英語なのです。

これもいい機会なので英語も頑張って勉強しつつ、要点をこのBlogに記して行こうと思います。

まずは1日目↓

まずは練習環境を構築しましょう！

練習環境というか何というか・・・英語に手も足も出ないので。

FireFoxのアドオンを入手しましょう。

Dictionary Tooltip :: Firefox Add-ons

こちらのアドオンは

っていう優れものです。

それからあんまり使えない事で有名なGoogle 翻訳で、とりあえず頑張ろうと思います。

こちらに翻訳結果を画像にしたものを置いておきます。

あとはエキサイト 翻訳も合わせて使いたいと思います。

さて、いよいよMooToolsのお勉強開始です。

MooToolsの紹介

MooToolsはパワフルで非常に軽量なJavaScriptライブラリで、インタラクティブなWeb開発を容易にする為に設計されています。
クリックやマウスオーバー等にイベントを与えることがMooToolsなら簡単に行えます。

Mootools 1.2をインストールする

1. まずはMooTools - download release 1.2からMooTools1.2をダウンロードしてください。（下図参照）

2. 次にJSファイルをサーバー又はあなたのワークスペースに配置してください。
3. headタグ内で以下の様にMooTools1.2を読み込む

<script src=”mootools1.2core.js” type=”text/javascript”>

スクリプトの記述を追加する

記述方法は二通りあります。

1つ目の手法.スクリプトタグ内に記述

<script type="text/javascript">
//ここにMooTools1.2のコードを記述します。
</script>

2つ目の手法.外部JavaScriptファイルとしてheadタグ内で読み込む

<script src="myJavaScriptFile.js" type="text/javascript">
</script>

ここからは、どちらか一方の方法を使用することができます。
私は多くの場合、スクリプトタグ内のdomreadyイベントでfunctionを呼び出します。
外部JavaScriptファイルに記述することも出来ます。

domreadyイベントに入れましょう

Mootoolsのfunctionは、 domreadyイベント内で呼び出す必要があります。

window.addEvent('domready', function() {
    exampleFunction();
});

またdomreadyの外で構築したfunctionをdomreadyイベントで呼び出す事が出来ます。

var exampleFunction = function() {
     alert('hello')
};
 
window.addEvent('domready', function() {
    exampleFunction();
});

ライブラリ説明

この最初のチュートリアルでは、ライブラリのアーキテクチャの主要コンポーネントを詳しく見て、いくつかの基本的な機能に目を通します。

Core

Coreでは、多くの先在の機能性を強化することと同様に、Mootoolsライブラリの中に一般的な機能を保管していて、共通タスクを達成するのを容易にしています。
以下は一例です。

• valueの値が空か「0」ならFALSEを返します　$chk(value);
• 二つの値からランダムに整数を返します　$random(min, max);
• 簡単にブラウザやブラウザエンジンを検出できます。

Native

ライブラリのこのセクションでも、値やオブジェクトの配列を操作できる共通のツールが含まれ、関数、数値、文字列、ハッシュとイベントが操作出来ます。

• 配列内容を読み出し処理を行う.each();
• 配列の最後の要素を取り出す.getLast();
• 定期的に実行する場合の周期をミリ秒で指定する.periodical();
• 四捨五入を行う.round();
• RGBの16進数に変換する.rgbToHex();

Class

JavaScriptのクラスは、 CSSのクラスとは対照的で、機能を再利用可能なオブジェクトです。
Mootoolsクラスの詳細についてはMootools Classes - How to Use Them

Element

要素のクラスはMootoolsライブラリ内のいくつかの最も有用な機能を提供しています。DOM要素を選択し、そのプロパティや位置、CSSスタイルを操作できます。

• DOM要素のIDまたはクラスの1番目を選択する.getElement()
• DOM要素のIDまたはクラスをすべて選択する.getElements()
• CSSクラスを要素に追加する.addClass()
• 要素の属性を取得する.getProperty()
• 要素に属性を設定する.setProperty()
• 要素に属性を設定する.setProperty()
• 要素のスタイル属性を取得する.getStyle()
• 要素にスタイル属性を設定する.setStyle()
• 要素の座標を取得する.getCoordinates()

ユーティリティ

ユーティリティにはより洗練されたセレクタを提供するロジックが含まれています。
cookieを簡単に扱えたりActionScriptとの連結ができる機能が含まれます。

FX

これはおそらくMootoolsの最も楽しいセクションです。
“tween”や“morph”といったエフェクトを与えることが出来ます。

• 2つのスタイルの値との間の遷移を作成するアニメーション　-　var myFx = new Fx.Tween(element);
• 複数の別のスタイルの値との間の遷移を作成するアニメーション　-　var myFx = new Fx.Morph(element);

Request

AJAX通信（Javascripts XMLHttpRequest）を容易にする為の機能が備わっています。
全体の要求/応答の過程をはるかに容易にし、特にHTMLかJavascript Object Notation(JSON)応答のどちらかに対処する拡張機能を持っています。

Plugins

Pluginsは高度なUIを追加します。

• Fx.Slide
• Fx.Scroll
• Fx.Elements
• Drag
• Drag.Move
• Color
• Group
• Hash.Cookie
• Sortables
• Tips
• SmoothScroll
• Slider
• Scroller
• Assets
• Accordion

1日目の感想

一日目はここまででした！
なんだか少しは分かった気がします。

一回で全てを理解するのは難しいですが、元サイトにも全てを理解する必要はありません的な事が書いてあります。（Google翻訳でそんな感じの事が最後にあるような(；´Д｀)）
おそらく2日目以降で様々なサンプルとかが出てくると思うのでそっちで実戦慣れしていけば良いのでは無いでしょうか。

RSSも配信しておりますのでよろしくお願いします！
なるべく早く2日目も書くつもりですので。

※稚拙なJavaScriptの知識と英語読解力なので、間違い等ありましたら是非ご指摘ください！

続きリリースしました！

MooToolsを30日でマスターするチュートリアルを試す！【2日目】
MooToolsを30日でマスターするチュートリアルを試す！【3日目】

Posted by ; k. 2008年10月08日 00:44

このエントリーのタグ

• JavaScript
• mootools

トラックバック

このエントリーのトラックバックURL：

このエントリーへのトラックバック：

コメント

(初めてのコメントの時は、コメントが表示されるためにこのブログのオーナーの承認が必要になることがあります。承認されるまでコメントは表示されませんのでしばらくお待ちください)

名前:

メールアドレス:

URL:

情報を保存する？

コメント:

RSS2.0

Powered byMovable Type3.35

Copyright（C）caraldo,All rights reserved.