生成AIを活用したSaaSサービス提供企業

  • Company
    • Company
    • 会社概要
    • グループ会社
  • Service
  • Work
  • News
  • Recruit
  • Blog
  • Contact

ブログBlog

  • ALL

  • お知らせ

  • 技術/デザイン/制作

  • ベトナム

  • ごはん

  • 日常/プライベート

  • Vue.jsを今更ながらお勉強

    こんにちは。制作部の稲葉です。

    Vue.jsを使ってみようと思いたってから長いこと経ってしまいました。

    “Vue.jsを今更ながらお勉強” の続きを読む

    このエントリーをはてなブックマークに追加
    Share on Tumblr
    Tweet

    稲葉彩乃投稿者 稲葉彩乃

    投稿日: 2017/12/19

    カテゴリー 日常 / プライベート
  • 恵比寿のランチでガレットならここ おいしいイタリアンのお店「ハース (HEARTH)」

    こんにちは、制作部の稲葉です。

    今回はおいしいガレットのお店を紹介したいと思います。
    恵比寿駅西口の本社にも近い場所にある「ハース (HEARTH)」です。
    チーズフォンデュ、ガレットが一押しみたいですね。

    “恵比寿のランチでガレットならここ おいしいイタリアンのお店「ハース (HEARTH)」” の続きを読む

    このエントリーをはてなブックマークに追加
    Share on Tumblr
    Tweet

    稲葉彩乃投稿者 稲葉彩乃

    投稿日: 2017/11/142017/11/14

    カテゴリー ごはん, 日常 / プライベート
  • アプリGoogle Spotlight Storiesがやっぱり面白い

    こんにちは、制作部の稲葉です。

     

    アプリは基本的にインストールしたままだったりします。

    今回のブログも何にしようかと思いつつおもむろにiPhoneを眺め、久しく立ち上げていないアプリたちを起動してみたり。

    そんな中で、Google Spotlight Storiesがやっぱり面白い、という事で今回のブログです。

    “アプリGoogle Spotlight Storiesがやっぱり面白い” の続きを読む

    このエントリーをはてなブックマークに追加
    Share on Tumblr
    Tweet

    稲葉彩乃投稿者 稲葉彩乃

    投稿日: 2017/10/112017/10/11

    カテゴリー 技術 / デザイン / 制作, 日常 / プライベート
  • Googleの小ネタ

    こんにちは、制作部の稲葉です。

    今回は、Google検索やマップの小ネタを紹介します。
    知っている方も多いかもしれないですが、ちょっとみてみましょう。

    “Googleの小ネタ” の続きを読む

    このエントリーをはてなブックマークに追加
    Share on Tumblr
    Tweet

    稲葉彩乃投稿者 稲葉彩乃

    投稿日: 2017/08/18

    カテゴリー 日常 / プライベート
  • 盆栽一日体験教室に行ってきました

    こんにちは、制作部の稲葉です。

    先週、友人に誘ってもらい盆栽の一日体験教室に行ってきました。

    お世話になったのは、彩花盆栽教室 表参道校です。
    “盆栽一日体験教室に行ってきました” の続きを読む

    このエントリーをはてなブックマークに追加
    Share on Tumblr
    Tweet

    稲葉彩乃投稿者 稲葉彩乃

    投稿日: 2017/07/202017/07/21

    カテゴリー 日常 / プライベート
  • さくっとCreateJSで遊ぶ

    制作部の稲葉です。

    今回は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);
    }

    チュートリアル画像
    ここから少しずつ変更していきます。

    まずさっくとネコを用意します。
    ねこイラスト1

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

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

    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);
    }

    ねこイラスト2
    まだ、横に移動しているので、縦方向の移動にしましょう。


    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);
    }

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


    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);
    }

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

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

    それではまた。

    このエントリーをはてなブックマークに追加
    Share on Tumblr
    Tweet

    稲葉彩乃投稿者 稲葉彩乃

    投稿日: 2017/06/06

    カテゴリー 技術 / デザイン / 制作

投稿ナビゲーション

前のページ ページ 1 … ページ 5 ページ 6 ページ 7 次のページ