2012.03.27 | 

アーイェーオーイェー オレkaminaly!
どうも、重い腰を上げてやっとjsの波に乗ってみようと、
色々インストールしてみました。

Node.jsとCoffeeScriptとおまけでTower.jsをインストール&ヘローワルドー!!してみました。

インストールの仕方は色々なサイトで紹介しているので、
細かく説明はしませんが、
方法がいくつかあって、どの方法にしようか色々調べていたら、
jsの波に乗る前に、ネットサーフィンで体力消耗してしまったので、
色々調べた結果の自分なりの解釈を書こうと思います。
間違っている事もあると思うので、参考になさる方がもしいたら、
鵜呑みは禁物ですよ!

(続きを読む...)

2012.03.14 | 

こんばんはmuchoです。
JSONやらサーバ絡みで日付を取得すると
Wed Apr 12 15:30:17 GMT-0700 2006
↑こんな感じで文字列になってることが多いのですが、
これを一発でタイムスタンプに変換してくれる命令が
ActionScriptにはありました。
JavaScriptにもありました。
いつの間にこんな便利な関数が出来てたんでしょう?
ちょっと衝撃だったので忘れないようにメモ。



JSだと
thisday=new Date("Nov, 5 1997 00:00:00");
みたいな大技もあり、これは知っていたのですが。
timestamp=Date.parse("Nov, 5 1997 00:00:00");
これで1970年1月1日0時0分0秒(UTC)からの秒数(ミリ秒単位)を得ます。

ActionScriptだとこんな感じ
timestamp=Date.parse("Nov, 5 1997 00:00:00");

以下の形式に対応してるとのこと。
     MM/DD/YYYY HH:MM:SS TZD
     HH:MM:SS TZD Day Mon/DD/YYYY 
     Mon DD YYYY HH:MM:SS TZD
     Day Mon DD HH:MM:SS TZD YYYY
     Day DD Mon HH:MM:SS TZD YYYY
     Mon/DD/YYYY HH:MM:SS TZD
     YYYY/MM/DD HH:MM:SS TZD

さらに
年、月、曜日は、スラッシュ(/)またはスペースで区切ることができますが、
ダッシュ(-)で区切ることはできません。
月、曜日、年だけというように、これらの形式の一部分を含めることもできます。
だそうです。


区切り記号で分割したりしてたあの日々はいずこへ・・・

2012.02.28 | 

最近やたら長いページが多くなってしかもパララックス効果とかあったりして
どうせなら滑らかにスクロールさせたいなーと思う今日この頃、
今夜は雪らしいですよ。こんにちはmuchoです。

というわけで、マウスホイールでのスクロールやスクロールバーをドラッグした時に
滑らかにスクロールするプラグインです。
smoothScrollerDemo

最初、ユーザーからのスクロール変更情報をキャプチャできないものかと画策したのですが、
mousewheelのイベントならともかく、onscrollイベントだと画面のスクロールそのものにかかってしまい、
ユーザーがスクロールバーを操作して発生したイベントかどうか判別できず断念。
そこで、
0.position:fixedをサポートしてるブラウザかチェック
1.コンテンツ全体を新規divでくるんでposition:fixedをかけて、
2.さらに空のdivタグでコンテンツ全体の高さを保持。
3.スクロールイベントでtop位置の変更をsetIntervalで回す。

BODYタグに背景画像を入れたり、
position:fixedのオブジェクトが他にあると
挙動がおかしくなるかもしれません。
使っていくうちにブラッシュアップできればと思います。



// コンテンツ全体を一つのオブジェクトに包んでプラグインを当てる
$(document).ready(function () {
	$("#page").smoothScroller({fps:60,speed:0.1});
});



というわけでまだアルファ版ですがよろしければどうぞ。
jquery.smoothScroller.zip

2012.02.27 | 

はじめまして。きょんたろです。
今回はhtml5のcanvasをすぐ使うようにTempleteを作ってみました。
まだいろんな技能はないですけどどんどんupdateする予定です。
そして追加したらいいな~ものがあれば教えてくださったら追加しておきます。

1.cssはdevjamのtempleteを使っています。
2.utils.jsにはいろいろutilのjsがicludeされています。
3.canvasUtils.jsにはcanvasの関するjsがicludeされています。
4.canvasBase.jsは基本になるjsです。
CanvasBasic_ver1.zip





    
        
        
        
        index
        
        
        
        
        
        
        
        
         
        
        
        
        
        
    
    
       
    




 
/**
 * @author shiftBrain DevJam
 * canvas groung ver1 
 * 2012.02.23
 */

//--------------------------------------------------------------------------------
// window loaded
//--------------------------------------------------------------------------------
function canvasStart(canvasID)
{
   if(canvasSupport){
       canvasApp(canvasID);
   }
}

//--------------------------------------------------------------------------------
// canvas support ture ? false
//--------------------------------------------------------------------------------
function canvasSupport(){
    return Modernizr.canvas
}

function canvasApp(canvasID)
{
    // ---------------------------------------------------------------------------
    // Common Variables ----------------------------------------------------------

    var sw;     // window Width
    var sh;     // window height 

    var cvs;    // canvas
    var ctx;    // canvas context
    var resize  = false; // canvas resize function true / false
    var frame   = new FrameRateApp(10); //bin/common/js/utils/frameRateApp.js
    var timer   = new Timer(); //bin/common/js/utils/timerApp.js

    //Debugger.log(frame.getInteval());
    //Debugger.log(frame.getFRAME());

    cvs     = document.getElementById(canvasID);
    ctx     = cvs.getContext("2d");
    resize  = false;
    canavsResize();

    // ---------------------------------------------------------------------------
    // canvas resize -------------------------------------------------------------
    // ## HOW TO USE ##
    // canavsResize()       --> window Size Setting
    // canavsResize(10,10)  --> width=10 height=10 customer size setting
    // ---------------------------------------------------------------------------

    window.addEventListener("resize",canavsResize, false);
    function canavsResize(w,h){
        sw = WindowSize.width();  //bin/common/js/utils/getSize.js
        sh = WindowSize.height();       
        Debugger.log("resizeEvent="+sw+"x"+sh);
        if(!w || !h){
            if(cvs && resize){
                cvs.width  = sw;
                cvs.height = sh;
            }
        }else{
            if(cvs){
                cvs.width  = w;
                cvs.height = h;
            }
        }
        Debugger.log("canvasSize="+cvs.width+"x"+cvs.height);
    }

// ***************************************************************************
// Code main ***********************************************************
    // ここから 変数と関数は 気に入るように変更してもいいです。

    function setup(){

    }

    function main(){
        update();
        draw();
    }

    function update()
    {

    }

    function draw()
    {

    }

// ---------------------------------------------------------------------------
// rendering Setting ---------------------------------------------------------
    setup();
    frame.setFRAME(30);    
    timer.start(main,frame.getInteval());
//setTimeout(timer.stop,3000)
}


2011.11.22 | 

フルフラッシュのページから別URLに遷移して、
ブラウザの戻るボタンを押してFlashを再描画すると、
クリックイベントが取得できなくなる。という怪現象。
Firefoxで起こる現象のようです。
回避策はJSでした。


	window.onunload = function(){};

この1行で無事解決!