jsライブラリで実装する
効率的なWeb制作
本プレゼンの資料は
以下のURLから参照できます
プロフィール
• 西畑 一馬 (Nishihata Kazuma)
• 大阪生まれ。大阪在住。
• 株式会社ネットテン プログラマー
プロフィール(2)
• 大阪市デジタル産業支援事業 imedio
http://www.imedio.or.jp/
• CSSとMovableTypeの
ハンズオントレーニングを行ってます。
• 興味があるかたはぜひ
プロフィール(3)
to‑RというBlogを書いてます。
Web制作2.0を
体験してください
アジェンダ
• jsライブラリとは？
• ライセンス
• jsライブラリを使ってみる
• jsライブラリの作り方
jsライブラリとは?
• 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/01233315.htmletc
ライセンスとは?
• 免許・認可など一定の権利の使用や制限
の解除を特定の者に認容するもの。
• 一定の条件下で著作権にとらわれず、使
用もしくは改変などを行うことが可能になり
ます。
主なライセンス
• MIT license
• BSD license
• GPL
MIT license
1. 自由に使用・複製・改造ができる。
2. 著作権表示および 本許諾表示をすべて
の複製、または、重要な部分に記載 。
3. 著作権者は、ソフトウェアに関してなんら
責任を負わない。
BSD license
1. 自由に使用・複製・改造ができる。
2. 「無保証」であることを明記する 。
GPL
1. 自由に使用・複製・改造ができる。
2. 複製・改造した物の、ソースコードへのア
クセス が可能でなくてはいけない。
3. 改造・複製した物のライセンスもGPLでな
ければいけない。
CC license
• Attribution表示
作品を創作した人（著作者）の氏名、作品のタイトルなど、作品に
関する情報を表示する。
• Noncommercial非営利
作品を営利目的で利用してはならない。
• No Derivative Works改変禁止
作品を改変してはならない。
• Share Alike継承
改変することで新たに生み出された作品は、当初の作品のライセ
ンス条件を継承し、同一の組み合わせでライセンスされなければ
ならない。
• ライセンスが明記されているものはルール
を守って使用する。
• ライセンスがわからない場合は、製作者に
問い合わせる。
Lightbox
Lightboxの使用方法
<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>
head要素
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<a href="images/image-1.jpg" rel="lightbox" title="my caption"><img></a>
Lightboxの使用方法(2)
<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>
head要素
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<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の使用方法
<script type="text/javascript" src="js/rounded_corners_lite.inc.js"></script>
head要素
<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> <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(); }
Image Rollover Code
Image Rollover Code
の使用方法
<script src="js/rollover.js" type="text/javascript"></script>
head要素
<img src="sample.jpg" alt="Some Image" class="imgover" />
img要素
sample_o.jpgで用意
alphafilter.js
alphafilter.jsの使用方法
<script src="js/alphafilter.js " type="text/javascript"></script>
head要素
<img src="sample.jpg" alt="Some Image" class="alphafilter " />
img要素
<p class="alphafilter">内容</p>
ライブラリ依存型ライブラリ
• Lightboxのようにprototype.jsがないと動か
ないライブラリ。
• ThickBoxのようにjQueryがないと動かない
ライブラリ。
ライブラリ依存型ライブラリ
•
この２つのライブラリは同時に動きません。
•
jQueryとprototype.jsは同時に使うことができ
ません。
onload記法
• curvyCorners
や
Image Rollover Codeは
onloadイベントを使用している。
window.onload = initRollovers;
<body onload="MM_preloadImages('画像ファイル')">
• DreamweaverのMM_preloadImages関数もonload
イベントを使用している。
Onloadイベントは
最後に宣言されたものしか
実行されない
onload記法
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)
addListener(window, 'load',
function(){MM_preloadImages('画
像ファイル')}
, false);
addListener(window, 'load',
initRollovers
, false);
• Image Rollover Codeの場合
イベントハンドラ関数(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();
jsライブラリを作る準備
• 機能を考える
• 使用する対象を考える
• 実装方法を考える
• →発展させる
• →限定する
• → シンプルに
面倒くさい作業はjsライブラリで
JavaScriptがわからない人でも使用できるライブラリを
よりシンプルな形で実装する。
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; }
