• iPhone8/Plusの発売日まで後少し

    iphone8

    どうも。
    伊藤です。

    昨日、Appleの発表イベントでiPhone8シリーズやiPhoneX(テン)、Apple TV、Apple Watchの色々な情報が発表されましたね。
    気になる今後ですが、iPhone8とplusの予約は15日(金)から開始となり、発売は翌週の22日(金)となるようです。
    iPhoneXは少し先のようです。

    ◆iPhone8/Plus
    予約日:09/15(金)~
    発売日:09/22(金)~

    ◆iPhoneX
    予約日:10/27(金)~
    発売日:11/03(金)~

    スマートフォンが産まれてから約10年。
    携帯はAndroid、タブレットはiPadでここまで来ましたが、iPhoneXには個人的にかなり惹かれており、iphone端末への購買意欲が掻き立てられています。

    デザイン、機能など様々な変化や拡張がありましたが、中でも一番興味があるのが「ワイヤレス充電」です。
    ワイヤレス充電器のAirPowerを別途購入すれば、無線で充電ができるようになります。
    ここ最近のテクノロジーでは一番衝撃を受けました。
    ただ気になるのは・・・2018年に発売されるという事は分かっているのですが時期が未定、且つ価格も未定という事です。
    お手頃価格で発売される事を願っています!

    ではでは。


  • MySQLWorkBenchで簡単にデータベース(DB)構造のデプロイをする

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

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

    ①MySQLWorkBenchインストール

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

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

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

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

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

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

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

    スクリーンショット 2017-06-23 14.07.46この画面で、

    File>import>Reverse Enginner MySQL Create Script…

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

    Excuteをクリックします。

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

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

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

    Database>Connect to Databaseから、デプロイ対象にしたい接続先情報を追加します。スクリーンショット 2017-06-23 14.03.25

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

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

    デプロイ

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

    Database>Synchronize Model

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


    excute

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

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

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

    Excute

    をクリック。

    以上!

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

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

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

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


  • さくっと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
    無事にぴょこぴょこ元気にジャンプするネコが見られました。
    まだ変更したい部分はありますが、今回はここまでです。

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

    それではまた。


    投稿日:

    カテゴリー 技術 / デザイン / 制作
  • Googleの画像認識API「Cloud Vision API」を使って画像判定をしてみた

    itouhirotaka

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

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

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

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


  • htmlの勉強を始めるならこれ!おすすめサイトまとめ

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


    投稿日:

    カテゴリー 技術 / デザイン / 制作
  1. ページ 1

  2. ページ 2

  3. ページ 26