The Days of Web Standards jsライブラリで 実 装 する 効 率 的 なWeb 制 作
本 プレゼンの 資 料 は 以 下 のURLから 参 照 できます http://tinyurl.com/2vte59
プロフィール 西 畑 一 馬 (Nishihata Kazuma) 大 阪 生 まれ 大 阪 在 住 株 式 会 社 ネットテン プログラマー ポータルサイトの 制 作 とCMSパッケージの 開 発
プロフィール(2) 大 阪 市 デジタル 産 業 支 援 事 業 imedio http://www.imedio.or.jp/ CSSとMovableTypeの ハンズオントレーニングを 行 ってます 興 味 があるかたはぜひ
プロフィール(3) to RというBlogを 書 いてます http://blog.webcreativepark.net/
そろそろ 本 題 に
JavaScriptは 好 きですか?
空 前 絶 後 のJavaScriptブーム
jsライブラリで
Web 制 作 2.0を 体 験 してください
アジェンダ jsライブラリとは? ライセンス jsライブラリを 使 ってみる jsライブラリの 作 り 方
jsライブラリとは?
jsライブラリとは? JavaScriptで 作 成 されたフレームワーク JavaScriptの 汎 用 的 な 機 能 をまとめたもの つまり 複 雑 なJavaScriptを 簡 単 に 扱 う 為 の JavaScriptファイルです
多 機 能 なjsライブラリ prototype.js http://www.prototypejs.org jquery http://jquery.com/ Yahoo! UI Library http://developer.yahoo.com/yui/ Spry framework http://labs.adobe.com/technologies/spry/ etc
単 機 能 だけの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 etc
ライセンス
ライセンスとは? 免 許 認 可 など 一 定 の 権 利 の 使 用 や 制 限 の 解 除 を 特 定 の 者 に 認 容 するもの 一 定 の 条 件 下 で 著 作 権 にとらわれず 使 用 もしくは 改 変 などを 行 うことが 可 能 になり ます
主 なライセンス MIT license BSD license GPL CC license
MIT license 1. 自 由 に 使 用 複 製 改 造 ができる 2. 著 作 権 表 示 および 本 許 諾 表 示 をすべて の 複 製 または 重 要 な 部 分 に 記 載 3. 著 作 権 者 は ソフトウェアに 関 してなんら 責 任 を 負 わない
BSD license 1. 自 由 に 使 用 複 製 改 造 ができる 2. 無 保 証 であることを 明 記 する 3. 著 作 権 表 示 の 記 載 する 必 要 がある
GPL 1. 自 由 に 使 用 複 製 改 造 ができる 2. 複 製 改 造 した 物 の ソースコードへのア クセス が 可 能 でなくてはいけない 3. 改 造 複 製 した 物 のライセンスもGPLでな ければいけない
CC license Attribution 表 示 作 品 を 創 作 した 人 ( 著 作 者 )の 氏 名 作 品 のタイトルなど 作 品 に 関 する 情 報 を 表 示 する Non commercial 非 営 利 作 品 を 営 利 目 的 で 利 用 してはならない No Derivative Works 改 変 禁 止 作 品 を 改 変 してはならない Share Alike 継 承 改 変 することで 新 たに 生 み 出 された 作 品 は 当 初 の 作 品 のライセ ンス 条 件 を 継 承 し 同 一 の 組 み 合 わせでライセンスされなければ ならない
ライセンスは 守 りましょう ライセンスが 明 記 されているものはルール を 守 って 使 用 する ライセンスがわからない 場 合 は 製 作 者 に 問 い 合 わせる
jsライブラリを 使 ってみる
Lightbox 画 像 の 拡 大
Lightbox
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>
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>
curvycorners 角 丸
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>
Image Rollover Code ロールオーバー
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で 用 意
alphafilter.js IE6で 透 過 pngを 扱 う
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>
jsライブラリ 使 用 時 の 注 意 点
ライブラリ 依 存 型 ライブラリ
ライブラリ 依 存 型 ライブラリ Lightboxのようにprototype.jsがないと 動 か ないライブラリ ThickBoxのようにjQueryがないと 動 かない ライブラリ
ライブラリ 依 存 型 ライブラリ この2つのライブラリは 同 時 に 動 きません jqueryとprototype.jsは 同 時 に 使 うことができ ません 似 たようなライブラリを 探 してください
onload 記 法
onload 記 法 curvycorners や Image Rollover Codeは onloadイベントを 使 用 している window.onload = initrollovers; DreamweaverのMM_preloadImages 関 数 もonload イベントを 使 用 している <body onload="mm_preloadimages(' 画 像 ファイル')">
Onloadイベントは 最 後 に 宣 言 されたものしか 実 行 されない
onload 記 法 Image Rollover Codeの 場 合 window.onload=initrollovers; try{ window.addeventlistener('load',initrollovers,false); }catch(e){ window.attachevent('onload',initrollovers); }
イベントハンドラ 関 数 (1) 関 数 化 してしまえば function addlistener(element, eve, func, cap){ try{ element.addeventlistener(eve, func, cap); }catch(e){ element.attachevent('on' + eve, func); } } いろいろなライブラリで 使 いまわせます
イベントハンドラ 関 数 (2) Image Rollover Codeの 場 合 addlistener(window, 'load', initrollovers, false); DreamweaverのMM_preloadImages 関 数 の 場 合 addlistener(window, 'load', function(){mm_preloadimages(' 画 像 ファイル')}, false);
イベントハンドラ 関 数 (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);
jsライブラリの 作 り 方
jsライブラリを 作 る 準 備 機 能 を 考 える 発 展 させる 面 倒 くさい 作 業 はjsライブラリで 使 用 する 対 象 を 考 える 限 定 する JavaScriptがわからない 人 でも 使 用 できるライブラリを 実 装 方 法 を 考 える シンプルに よりシンプルな 形 で 実 装 する
DOMで HTMLを 書 き 換 えてください
DOMは 他 の 人 のセッションで
便 利 な 関 数
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; }
オブジェクトの 汚 染
オブジェクトの 汚 染 他 のライブラリと 共 存 できてこそのライブラ リ オブジェクト( 変 数 や 関 数 )を 作 成 するとグロ ーバルなオブジェクトに 汚 染 が 発 生 します 他 のライブラリとの 不 具 合 が 生 じることも
無 名 関 数 無 名 関 数 でJavaScriptを 包 むことにより グローバルなオブジェクトを 汚 さずに JavaScriptを 記 述 することができます (function () { 処 理 })(); new function () { 処 理 }
無 名 関 数 var a=0; var a = 10; alert(a) 10 var a=0; (function() { var a = 10; })(); alert(a) 0
jsライブラリで 効 率 的 な Web 制 作 を 行 ってください
Thank you!!