CIR.jsはWeb&ハイブリッドアプリ開発用のライブラリです。
ほとんどの機能は使わない場合排除可能で、カスタマイズできます。
動作環境:モダンな環境なら大体OK.(ただしIEを除く)
- C[ namespaece ]
-
var sync = new C.Sync(); // 同期処理 var async = new C.Async(); // 非同期処理
CIR.jsのネームスペースです。
すべてのクラス、メソッドはC以下に存在します。
- C.$[ required: Tweener SSAnime ]
-
var $ = C.$; var $p = $('p');
jQueryライクなセレクターメソッドです。
戻り値は便宜上セレクターオブジェクトとします。
- C.animeframe[ extend: Base ]
-
var frame = C.animeframe;
requestAnimationFrameのラップクラスです。
このオブジェクトはC.AnimeFrameクラスを使用して設定されます。
- C.dom[ indispensable ]
-
var dom = C.dom;
HTMLエレメントに関するメソッドをまとめたオブジェクトです。
- C.e[ indispensable ][ extend: Base ]
-
var e = C.e;
エレメント用の各イベントを纏めたオブジェクトです。
SWITCHCLICK, SWITCHDOWN, SWITCHMOVE, SWITCHUPは
実行環境がタッチパネルかどうか判定し、最適な値に変更されます。
このオブジェクトはC.Eventクラスを使用して設定されます。
- C.ease
-
- C.lass[ indispensable ]
-
var SuperTest = C.lass.extend({ init: function() { // default: undefind console.log('super'); }, sample: 'Cool is Right.' }); var Test = SuperTest.extend({ init: function(config) { this._super(); console.log(this.sample); // 'Cool is Right.' } });
クラス作成用のメソッドです。
C.lass.extend()でクラスを作成します。
上記の場合、
var test = new Test();
でインスタンスを生成できます。
initは省略可能です。
メソッド内でthis._super()を呼び出した場合、オーバライドした親クラスのメソッドを呼び出します。
- C.namespace
-
var testspace1 = C.namespace('C.testspace1'); // testspace1 = C.testspace1 = {} var testspace2 = C.namespace('C.hogehoge.fugafuga'); // testspace2 = C.hogehoge.fugafuga C.testspace1.test1 = 1; var testspace3 = C.namespace('C.testspace1', function(){ // write code }); // C.testspace1.test1 == 1
名前空間の作成、設定を行うメソッドです。
第一引数は作成する名前空間をストリングで指定します。
第二引数を指定した場合、名前空間自体に使用します。
すでに名前空間に値が存在した場合、第二引数と差し替えたあと、元からあった値が持つプロパティを追加します。
- C.require[ required: Ajax ScriptLoad ]
-
var Base = C.require('C.Base'); // Base === C.Base var Test1 = C.require('C.Test1', 'src/js/Test1.js'); // Test1 === C.Test1 C.require('C.Test2', 'src/js/Test2.js', function(Test2) { // Test2 === C.Test2 });
必要なクラスやメソッド、オブジェクトなどのチェック、読み込みを行うメソッドです。
第1引数のみ指定した場合、window以下からチェックを行い存在していればその値を、していなければエラーを発生させます。
第2引数を指定した場合、ファイルの同期読み込みを行い値を返します。
第3引数に関数を指定した場合、ファイルは非同期に読み込まれ、関数の第一引数に値が渡されます。
- C.ssease
-
var ease = C.ssease;
CSSアニメーション用のイージング処理をまとめたオブジェクトです。
主な使い方はC.SSAnimeのeasingオプションに対して参照を渡すことになります。
- C.template
-
var str = C.template('before <%- test1 %> <%= test2 %> <% if(test3) { %><%= test3 %><% } %> after', { test1: 'Cool', test2: '&', test3: 'Right' });
軽量なテンプレートエンジンメソッドです。
第一引数に渡されたストリングを第二匹数のオブジェクトの値を使って書き換えます。
第二引数は省略可能で、その場合は第一引数をそのまま返します。
<%- any %>は値をそのまま、<%= any %>は値をエスケープします。<% jscode %>はifやforなど、jsのコードを記述できます。
- C.util[ indispensable ]
-
var util = C.util;
様々なクラスから呼び出されるユーティリティオブジェクトです。
- C.Ajax[ extend: Observer ]
-
var ajax = new C.Ajax({ url: '/news', manual: true, // default: false sync: false, // default: undefined oncomplete: function(data) { // write code. console.log(data); }, onerror: function(data) { // write code. console.log(data); } }); // newsの内容を取得 ajax.start(); // manualにtrueが指定された場合、明示的にstartしなければリクエストが発生しない var ajax = new C.Ajax({ url: '/archive', dataType: 'json', query: { date: 20120101 }, cache: true, oncomplete: function(data) { // write code. console.log(data); } }); // archive?date=20120101の内容をJSON形式、キャッシュ有効で取得
Ajaxでリクエストを行います。
typeオプションを省略した場合、自動的にGETでリクエストを行います。
dataTypeオプションに'json'を指定した場合、jsonメソッドの呼び出しを行います。
queryオプションにはajax処理に渡したい値をオブジェクト形式で指定できます。
cacheオプションはデフォルトでfalseになっており、常に最新の情報を取得します。
オプションでon~を指定した場合、イベントとして登録されます。
デフォルトで自動的に呼び出されるイベントはcomplete,error,start,stopとなります。
- C.AnimeFrame[ extend: Base ]
-
var frame = new C.AnimeFrame();
requestAnimationFrameのラップクラスです。
- C.Anvas[ extend: Base ]
-
var anvas = new C.Anvas({ canvas: canvasElement, width: 100, height: 100 });
canvasエレメントに対して、複数のimg・canvasエレメントをdrawImageするクラスです。
煩雑になりがちなcanvasの扱いを簡略化します。
ブラウザがCanvasに対応している場合のみ使用可能です。
使用できない場合、C.Anvas.supportがfalseになります。
- C.Async[ extend: Observer ]
-
var result = []; var async = new C.Async({ queue: [ function() { result.push(1); }, function(done) { setTimeout(function(){ result.push(2); done(); }, 100); }, new C.Async({ queue: [ function() { result.push(3); } ], oncomplete: function() { result.push(4); } }) ], onprogress: function() { // write code. }, oncomplete: function() { // result = [1, 3, 4, 2]; } }); async.start();
queueに設定された関数を非同期実行するクラスです。queueに入れた関数に引数が宣言されている場合、第一引数に渡された関数を実行すれば次タスクが開始します。
queueにSync、Asyncのインスタンスを入れた場合、インスタンスのqueueの処理が全て完了後、次のタスクが開始します。
Ajax、ImgLoad、PreRender、ScriptLoad、SSAnime、Tweener、WindowLoadでも同様の処理となります。
オプションでon~を指定した場合、イベントとして登録されます。
デフォルトで自動的に呼び出されるイベントはcomplete,progress,start,stop,pause,resume,reset,changeとなります。
- C.Audio
-
var audio = new C.Audio({ dir: '/sound/', // ディレクトリ name: 'tm2_door000', // 拡張子抜きのファイル名 controls: false, // default: false preload: 'auto', // default: 'auto' autoplay: true, // default: false loop: false // default: false });
Audio要素を作成するためのクラスです。
もっと機能が必要な場合はC.Soundをおつかいください。
mp3, wav, ogg, m4aに対応しています。
使用する際はこの4形式をご用意ください。
ブラウザがAudio要素に対応している場合のみ使用出来ます。
条件を満たしていない場合、C.Audio.supportがfalseになります。
- C.BackForwardCache[ extend: Base ]
-
var bfc = new C.BackForwardCache();
ブラウザのバック機能(history.back()など)が実行された場合、戻ったページでjsの状態が保存されている場合があります。
このBackForwardCacheは便利な反面、意図しない動作をする場合があり、この機能を無効化したい場合に使用するクラスです。
- C.Base[ indispensable ]
-
var base = new C.Base({});
ほぼ全てのクラスに継承されている基底クラスです。
このクラスで宣言されているメソッドは他のほぼ全てのクラスで使用出来ます。
- C.Calc[ extend: Base ]
-
var calc = new C.Calc({ fewdigit: 8 // default: 8 });
四則演算のメソッドを提供するクラスです。
浮動小数点の計算による丸め誤差を回避して計算します。
fewdigitオプションは小数点以下、何位まで計算するか決定します。
- C.Storage[ extend: Base ]
-
var store = new C.Storage();
一時的な情報を保存するためのクラスです。
ブラウザのリロードなどが行われた場合、初期化されます。
- C.DateFactory[ extend: Base ]
-
var dateFactory = new C.DateFactory();
Dateインスタンスや日付テキストなどを作成するクラスです。
- C.DeviceMotion[ Beta ][ extend: Base ]
-
var motion = new C.DeviceMotion({ callback: function(e) { // write code. } });
window.ondevicemotionを便利に使うためのクラスです。
端末がdevicemotionに対応していない場合、C.DeviceMotion.supportがfalseになります。
- C.DeviceOrientation[ Beta ][ extend: Base ]
-
var orient = new C.DeviceOrientation({ callback: function(e) { // write code. } });
window.ondeviceorientationを便利に使うためのクラスです。
端末がdeviceorientationに対応していない場合、C.DeviceOrientation.supportがfalseになります。
- C.DeviceShake[ Beta ][ extend: Base ][ required: DeviceMotion DeviceOrientation ]
-
var shake = new C.DeviceShake({ limit: 100, waittime: 500, direction: 'x', // 'x' || 'y' || 'z' callback: function(e) { // write code. } });
端末が振られたことに対してイベントを登録するクラスです。
limitの値分、directionの方向に加速度が変化した場合、callbackが実行されます。
一度callbackを実行した後、waittimeほどcallbackを実行をキャンセルし、その後再び実行可能になります。
端末がdeviceorientation、もしくはdevicemotionに対応していない場合、C.DeviceShake.supportがfalseになります。
- C.DragFlick[ extend: Base ]
-
var $sample = C.$('#sample'); var dragflick = new C.DragFlick({ el: $sample[0], direction: function(direction) { // default: undefined // write code. console.log('change:' direction.change); //boolean console.log('top:' direction.top); //boolean console.log('right:' direction.right); //boolean console.log('bottom:' direction.bottom); //boolean console.log('left:' direction.left); //boolean console.log('amount:' direction.amount); // {x: number, y: number} }, boundary: 100, // default: undefined start: function(e) { // default: undefined // write code. console.log(e); // {e: mouseevent, move: {x: number, y: number}} }, move: function(e) { // default: undefined // write code. console.log(e); // {e: mouseevent, move: {x: number, y: number}} }, end: function(e) { // default: undefined // write code. console.log(e); // {e: mouseevent, move: {x: number, y: number}} }, manual: false // default: false });
ドラッグ&フリック用の処理を提供するクラスです。
- C.Event[ indispensable ][ extend: Base ]
-
var e = new C.Event();
エレメント用の各イベントを纏めたクラスです。
SWITCHCLICK, SWITCHDOWN, SWITCHMOVE, SWITCHUPは
実行環境がタッチパネルかどうか判定し、最適な値に変更されます。
- C.ExternalInterface[ extend: HashQuery ][ required: ExternalInterface.Android ExternalInterface.IOS ]
-
window.C.EXTERNAL = {}; var external = new C.ExternalInterface({ android: window.AndroidMethod, // for Android externalObj: window.C.EXTERNAL // for Android });
ハイブリッドアプリ用にネイティブとのやり取りを行うためのメソッドを提供するクラスです。
Androidの場合、window直下にメソッドを含んだオブジェクトを作っておく必要があります。
androidオプションにネイティブから設定されたメソッドを持つオブジェクトを、
externalObjにウェブビューからメソッドを登録するためのオブジェクトを指定します。
iOSの場合、そのオブジェクトを作らなければ自動的にiOS用の処理になります。
- C.Facebook[ extend: Base ]
-
var facebook = new C.Facebook();
Facebook用のユーティリティクラスです。
- C.FontImg[ extend: Base ]
-
var font = new C.FontImg(); //element.className == 'font_X' var fontWhite = new C.FontImg({ type: 'white', // default: '' / element.className == 'font_white_X' tag: 'span' // default: 'span' });
CSSスプライト用のHTMLタグを生成するクラスです。
typeに指定された文字列が生成されるタグのclassの一部になります。
- C.FPS[ extend: Base ]
-
var fps = new C.FPS({ manual: false, // default: false criterion: 10, enterframe: function(fps) { // write code. console.log(fps); // {criterion: number, surver: number} } });
指定したcriterion(fps)ごとにenterframeを実行するクラスです。
- C.HashQuery[ extend: Base ]
-
var hashquery = new C.HashQuery();
location.hashの操作を行うメソッドを提供するクラスです。
- C.ImgLoad[ extend: Observer ]
-
var imgload = new C.ImgLoad({ manual: false, // default: false srcs: [ '/img/test1.png', '/img/test2.png', '/img/test3.png' ], onprogress: function(num) { // write code. }, oncomplete: function() { // write code. } });
画像をまとめてロードするクラスです。
オプションでon~を指定した場合、イベントとして登録されます。
デフォルトで自動的に呼び出されるイベントはcomplete,progress,startとなります。
- C.LimitText[ extend: Base ]
-
var limittext = new C.LimitText({ el: C.dom.$('#sample'), width: 100, height: 100 });
対象エレメントの代入できる限界のテキストを調べるメソッドを持つクラスです。
- C.LocalStorage[ extend: Base ][ required: WebStorage ]
-
var storage = new C.LocalStorage(); // namespace var storage_cir = new C.LocalStorage({ namespace: 'cir' });
localStorageの操作を行います。
オブジェクトを保存・取り出しを行う際、自動的に適切な形に変換されます。
namespaceオプションを指定した場合、localStorage中で適切な切り分けを行います。
- C.LowPassFilter[ extend: Calc ]
-
var lpfilter = new C.LowPassFilter({ before: 100, // default: 0 rate: 0.5 // default: 0.1 });
端末の傾きなど、誤差が含まれる値を滑らかにするクラスです。
直前の値と現在の値を特定の割合で計算することで値を丸め込みます。
beforeオプションには初期値を設定します。
rateは現在の数値の何割を使うかを指定します。1からrateを引いた値が直前の値に対して乗算される値になります。
- C.Mobile[ extend: Base ]
-
var mobile = new C.Mobile();
モバイル端末用のユーティリティクラスです。
- C.Modal[ Beta ][ extend: Scroll ]
-
var modal = new C.Modal({ html: '<div><p>TEST.</p><p class="close">close</p></div>', // default: undefined bgClose: true, // default: false closeSelector: '.close', // default: undefined manual: true // default: false }); C.$('.open').on(C.e.CLICK, function() { modal.open(); });
シンプルなモーダルを提供するクラスです。
htmlオプションで表示する内容を指定します。
bgCloseオプションを指定するとhtmlオプションで指定した内容以外をクリックした場合、モーダルを閉じます。
closeSelectorオプションはcssセレクターでhtmlオプションで指定した内容中の対応するエレメントをクリックした場合、モーダルを閉じます。
manualにtrueを指定した場合、インスタンス生成時にモーダルを表示しません。
モーダルのデザインはほぼ何も適用されていない為、CSSで調整する必要があります。
背景は.cir-modal-bgクラスが、コンテンツのラッパーには.cir-modal-contentが指定されています。
- C.Model[ extend: Observer ][ required: Storage ]
-
var model = new C.Model({ store: new C.SessionStorage(), // default: undefind defaults: { // default: undefind test1: 1, test2: 'test' }, validate: { // default: undefind test1: function(key, vars) { if (C.util.isNumber(vars)) { return true; } return false; }, test2: C.validate.isString }, events: { // default: undefind 'change': function(vars) { // write code. }, 'change:test1': function(vars) { // write code. }, 'remove': function() { // write code. }, 'remove:test2': function(vars) { // write code. }, 'reset': function() { // write code. }, 'fail': function(vars) { // write code for validate error. }, 'fail:test1': function(vars) { // write code for validate error. } } });
MVCのModelを担当するクラスです。
C.Viewと連携することで大規模なアプリを作成する際にも読みやすいコードを書くことが可能です。
storeオプションにはデータを保持するインスタンスを設定します。
省略した場合C.Storageが指定されます。設定できる値はC.LocalStorage、もしくはC.SessionStorageのインスタンスです。
defaultsオプションに指定された値は保持されるデータの初期値になります。
validateオプションは値が登録・変更された時、条件式で偽になる値を返した場合、failイベントが発生します。
onオプションは保持しているデータに変更があった場合、各メソッドが実行されます。
- C.Movie[ extend: Base ][ required: Video ]
-
var movie = new C.Movie({ dir: '/video/', // ディレクトリ名 name: 'testvideo', // 拡張子抜きのファイル名 controls: true, // default: false, autoplay: false, // default: false loop: false, // default: false el: C.$('#sample')[0], // default: document.body oncanplay: function(e) { // write code. }, onended: function(e) { // write code. } });
動画ファイルを再生させるためのクラスです。
実行環境がvideo要素のloopやautoplayに確実に対応している場合は、C.Videoで事足りますが、そうでない場合やcanplayイベントなどを簡単に紐付けたい場合、このクラスをおつかいください 。
webm, mp4, ogvに対応しています。
使用する際はこの3形式をご用意ください。
ブラウザがVideo要素に対応している場合のみ使用出来ます。
条件を満たしていない場合、C.Movie.supportがfalseになります。
- C.Observer[ extend: Base ]
-
var observer = new C.Observer();
オブザーバーパターンを提供するクラスです。
- C.Ollection[ Beta ][ extend: Model ][ required: Storage Observer ]
-
var collection = new C.Ollection({ store: new C.SessionStorage(), // default: undefind on: { // default: undefind 'change': function(vars) { // write code. }, 'remove': function() { // write code. }, 'reset': function() { // write code. }, 'fail': function(vars) { // write code for validate error. } } });
Modelインスタンスなどのデータを複数保持することを想定したクラスです。
Modelクラスを継承しているため、ほぼModelと同じ感覚で使用出来ます。
- C.Omposite[ extend: Base ]
-
var composite = new C.Omposite();
C.Observerのエイリアスです。
- C.Orientation[ extend: Base ]
-
var orient = new C.Orientation({ portrait: function() { // write code. }, landscape: function() { // write code. } });
orientationイベントの操作を行うクラスです。
- C.Parallax[ extend: Scroll ][ required: $ ]
-
var parallax = new C.Parallax({ switcher: function(y, beforeY) { if (y < 800) { // return event-name return 'moveHoge'; } var events = []; if (y > 400) { events.push('moveHoge', 'moveFuga'); } if (y > 700) { events.push('moveHogeFuga'); } return events; }, onmoveHoge: function(y, beforeY) { console.log('hogehoge'); }, onmoveFuga: function(y, beforeY) { console.log('fugafuga'); }, manual: false // default: undefined }); parallax.on('moveHogeFuga', function(y, beforeY) { console.log('hogefuga'); });
シンプルなパララックス演出用クラスです。
オプションでon~を指定した場合、イベントとして登録されます。
switcherオプションにはイベント名を返す関数を指定します。
- C.PC[ extend: Base ]
-
var pc = new C.PC();
モバイル端末以外を対象にしたユーティリティクラスです。
- C.PreRender[ extend: Observer ]
-
var render = new C.PreRender({ manual: false, // default: false els: [ element1, element2, element3 ], guesslimit: 10, // default: 30 looptime: 10, // default: 100 loopblur: 5, // default: 20 oncomplete: function() { // write code. } });
HTMLエレメントは初めて画面上に表示される際にかなりの負荷がかかります。
(※display: none; や opacity: 0;、もしくは画面外にpositionで設置するなど)
ゲームなどでは負荷が邪魔になる場合も有るため、これらの要素の上に不透明な背景を持つエレメントをpositionで設置し、PreRenderクラスで予め表示しておくことが有効です。
オプションでon~を指定した場合、イベントとして登録されます。
デフォルトで自動的に呼び出されるイベントはcomplete,startとなります。
- C.Rollover[ extend: Base ]
-
var rollover = new C.Rollover({ els: C.dom.$$('body'), // htmlエレメントを含んだ配列 toggleClass: 'hover', // default: '' over: function() { // default: undefined // write code. }, out: function() { // default: undefined // write code. }, manual: false // default: false });
対象エレメントに対してロールオーバ処理を設定します。
タッチデバイスの場合、タッチイベントによる処理に変更されます。
- C.Router[ extend: Base ]
-
var route = new C.Router({ target: location.hash, // default: '' hashchange: false, // default: undefined action: { '^#action_1$': function(actionName) { // write code. // actionName === '^#action_1$'; }, 'action_2': function(actionName) { // write code. // actionName === 'action_2'; } }, manual: false, // default: false noregex: false // default: false });
ルーティングを行うクラスです。
targetに対してactionに渡したオブジェクトのキー名で正規表現を行い、 当てはまった場合、設定した関数を実行します。
noregexオプションをtrueにした場合、正規表現せずにルーティングを行います。
hashchangeをtrueにした場合、window.hashchangeが発火するたびにlocation.hashの値でfireメソッドを実行します。
またhashchangeをtrueにし、かつtargetが指定されなかった場合、targetにlocation.hashを指定した場合と同様の処理を行います。
- C.ScriptLoad[ extend: Observer ]
-
var scriptload = new C.ScriptLoad({ manual: false, // default: false srcs: [ '/js/test1.js', '/js/test2.js', '/js/test3.js' ], onprogress: function(num) { // write code. }, oncomplete: function() { // write code. } });
scriptファイルを動的に読み込むクラスです。
オプションでon~を指定した場合、イベントとして登録されます。
デフォルトで自動的に呼び出されるイベントはcomplete,progress,startとなります。
- C.Scroll[ extend: Observer ]
-
var scroll = new C.Scroll();
スクロールの操作を行うクラスです。
- C.ServerMeta[ extend: Base ]
-
var server = new C.ServerMeta({ callback: function() { // write code. } });
サーバーから渡される情報を取得するクラスです。
javascriptのみでサーバーから情報を取得します。
初期化時にサーバ情報を取得するため、時間がかかります。
- C.SessionStorage[ extend: Base ][ required: WebStorage ]
-
var storage = new C.SessionStorage(); // namespace var storage_cir = new C.SessionStorage({ namespace: 'cir' });
sessionStorageの操作を行います。
オブジェクトを保存・取り出しを行う際、自動的に適切な形に変換されます。
namespaceオプションを指定した場合、sessionStorage中で適切な切り分けを行います。
- C.Sound[ extend: Base ][ required: Audio ]
-
var sound = new C.Sound({ dir: '/sound/', // ディレクトリ名 name: 'tm2_door000', // 拡張子抜きのファイル名 controls: false, // default: false autoplay: false, // default: false loop: false, // default: false el: C.$('#sample')[0], // default: document.body oncanplay: function(e) { // write code. }, onended: function(e) { // write code. } });
音声ファイルを再生させるためのクラスです。
実行環境がAudio要素のloopやautoplayに確実に対応している場合は、C.Audioで事足りますが、そうでない場合やcanplayイベントなどを簡単に紐付けたい場合、このクラスをおつかいください 。
mp3, wav, ogg, m4aに対応しています。
使用する際はこの4形式をご用意ください。
ブラウザがAudio要素に対応している場合のみ使用出来ます。
条件を満たしていない場合、C.Sound.supportがfalseになります。
- C.SSAnime[ extend: Observer ]
-
var anime = new C.SSAnime(C.$('#box')[0], { 'margin-left': 100, '-webkit-transform': 'rotate(180deg)' }, { duration: 1000, // default: 500 manual: false, // default: false ease: 'linear', // default: easeOutExpo oncomplete: function(e) { // write code. } });
CSS Animationを指定するためのクラスです。
webkitブラウザかanimationにベンダープリフィックス無しで対応している場合のみ使用出来ます。
条件を満たしていない場合、C.SSAnime.supportがfalseになります。
オプションでon~を指定した場合、イベントとして登録されます。
デフォルトで自動的に呼び出されるイベントはcomplete,start,stopとなります。
- C.Surrogate[ extend: Base ]
-
var surrogate = new C.Surrogate({ delay: 20, callback: function(vars) { // write code. console.log(vars); // Cool is Right. } }); surrogate.request('Cool is Right.');
連続実行される処理をまとめて実行するメソッドを提供するクラスです。
delay(msec)だけ処理待ちを行い、遅延実行します。
処理待ち中に新たに処理が呼び出された場合、以前の処理をキャンセルし、再び処理待ちを行います。
キーボード入力から自動でAjax処理を行い結果を表示する場合などに有効です。
- C.Sync[ extend: Observer ]
-
var result = []; var sync = new C.Sync({ queue: [ function() { result.push(1); }, function(done) { setTimeout(function(){ result.push(2); done(); }, 100); }, new C.Sync({ queue: [ function() { result.push(3); } ], oncomplete: function() { result.push(4); } }) ], onprogress: function() { // write code. }, oncomplete: function() { // result = [1, 2, 3, 4]; } }); sync.start();
queueに設定された関数を順次実行するクラスです。queueに入れた関数に引数が宣言されている場合、第一引数に渡された関数を実行すれば次タスクが開始します。
queueにSyncインスタンス、Asyncインスタンスを入れた場合、インスタンスのqueueの処理が全て完了後、次のタスクが開始します。
Ajax、ImgLoad、PreRender、ScriptLoad、SSAnime、Tweener、WindowLoadでも同様の処理となります。
オプションでon~を指定した場合、イベントとして登録されます。
デフォルトで自動的に呼び出されるイベントはcomplete,progress,start,stop,pause,resume,reset,changeとなります。
- C.Throttle[ extend: Base ]
-
var throttle = new C.Throttle({ waittime: 100, callback: function(vars) { // write code. console.log(vars); // Cool is Right. } }); throttle.request('Cool is Right.');
連続実行される処理を間引くメソッドを提供するクラスです。
一度処理が実行された場合、waittime(msec)だけ新たな処理を受け付けなくなります。
ウィンドウサイズの変更による処理などに有効です。
- C.Tweener[ extend: Observer ][ required: AnimeFrame ]
-
var tweener = new C.Tweener( element.style, { width: { from: 0, to: 100 }, height: { from: 0, to: 100, prefix: '', // default: '' suffix: 'px' // default: 'px' } '-webkit-transform': { from: 0, to: 180, prefix: 'rotate(', suffix: 'deg)' } }, { manual: false, // default: false duration: 1000, // default: 500 ease: C.ease.inOutBack, // default: undefind (easeOutExpo) oncomplete: function() { // write code. } } );
シンプルなアニメーション用クラスです。
easeオプションにC.easeの各メソッドを指定すれば、様々なイージング処理をさせることが可能です
オプションでon~を指定した場合、イベントとして登録されます。
デフォルトで自動的に呼び出されるイベントはcomplete,start,stopとなります。
- C.Twitter[ extend: Base ]
-
var twitter = new C.Twitter();
Twitter用のユーティリティクラスです。
- C.Validate[ Beta ][ extend: Base ]
-
validate = new C.Validate({ level: 'error' // default: 'warn' | 'off', 'log', 'warn', 'error' });
引数のvalidateを行うメソッドを持つクラスです。
levelオプションでエラーの表示方法を変更します。
'off'は通知しません。
'log'はconsole.log、'warn'はconsole.warn、'error'はErrorを発生させます。
主な使い方はC.Modelのvalidateオプションにメソッドの参照を渡すことになります。
- C.View[ extend: Base ][ required: $ ]
-
view = new C.View({ el: '#test', // C.$の引数 model: model, // メソッドで使うmodel events: { // elに登録するイベント '&': { // & == C.$(el) 'click': 'click' // elのclickイベントにclickメソッドを登録 }, '.test': { // #test .test 'click': 'clickLower' } }, init: function() { // 初期化時に呼ばれるメソッド this.render(); this.model.on('change:test', this.render); }, render: function() { this.el.find('.test').html('count: ' + this.model.get('test')); this.reattach(); // eventsの対象になるようなhtmlの動的変更をした場合は呼び出す }, click: function(e) { this.model.set('test', this.model.get('test') + 1); }, clickLower: function(e) { console.log('click lower.'); C.util.eventStop(e); // e.stopPropagation(); } });
MVCのViewとControllerを担当するクラスです。
C.Modelと連携することで大規模なアプリを作成する際にも読みやすいコードを書くことが可能です。
- C.Video
-
var video = new C.Video({ dir: '/video/', // ディレクトリ name: 'testvideo', // 拡張子抜きのファイル名 controls: false, // default: false preload: 'auto', // default: 'auto' autoplay: true, // default: false loop: false // default: false });
Video要素を作成するためのクラスです。
もっと機能が必要な場合はC.Movieをおつかいください。
webm, mp4, ogvに対応しています。
使用する際はこの3形式をご用意ください。
ブラウザがVideo要素に対応している場合のみ使用出来ます。
条件を満たしていない場合、C.Video.supportがfalseになります。
- C.WindowLoad[ extend: Observer ]
-
var winload = new C.WindowLod({ manual: false, // default: false oncomplete: function() { // write code. } });
画像を含むページの読み込みが完了したタイミングでcompleteイベントを実行するクラスです。
オプションでon~を指定した場合、イベントとして登録されます。
デフォルトで自動的に呼び出されるイベントはcomplete,startとなります。
- C.XML[ extend: Base ]
-
var xml = new C.XML({ data: xmlText });
XMLデータの操作を簡易にするメソッドを提供するクラスです。
- $
- dom
- e
- ease
- Class
- namespace
- require
- ssease
- template
- util
- Ajax
- AnimeFrame
- Anvas
- Async
- Audio
- BackForwardCache
- Base
- Calc
- DateFactory
- DeviceMotion
- DeviceOrientation
- DeviceShake
- DragFlick
- Event
- ExternalInterface
- FontImg
- FPS
- HashQuery
- ImgLoad
- LimitText
- LocalStorage
- LowPassFilter
- Modal
- Model
- Mobile
- Movie
- Observer
- Ollection
- Omposite
- Orientation
- Parallel
- Parallax
- PC
- PreRender
- Rollover
- Router
- ScriptLoad
- Scroll
- Serial
- ServerMeta
- SessionStorage
- Sound
- SSAnime
- Storage
- Surrogate
- Sync
- Throttle
- Tweener
- Validate
- View
- Video
- WindowLoad
- XML