技術トレンディセミナー JavaScriptフレームワーク活用

技術 Trendy Seminar

JavaScriptフレームワーク活用

2009/03/10
エスエムジー株式会社
寺田大典
※資料中に記載の会社名および製品名は、各社商標または登録商標です。
※本資料の無断転載・複写を禁じます。

Copyright © SMG Co., Ltd. All rights reserved.

Hot Topic

1. Firefox3 第2シェアブラウザへ（@マイコミジャーナル）
http://journal.mycom.co.jp/news/2009/03/02/020/index.html
IE7(47.81%)、Firefox3(19.28%)、IE6(19.14%)
正式リリースではないが、IE8も利用されている。
IE8はWindows7から外れる可能性も示唆
http://journal.mycom.co.jp/news/2009/03/05/060/index.html
2. Google、「Android Hackathon」を3月19～20日に開催
（@オレンジニュース）
http://secure.ddo.jp/~kaku/tdiary/
Google Hackathonって？
http://codezine.jp/article/detail/3599

2

目次

1. JavaScriptフレームワークの発展の背景
2. 主要なJavaScriptフレームワーク
3. jQueryの紹介
4. YUI（Yahoo! User Interface Library）の紹介
5. まとめ

3

1. JavaScriptフレームワークの発展の背景

1. Webブラウザで利用するスクリプト言語
クライアントサイドでの処理がメイン
2. AJAX台頭で復権
Google Map等での非同期通信から再注目
HTML+CSSを越える動的な挙動をクライアントで実現
3. JavaScriptフレームワークの発展
JavaScriptの利用が広がると共に基本処理の共通化
よりリッチな挙動を、より簡易に省力化で実現
– 高機能を実装済み、試験済みのライブラリを使おう
– クロスブラウザ対応なども考慮

4

2. 主要なJavaScriptフレームワーク

フレームワーク概要
JavaScriptフレームワークの老舗中の老舗。RoRで使用されている。
prototype.js 既存のJavaScriptの拡張にフォーカスを置いている。
http://www.prototypejs.org/ 他のJavaScriptライブラリの基盤として利用される事が多い。
エフェクト等の効果を手軽に求めるだけなら他のライブラリを。
prototype.jsを利用しているUIを強化するJavaptライブラリ。
script.aculo.us prptotype.js+script.aculo.usはメジャーな組み合わせ。RoRでも使用。
http://script.aculo.us/
JavaScriptフレームワークとしては後発ながら、軽く、簡単に記述できる特
jQuery／jQuery UI 徴で爆発的に広まっている。
http://jquery.com/ Google, Dell, BOA, MLB, NBC,CSB, mozilla.org…
jQueryをベースとしたライブラリも、豊富に存在する。
http://jqueryui.com/
考えられる機能は全部含んでいる？
Dojo フルスタックの高機能JavaScriptライブラリ。
http://www.dojotoolkit.org/ 様々な事ができる分、重い、という特徴もある。
米Yahoo!が提供する高機能なJavaScriptフレームワーク。
YUI サンプルなども数多くついていて、サポートが丁寧。
http://developer.yahoo.com/yui/ とても巨大なので、使用するライブラリは取捨選択が必要。

※他にもMochikit, Rico, ExtJs, Mootoolsなど、数多くのライブラリが存在している。

5

3. jQueryの紹介
特徴
JavaScriptフレームワークとしては後発。
軽量で高速。
jQueryオブジェクトやメソッドチェーンでの簡便な記述。
豊富なプラグインの追加で機能拡張が可能。
MicrosoftがjQueryをプラットフォームの一部として採用するなど、利用環境
の拡大が続いている。
日本語でもサポート記事やBlogなどが多数存在。

jQueryの検索が急増。
現在、最も普及している。

6

【3. ｊQueryの紹介】
jQueryを利用した際のJavaScriptのExample
【例1】DIVでquot;testClassquot;というクラス名のついた要素だけ、文字色を赤にする。
<script type=quot;text/javascriptquot;>
var divs=
document.getElementsByTagName(quot;DIVquot;);
for(var i=0;i<divs.length;i++){
if((
divs[i].getAttribute(quot;classNamequot;)||
divs[i].getAttribute(quot;classquot;)
)==quot;testClassquot;){ jQueryでは、対象を指定するのに、CSSのセレク
divs[i].style.color=quot;redquot;; タと同じ様なセレクタを利用できます。
ルールが、ほとんど同じなので、使い易く、便利で
}
す。以下は、セレクタの例です。
}
</script> $(“DIV”) ⇒全てのDIV要素
$(“DIV.testClass”) ⇒全てのDIV要素の中で、
こんなに簡単に書けてしまう！ testClassというclassが設定されたもの
$(“#example”) ⇒id名が、exampleの要素
$(“#example > ul”) ⇒id名が、exampleの
要素の子要素であるul
他にも多数のセレクタを利用することができます。
$(quot;DIV.testClassquot;).css(quot;colorquot;,quot;redquot;);
</script>

7

jQueryを利用した際のJavaScriptのExample
【例2】メソッドチェーンを使う時の例。
drawRed(quot;DIV.testClassquot;).animate({fontSize:quot;5emquot;},1000);//OK

function drawRed(selector){
$(selector).css(quot;colorquot;,quot;redquot;);
return $(selector); //jQueryオブジェクトを返す
}
これで動く。
【例3】プラグインの書き方の例。
<script src=quot;./jquery.jsquot; type=quot;text/javascriptquot;></script>

<div class=quot;testClassquot;>DIVでtestClassです</div>
<div class=quot;noTestClassquot;>DIVでnoTestClassです</div>
<p class=quot;testClassquot;>PでtestClassです</p>

jQuery.fn.drawRed = function() {
return this.css(quot;colorquot;,quot;redquot;);
};

$(quot;DIV.testClassquot;).drawRed();
これで、引数に渡さなくとも動く。
</script>
8

jQuery UIの紹介
jQuery UIでのタブの利用
iQuery UI ライブラリ説明
折りたたみ可能な領域をサポートするコンポーネント
Accordion
日付選択のためのコンポーネント
Datepicker
高機能なダイアログコンポーネント
Dialog
Draggables DOM要素をドラッグできるようにする
Droppables DraggableなDOM要素をドロップできるようにする
Resizables DOM要素の大きさをマウスで変更できるようにする
Selectables DOM要素をマウスで選択できるようにする
スライダーコンポーネント
Slider
マウス操作でDOM要素の順番を入れ替えられるようにする
Sortables
タブ機能を提供するコンポーネント
Tabs

$(function() {
$('#jqtab-example > ul').tabs({fxFade:true,fxSpeed:'fast'});
});
</script>

<div id=quot;jqtab-examplequot;>
<ul>
<li><a href=quot;#tab1quot;><span>JavaScript</span></a></li>
<li><a href=quot;#tab2quot;><span>解説</span></a></li>
<li><a href=quot;#tab3quot;><span>リンク</span></a></li>
</ul>
jQueryの統一された
メソッドチェーンの仕組みを利用して、
簡単にリッチな仕組みを実現可能。

9

jQueryプラグイン(Facebox)の紹介
Facebox(http://famspam.com/facebox)とは？
prototype.jsで提供されているLightboxのjQuery版ライブラリ。
ThickBox3というライブラリも有名。
画像が表示される。

リンクをクリック。

画像が表示される。

<script type=quot;text/javascriptquot; src=quot;http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.jsquot;></script>
<script type=quot;text/javascriptquot; src=quot;/sample/facebox.jsquot;></script>
$(document).ready(function($) {
$('a[rel*=facebox]').facebox();
});
</script>
<link type=“text/css” rel=“stylesheet” href=“/sample/facebox.css” />
・・・
<a href=quot;/images/blue.jpgquot; rel=quot;faceboxquot;>画像を見る</a>
<a href=quot;#infoquot; rel=quot;faceboxquot;>text</a>

10

その他のjQueryプラグインの紹介
プラグイン名紹介
■Flexgrid の表示例
チャートやグラフを描画するプラグイン。動的にチャートの中
Flot
の特定のデータを選択する事や表示の切り替えなども簡単。
[http://code.google.com/p/flot/]
数行のjavascriptのコードで、テーブル表示をリッチにして、ペ
Flexgrid
ージング/検索/ツールバー機能などを提供するプラグイン。セ
ルの高さや幅も自由に変更できるようになる。
[http://www.flexigrid.info/]
ｊTip ツールチップを表示するプラグイン
[http://www.codylindley.com/blogstuff/js/jtip/]

※上記のプラグイン以外にも非常に多くのプラグインが存在します。

■iTip の表示例
■Flot の表示例

11

4. YUI（Yahoo! User Interface Library）の紹介

特徴
基本的な機能の提供が多い。
しかし、中には、かなり高機能
なものもある。
JavaScriptだけでなく、CSSの
テンプレートファイルまで提供。
豊富なサンプルが魅力。
prototype.jsやjQueryと比較すると重い。
最新版（2.7.0/2009/02/20リリース）では、
グラフ機能の強化、CSSのオンザフライ変更(StyleSheet
Utility)、IE8への対応なども追加されている。

12

5. まとめ

1. 動的でリッチなWebを簡便に提供する為に、
JavaScriptの利用を検討する。

2. JavaScriptを使用する場合には、
フルスクラッチではなく、極力、
JavaScriptフレームワークの活用を意識する。

3. JavaScriptフレームワークは幾つか特徴があるので、
特徴を理解して、活用する。

13

技術トレンディセミナー JavaScriptフレームワーク活用

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (8)

技術トレンディセミナー JavaScriptフレームワーク活用