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

3,858 views

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,858
On SlideShare
0
From Embeds
0
Number of Embeds
106
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

  1. 1. 技術 Trendy Seminar JavaScriptフレームワーク活用 2009/03/10 エスエムジー株式会社 寺田大典 ※資料中に記載の会社名および製品名は、各社商標または登録商標です。 ※本資料の無断転載・複写を禁じます。 Copyright © SMG Co., Ltd. All rights reserved.
  2. 2. 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 Copyright © SMG Co., Ltd. All rights reserved.
  3. 3. 目次 1. JavaScriptフレームワークの発展の背景 2. 主要なJavaScriptフレームワーク 3. jQueryの紹介 4. YUI(Yahoo! User Interface Library)の紹介 5. まとめ 3 Copyright © SMG Co., Ltd. All rights reserved.
  4. 4. 1. JavaScriptフレームワークの発展の背景 1. Webブラウザで利用するスクリプト言語 クライアントサイドでの処理がメイン 2. AJAX台頭で復権 Google Map等での非同期通信から再注目 HTML+CSSを越える動的な挙動をクライアントで実現 3. JavaScriptフレームワークの発展 JavaScriptの利用が広がると共に基本処理の共通化 よりリッチな挙動を、より簡易に省力化で実現 – 高機能を実装済み、試験済みのライブラリを使おう – クロスブラウザ対応なども考慮 4 Copyright © SMG Co., Ltd. All rights reserved.
  5. 5. 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 Copyright © SMG Co., Ltd. All rights reserved.
  6. 6. 3. jQueryの紹介 特徴 JavaScriptフレームワークとしては後発。 軽量で高速。 jQueryオブジェクトやメソッドチェーンでの簡便な記述。 豊富なプラグインの追加で機能拡張が可能。 MicrosoftがjQueryをプラットフォームの一部として採用するなど、利用環境 の拡大が続いている。 日本語でもサポート記事やBlogなどが多数存在。 jQueryの検索が急増。 現在、最も普及している。 6 Copyright © SMG Co., Ltd. All rights reserved.
  7. 7. 【3. jQueryの紹介】 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 <script type=quot;text/javascriptquot;> 他にも多数のセレクタを利用することができます。 $(quot;DIV.testClassquot;).css(quot;colorquot;,quot;redquot;); </script> 7 Copyright © SMG Co., Ltd. All rights reserved.
  8. 8. 【3. jQueryの紹介】 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> <script type=quot;text/javascriptquot;> jQuery.fn.drawRed = function() { return this.css(quot;colorquot;,quot;redquot;); }; $(quot;DIV.testClassquot;).drawRed(); これで、引数に渡さなくとも動く。 </script> 8 Copyright © SMG Co., Ltd. All rights reserved.
  9. 9. 【3. jQueryの紹介】 jQuery UIの紹介 jQuery UIでのタブの利用 iQuery UI ライブラリ 説明 折りたたみ可能な領域をサポートするコンポーネント Accordion 日付選択のためのコンポーネント Datepicker 高機能なダイアログコンポーネント Dialog Draggables DOM要素をドラッグできるようにする Droppables DraggableなDOM要素をドロップできるようにする Resizables DOM要素の大きさをマウスで変更できるようにする Selectables DOM要素をマウスで選択できるようにする スライダーコンポーネント Slider マウス操作でDOM要素の順番を入れ替えられるようにする Sortables タブ機能を提供するコンポーネント Tabs <script type=quot;text/javascriptquot;> $(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 Copyright © SMG Co., Ltd. All rights reserved.
  10. 10. 【3. jQueryの紹介】 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> <script type=quot;text/javascriptquot;> $(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 Copyright © SMG Co., Ltd. All rights reserved.
  11. 11. 【3. jQueryの紹介】 その他のjQueryプラグインの紹介 プラグイン名 紹介 ■Flexgrid の表示例 チャートやグラフを描画するプラグイン。動的にチャートの中 Flot の特定のデータを選択する事や表示の切り替えなども簡単。 [http://code.google.com/p/flot/] 数行のjavascriptのコードで、テーブル表示をリッチにして、ペ Flexgrid ージング/検索/ツールバー機能などを提供するプラグイン。セ ルの高さや幅も自由に変更できるようになる。 [http://www.flexigrid.info/] jTip ツールチップを表示するプラグイン [http://www.codylindley.com/blogstuff/js/jtip/] ※上記のプラグイン以外にも非常に多くのプラグインが存在します。 ■iTip の表示例 ■Flot の表示例 11 Copyright © SMG Co., Ltd. All rights reserved.
  12. 12. 4. YUI(Yahoo! User Interface Library)の紹介 特徴 基本的な機能の提供が多い。 しかし、中には、かなり高機能 なものもある。 JavaScriptだけでなく、CSSの テンプレートファイルまで提供。 豊富なサンプルが魅力。 prototype.jsやjQueryと比較すると重い。 最新版(2.7.0/2009/02/20リリース)では、 グラフ機能の強化、CSSのオンザフライ変更(StyleSheet Utility)、IE8への対応なども追加されている。 12 Copyright © SMG Co., Ltd. All rights reserved.
  13. 13. 5. まとめ 1. 動的でリッチなWebを簡便に提供する為に、 JavaScriptの利用を検討する。 2. JavaScriptを使用する場合には、 フルスクラッチではなく、極力、 JavaScriptフレームワークの活用を意識する。 3. JavaScriptフレームワークは幾つか特徴があるので、 特徴を理解して、活用する。 13 Copyright © SMG Co., Ltd. All rights reserved.

×