主な事業内容は、ライフサイエンス分野を中心としたアカデミアのウェブアプリケーション開発、金融やマスコミ関連のウェブアプリケーション開発などなどです。
応募資格
・もの作りの好きな方
・html/css に関する知識を持ち、ウェブサイト制作経験をお持ちの方
・Adobe Photoshop、Illustrator を利用することのできる方
歓迎するスキル・経験
・デザインの実務
・html5、css3 に関する知識
・Javascript に関する知識
・Sass、TypeScript などのメタ言語に関する知識
・WordPress、RoR など CMS やフレームワークに関する知識
・スマートフォン用サイトの構築
正社員(研修・試用期間6ヶ月)
勤務地
本所吾妻橋
勤務時間
10時~18時
待遇
・給料:月給20万円~(前職での実績を考慮します)
・通勤費:2万円まで支給
・賞与:決算賞与(5月)
・各種保険:各種社会保険完備
休日
・週休2日制
・夏季休暇、年末年始、祝日
・有給休暇、慶弔休暇
連絡先
CloqWork が新しくなりました。
CloqWork に Oliver Blank による美しいサウンドが追加されました。
どうぞご覧下さい。
このブログ、MT5 & HTML5 で作ってます。
Internet Explorer ではたぶん見れないです。
それ以外ではおおむね見れました。スマホもたぶんOKです。
まずは、先日行われた iPhone アプリ開発勉強会で行ったプレゼンの内容を、ちょっと手直しして掲載します。iPhone アプリ開発といいつつ、実は JavaScript と Canvas のお話しです。
モーション、HTML5関連、iOS関連などなどの話題をこつこつとやっていきたいと思ってます。
Core Animation には暗黙的なトランザクションと呼ばれる特徴があり、特に何も指定しなくてもアニメーションが実行されてとても便利です。
theLayer.opacity = 0; // これだけで勝手にフェードアウトのアニメーションになる
便利は便利なんですが、アニメーションさせたくない場合もあって、そういった時は CATransaction を用いて暗黙的なアニメーションを無効にします。
[CATransaction begin]; [CATransaction setValue:(id)kCFBooleanTrue forKey:kCATransactionDisableActions]; // このブロックの中でプロパティを書き換えるとアニメーションは起こらない [CATransaction commit];
基本的にはこれでいいのですが、以下のような例ではパフォーマンスに問題があります。
// CALayer継承クラス @interface ParticleLayer : CALayer { ... -(void) move { [CATransaction begin]; [CATransaction setValue:(id)kCFBooleanTrue forKey:kCATransactionDisableActions]; self.position = CGPointMake(x, y); [CATransaction commit]; }
このクラスは CALayer を継承していて、move メソッドを呼ぶと動く、という作りになっています。そしてこのクラスのインスタンスは、パーティクルとして大量生産されます。
このインスタンスたちをいっぺんに動かすとかなり重いです。
これは、1回の CATransaction ごとに描画プロセスが走るから(たぶん)です。CATransaction を使う場合は、一括で行うべきです。
// パーティクルレイヤーを内包するビュークラス @interface ParticleContainView : UIView { ... -(void) move { [CATransaction begin]; [CATransaction setValue:(id)kCFBooleanTrue forKey:kCATransactionDisableActions]; for (int i=0; i<[particles count]; i++) { ParticleLayer *layer = (ParticleLayer *)[particles objectAtIndex:i]; [layer move]; } [CATransaction commit]; }
この例では、パーティクルを内包するビュークラスで一括にトランザクションを行っています。
ちなみに Apple のドキュメントではこう説明されています。
レイヤへの変更はすべて、トランザクションの一部として行われます。CATransactionは、複数のレイヤツリーへの変更を描画ツリーへのアトミックな更新として一括処理する役割を果たすCore Animationクラスです。
ぼくの読解力の問題かもしれませんが、一見何のこっちゃわかりません...
が、ようはそういう事なのでしょう。
CALayer はプロパティの変更だけでお手軽にアニメーションを実現しますが、複雑なアニメーションには CAAnimation およびその継承クラスを使う事になります。ところが CAAnimation を使って、例えば透明度を0にするアニメーションを設定して実行し、アニメーションが終わると元の透明度に戻ってしまいます。
CABasicAnimation *opacityAnime = [CABasicAnimation animationWithKeyPath:@"opacity"]; opacityAnime.duration = 1; opacityAnime.fromValue = [NSNumber numberWithFloat:1]; opacityAnime.toValue = [NSNumber numberWithFloat:0]; [aLayer addAnimation:opacityAnime forKey:@"animeFadeOut"];
ググったりドキュメントを見ても、なかなかこの現象への言及が見つからなかったのですが、結論としては、removedOnCompletionとfillModeを設定すれば意図した通りに動きます。
CABasicAnimation *opacityAnime = [CABasicAnimation animationWithKeyPath:@"opacity"]; opacityAnime.duration = 1; opacityAnime.fromValue = [NSNumber numberWithFloat:1]; opacityAnime.toValue = [NSNumber numberWithFloat:0]; opacityAnime.removedOnCompletion = NO; opacityAnime.fillMode = kCAFillModeForwards; [aLayer addAnimation:opacityAnime forKey:@"animeFadeOut"];]]>
Canvas も Core Graphics も Apple が作った仕様だからか、とても似ています。なので、片方を抑えていれば(もしかしたら)コンバート可能です。
]]>
いずれもコンテクストを取り出し、そのコンテクストに対して色々命令する感じになります。
メソッド名も非常に似たものになっています。
またいずれもfill(線)およびstroke(塗り)を描く、という事が基本的な操作になります。
全体的に Core Graphics だと冗長になります(というか、Cocoa は基本的にいつも長いです。JS になれていると、文字列や配列の操作は悪魔的です...)。
クリックすると動きだします
1. ふつう
3つバリエーションがあります。
最初の動きは、単純なサイン運動です。sin の演算結果を横座標に与えて振幅を表現しています。
2つ目の動きは、振幅と、そして振幅の大きさの減退にサインを利用しています。
3つ目の動きは、さらにアニメーション的な演出として、ぺしゃんこにつぶれるような動きも加えています。
クリックすると動きだします
var elapsed = 0, duration = 100; // 経過時間, 継続時間 var origX, distance = 100; // 原点座標, 移動距離 var radius = 100; // ボールが描く軌跡の半径 var radian = 0; // 跳ねる運動のためのラジアン ... var ratio1 = elapsed / duration; // 進捗状況 var radian2 = ratio1 * Math.PI * 0.5; // ラジアンに変換 var ratio2 = Math.sin(radian2); // 緩急のついた進捗状況 var x = origX + distance * (1 - ratio2); // X座標 var y = Math.sin(radian) * radius * ratio2; // Y座標 radian++; elapsed++; // インクリメント if (elapsed >= duration) leave(); // 継続時間になったら終了
またしてもはでにしてみました ^^
寿命のためのラジアンから得た1〜0の数値は、移動距離とボールのは値上がりの高さにも加算して、じょじょに衰えていくような動きにしています。
]]>
var x = 0, speed = 10; // 横座標, 速度 ... x += speed;
速度を徐々にゆるめたいときもっとも単純なのは、速度を減算で減らすという方法です。
const DECELERATION = 1; // 減速 var x = 0, speed = 10; // 横座標, 速度 ... x += speed; // 速度分移動 speed -= DECELERATION; // 速度を落とす if (speed < 0) return false; // 速度が0になったらアニメーション終了
しかしこの方法だと、到達位置が成り行きになってしまいます。それはそれでいいのですが、例えば到達位置ありきの動きにしたい場合、これだと計算がややこしくなります。そこで考えられるのが、現在位置と到達位置の間隔を割り算で削る方法です。
const START_X = 0, END_X = 100, DECELERATION = .8; // 開始・終了座標, 減速 var x, distance = END_X - START_X; // 横座標, 間隔距離 ... distance *= DECELERATION; // 間隔を割り算する x = END_X - distance; // 終了座標から間隔を差し引いて現在座標を計算 if (distance < 0.1) return false; // 間隔がほぼ0になったらアニメーション終了
しかしこの方法にはちょっと問題があります。いわゆるアキレスと亀の問題で、間隔が無限に縮まるだけで決して到達位置になる事はありません。従って、ほぼほぼ到達位置になったらアニメーションを止める、という処理が必要になるかもしれません。また到達位置に近づくにつれ、動きは極端にゆっくりになります。
三角関数で表現しようとするとちょっと複雑です。
サインは、0°から90°(0.5π)に移るあいだに、0から1まで丸みのある数字(最初にグンと増え、1に近づくにつれゆるくなる)を出します。この性質を利用して、角度を時間、サインの値を距離に置き換えて表現します。
const START_X = 0, END_X = 100, DURATION = 100; // 開始・終了座標, 継続時間 const WHOLE_RAD = Math.PI * 0.5; // 90°に相当する弧度 var elapsed, x, radian; // 経過時間、横座標, 弧度 ... radian = WHOLE_RAD * (elapsed / DURATION); // 現時刻の相対値を弧度に変換 x = Math.sin(radian) * (END_X - START_X); // 座標の計算 if (elapsed == DURATION) return false; // 経過時間が満了したらアニメーション終了 elapsed++; // 時間経過
それぞれ、実際に動かしてみます。
クリックすると動きだします
uni
sub
div
sin
uni が等速運動(uniform)、sub が引き算(subtraction)、div が割り算(division)、sin がサインでの動きです。
どの方法がよいかは状況次第だけど、動きをしっかりコントロールしたい場合は、位置と時間をきちんと把握できるサイン方式になるでしょうか。
]]>
クリックすると動きだします
var x, y, radian, radius; // 横座標, 縦座標, 弧度, 半径 radian++; radius++; x = Math.cos(radian) * radius; y = Math.sin(radian) * radius;
ちょっとはでにしてみました ^^
ボールの発生タイミング、寿命、初期の弧度、大きさなどをランダムにしていっぱい出しています。
このデモでは、秒間30コマ、ボール数100個にしてますが、ぼくの PC ではさくさく動きます。
]]>