Suche senden
Hochladen
技術トレンディセミナー JavaScriptフレームワーク活用
•
3 gefällt mir
•
1,498 views
T
terada
Folgen
Technologie
Melden
Teilen
Melden
Teilen
1 von 13
Empfohlen
JavaScriptによるゲーム開発
JavaScriptによるゲーム開発
Hiroaki NAKADA
Sd Loader Seasar Con2009 White
Sd Loader Seasar Con2009 White
Akio Katayama
仕事で使うRuby
仕事で使うRuby
Kentaro Goto
もっと仕事で使うRuby
もっと仕事で使うRuby
Kentaro Goto
Ext Ncs 20081029
Ext Ncs 20081029
Yuki Naotori
Swapskills Print Css
Swapskills Print Css
SwapSkills
はてなブックマークのシステムについて
はてなブックマークのシステムについて
Naoya Ito
Perlで圧縮
Perlで圧縮
Naoya Ito
Empfohlen
JavaScriptによるゲーム開発
JavaScriptによるゲーム開発
Hiroaki NAKADA
Sd Loader Seasar Con2009 White
Sd Loader Seasar Con2009 White
Akio Katayama
仕事で使うRuby
仕事で使うRuby
Kentaro Goto
もっと仕事で使うRuby
もっと仕事で使うRuby
Kentaro Goto
Ext Ncs 20081029
Ext Ncs 20081029
Yuki Naotori
Swapskills Print Css
Swapskills Print Css
SwapSkills
はてなブックマークのシステムについて
はてなブックマークのシステムについて
Naoya Ito
Perlで圧縮
Perlで圧縮
Naoya Ito
インフラエンジニアになろう!
インフラエンジニアになろう!
Toshiaki Baba
Authoring Tools Comparision in Detail
Authoring Tools Comparision in Detail
Tim Lu
Web技術勉強会11回目
Web技術勉強会11回目
龍一 田中
XS Japan 2008 Ganeti Japanese
XS Japan 2008 Ganeti Japanese
The Linux Foundation
20世紀Ruby
20世紀Ruby
Kentaro Goto
XS Japan 2008 App Data Japanese
XS Japan 2008 App Data Japanese
The Linux Foundation
PFI会社案内
PFI会社案内
Preferred Networks
Cybozu Inc 10th anniversary event - developing section.
Cybozu Inc 10th anniversary event - developing section.
cydn.cybozu.co.jp
Andoroid入門 Open
Andoroid入門 Open
cat sin
Lp3
Lp3
TH Schee
Talk In Point Of Gc Once In While
Talk In Point Of Gc Once In While
Narihiro Nakamura
S2
S2
TH Schee
sc2009white_T2
sc2009white_T2
Masaaki Yonebayashi
Windows MobileとWeb Api
Windows MobileとWeb Api
Kenji Wada
本当は怖いObjectSpace.each_object
本当は怖いObjectSpace.each_object
Narihiro Nakamura
JUI Conference "Flashはもういらない!?" Adobe MAX Japan 2009
JUI Conference "Flashはもういらない!?" Adobe MAX Japan 2009
Yusuke Kawasaki
S8
S8
TH Schee
【13-D-3】 プロとしてのOracleアーキテクチャ入門 ~ 番外編 ~
【13-D-3】 プロとしてのOracleアーキテクチャ入門 ~ 番外編 ~
devsumi2009
114th
114th
kulibrarians
Towards Effective Browsing of Large Scale Social Annotations
Towards Effective Browsing of Large Scale Social Annotations
momota
第1回鹿児島node.jsの会資料_内村
第1回鹿児島node.jsの会資料_内村
Koichi Uchimura
jQuery 対応ライブラリと TypeScript
jQuery 対応ライブラリと TypeScript
インフラジスティックス・ジャパン株式会社
Weitere ähnliche Inhalte
Was ist angesagt?
インフラエンジニアになろう!
インフラエンジニアになろう!
Toshiaki Baba
Authoring Tools Comparision in Detail
Authoring Tools Comparision in Detail
Tim Lu
Web技術勉強会11回目
Web技術勉強会11回目
龍一 田中
XS Japan 2008 Ganeti Japanese
XS Japan 2008 Ganeti Japanese
The Linux Foundation
20世紀Ruby
20世紀Ruby
Kentaro Goto
XS Japan 2008 App Data Japanese
XS Japan 2008 App Data Japanese
The Linux Foundation
PFI会社案内
PFI会社案内
Preferred Networks
Cybozu Inc 10th anniversary event - developing section.
Cybozu Inc 10th anniversary event - developing section.
cydn.cybozu.co.jp
Andoroid入門 Open
Andoroid入門 Open
cat sin
Lp3
Lp3
TH Schee
Talk In Point Of Gc Once In While
Talk In Point Of Gc Once In While
Narihiro Nakamura
S2
S2
TH Schee
sc2009white_T2
sc2009white_T2
Masaaki Yonebayashi
Windows MobileとWeb Api
Windows MobileとWeb Api
Kenji Wada
本当は怖いObjectSpace.each_object
本当は怖いObjectSpace.each_object
Narihiro Nakamura
JUI Conference "Flashはもういらない!?" Adobe MAX Japan 2009
JUI Conference "Flashはもういらない!?" Adobe MAX Japan 2009
Yusuke Kawasaki
S8
S8
TH Schee
【13-D-3】 プロとしてのOracleアーキテクチャ入門 ~ 番外編 ~
【13-D-3】 プロとしてのOracleアーキテクチャ入門 ~ 番外編 ~
devsumi2009
114th
114th
kulibrarians
Towards Effective Browsing of Large Scale Social Annotations
Towards Effective Browsing of Large Scale Social Annotations
momota
Was ist angesagt?
(20)
インフラエンジニアになろう!
インフラエンジニアになろう!
Authoring Tools Comparision in Detail
Authoring Tools Comparision in Detail
Web技術勉強会11回目
Web技術勉強会11回目
XS Japan 2008 Ganeti Japanese
XS Japan 2008 Ganeti Japanese
20世紀Ruby
20世紀Ruby
XS Japan 2008 App Data Japanese
XS Japan 2008 App Data Japanese
PFI会社案内
PFI会社案内
Cybozu Inc 10th anniversary event - developing section.
Cybozu Inc 10th anniversary event - developing section.
Andoroid入門 Open
Andoroid入門 Open
Lp3
Lp3
Talk In Point Of Gc Once In While
Talk In Point Of Gc Once In While
S2
S2
sc2009white_T2
sc2009white_T2
Windows MobileとWeb Api
Windows MobileとWeb Api
本当は怖いObjectSpace.each_object
本当は怖いObjectSpace.each_object
JUI Conference "Flashはもういらない!?" Adobe MAX Japan 2009
JUI Conference "Flashはもういらない!?" Adobe MAX Japan 2009
S8
S8
【13-D-3】 プロとしてのOracleアーキテクチャ入門 ~ 番外編 ~
【13-D-3】 プロとしてのOracleアーキテクチャ入門 ~ 番外編 ~
114th
114th
Towards Effective Browsing of Large Scale Social Annotations
Towards Effective Browsing of Large Scale Social Annotations
Andere mochten auch
第1回鹿児島node.jsの会資料_内村
第1回鹿児島node.jsの会資料_内村
Koichi Uchimura
jQuery 対応ライブラリと TypeScript
jQuery 対応ライブラリと TypeScript
インフラジスティックス・ジャパン株式会社
JavaScript時代のJava #kansumiB7 #kansumi
JavaScript時代のJava #kansumiB7 #kansumi
Yusuke Yamamoto
再入門!RESTとSpringMVC
再入門!RESTとSpringMVC
terahide
Om
Om
Taku Fukushima
はじめよう TypeScript - 入門から実践まで - 素の JavaScript とはさようなら!
はじめよう TypeScript - 入門から実践まで - 素の JavaScript とはさようなら!
Jun-ichi Sakamoto
TypeScript 型定義ファイルのある開発 TypeScript勉強会 VSハッカソン倶楽部
TypeScript 型定義ファイルのある開発 TypeScript勉強会 VSハッカソン倶楽部
Masahiro Wakame
初心者 × AngularJS × TypeScript
初心者 × AngularJS × TypeScript
Yuta Matsumura
Andere mochten auch
(8)
第1回鹿児島node.jsの会資料_内村
第1回鹿児島node.jsの会資料_内村
jQuery 対応ライブラリと TypeScript
jQuery 対応ライブラリと TypeScript
JavaScript時代のJava #kansumiB7 #kansumi
JavaScript時代のJava #kansumiB7 #kansumi
再入門!RESTとSpringMVC
再入門!RESTとSpringMVC
Om
Om
はじめよう TypeScript - 入門から実践まで - 素の JavaScript とはさようなら!
はじめよう TypeScript - 入門から実践まで - 素の JavaScript とはさようなら!
TypeScript 型定義ファイルのある開発 TypeScript勉強会 VSハッカソン倶楽部
TypeScript 型定義ファイルのある開発 TypeScript勉強会 VSハッカソン倶楽部
初心者 × AngularJS × TypeScript
初心者 × AngularJS × TypeScript
技術トレンディセミナー JavaScriptフレームワーク活用
1.
技術 Trendy Seminar
JavaScriptフレームワーク活用 2009/03/10 エスエムジー株式会社 寺田大典 ※資料中に記載の会社名および製品名は、各社商標または登録商標です。 ※本資料の無断転載・複写を禁じます。 Copyright © SMG Co., Ltd. All rights reserved.
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.
目次 1.
JavaScriptフレームワークの発展の背景 2. 主要なJavaScriptフレームワーク 3. jQueryの紹介 4. YUI(Yahoo! User Interface Library)の紹介 5. まとめ 3 Copyright © SMG Co., Ltd. All rights reserved.
4.
1. JavaScriptフレームワークの発展の背景 1.
Webブラウザで利用するスクリプト言語 クライアントサイドでの処理がメイン 2. AJAX台頭で復権 Google Map等での非同期通信から再注目 HTML+CSSを越える動的な挙動をクライアントで実現 3. JavaScriptフレームワークの発展 JavaScriptの利用が広がると共に基本処理の共通化 よりリッチな挙動を、より簡易に省力化で実現 – 高機能を実装済み、試験済みのライブラリを使おう – クロスブラウザ対応なども考慮 4 Copyright © SMG Co., Ltd. All rights reserved.
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.
3. jQueryの紹介
特徴 JavaScriptフレームワークとしては後発。 軽量で高速。 jQueryオブジェクトやメソッドチェーンでの簡便な記述。 豊富なプラグインの追加で機能拡張が可能。 MicrosoftがjQueryをプラットフォームの一部として採用するなど、利用環境 の拡大が続いている。 日本語でもサポート記事やBlogなどが多数存在。 jQueryの検索が急増。 現在、最も普及している。 6 Copyright © SMG Co., Ltd. All rights reserved.
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.
【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.
【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.
【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.
【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.
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.
5. まとめ 1.
動的でリッチなWebを簡便に提供する為に、 JavaScriptの利用を検討する。 2. JavaScriptを使用する場合には、 フルスクラッチではなく、極力、 JavaScriptフレームワークの活用を意識する。 3. JavaScriptフレームワークは幾つか特徴があるので、 特徴を理解して、活用する。 13 Copyright © SMG Co., Ltd. All rights reserved.