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

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    2 Favorites

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

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

    + 西畑 一馬西畑 一馬, 3 years ago

    custom

    2683 views, 2 favs, 1 embeds more stats

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

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 2683
      • 2415 on SlideShare
      • 268 from embeds
    • Comments 0
    • Favorites 2
    • Downloads 17
    Most viewed embeds
    • 268 views on http://blog.webcreativepark.net

    more

    All embeds
    • 268 views on http://blog.webcreativepark.net

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories