本プレゼンの資料は以下のURLから参照できます

Size: px

Start display at page:

Download "本プレゼンの資料は以下のURLから参照できます http://tinyurl.com/2vte59"

みずきかがんじ
7 years ago
Views:

1 The Days of Web Standards jsライブラリで実装する効率的なWeb 制作

2 本プレゼンの資料は以下のURLから参照できます

3 プロフィール西畑一馬 (Nishihata Kazuma) 大阪生まれ大阪在住株式会社ネットテンプログラマーポータルサイトの制作とCMSパッケージの開発

4 プロフィール(2) 大阪市デジタル産業支援事業 imedio CSSとMovableTypeのハンズオントレーニングを行ってます興味があるかたはぜひ

5 プロフィール(3) to RというBlogを書いてます

6 そろそろ本題に

7 JavaScriptは好きですか?

8 空前絶後のJavaScriptブーム

9 jsライブラリで

10 Web 制作 2.0を体験してください

11 アジェンダ jsライブラリとは? ライセンス jsライブラリを使ってみる jsライブラリの作り方

12 jsライブラリとは?

13 jsライブラリとは? JavaScriptで作成されたフレームワーク JavaScriptの汎用的な機能をまとめたものつまり複雑なJavaScriptを簡単に扱う為の JavaScriptファイルです

14 多機能なjsライブラリ prototype.js jquery Yahoo! UI Library Spry framework etc

15 単機能だけのjsライブラリ Lightbox curvycorners Image Rollover Code alphafilter.js html etc

php Image Rollover Code http://www.dnolan.

16 ライセンス

17 ライセンスとは? 免許認可など一定の権利の使用や制限の解除を特定の者に認容するもの一定の条件下で著作権にとらわれず使用もしくは改変などを行うことが可能になります

18 主なライセンス MIT license BSD license GPL CC license

19 MIT license 1. 自由に使用複製改造ができる 2. 著作権表示および本許諾表示をすべての複製または重要な部分に記載 3. 著作権者はソフトウェアに関してなんら責任を負わない

20 BSD license 1. 自由に使用複製改造ができる 2. 無保証であることを明記する 3. 著作権表示の記載する必要がある

21 GPL 1. 自由に使用複製改造ができる 2. 複製改造した物のソースコードへのアクセスが可能でなくてはいけない 3. 改造複製した物のライセンスもGPLでなければいけない

22 CC license Attribution 表示作品を創作した人 ( 著作者 )の氏名作品のタイトルなど作品に関する情報を表示する Non commercial 非営利作品を営利目的で利用してはならない No Derivative Works 改変禁止作品を改変してはならない Share Alike 継承改変することで新たに生み出された作品は当初の作品のライセンス条件を継承し同一の組み合わせでライセンスされなければならない

23 ライセンスは守りましょうライセンスが明記されているものはルールを守って使用するライセンスがわからない場合は製作者に問い合わせる

24 jsライブラリを使ってみる

25 Lightbox 画像の拡大

26 Lightbox

27 Lightboxの使用方法 head 要素 <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="js/lightbox.js"></script> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> img 要素 <a href="images/image-1.jpg" rel="lightbox" title="my caption"><img></a>

28 Lightboxの使用方法 (2) head 要素 <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="js/lightbox.js"></script> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> img 要素 <a href="images/image-1.jpg" rel="lightbox[roadtrip]" title="my caption"><img></a> <a href="images/image-1.jpg" rel="lightbox[roadtrip]" title="my caption"><img></a> <a href="images/image-1.jpg" rel="lightbox[roadtrip]" title="my caption"><img></a>

29 curvycorners 角丸

30 curvycornersの使用方法 head 要素 <script type="text/javascript" src="js/rounded_corners_lite.inc.js"></script> <script type="text/javascript" > window.onload = function(){ settings = { tl: { radius: 20 }, tr: { radius: 20 }, bl: { radius: 20 }, br: { radius: 20 }, antialias: true, autopad: true, validtags: ["p"] } var myboxobject = new curvycorners(settings, "mybox"); myboxobject.applycornerstoall(); } </script>

31 Image Rollover Code ロールオーバー

32 Image Rollover Codeの使用方法 head 要素 <script src="js/rollover.js" type="text/javascript"></script> img 要素 <img src="sample.jpg" alt="some Image" class="imgover" /> ロールオーバー用の画像 sample_o.jpgで用意

33 alphafilter.js IE6で透過 pngを扱う

34 alphafilter.jsの使用方法 head 要素 <script src="js/alphafilter.js " type="text/javascript"></script> img 要素 <img src="sample.jpg" alt="some Image" class="alphafilter " /> ブロックレベル要素 <p class="alphafilter"> 内容 </p>

35 jsライブラリ使用時の注意点

36 ライブラリ依存型ライブラリ

37 ライブラリ依存型ライブラリ Lightboxのようにprototype.jsがないと動かないライブラリ ThickBoxのようにjQueryがないと動かないライブラリ

38 ライブラリ依存型ライブラリこの2つのライブラリは同時に動きません jqueryとprototype.jsは同時に使うことができません似たようなライブラリを探してください

39 onload 記法

40 onload 記法 curvycorners や Image Rollover Codeは onloadイベントを使用している window.onload = initrollovers; DreamweaverのMM_preloadImages 関数もonload イベントを使用している <body onload="mm_preloadimages(' 画像ファイル')">

41 Onloadイベントは最後に宣言されたものしか実行されない

42 onload 記法 Image Rollover Codeの場合 window.onload=initrollovers; try{ window.addeventlistener('load',initrollovers,false); }catch(e){ window.attachevent('onload',initrollovers); }

43 イベントハンドラ関数 (1) 関数化してしまえば function addlistener(element, eve, func, cap){ try{ element.addeventlistener(eve, func, cap); }catch(e){ element.attachevent('on' + eve, func); } } いろいろなライブラリで使いまわせます

44 イベントハンドラ関数 (2) Image Rollover Codeの場合 addlistener(window, 'load', initrollovers, false); DreamweaverのMM_preloadImages 関数の場合 addlistener(window, 'load', function(){mm_preloadimages(' 画像ファイル')}, false);

45 イベントハンドラ関数 (3) curvycornersの場合 addlistener(window, 'load', function(){ settings = { tl: { radius: 20 }, tr: { radius: 20 }, bl: { radius: 20 }, br: { radius: 20 }, antialias: true, autopad: true, validtags: ["p"] } var myboxobject = new curvycorners(settings, "mybox"); myboxobject.applycornerstoall(); }, false);

46 jsライブラリの作り方

47 jsライブラリを作る準備機能を考える発展させる面倒くさい作業はjsライブラリで使用する対象を考える限定する JavaScriptがわからない人でも使用できるライブラリを実装方法を考えるシンプルによりシンプルな形で実装する

48 DOMで HTMLを書き換えてください

49 DOMは他の人のセッションで

50 便利な関数

51 getelementsbyclassname() document.getelementsbyclassname = function (classname) { var i, j, eltclass; var objall = document.getelementsbytagname? document.getelementsbytagname("*") : document.all; var objcn = new Array(); for (i = 0; i < objall.length; i++) { eltclass = objall[i].classname.split(/ s+/); for (j = 0; j < eltclass.length; j++) { if (eltclass[j] == classname) { objcn.push(objall[i]); break; } } } return objcn; }

52 オブジェクトの汚染

53 オブジェクトの汚染他のライブラリと共存できてこそのライブラリオブジェクト( 変数や関数 )を作成するとグローバルなオブジェクトに汚染が発生します他のライブラリとの不具合が生じることも

54 無名関数無名関数でJavaScriptを包むことによりグローバルなオブジェクトを汚さずに JavaScriptを記述することができます (function () { 処理 })(); new function () { 処理 }

55 無名関数 var a=0; var a = 10; alert(a) 10 var a=0; (function() { var a = 10; })(); alert(a) 0

56 jsライブラリで効率的な Web 制作を行ってください

57 Thank you!!

インターネットマガジン1997年4月号―INTERNET magazine No.27

インターネットマガジン1997年4月号―INTERNET magazine No.27 3.0 4.0 A N S W E R1 A N S W E R2 308 INTERNET magazine 1997/4 1 jhttp://www.tucows.com/ A { text-ecoration: none; } INTERNET magazine

本 プレゼンの 資 料 は 以 下 のURLから 参 照 できます

本プレゼンの資料は以下のURLから参照できます