イナヅマTVログ » multimedia design, ActionScript,JavaScript, Lingo, PHP, Perl, SQL

2012.05.09
18:22
author: taikiken
0件のコメント

WebStorm 4, PhpStorm 4のcaret(Iビーム)を行末に移動させるPreference設定

JetBrainsのWebStorm, PhpStormを愛用しています。
PhpStormはWebStormの上位版なのでPhpStormだけでいいんだけど毎回間違って両方ともアップデートするささやかな贅沢を行っています。

最近バージョン4にアップデートしたら入力ポイント(caret, Iビーム…なんて呼ぶのが正しいのか)がクリックしたところになってしまいイライラさせられています。

うまく説明できるといいけど…
入力行の右の文字が何も無い地点でクリックすると入力するための Iビームがその地点で点滅を始めます。
空白行だと、どこでもクリックしたポイントが入力ポイントになります。
いやいや、行の先頭でしょうそこは、ってなりますよね。
command + 左矢印(<-)で毎回入力ポイントを行の先頭に移動させている姿は我ながらけなげだと思わずにいられません。いや、いました。つ、ついに過去形にすることができました。やっと、どこで設定するかを"Preferences"で見つけることができました。 Preferencesの設定項目の多さは軽くクラクラするほど多すぎて多すぎて... 毎回目眩とともに閉じてしまってました。しかし、さすがに不便なのでフラフラしながら重たい腰を上げてみたのが今回のネタ。ブログに書くほどでもないけど、多分忘れちゃうのでメモっとく。

これで入力ポイント（キャレット）は行末に移動

Editor: Virtual Space項目の “Allow placement of caret after end of line” のチェックを外す。

これで入力ポイントは行の右の空いているところをクリックしても行末に移動してくれます。

おまけ

Preferencesがちゃがちゃさわってたおかげで思わぬ発見もしました。

Surround selection

Editor > Smart Keys: Surround selection on typing quote or braceにチェック

文字を選択し”, ‘, (, {, [ をタイプするとその文字をタイプしたキャラクタで囲ってくれるようになります。
TextMateにもともとあった機能で重宝してたので嬉しい大発見でした。

【教えて（緩募）】便利な機能とかこうしてるよ…

多分ほかにも設定を変えるともっともっと便利な感じになるんだろうけど。
知らない機能も多そう。

こんなの知ってるよとかこんな風にすると便利だよとか教えていただけると嬉しいです。

update 2012-05-17

command + mouse wheelでフォントサイズが拡大されるのを防ぐ

デフォルトだと[command + mouse wheel]で文字サイズが拡大されます。
拡大されては「なんだよ〜」とぶつくさ言いながら一旦ファイルを閉じ再度開いて通常サイズに戻すことで対処してました。
便利な機能なのかもしれませんが、邪魔に思っていたのでオフることにしました。

Editor: Change font size (Zoom) with Command+Mouse Wheel のチェックを外す。

2012.05.09
13:59
author: taikiken
2件のコメント

Canvas始めました – マウスアクション(click)を使う最初の一歩

マウス・クリックでクリック・ポイントに丸を描くの巻。
ユーザーに操作してもらうコンテンツを作るためにマウス操作を可能にしなくては…

JavaScriptでclickイベントを取得してCanvasに描画する。
クリック・ポイントの取得
1.Canvas Elementでclickイベントを取得
2.クリックした座標を取得
＊HTML上(window)の座標になります
3.CanvasのHTML上(window)の位置を取得
4.2から3を差引いて描画用の座標を取得
5.4の座標でなにかする

てな感じで行う。
＊Canvasの座標を取得するためには<canvas>は<body>に対してposition:absolute;になってないとダメ。
（【追記】absoluteというかoffset値を取得してwindow原点位置（左上）からの位置を取得するのにbodyに対してabsoluteだと取得が簡単になるという意味。）
＊全面Canvasにしてしまえばそんな手間もかからないけど。
（【追記】全画面canvasにすればoffsetは(0, 0)になるので取得が簡単になるという意味。
しかしwindow resize 処理を組み込む必要が出てくる。
スマホ・タブレットのorientation対応、AndroidでのCanvas resize時のブラウザ・クラッシュ対応などやらなくてはいけないことも増える。）

HTML

<canvas id='canvas'></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
 
context.fillStyle = 'rgba(255,0,0,0.25)';
 
canvas.addEventListener('click', onClick, false);
function onClick (e) {
    var x = y = 0;
    x = e.clientX - canvas.offsetLeft;
    y = e.clientY - canvas.offsetTop;
 
    context.beginPath();
    context.arc(x,y,15,0,Math.PI*2,true);
    context.closePath();
    context.fill();
};

Canvas Click Demo Vol.1

あたりまえだけど、Canvasでのクリック・イベントはCanvas Elementでしか取得できない。
（【追記】delegateを使えば document.body でも取得可能。その場合はnodeNameなどでcanvas上でのクリックなのかを判定する必要があります。）
これはかなりイタい。
Canvas上に描いたパーツをボタンのように使うためにはクリック座標がそのパーツ上かどうかを判定させるルーチンが必要になります。
固定だったらまだしも動いていたりするとやだなぁ〜。

次の課題ができましたとさ。

update 2014-07-22
【Canvas練習ノート】マウス（タッチ）操作 – ドラッグとか
2年たち少し考えを整理しました。

2012.05.02
21:55
author: taikiken
1件のコメント

Canvas始めました – アニメーションしてみる最初の一歩

Canvasでアニメーションの巻。

Canvasアニメーションのライフサイクル

描画をクリア(clearRect) -> アニメーション計算 -> 描画、を繰返します。

CanvasはFlashのように変更になったものだけを描画する機能は無く、毎回全て再描画を行わないといけません。
再描画前にクリアしておかないと追加で描画され位置が変わったものは重なってしまいます。

ライフサイクルを維持するために定期的に関数を実行させないといけません。
~~JavaScriptでそのような目的に使える関数は1つだけです。~~
追記しました、requestAnimationFrame と言う名の関数が HTML5 Working Draft にありました。

setInterval
setInterval(callback:Function, delay:int(ms))

~~＊setTimeoutでも同じように作ることは可能ですが、効率などの点からもdelayなどで1回しか時間管理が必要な時だけに使用を限定すべきです。~~
続きを読む →

2012.05.02
13:57
author: taikiken
0件のコメント

Canvas始めました – ドロップシャドウしてみた

ドロップシャドウ(Drop shadow)をしてみるの巻。

ドロップシャドウに用意されている関数とプロパティ。
関数
shadowColor(color:String)
プロパティ
shadowOffsetX:int 横方向のオフセット値
shadowOffsetY:int 縦方向のオフセット値
shadowBlur:int ブラー（ぼかし）

HTML

<canvas id='canvas'></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
 
context.fillStyle = "#ff0000";
 
context.shadowOffsetX = 3;
context.shadowOffsetY = 3;
context.shadowBlur = 16;
context.shadowColor = 'rgba(16,16,16,0.8)';
 
context.font = "90px serif";
context.baseline = "top";
context.fillText('Hello world', 10, 90);
 
context.fillStyle = 'red';
context.fillRect(550,10,50,50);
 
context.fillStyle = 'rgba(0,255,0,0.5)';
context.fillRect(620,10,50,50);

Canvas Drop shadow

シャドウをノックアウトするとか内側にとかは指定できなさそう、Shapeを重ね合わせて工夫するしか無いのかな。

2012.05.02
13:27
author: taikiken
0件のコメント

Chrome Experimentの3D Mapゲーム”Cube”が楽しい

Chrome Experimentに登場したゲーム”Cube“が楽しい。
WebGLでGoogel Mapを立方体の上に表示し目的地まで球を道路上で転がしタイムを競います。

ポップアップするウインドウはMochikitで実装されてるみたいだな。
3D表現のところはライブラリを使っているように見えない、ってことは全部オリジナルコードなんや、すげーなぁ。

YoutubeのVideo。

WebGLの進化は怖い位です。

2012.05.02
03:26
author: taikiken
0件のコメント

Canvas始めました – 塗りパターン : createPattern

画像を塗りパターンに使うの巻。

createPattern(image:Bitmap, repeat:String)
imageは Imageインスタンス, Canvasエレメント, Videoエレメントの使用が可能。
ビットマップだったらいいのかな。

repeatは以下の文字が指定可能、繰返し種類を指定。
repeat：両方向（デフォルト）
repeat-x：水平方向のみ
repeat-y：垂直方向のみ
no-repeat:なし

HTML

<canvas id='canvas'></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
 
var img = new Image();
img.src='images/Diamond.png';
 
img.onload = function () {
  var pattern = context.createPattern(img,'repeat');
  context.fillStyle = pattern;
  context.fillRect(0,0,200,120);
};

元画像

Diamond 45x45

画像を使用するときonloadが完了していないとエラーになる。

2012.05.01
20:50
author: taikiken
0件のコメント

Canvas始めました – 多角形（矢印）を描いてみる

多角形を描いてみよう。
元ネタはbit101さんのActionScript Animation。

矢印

HTML

<canvas id='canvas'></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var w=60,h=60,w0=w*0.5,h0=h*0.25,x=w,y=h;
 
context.setTransform(1,0,0,1,0,0);
context.translate(x,y);
 
context.beginPath();
context.fillStyle = 'red';
context.moveTo(-w0,-h0);
context.lineTo(0,-h0);
context.lineTo(0,-w0);
context.lineTo(w0,0);
context.lineTo(0,w0);
context.lineTo(0,h0);
context.lineTo(-w0,h0);
context.lineTo(-w0,-h0);
context.stroke();
context.fill();
context.closePath();
 
context.setTransform(1,0,0,1,0,0);

矩形を2個追加した。

context.fillStyle = 'rgba(0,0,255,0.5)';
context.fillRect(x,y,w,h);
 
context.fillStyle = 'rgba(0,255,0,0.5)';
context.fillRect(x-w0,y-h0*2,w,h);

＊context.stroke();しないと黒の縁取り線無しの矢印になります。

2012.05.01
19:42
author: taikiken
0件のコメント

Canvas始めました – 塗りを線形や円形のグラデーションで

グラデーションで塗るの巻。

線形グラデーション
createLinearGradient(x, y, width, height)
グラデーション範囲を指定
x:int, y:int, width:int, height:int

HTML

<canvas id='canvas'></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
 
var gradient = context.createLinearGradient(0,0,100,0);
gradient.addColorStop(0,'rgb(255,0,0)')
gradient.addColorStop(0.5,'rgb(0,255,0)')
gradient.addColorStop(1,'rgb(0,0,255)')
context.fillStyle = gradient;
context.fillRect(0,0,100,100);
 
var gradient2 = context.createLinearGradient(0,0,0,100);
gradient2.addColorStop(0,'rgb(255,0,0)')
gradient2.addColorStop(0.5,'rgb(0,255,0)')
gradient2.addColorStop(1,'rgb(0,0,255)')
context.fillStyle = gradient2;
context.fillRect(120,0,100,100);

context.createLinearGradientで作ったインスタンスをfillStyleにセットする。

円形グラデーション
createRadialGradient(x1, y1, r1, x2, y2, r2)
グラデーション範囲を指定
開始円
x1:int, y1:int, r1:int
終了円
x2:int, y2:int, r2:int

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
 
var gradient = context.createRadialGradient(60,60,10, 60,60,60);
gradient.addColorStop(0,'rgb(255,0,0)')
gradient.addColorStop(0.5,'rgb(0,255,0)')
gradient.addColorStop(1,'rgb(0,0,255)')
context.fillStyle = gradient;
context.fillRect(0,0,120,120);
 
var gradient2 = context.createRadialGradient(200,60,10, 200,60,90);
gradient2.addColorStop(0,'rgb(255,0,0)')
gradient2.addColorStop(0.5,'rgb(0,255,0)')
gradient2.addColorStop(1,'rgb(0,0,255)')
context.fillStyle = gradient2;
context.fillRect(140,0,120,120);

context.createRadialGradientで作ったインスタンスをfillStyleにセットする。

2012.05.01
14:22
author: taikiken
0件のコメント

sketchPatchのLivecodelab, CoffeeScriptでWebGLをオンザフライ

Livecodelab

FacebookのCreativeApplications.Netさんのシェアで知った、Web上でWebGLをコーディングしてすぐにプレビューできるサービス。

記述シンタックスは次期JavaScript Ver.6で採用されると噂のCoffeeScript形式。
使用できるJavaScriptライブラリとしてThree.js, Buzz.js, Processing.jsがあげられていました。
Three.jsはWebGL界の巨人Mr.doob先生作のライブラリ、最高にイケテます。
Buzz.jsはHTML5 Audioコントロール用のライブラリ。
fadein, loop, duration表示などができます。
Processing.jsはProcessingをJavaScriptに移植したライブラリ。

Demoファイルも多数用意されています、一つずつ見ていくと何ができるかを確認できます。
順を追ってTutorialを試していけば簡単なコードならすぐに書けてしまいそうです。

エラー表示はその場で出てくるし。コードを入力すると何のアクションもしなくても実行されるし、良くできてるなぁ〜。
WebGL(Three.js)のお勉強にはもってこいなのかも。

ソースコードはgithubで公開されています。
https://github.com/davidedc/livecodelab

2012.05.01
00:42
author: taikiken
0件のコメント

Canvas始めました – 透明度のプロパティ：globalAlpha

一度指定した透明度をずっと維持してくれるglobalAlphaの巻。

globalAlpha
property: 0 ~ 1

globalAlphaを設定すると以降の塗りの透明度に自動的に適用される。

HTML

<canvas id='canvas'></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
 
context.save();
 
context.fillStyle = '#0000ff';
context.fillRect(100,100,300,50);
 
context.globalAlpha = 0.75;
 
context.setTransform(1,0,0,1,0,0);
var x=100,y=100,w=50,h=50;
context.translate(x+0.5*w,y+0.5*h);
context.scale(2,2);
context.fillStyle = '#ff0000';
context.fillRect(-0.5*w,-0.5*h,w,h);
 
context.setTransform(1,0,0,1,0,0);
 
context.fillStyle = '#f00';
context.fillRect(200,75,50,100);
 
context.restore();
 
context.fillStyle = '#f00';
context.fillRect(300,75,50,100);

Canvas globalAlpha

globalAlphaは透明度のglobal プロパティ（？）。
設定すると以降の塗りに自動的に設定される。
デフォルトは1、不透明。

透明度を解除する時はglobalAlphaに1をセットするか、globalAlpha適用前にsaveしrestoreする。

一回だけの設定だったら塗りにrgbaで透明度を設定して方が楽。
続けて複数の塗りに同じ透明度を設定する時使うと便利そう。

2024年5月
日	月	火	水	木	金	土
			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

これで入力ポイント（キャレット）は行末に移動

おまけ

Surround selection

おすすめです。

【教えて（緩募）】便利な機能とかこうしてるよ…

command + mouse wheelでフォントサイズが拡大されるのを防ぐ

Canvasアニメーションのライフサイクル