to-R   西畑一馬 js ライブラリで実装する効率的な Web 製作
本スライドの URL は 以下の URL から参照できます。 <ul><li>http://tinyurl.com/2k59fm   </li></ul>
簡単な自己紹介 <ul><li>西畑一馬  / to-R[ トゥーアール ] </li></ul><ul><li>フリーランスの Web クリエイターになりました。 </li></ul><ul><li>システム開発や Web サイト製作、コンサ...
簡単な自己紹介 (2) <ul><li>大阪市デジタル産業支援事業  imedio で SEO や CSS や MovableType 、 JavaScript のハンズオントレーニングを行ってます。 </li></ul><ul><li>htt...
簡単な自己紹介 (3) to-R[ トゥーアール ] という blog を書いてます。
JavaScript は好きですか ?
空前絶後の JavaScript ブーム
js ライブラリで Web 製作 2.0 を体験してください
アジェンダ <ul><li>js ライブラリとは? </li></ul><ul><li>ライセンスについて </li></ul><ul><li>js ライブラリを使ってみよう </li></ul><ul><li>js ライブラリ使用上の注意 <...
js ライブラリとは ?
js ライブラリとは ? <ul><li>複雑な JavaScript を簡単に扱う為のファイル </li></ul><ul><li>簡単にクロスブラウザ対応 </li></ul><ul><li>CSS の手の届かない挙動を補完 </li></...
多機能な js ライブラリ <ul><li>prototype.js http://www.prototypejs.org </li></ul><ul><li>jQuery http://jquery.com/ </li></ul><ul><l...
単機能な js ライブラリ <ul><li>Lightbox http://www.huddletogether.com/projects/lightbox2/ </li></ul><ul><li>curvyCorners http:// ww...
単機能な js ライブラリ 2 <ul><li>heightLine.js http://blog.webcreativepark.net/2007/07/26-010338.html </li></ul><ul><li>Fixed posit...
ライセンス
ライセンスとは ? <ul><li>免許・認可など一定の権利の使用や制限の解除を特定の者に認容するもの。  </li></ul><ul><li>一定の条件下で著作権にとらわれず、使用もしくは改変などを行うことが可能になります。 </li></ul>
主なライセンス <ul><li>MIT license </li></ul><ul><li>BSD license </li></ul><ul><li>GPL </li></ul><ul><li>CC license </li></ul>
MIT license <ul><li>自由に使用・複製・改造ができる。 </li></ul><ul><li>著作権表示および 本許諾表示をすべての複製、または、重要な部分に記載 。 </li></ul><ul><li>著作権者は、ソフトウェア...
BSD license <ul><li>自由に使用・複製・改造ができる。 </li></ul><ul><li>「無保証」であることを明記する 。 </li></ul><ul><li>著作権表示 の記載する必要がある。 </li></ul>
GPL <ul><li>自由に使用・複製・改造ができる。 </li></ul><ul><li>複製・改造した物の、ソースコードへのアクセス が可能でなくてはいけない。 </li></ul><ul><li>改造・複製した物のライセンスも GPL ...
CC license <ul><li>Attribution- 表示 作品を創作した人(著作者)の氏名、作品のタイトルなど、作品に関する情報を表示する。 </li></ul><ul><li>Non-commercial- 非営利 作品を営利目的...
js ライブラリを使ってみる
heightLine.js
heightLine.js <ul><li>ブロックレベル要素の高さをそろえる js ライブラリ </li></ul><ul><li>例えば </li></ul>商品のリストを並べたいときに便利
heightLine.js の使い方 <ul><li><script type=&quot;text/javascript&quot; src=&quot;./heightLine.js&quot;></script>  </li></ul>h...
Fixed positioning
Fixed positioning <ul><li>IE6 で position の fixed を有効にするライブラリ </li></ul><script type=&quot;text/javascript&quot; src=&quot;...
dynamiclayout.js
dynamiclayout.js <ul><li>window のサイズによってレイアウトを変更するライブラリ </li></ul>750px 以下の場合 750px ~ 950px の場合 950px 以上の場合
dynamiclayout.js の使い方 <script src=&quot;dynamiclayout.js&quot; type=&quot;text/javascript&quot;></script> head 要素 <link re...
js ライブラリ使用上の注意
ライブラリ依存型ライブラリ <ul><li>jQuery と prototype.js は同時に使うことができません。 </li></ul><ul><li>似たようなライブラリを探してください。 </li></ul>
onload 記法 window.onload =  initRollovers ; window.onload = function(){ hogehoge } <body onload=&quot;MM_preloadImages(' ho...
onload イベントは 最後に宣言されたものしか 実行されない
onload 記法 window.onload =  initRollovers ; try{ window.addEventListener('load', initRollovers ,false); }catch(e){ window.a...
onload 記法 window.onload = function(){ hogehoge } try{ window.addEventListener('load',  function(){  hogehoge },false); }ca...
onload 記法 try{ window.addEventListener('load',  function(){    MM_preloadImages('hogehoge'); },false); }catch(e){ window.a...
まとめ <ul><li>js ライブラリは Web 製作を助けてくれる便利なアイテム。 </li></ul><ul><li>ライセンスを守って正しくご利用を。 </li></ul><ul><li>js ライブラリの使用に JavaScript ...
js ライブラリで効率的な Web 制作を行ってください
Thank you!!
Upcoming SlideShare
Loading in …5
×

jsライブラリで実装する効率的なWeb制作

4,474 views
4,369 views

Published on

CSS Nite in Osaka vol7での公演資料になります

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

No Downloads
Views
Total views
4,474
On SlideShare
0
From Embeds
0
Number of Embeds
192
Actions
Shares
0
Downloads
24
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

jsライブラリで実装する効率的なWeb制作

  1. 1. to-R 西畑一馬 js ライブラリで実装する効率的な Web 製作
  2. 2. 本スライドの URL は 以下の URL から参照できます。 <ul><li>http://tinyurl.com/2k59fm </li></ul>
  3. 3. 簡単な自己紹介 <ul><li>西畑一馬 / to-R[ トゥーアール ] </li></ul><ul><li>フリーランスの Web クリエイターになりました。 </li></ul><ul><li>システム開発や Web サイト製作、コンサルティング、 Web クリエイター向けの講座などをやってます。 </li></ul>
  4. 4. 簡単な自己紹介 (2) <ul><li>大阪市デジタル産業支援事業 imedio で SEO や CSS や MovableType 、 JavaScript のハンズオントレーニングを行ってます。 </li></ul><ul><li>http:// www.imedio.or.jp / </li></ul>11 月 20 日にパソナッテックで Ajax のセミナーを行います。 『 Ajax で実現するリッチな WEB サイト』 http:// www.pasonatech.co.jp/event/index.jsp?d = on&no =424
  5. 5. 簡単な自己紹介 (3) to-R[ トゥーアール ] という blog を書いてます。
  6. 6. JavaScript は好きですか ?
  7. 7. 空前絶後の JavaScript ブーム
  8. 8. js ライブラリで Web 製作 2.0 を体験してください
  9. 9. アジェンダ <ul><li>js ライブラリとは? </li></ul><ul><li>ライセンスについて </li></ul><ul><li>js ライブラリを使ってみよう </li></ul><ul><li>js ライブラリ使用上の注意 </li></ul>
  10. 10. js ライブラリとは ?
  11. 11. js ライブラリとは ? <ul><li>複雑な JavaScript を簡単に扱う為のファイル </li></ul><ul><li>簡単にクロスブラウザ対応 </li></ul><ul><li>CSS の手の届かない挙動を補完 </li></ul><ul><li>よりリッチな Web サイトを提供 </li></ul><ul><li>Web 製作のめんどくさい作業を簡易化 </li></ul>
  12. 12. 多機能な js ライブラリ <ul><li>prototype.js http://www.prototypejs.org </li></ul><ul><li>jQuery http://jquery.com/ </li></ul><ul><li>Yahoo! UI Library http://developer.yahoo.com/yui/ </li></ul><ul><li>Adobe Spry framework for Ajax http://labs.adobe.com/technologies/spry/ </li></ul>
  13. 13. 単機能な js ライブラリ <ul><li>Lightbox http://www.huddletogether.com/projects/lightbox2/ </li></ul><ul><li>curvyCorners http:// www.curvycorners.net/downloads.php </li></ul><ul><li>Image Rollover Code http:// www.dnolan.com/code/js/rollover / </li></ul><ul><li>alphafilter.js http://blog.webcreativepark.net/2007/02/01-233315.html </li></ul>
  14. 14. 単機能な js ライブラリ 2 <ul><li>heightLine.js http://blog.webcreativepark.net/2007/07/26-010338.html </li></ul><ul><li>Fixed positioning http:// www.doxdesk.com/software/js/fixed.html </li></ul><ul><li>dynamiclayout.js http://particletree.com/features/dynamic-resolution-dependent-layouts/ </li></ul>
  15. 15. ライセンス
  16. 16. ライセンスとは ? <ul><li>免許・認可など一定の権利の使用や制限の解除を特定の者に認容するもの。 </li></ul><ul><li>一定の条件下で著作権にとらわれず、使用もしくは改変などを行うことが可能になります。 </li></ul>
  17. 17. 主なライセンス <ul><li>MIT license </li></ul><ul><li>BSD license </li></ul><ul><li>GPL </li></ul><ul><li>CC license </li></ul>
  18. 18. MIT license <ul><li>自由に使用・複製・改造ができる。 </li></ul><ul><li>著作権表示および 本許諾表示をすべての複製、または、重要な部分に記載 。 </li></ul><ul><li>著作権者は、ソフトウェアに関してなんら責任を負わない。 </li></ul>
  19. 19. BSD license <ul><li>自由に使用・複製・改造ができる。 </li></ul><ul><li>「無保証」であることを明記する 。 </li></ul><ul><li>著作権表示 の記載する必要がある。 </li></ul>
  20. 20. GPL <ul><li>自由に使用・複製・改造ができる。 </li></ul><ul><li>複製・改造した物の、ソースコードへのアクセス が可能でなくてはいけない。 </li></ul><ul><li>改造・複製した物のライセンスも GPL でなければいけない。 </li></ul>
  21. 21. CC license <ul><li>Attribution- 表示 作品を創作した人(著作者)の氏名、作品のタイトルなど、作品に関する情報を表示する。 </li></ul><ul><li>Non-commercial- 非営利 作品を営利目的で利用してはならない。 </li></ul><ul><li>No Derivative Works- 改変禁止 作品を改変してはならない。 </li></ul><ul><li>Share Alike- 継承 改変することで新たに生み出された作品は、当初の作品のライセンス条件を継承し、同一の組み合わせでライセンスされなければならない。 </li></ul>
  22. 22. js ライブラリを使ってみる
  23. 23. heightLine.js
  24. 24. heightLine.js <ul><li>ブロックレベル要素の高さをそろえる js ライブラリ </li></ul><ul><li>例えば </li></ul>商品のリストを並べたいときに便利
  25. 25. heightLine.js の使い方 <ul><li><script type=&quot;text/javascript&quot; src=&quot;./heightLine.js&quot;></script> </li></ul>head 要素 1.高さをそろえたい要素に『 heightLine 』という class 名を付ける。 2.高さをそろえたい要素に『 heightLine-○○ 』という class 名を付ける。 3.高さをそろえたい要素の親要素に『 heightLineParent 』というクラス名をつける 使い方
  26. 26. Fixed positioning
  27. 27. Fixed positioning <ul><li>IE6 で position の fixed を有効にするライブラリ </li></ul><script type=&quot;text/javascript&quot; src=&quot;fixed.js&quot;></script> head 要素 姉妹ライブラリ minmax.js IE6 以下で min-width,max-width, min-height , max-height のプロパティを利用可能にするライブラリ
  28. 28. dynamiclayout.js
  29. 29. dynamiclayout.js <ul><li>window のサイズによってレイアウトを変更するライブラリ </li></ul>750px 以下の場合 750px ~ 950px の場合 950px 以上の場合
  30. 30. dynamiclayout.js の使い方 <script src=&quot;dynamiclayout.js&quot; type=&quot;text/javascript&quot;></script> head 要素 <link rel=&quot;alternate stylesheet&quot; type=&quot;text/css&quot; href=&quot;thin.css&quot; title=&quot;thin&quot;/> <link rel=&quot;alternate stylesheet&quot; type=&quot;text/css&quot; href=&quot;wide.css&quot; title=&quot;wide&quot;/> <link rel=&quot;alternate stylesheet&quot; type=&quot;text/css&quot; href=&quot;wider.css&quot; title=&quot;wider&quot;/> レイアウトごとの CSS ファイルを読み込む
  31. 31. js ライブラリ使用上の注意
  32. 32. ライブラリ依存型ライブラリ <ul><li>jQuery と prototype.js は同時に使うことができません。 </li></ul><ul><li>似たようなライブラリを探してください。 </li></ul>
  33. 33. onload 記法 window.onload = initRollovers ; window.onload = function(){ hogehoge } <body onload=&quot;MM_preloadImages(' hogehoge ')&quot;> ライブラリ内で HTML 内で とか と書かれているものがあります。
  34. 34. onload イベントは 最後に宣言されたものしか 実行されない
  35. 35. onload 記法 window.onload = initRollovers ; try{ window.addEventListener('load', initRollovers ,false); }catch(e){ window.attachEvent('onload', initRollovers ); }
  36. 36. onload 記法 window.onload = function(){ hogehoge } try{ window.addEventListener('load', function(){ hogehoge },false); }catch(e){ window.attachEvent('onload', function(){ hogehoge } ); }
  37. 37. onload 記法 try{ window.addEventListener('load', function(){ MM_preloadImages('hogehoge'); },false); }catch(e){ window.attachEvent('onload', function(){ MM_preloadImages('hogehoge'); } ); } <body onload=&quot; MM_preloadImages(' hogehoge ') &quot;> body 要素から onload 属性を取り除き、 js ライブラリの最下部に以下の記述
  38. 38. まとめ <ul><li>js ライブラリは Web 製作を助けてくれる便利なアイテム。 </li></ul><ul><li>ライセンスを守って正しくご利用を。 </li></ul><ul><li>js ライブラリの使用に JavaScript の知識は要りません。 </li></ul><ul><li>複数ライブラリを使って動かなかった場合は onload 記法を疑ってみよう。 </li></ul>
  39. 39. js ライブラリで効率的な Web 制作を行ってください
  40. 40. Thank you!!

×