制作部の里山です。

技術系の本をたまに買ったりしますが、たいてい前半で挫折します。
“ELASTIC LEADER SHIP” の続きを読む

こんにちは、昔オラクルマスターに興味があった中村です。

今回は簡単にDB構造をデプロイする方法を紹介します。

①MySQLWorkBenchインストール

まずは公式サイトからMySQLWorkBenchをインストールします！

https://www.mysql.com/jp/products/workbench/

※Olacle社のアカウント登録が必要

インストール後アプリケーションを起動してください。

②デプロイ元のModel情報を作成

まずはデプロイ元でDBのDumpデータ(.sql形式)を取得しておきます。

File>NewModelでModel(DBの構造を作成する画面)画面を開きます。

この画面で、

File>import>Reverse Enginner MySQL Create Script…

をクリックして開いた画面で、事前にDumpしたsqlファイルを選択し、

Excuteをクリックします。

これでDBの情報をMySQLWorkBenchに取り込みました。

※Schema名だけ自分で入力が必要なので、SchemaNameをデプロイ先と同じ情報にします

③デプロイ先の接続先情報(Connection)を追加

Database>Connect to Databaseから、デプロイ対象にしたい接続先情報を追加します。

この画面で接続先情報を登録します。

これで準備は整いました。

④デプロイ

では上記で設定した情報を元にデプロイします。

Database>Synchronize Model

をクリックし、3で設定した接続先を選択しcontineをクリッックしていき進みます。

こんな画面がでてればOKです。

MySQLWorkBenchが設定したデプロイ元とデプロイ先のDB情報の差分を自動抽出し、SQLを作成してくれます。

実行されるSQLを念のため確認して、問題なければ

Excute

をクリック。

以上！

これでDB構造がデプロイされました。

慣れれば2~3分ぐらいで作業できます。

GUIで全て操作でき、環境に依存することもなく、便利なのでよく使っています。

皆さんもぜひ使ってみてください。

制作部の稲葉です。

今回はCreateJS公式サイトのチュートリアルを元にtweenjsを学んでみました。

元となるチュートリアルはこちらです。

詳細はリンク先を見て頂くとして、その中のinit()内だけにフォーカスして行きますね。

// チュートリアル
function init() {
var stage = new createjs.Stage("demoCanvas");
var circle = new createjs.Shape();
circle.graphics.beginFill("Crimson").drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100;
stage.addChild(circle);
createjs.Tween.get(circle, {loop: true})
.to({x: 400}, 1000, createjs.Ease.getPowInOut(4))
.to({alpha: 0, y: 75}, 500, createjs.Ease.getPowInOut(2))
.to({alpha: 0, y: 125}, 100)
.to({alpha: 1, y: 100}, 500, createjs.Ease.getPowInOut(2))
.to({x: 100}, 800, createjs.Ease.getPowInOut(2));
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", stage);
}


ここから少しずつ変更していきます。

まずさっくとネコを用意します。

このネコにぴょこぴょこ飛び跳ねてもらうのが目標です。

まず右にすっと移動するイージングを、飛び跳ねている風の動きに変更してみます。

function init() {
var stage = new createjs.Stage("demoCanvas");
var circle = new createjs.Shape();
circle.graphics.beginFill("Crimson").drawCircle(0, 0, 50);
circle.x = -25; //開始位置変更
circle.y = 250; //開始位置変更
stage.addChild(circle);
createjs.Tween.get(circle, {loop: true})
.to({x: 200}, 3000, createjs.Ease.elasticOut); //イージング変更
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", stage);
}


こんな感じでしょうか。

次に、createjs.Bitmapを使って赤い円をネコの画像に変更してみます。


function init() {
var stage = new createjs.Stage("demoCanvas");
var cat = new createjs.Bitmap("http://jsrun.it/assets/i/G/L/Y/iGLYn.png"); //ネコに変更
cat.x = -100; //開始位置変更
cat.y = 100; //開始位置変更
stage.addChild(cat);
createjs.Tween.get(cat, {loop: true})
.to({x: 200}, 3000, createjs.Ease.elasticOut);
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", stage);
}


まだ、横に移動しているので、縦方向の移動にしましょう。


function init() {
var stage = new createjs.Stage("demoCanvas");
var cat = new createjs.Bitmap("http://jsrun.it/assets/i/G/L/Y/iGLYn.png");
cat.x = 150; //開始位置変更
cat.y = 500; //開始位置変更
stage.addChild(cat);
createjs.Tween.get(cat, {loop: true})
.to({y: 200}, 3000, createjs.Ease.elasticOut); //y軸移動に変更
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", stage);
}


canvasサイズが500pxで基準位置がcanvasの上になるので、yは500から始めました。
良い感じになってきましたが、もう少しネコを増やしたくなってきました。
適当に4匹にしてみます。


function init() {
var stage = new createjs.Stage("demoCanvas");
//ネコを増やす
var cats = [];
for(var i = 0, l = 4; i < l; i++){
cats[i] = new createjs.Bitmap("http://jsrun.it/assets/i/G/L/Y/iGLYn.png");
cats[i].x = i * 100;
cats[i].y = 500;
stage.addChild(cats[i]);
createjs.Tween.get(cats[i], {loop: true})
.to({y: 200}, 3000, createjs.Ease.elasticOut);
}
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", stage);
}

高さがそろったジャンプが見られるようになりました。
でもどうせならランダムにジャンプする方が自然ですね。


function init() {
var stage = new createjs.Stage("demoCanvas");
var cats = [];
for(var i = 0, l = 4; i < l; i++){
cats[i] = new createjs.Bitmap("http://jsrun.it/assets/i/G/L/Y/iGLYn.png");
cats[i].x = i * 100;
cats[i].y = 500;
stage.addChild(cats[i]);
createjs.Tween.get(cats[i], {loop: true})
.to({y: (200 * Math.random())}, (3000 * (Math.random()+1)), createjs.Ease.elasticOut); //高さと時間をランダムに
}
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", stage);
}

無事にぴょこぴょこ元気にジャンプするネコが見られました。
まだ変更したい部分はありますが、今回はここまでです。

最終コードはこちらから確認できます。
(埋め込みできなかった、、、)

それではまた。

こんにちは、ロボホンに興味がある中村です。

ロボホンを始め、巷では人工知能や機械学習というワードが非常に騒がれています。

世の中の流れに取り残されないように機械学習について最近勉強しています。

今回そんな機械学習系サービスのひとつであるGoogle社の画像認識APIサービス「Cloud Vision API」を使ってみました。
“Googleの画像認識API「Cloud Vision API」を使って画像判定をしてみた” の続きを読む

こんにちは、制作部の松村です。
フロントエンドエンジニアになって1年経ちました。はやいですね。
1年前は初心者丸出しもいいところでした。
今回は、そんな初心者へっぽこエンジニアだった1年前の私が、フロントの勉強をするのに使った
個人的おすすめサイトを紹介したいと思います！
“htmlの勉強を始めるならこれ！おすすめサイトまとめ” の続きを読む

今回は石川が見てよかった映画の紹介をします。
それは「レゴバットマン　ザ・ムービー」です。

本作は2014年に公開された「LEGO ムービー」のスピンオフです。
レゴブロックの世界を舞台にレゴのバットマンと仲間たちが大活躍します。

僕はとにかく前作が大好きでした。
レゴで長編映画を一本作るという無謀にも思える課題をなんなくこなし、数々の巧みなギャグと演出、
そして創造することとは何かという問いかけるメッセージ性の高いストーリー。

「レゴのアニメなんて…」と思っている方にこそ見て欲しい、大傑作だったと思います。

今回は「LEGO ムービー」でも登場したバットマンを主役にした話です。

皆が知っているバットマンの、暗くて、ニヒルなイメージを逆手に取ったギャグは
非常に面白い！

“レゴバットマン ザ・ムービー” の続きを読む