JavaScriptメモ

<< 2012年05月 >>
日	月	火	水	木	金	土
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

2012年05月22日

Safariかどうか判別する

Google ChromeとSafariで日本語のlocation.hashの違い(参考:ブラウザごとのlocation.hashの挙動のまとめ - ?D of K)から条件分岐して対応しなくてはいけなくなったので簡単なメモ。

$.browser.safariだと$.browser.webkitと同じ意味でGoogleChromeも検出してしまいます。

つぎのようにUserAgentにSafariをふくんでChromeを含まない場合のみに処理を行うとよい。

if( navigator.userAgent.indexOf("Safari") > 0 &&
	navigator.userAgent.indexOf("Chrome") < 0 ){
	location.hash = "#"+encodeURIComponent(”ほげ”)
}else{
	location.hash = "#"+”ほげ”
}

タグ：safari Google Chrome hash

【テクニックの最新記事】

posted by ねこまんま at 16:42 | Comment(0) | TrackBack(0) | テクニック |

2012年05月06日

HTML5のcanvasで円グラフを描画

HTML5のcanvasで円グラフを描画を描画する方法

window.onload = function(){
    var imgcanvas = document.getElementById("imgcanvas");
    if (imgcanvas.getContext){
        var ctx = imgcanvas.getContext("2d");
        var xPos   = imgcanvas.offsetWidth  / 2;
        var yPos   = imgcanvas.offsetHeight / 2;
        var radius = 80;
        var sAngle = 0;
        var eAngle = 0;
        sAngle = ( 0 - 90) * Math.PI / 180;
        eAngle = (120 - 90) * Math.PI / 180;
        ctx.beginPath();
        ctx.moveTo(xPos , yPos);
        ctx.arc(xPos, yPos, radius, sAngle, eAngle, false);
        ctx.closePath();
        ctx.fillStyle   = "rgba(255,0,0,.5)";
        ctx.fill();
    }
};

タグ：HTML5 Canvas

posted by ねこまんま at 17:42 | Comment(0) | TrackBack(0) | HTML5 |

2012年04月18日

jQuery を利用して1行の高さ(line-heigt)を取得する

jQueryでline-heigtで1行の高さを取得しようとした所、ブラウザにより返り値がちがったので対応しました。

if($.browser.msie && $.browser.version===9.0){
	var lineHeight = $(this).css("line-height")*parseInt($(this).css("font-size"))
}else if($.browser.msie ){
	var getStyle = $(this)[0].currentStyle || document.defaultView.getComputedStyle($(this)[0], '');
	var lineHeight = getStyle.lineHeight*parseInt($(this).css("font-size"))
}else{
	var lineHeight = parseInt($(this).css("line-height"));
}
alert(lineHeight)

こんな感じでした。

タグ：jquery line-height

posted by ねこまんま at 15:58 | Comment(0) | TrackBack(0) | jQuery |

2012年04月13日

条件付きコメントでIE対応を簡単にする

コピペで使えるシリーズ

<!DOCTYPE html>
<!--[if lt IE 7]>  <html dir="ltr" lang="ja" class="no-js ie ie6 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 7]>     <html dir="ltr" lang="ja" class="no-js ie ie7 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 8]>     <html dir="ltr" lang="ja" class="no-js ie ie8 lte9 lte8"> <![endif]-->
<!--[if IE 9]>     <html dir="ltr" lang="ja" class="no-js ie ie9 lte9"> <![endif]-->
<!--[if gt IE 9]>  <html dir="ltr" lang="ja" class="no-js">  <![endif]-->
<!--[if !IE]><!--> <html>             <!--<![endif]-->
<head>

こうやっておくとIE対応が楽になる

さらにModernizrとかも合わせて使うといいかも

タグ：HTML5 IE 条件付きコメント

posted by ねこまんま at 23:48 | Comment(0) | TrackBack(0) | HTML5 |

2012年04月05日

iScrollでページ内リンク

iPhoneやAndroidで固定配置を実装するJavaScriptライブラリ「iScroll」。

myScroll = new iScroll('wrapper');
$("#nameNav a").click(function(){
	myScroll.scrollToElement($(this).attr("href"), 1);
	return false;
});

iScrollでページ内リンクを実装するには上記のようにscrollToElementメソッドを利用します。

タグ：iScroll android

posted by ねこまんま at 14:50 | Comment(0) | TrackBack(0) | iPhone |

2012年04月04日

Photoshopでテキスト情報だけを抜き出す

MacのFinder上で「Command」+「i」を押すとテキスト情報が取り出される。

タグ：Photoshop

posted by ねこまんま at 11:36 | Comment(0) | TrackBack(0) | Tool |

2012年04月03日

はじめてのCoffeeScript

SassやCompassだけでなくCoffeeScriptもたしなんどく。

まずはCodeKitをダウンロードしてインストールする。多分これ最強のプロジェクト管理ツールな気がする。

プロジェクトを追加してJavaScriptファイルを指定すると◯◯.coffeeというファイルを◯◯.jsというファイルに変換してくれる。

hello = ->
    console.log("Hello World!")
hello()

と書くと

(function() {
  var hello;
  hello = function() {
    return console.log("Hello World!");
  };
  hello();
}).call(this);

hello = (x) -> x*x

と書くと

(function() {
  var hello;

  hello = function(x) {
    return x * x;
  };

}).call(this);

と変換される。関数は->と書くことが可能。

via:今日から始めるCoffeeScript

タグ：CoffeeScript

posted by ねこまんま at 22:33 | Comment(0) | TrackBack(0) | Tool |

2012年04月02日

Compass入門

CompassはSassを拡張するメタ言語、CSS3などに対応した様々なMixinsが用意されていてかなり便利。

@import "compass";
.simple   { @include border-radius(4px); }

と書くと

.simple {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  -khtml-border-radius: 4px;
  border-radius: 4px;
}

って表示されたりする。

タグ：compass SASS

posted by ねこまんま at 17:10 | Comment(0) | TrackBack(0) | CSS |

はじめてのSass入門

SassってCSSを生成するメタ言語。つまりSassで書いたコードはコンパイルするとCSSにです。

Sassのインストール

Mac OS X 1.7 Lionを前提に解説を進めていきますね。

CUIで作業しても良いのですが今回はScout というGUIベースのフリーソフトを利用します。

via Compass / Sass の導入が簡単にできる Scout を試してみた｜linker journal｜linker

インストールできたらプロジェクトにSassを利用したディレクトリを追加してその中にstyle.scssのように拡張子scssのファイルを作成します。

では早速Sassを書いていきましょう。

まずはネスト

body{
	margin:0;
	h1{
		font-size:12px;
	}
}

といった内容をscssファイルに記述すると書きだされるcssファイルの内容は次の様になります。

body{
	margin:0;
}
body h1{
	font-size:12px;
}

このようにセレクタをネストして書いていくことでセレクタを補完してくれます。

親要素の参照

ネスト中に&を利用すると親要素を参照できます。

a {
	color: #ce4dd6;
	&:hover { color: #ffb3ff; }
	&:visited { color: #c458cb; }
}

このように書くと

a {
	color: #ce4dd6;
}
a:hover {
	color: #ffb3ff;
}
a:visited {
	color: #c458cb;
}

つぎのように変換されます。

変数

$で変数が定義できます。

$main-color: #ce4dd6;
#navbar {
	border-bottom: {
		color: $main-color;
	}
	a {
		color: $main-color;
	}
}

これは以下のように変更されます。

#navbar {
  border-bottom-color: #ce4dd6;
}
#navbar a {
  color: #ce4dd6;
}

使いまわす値が多い場合に便利ですね。

演算

算術演算も可能です

#conatent{
	width:500px+200px
}

と書くと

#conatent {
  width: 700px;
}

に変換されたり

$main-width :500px;
$side-width :200px;
#contain {
	width:$main-width+200px
}

と書いたら

#contain {
  width: 700px;
}

と変換されたりします。

Interpolation

#を利用するとセレクタやプロパティでも変数が利用できます。

$side: top;
.rounded-#{$side} {
  border-#{$side}-radius: 10px;
  -moz-border-radius-#{$side}: 10px;
  -webkit-border-#{$side}-radius: 10px;
}

と書いたら

.rounded-top {
  border-top-radius: 10px;
  -moz-border-radius-top: 10px;
  -webkit-border-top-radius: 10px;
}

と変換されます。

ミックスイン - Mixins

よく利用する記述は記述する@でMixinsとして定義でき後から使い回しができます。

@mixin clearfix{
	content:"";
	display:block;
	clear:both;
}
#main:after{
	@include clearfix;
}
#comment:after{
	@include clearfix;
}

これが次のように変換されます。

#main:after {
  content: "";
  display: block;
  clear: both;
}
#comment:after {
  content: "";
  display: block;
  clear: both;
}

ミックスインは引数をとることができます。

@mixin rounded($side, $radius: 10px) {
  border-#{$side}-radius: $radius;
  -moz-border-radius-#{$side}: $radius;
  -webkit-border-#{$side}-radius: $radius;
}
#navbar li { @include rounded(top); }
#footer { @include rounded(top, 5px); }
#sidebar { @include rounded(left, 8px); }

こう書くと

#navbar li {
  border-top-radius: 10px;
  -moz-border-radius-top: 10px;
  -webkit-border-top-radius: 10px;
}
#footer {
  border-top-radius: 5px;
  -moz-border-radius-top: 5px;
  -webkit-border-top-radius: 5px;
}
#sidebar {
  border-left-radius: 8px;
  -moz-border-radius-left: 8px;
  -webkit-border-left-radius: 8px;
}

次のように変換されます。

タグ：SASS

posted by ねこまんま at 13:36 | Comment(0) | TrackBack(0) | CSS |

2012年03月28日

Macで置き換えではなく上書きコピーを行う方法

Macではコピーアンドペーストを行うとディレクトリが新しいディレクトリに置き換わります。つまりディレクトリ内にコピー元と別のファイルがある場合消えてしまいます。Mac OS X Lionからはoption keyを押しながらドラッグアンドドロップを行うことで上書きをすることができます。ただ、Total Finderなどのアプリを入れているとMac OS X Lionでこの方法が利用できません。

そこでターミナルから置き換えではなく上書きコピーを行う方法

cp -rf ~/Sites/hoge/ ~/Dropbox/hoge/

cpコマンドにrfオプションをつけて実行する。めんどくさいけどこんな感じ。

タグ：Mac

posted by ねこまんま at 12:22 | Comment(0) | TrackBack(0) | mac |

2012年03月18日

YOU TUBE APIで連続再生を実装する

YOU TUBE APIで連続再生を実装する基本的な方法はswfの読み込み時にloop=1を引数として設定する方法。

var params = { allowScriptAccess: "always" };
var atts = { id: "myplayer" ,'wmode':'opaque'};
swfobject.embedSWF("http://www.youtube.com/v/xxxx?enablejsapi=1&playerapiid=ytplayer&autoplay=1&loop=1","player", "425", "356", "8", null, null, params, atts);

HTMLを再描画してループを実装することも可能。

var params = { allowScriptAccess: "always" };
var atts = { id: "myplayer" ,'wmode':'opaque'};
swfobject.embedSWF("http://www.youtube.com/v/xxx?enablejsapi=1&playerapiid=ytplayer&autoplay=1","player", "425", "356", "8", null, null, params, atts);
var ytplayer;
function onYouTubePlayerReady(playerId) {
	ytplayer = document.getElementById("myplayer");
	ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
}
function onytplayerStateChange(state){
	if(state==0){
		$("#playerWrap").html('
');
		swfobject.embedSWF("http://www.youtube.com/v/xxx?enablejsapi=1&playerapiid=ytplayer&autoplay=1","player", "425", "356", "8", null, null, params, atts);
	}
}

タグ：You Tube


posted by ねこまんま at 20:43



| Comment(0)


| TrackBack(0)

| API
| 
|







2012年03月17日

複数のオブジェクトをアニメーション

複数のオブジェクトをアニメーションさせるには各種情報を配列に格納しておき処理を行う。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var balls = [];
var tempAngle,tempRadian,tempSpeed;
function rdm(max,min){
    return Math.floor(Math.random()*(max-min))+min;
}
for(var i=0;i<10;i++){
    tempAngle = rdm(0,360);
    tempRadian = tempAngle*Math.PI/180;
    temSpeed = rdm(1,50);
    balls.push({
        speed : temSpeed, 
        angle : tempAngle,
        radian : tempRadian,
        x:rdm(1,500),
        y:rdm(1,500),
        moveX:Math.cos(tempRadian)*temSpeed,
        moveY:Math.sin(tempRadian)*temSpeed
    });
}
function updateAngle(ball){
    ball.radians = ball.angle * Math.PI / 180;
    ball.moveX = Math.cos(ball.radians)*ball.speed;
    ball.moveY = Math.sin(ball.radians)*ball.speed;
}
setTimeout(function(){
    ctx.clearRect(0,0,500,500);
    for(var i=0;i<10;i++){
        ball = balls[i];
        ctx.fillRect(ball.x,ball.y,50,50);
        ball.x += ball.moveX;
        ball.y += ball.moveY;
        if(ball.x+10>400 || ball.x<0){
            ball.angle = 180-ball.angle;
            updateAngle(ball);
        }
        if(ball.y+10>400 || ball.y<0){
            ball.angle = 360-ball.angle;
            updateAngle(ball);
        }
    }
    setTimeout(arguments.callee, 20);
},1);


サンプル

HTML5 canvas 入門







posted by ねこまんま at 21:30



| Comment(0)


| TrackBack(0)

| HTML5
| 
| 












canvasの基本-円の描画-

Canvasで円を描画するにはarcメソッドとstrokeメソッドを利用します。arcメソッドで円を設定しstrokメソッドで実際に円を描画します。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.arc(100, 100, 50, 0, Math.PI*2, false,false);
ctx.stroke();


arcメソッドは第１引数から中心のX座標、Y座標、円の半径、開始の角度、終了の角度、時計回りで描画するかどうかが設定できます。

サンプル

角度を変更することで円弧も描画できます。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.arc(100, 100, 50, 0, Math.PI*1.5, false,false);
ctx.stroke();


サンプル

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.arc(100, 100, 50, 0, Math.PI*2, false,false);
ctx.stroke();
ctx.arc(200, 200, 50, 0, Math.PI*2, false,false);
ctx.stroke();


2つの円を書こうと上記のように設定するのは間違いです。１つめの円を書き始める前にbeginPathメソッドを利用して新たなパスを設定します。そしてstrokeメソッドは最後にするだけで良いです。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.arc(100, 100, 50, 0, Math.PI*2, false,false);
ctx.stroke();
ctx.beginPath();
ctx.arc(200, 200, 50, 0, Math.PI*2, false,false);
ctx.stroke();


サンプル

beginPathメソッドで初めfillメソッドを利用することで塗りつぶして描画することも可能です。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI*1.5, false,false);
ctx.fill();


サンプル

HTML5 canvas 入門タグ：Canvas HTML5 Arc stroke Fill beginPath 







posted by ねこまんま at 20:22



| Comment(0)


| TrackBack(0)

| HTML5
| 
| 












Canvsアニメーションで反射を制御する

単純なアニメーションの反射ではなく、角度をもったアニメーションで反射を制御する為には反射角の法則を利用します。入射角と反射角は等しくなるので壁と反射したタイミングで角度の変更を行ないます。左右の壁とぶつかった場合は現在の180度から現在の角度を引いた角度を、天上と床に反射した際には360度から現在の角度を引いたものを新しい角度としてアニメーションさせます。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var speed=3;
var start = {x:0,y:0};
var point = {x:0,y:0};
var angle = 40;
var radians,moveX,moveY;
updateAngle();
function updateAngle(){
    radians = angle * Math.PI / 180;
    moveX = Math.cos(radians)*speed;
    moveY = Math.sin(radians)*speed;
}
setTimeout(function(){
    ctx.clearRect(0,0,500,500);
    ctx.fillRect(point.x,point.y,50,50);
    point.x += moveX;
    point.y += moveY;
    if(point.x+50>400 || point.x<0){
        angle = 180-angle;
        updateAngle();
    }
    if(point.y+50>400 || point.y<0){
        angle = 360-angle;
        updateAngle();
    }
    setTimeout(arguments.callee, 20);
},1);


サンプル

HTML5 canvas 入門一覧タグ：Canvas 







posted by ねこまんま at 14:24



| Comment(0)


| TrackBack(0)

| HTML5
| 
| 












Canvasで特定の角度にアニメーション

特定の角度にアニメーションする場合は数式で移動距離を算出します。JavaScriptでは角度は「度」ではなく「ラジアン」で取り扱うためラジアン値に変換しコサインとサインを利用してXとYそれぞれの移動距離を算出します。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var speed=3;
var start = {x:0,y:0};
var point = {x:0,y:0};
var angle = 45;
var radians = angle * Math.PI / 180;
var moveX = Math.cos(radians)*speed;
var moveY = Math.sin(radians)*speed;

setTimeout(function(){
    ctx.clearRect(0,0,500,500);
    ctx.fillRect(point.x,point.y,100,100);
    point.x += moveX;
    point.y += moveY;
    setTimeout(arguments.callee, 20);
},1);


サンプル

あとは移動距離に応じて描画をおこなっていきます。

HTML5 canvas 入門タグ：HTML5 Canvas 







posted by ねこまんま at 13:50



| Comment(0)


| TrackBack(0)

| HTML5
| 
| 










2012年03月16日

CSSでhr要素のラインを装飾する

hr要素を装飾するにはborderを0にしてからborder-topかborder-bottomにスタイルを適応させます。

hr{
	border:0;
	border-bottom: 1px dotted #009760;
	height: 1px;
}


ちななみにデフォルトではborder-topとborder-leftを使って描画されてるみたい。タグ：hr CSS 







posted by ねこまんま at 11:55



| Comment(0)


| TrackBack(0)

| CSS
| 
| 










2012年03月13日

VIMの設定を変更

MacでVIMの設定を行うにはTerminal から

vi ~/.vimrc


と入力すればよい。(ターミナルでの編集はviの基本的な使い方を参照に)

たとえば.vimrc内に次のような命令を記述しておけば次回からファイルを開いた際に行番号が表示されている。

:set number


次のように:colorsheme でカラースキームの設定が可能(参考:利用できる標準のカラースキーム)

:colorsheme koehler



つぎのように入力すると特殊文字を変換できたりする。

:set list
:set listchars=eol:$,tab:>- ,extends:>
タグ：vim 







posted by ねこまんま at 01:43



| Comment(0)


| TrackBack(0)

| Tool
| 
| 












MacのFinderをGoogle Chromeみたいにするソフト

MacのFinderをGoogle Chromeみたいにするソフト「TotalFinder」を試用中。少しもっさりするけどいっぱいひらいて使いたいフォルダが見つからないFinderを便利に利用できそう。15ドルと紹介されていたけど18ドルに値上がりしてるっぽい。まぁ安いのでよかったら購入します。

via:痒いところに手が届きすぎるMacのFinder拡張『TotalFinder』でChrome風タブ機能などを追加タグ：Mac Finder Google Chrome 







posted by ねこまんま at 01:08



| Comment(0)


| TrackBack(0)

| mac
| 
| 










2012年03月09日

CSVをJSONやXMLに変換する方法

CSVをJSONやXMLに変換する際に色々と方法があるけど「Mr.Date Converter」を利用すると簡単に変換することができる。

上部にCSVデータを入れると下部に変換後のデータが表示されます。左側のオプションで調整ができるものの項目は多く無いので残りは一括変換なんかで調整したらいい。タグ：CSV JSON xml 







posted by ねこまんま at 02:15



| Comment(0)


| TrackBack(0)

| Tool
| 
| 












モーダルウィンドウを開く「showModalDialog」

showModalDialogモーダルウィンドウを開く関数。

window.showModalDialog(
	url,   //移動先
	this,  //ダイアログに渡すパラメータ（この例では、自分自身のwindowオブジェクト）
	"dialogWidth=800px; dialogHeight=480px;"
);


ちなみにモーダルとはダイアログが開いている最中、もと画面の操作ができないウィンドウのこと。タグ：showModalDialog 







posted by ねこまんま at 01:31



| Comment(0)


| TrackBack(0)

| 関数
| 
| 












- 
 1 2 3 4 5..
 次の20件>>


	ウェブ		記事