n-HIROKIの日常

n-HIROKIの取り組みを記録したものです。

シューティングゲームのプレイヤー機を動かすプログラム

こんにちは、n-hirokiです!
今回はシューティングゲームのプレイヤーのプログラムです。



前回の敵のプログラムはこちら
hiroki-prog.hatenablog.com



動作:十字キー or マウスで動き、shiftキーで弾を撃ちます。

完成したものはこちら

boxオブジェクト(プレーヤー)
var box, Box;

box = function(){
    this.x = 250; //x座標
    this.y = 400; //y座標
    this.r = 60; //辺の長さ
    this.maxX = canvas.width - this.r; //canvasでのx軸の移動範囲
    this.maxY = canvas.height - this.r; //canvasでのy軸の移動範囲
    this.color = "#000000"; //プレイヤーの色
    this.draw = function(){ //プレイヤー描画メソッド
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, this.r, this.r);
    };
    this.move = function(){ //プレイヤーがcanvasからはみ出さない
        if(this.x >= this.maxX){
            this.x = this.maxX;
        }
        if(this.x < 0){
            this.x = 0;
        }
        if(this.y >= this.maxY){
            this.y = this.maxY;
        }
        if(this.y < 0){
            this.y = 0;
        }
    };
};
boxをドラッグ&ドロップで動かす
var mousedown, mouseX, mouseY;
canvas.addEventListener('mousedown',function(de){ //mousedownしたら実行
    var x, y, rect;
    rect = de.target.getBoundingClientRect(); //windowとcanvasとの差を埋める
    x = de.clientX - rect.left; //canvas上のマウスポインタの座標を取得
    y = de.clientY - rect.top;
    //boxの上でクリックされたか
    if(Box.x < x && Box.x + Box.r > x){ 
        if(Box.y < y && Box.y + Box.r > y){
            mousedown = true; //mousedownしている間true
            mouseX = x; //mouseポインタの初期位置取得
            mouseY = y;
        }
    }
});
canvas.addEventListener('mouseup', function(){ //mouseupしたら実行
    mousedown = false;  //mouseupしたらflagをfalseに
});
canvas.addEventListener('mousemove', function(me){//mousemoveしたら実行
    var x, y, rect;
    var goX, goY;
    if(mousedown == true){ //mousedownしているか
        rect = me.target.getBoundingClientRect(); //windowとcanvasの座標の差を埋める
        x = me.clientX - rect.left; //mouseの座標を取得
        y = me.clientY - rect.top;
        Box.x = Box.x + (x - mouseX); //mouseが動いた分だけboxを動かす
        Box.y = Box.y + (y - mouseY);
        mouseX = x; //基となるmouseの座標を更新
        mouseY = y;
    }
});
キーボードイベント
var mousedown, mouseX, mouseY;
var temp = {
    "key37" : 0,
    "key38" : 0,
    "key39" : 0,
    "key40" : 0
};
document.onkeydown = function(e){ //キーボードが入力されたら実行
    if(e.keyCode == 37){ //←キー判定
        tempClear("key37"); //←キーが連続で押された回数を加算
        if(temp.key37 >= 3){ //連続で3回以上押されていたら加速
            Box.x -= 13;
        }else{
            Box.x -= 5; //通常のスピード
        }
    }else if(e.keyCode == 38){//↑キー判定
        tempClear("key38");
        if(temp.key38 >= 3){ //連続で3回以上押されていたら加速
            Box.y -= 13;
        }else{
            Box.y -= 5; //通常のスピード
        }
    }else if(e.keyCode == 39){//→キー判定
        tempClear("key39");
        if(temp.key39 >= 3){ //連続で3回以上押されていたら加速
            Box.x += 13;
        }else{
            Box.x += 5; //通常のスピード
        }
    }else if(e.keyCode == 40){//↓キー判定
        tempClear("key40");
        if(temp.key40 >= 3){ //連続で3回以上押されていたら加速
            Box.y += 13;
        }else{
            Box.y += 5; //通常のスピード
        }
    }
    function tempClear(index){ //十字キーの連続で押された回数をカウント
        if(index == "key37"){
            temp.key37++;
            temp.key38 = temp.key39 = temp.key40 = 0; //他のキーが押されたらクリア
        }else if(index == "key38"){
            temp.key38++;
            temp.key37 = temp.key39 = temp.key40 = 0;
        }else if(index == "key39"){
            temp.key39++;
            temp.key37 = temp.key38 = temp.key40 = 0;
        }else if(index == "key40"){
            temp.key40++;
            temp.key37 = temp.key38 = temp.key39 = 0;
        }
    }
    if(e.shiftKey){ //shiftキー判定
        console.log("shift");
        //ビームを一つ追加 20発まで
        if(Beams.length < 20){ //弾を撃つ
            Beams.push(new beam());
        }
    }
    if(e.altKey){//altキー判定
        console.log("alt");
    }
    if(e.ctrlKey){//ctrlキー判定
        console.log("ctrl");
    }
};
弾オブジェクト
var beam, Beams = [];
beam = function(){
    this.x = Box.x + Box.r / 2; //boxの真ん中から撃つ(x軸)
    this.y = Box.y - 10; //boxから少し離す(y軸)
    this.r = 2; //辺の長さ
    this.color = "#FF0000"; //弾の色
    this.draw = function(){ //描画
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, this.r, this.r);
    };
};
全体の動き
var stage, Stage;
stage = function(){
    //画面初期化
    this.clear = function(){
        ctx.fillStyle = "#ecf0f1";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    };
    //基本処理
    this.update = function(){
        this.clear(); //canvasクリア
        Box.move(); //boxの位置がcanvasからはみ出していないかチェック
        Box.draw(); //box描画
        //弾を描画
        for(var i = 0; Beams.length >= i + 1; i++){
            Beams[i].y -= 5; //弾のスピード
            //はみ出し判定
            if(Beams[i].y <= 0){
                Beams.splice(i, 1); //canvasからはみ出したら弾を消す
            }else{
                Beams[i].draw(); //はみ出していなければ描画
            }
        }
        //タイマー
        setTimeout(function(){ //100ms間隔で繰り返す
            this.update();
        }.bind(this), 100);
    }
};
全体のコード
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>boxSystem</title>
</head>
<body>
    <canvas id="mycanvas" width="500" height="500">
        Canvasに対応したブラウザを使ってください。
    </canvas>
    <script>
        (function(){
            'use strict';
            var canvas, ctx;
            var box, Box;
            var beam, Beams = [];
            var stage, Stage;
            var mousedown, mouseX, mouseY;
            var temp = {
                "key37" : 0,
                "key38" : 0,
                "key39" : 0,
                "key40" : 0
            };
            
            canvas = document.getElementById('mycanvas');
            if(!canvas || !canvas.getContext) return false;
            ctx = canvas.getContext('2d');
            
            document.onkeydown = function(e){
                if(e.keyCode == 37){
                    tempClear("key37");
                    if(temp.key37 >= 3){
                        Box.x -= 13;
                    }else{
                        Box.x -= 5;
                    }
                }else if(e.keyCode == 38){
                    tempClear("key38");
                    if(temp.key38 >= 3){
                        Box.y -= 13;
                    }else{
                        Box.y -= 5;
                    }
                }else if(e.keyCode == 39){
                    tempClear("key39");
                    if(temp.key39 >= 3){
                        Box.x += 13;
                    }else{
                        Box.x += 5;
                    }
                }else if(e.keyCode == 40){
                    tempClear("key40");
                    if(temp.key40 >= 3){
                        Box.y += 13;
                    }else{
                        Box.y += 5;
                    }
                }
                
                function tempClear(index){
                    if(index == "key37"){
                        temp.key37++;
                        temp.key38 = temp.key39 = temp.key40 = 0;
                    }else if(index == "key38"){
                        temp.key38++;
                        temp.key37 = temp.key39 = temp.key40 = 0;
                    }else if(index == "key39"){
                        temp.key39++;
                        temp.key37 = temp.key38 = temp.key40 = 0;
                    }else if(index == "key40"){
                        temp.key40++;
                        temp.key37 = temp.key38 = temp.key39 = 0;
                    }
                }
                if(e.shiftKey){
                    console.log("shift");
                    if(Beams.length < 20){
                        Beams.push(new beam());
                    }
                }
                if(e.altKey){
                    console.log("alt");
                }
                if(e.ctrlKey){
                    console.log("ctrl");
                }
            };
            canvas.addEventListener('mousedown',function(de){
                var x, y, rect;
                rect = de.target.getBoundingClientRect();
                x = de.clientX - rect.left;
                y = de.clientY - rect.top;
                if(Box.x < x && Box.x + Box.r > x){
                    if(Box.y < y && Box.y + Box.r > y){
                        mousedown = true;
                        mouseX = x;
                        mouseY = y;
                    }
                }
            });
            canvas.addEventListener('mouseup', function(){
                mousedown = false; 
            });
            canvas.addEventListener('mousemove', function(me){
                var x, y, rect;
                var goX, goY;
                if(mousedown == true){
                    rect = me.target.getBoundingClientRect();
                    x = me.clientX - rect.left;
                    y = me.clientY - rect.top;
                    Box.x = Box.x + (x - mouseX);
                    Box.y = Box.y + (y - mouseY);
                    mouseX = x;
                    mouseY = y;
                }
            });
            stage = function(){
                this.clear = function(){
                    ctx.fillStyle = "#ecf0f1";
                    ctx.fillRect(0, 0, canvas.width, canvas.height);
                };
                this.update = function(){
                    this.clear();
                    Box.move();
                    Box.draw();
                    for(var i = 0; Beams.length >= i + 1; i++){
                        Beams[i].y -= 5;
                        if(Beams[i].y <= 0){
                            Beams.splice(i, 1);
                        }else{
                            Beams[i].draw();
                        }
                    }
                    setTimeout(function(){
                        this.update();
                    }.bind(this), 100);
                }
            };
            beam = function(){
                this.x = Box.x + Box.r / 2;
                this.y = Box.y - 10;
                this.r = 2;
                this.color = "#FF0000";
                this.draw = function(){
                    ctx.fillStyle = this.color;
                    ctx.fillRect(this.x, this.y, this.r, this.r);
                };
            };
            box = function(){
                this.x = 250;
                this.y = 400;
                this.r = 60;
                this.maxX = canvas.width - this.r;
                this.maxY = canvas.height - this.r;
                this.color = "#000000";
                this.draw = function(){
                    ctx.fillStyle = this.color;
                    ctx.fillRect(this.x, this.y, this.r, this.r);
                };
                this.move = function(){
                    if(this.x >= this.maxX){
                        this.x = this.maxX;
                    }
                    if(this.x < 0){
                        this.x = 0;
                    }
                    if(this.y >= this.maxY){
                        this.y = this.maxY;
                    }
                    if(this.y < 0){
                        this.y = 0;
                    }
                };
            };
            Box = new box();
            Stage = new stage();
            Stage.update();
        })();
    </script>
</body>
</html>


結構ドラッグアンドドロップで動かすプログラミングに手こずりました。
addEventListenerを初めて使ったのでかなり勉強になりました。

最初はaddEventListener(マウスダウン)の中にaddEventListener(マウスムーブ)を入れればうまく行くんじゃないのか?と思って試したらマウスダウンしてないときにもマウスムーブのaddEventListenerが反応していてうまくいかなかったり、初歩的なことでつまずいたりしていました。

ですが、そのデバッグのおかげで理解が深まり ためになりました!

何よりも、コピペじゃなくて自分で考えて書けたのがとても嬉しかってです!


次は、シューティングゲームの全体のブログを書きますのでよろしくお願いします!


シューティングゲームの敵を動かすプログラム

こんにちは、n-hirokiです。

今回はシューティングゲームの敵を動かすプログラムです。

完成したもの

enemyを10体3行分 生成して動かします。
一番後に全体のコードを載せています。

1、enemy生成

enemyオブジェクトで必要な変数定義
var canvas, ctx;
var Enemy, enemys = [];
canvas定義

htmlに記述します

    <canvas id="mycanvas" width="500" height="500">
        Canvasに対応したブラウザを使ってください。
    </canvas>
canvasを使用するための呪文
    canvas = document.getElementById('mycanvas');
    if(!canvas || !canvas.getContext) return false;
    ctx = canvas.getContext('2d');
enemyオブジェクトを作成
Enemy = function(x, y, row){
    this.x = x; //x座標
    this.y = y; //y座標
    this.r = 15; //辺の長さ
    this.row = row; //行目
    this.color = "#FF6060"; //色
};
enemy描画メソッド
Enemy.prototype.draw = function(){
    ctx.fillStyle = this.color;
    ctx.fillRect(this.x, this.y, this.r, this.r); //箱を描画
};
enemy生成関数

横にenemyを10体を3列生成します

    function formEnemy(){
        var x = 0, y = 0;
        for(var row = 0;row < 3;row++){ //行ループ
            for(var num = 0;num < 10;num++){
                x = 30 * num + 50; //x軸
                y = (15 * row + 20) + (row * 10); //y軸 同じ行のenemyのy軸は統一
                enemys.push(new Enemy(x, y, row)); //配列で管理
            }
        }
    }

ここまでのコードでenemyの表示までできました。
enemys配列で全てのenemyを格納しています。
行の違いはプロパティで持っています。(enemys.row)


次はこのenemyを動かします。

2、enemyを動かす

今回のプログラムで必要な変数定義
var Stage, stage;
var directionFlag = "RIGHT";
var flagY = false;
var ENDFLAG = false;
var maxRow = 2;

Stageでシューティングゲームの動きを管理します

Stageオブジェクト作成
Stage = function(){
    this.clear = function(){
        ctx.fillStyle = "#ecf0f1"; //背景色と同じ色
        ctx.fillRect(0, 0, canvas.width, canvas.height); //canvas全体
    };
    this.update = function(){
        this.clear(); //canvasクリア
        enemys.forEach(function(value, index){
            value.direct(value); //directメソッド(x軸を動かす)
            value.moveY(value, index); //moveYメソッド(y軸を動かす)
            value.flagJudge(value, index); //flagJudgeメソッド(x軸の方向 右か左か)
            value.draw(); //描画
        });
        setTimeout(function(){
            this.update(); //Stageオブジェクトのupdateメソッドを500ms後に実行する
        }.bind(this), 500); //thisをStageに
    };
};

updateメソッドを繰り返してゲームを進行します

・各メソッド
directメソッド
Enemy.prototype.direct = function(value){
    value.rowCheck(value, index); //いま何行あるかチェック
    if(directionFlag == "RIGHT"){ //右方向
        value.x += 10;
    }else if(directionFlag == "LEFT"){ //左方向
        value.x -= 10;   
    }
};
rowCheckメソッド(行判定)
Enemy.prototype.rowCheck = function(value, index){
    if(index == enemys.length - 1){
        maxRow = value.row;
    }
};
moveYメソッド
Enemy.prototype.moveY = function(value, index){
    if(flagY == true){
        value.y += 10;
        if(index == enemys.length - 1)){
            flagY = false;
        }
    }
};
flagJudgeメソッド
Enemy.prototype.flagJudge = function(value, index){
    if(value.x >= 450 && value.row == maxRow){  //x軸が450以上になったら左に
        directionFlag = "LEFT"; //flagを左に
        flagY = true; //左に動く前にy軸を動かす
    }
    if((value.x <= 30 && value.row == maxRow) || ENDFLAG == true){ //x軸が30以下になったら右に
        ENDFLAG = true; //enemyを全部チェックするための変数
        if(ENDFLAG == true && index == enemys.length - 1){
            directionFlag = "RIGHT"; //flagを右に
            flagY = true; //右に動く前にy軸を動かす
            ENDFLAG = false; //enemyを全てチェック
        }
    }
};

これでenemyを動かせます
次はコードを組み合わせます

3、コードを組み合わせる

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>enemySystem</title>
</head>
<body>
    <canvas id="mycanvas" width="500" height="500">
        Canvasに対応したブラウザを使ってください。
    </canvas>
    <script>
        (function(){
            'use strict';
            var canvas, ctx;
            var Enemy, enemys = [];
            var Stage, stage;
            var directionFlag = "RIGHT";
            var flagY = false;
            var ENDFLAG = false;
            var maxRow = 2;
            
            canvas = document.getElementById('mycanvas');
            if(!canvas || !canvas.getContext) return false;
            ctx = canvas.getContext('2d');
            
            Enemy = function(x, y, row){
                this.x = x;
                this.y = y;
                this.r = 15;
                this.row = row;
                this.color = "#FF6060";
            };
            Enemy.prototype.draw = function(){
                ctx.fillStyle = this.color;
                ctx.fillRect(this.x, this.y, this.r, this.r);
            };
            Enemy.prototype.direct = function(value){
                if(directionFlag == "RIGHT"){
                    value.x += 10;
                }else if(directionFlag == "LEFT"){
                    value.x -= 10;   
                }
            };
            Enemy.prototype.moveY = function(value, index){
                if(flagY == true){
                    value.y += 10;
                    if(index == enemys.length - 1){
                        flagY = false;
                    }
                }
            };
            Enemy.prototype.flagJudge = function(value, index){
                if(value.x >= 450 && value.row == 2){
                    directionFlag = "LEFT";
                    flagY = true;
                }
                if((value.x <= 30 && value.row == 2) || ENDFLAG == true){
                    ENDFLAG = true;
                    if(ENDFLAG == true && index == enemys.length - 1){
                        directionFlag = "RIGHT";
                        flagY = true;
                        ENDFLAG = false;
                    }
                }
            };
            //行判定
            Enemy.prototype.rowCheck = function(value, index){
                if(index == enemys.length - 1){
                    maxRow = value.row;
                }
            }
            function formEnemy(){
                var x = 0, y = 0;
                for(var row = 0;row < 3;row++){
                    for(var num = 0; num < 10;num++){
                        x = 30 * num + 50;
                        y = (15 * row + 20) + (row * 10);
                        enemys.push(new Enemy(x, y, row));
                    }
                }
            }
            Stage = function(){
                this.clear = function(){
                    ctx.fillStyle = "#ecf0f1";
                    ctx.fillRect(0, 0, canvas.width, canvas.height);
                };
                this.update = function(){
                    this.clear();
                    enemys.forEach(function(value, index){
                        value.direct(value);
                        value.moveY(value, index);
                        value.flagJudge(value, index);
                        value.draw();
                    });
                    setTimeout(function(){
                        this.update();
                    }.bind(this), 500);
                };
            };
            formEnemy();
            stage = new Stage();
            stage.update();
        })();
    </script>
</body>
</html>

簡単にですがこのコードでenemyを動かすことができました。
シューティングゲーム作り方などで検索しないで、自分で全部考えて書きました。
まだ日本語から書かないとうまく作れないですが、自分の成長がわかり嬉しいです!

多分シューティングゲームのオーソドックスな書き方とかあると思いますが、それは調べずに我流でのコードです。
なのであまり参考にならないかもしれません。

enemy以外の機能も簡単にはできたので、またこのブログに書きたいと思います!

追記:
プレイヤー機を動かすプログラムのブログ書きました!!
hiroki-prog.hatenablog.com



canvasで最近使ったコードmemo

こんにちは!
n-hirokiです。

最近canvasを一から勉強して簡単なシューティングゲームを作るのが目標です。
簡単なことだけですが、canvasの勉強中に書いたコードの一部をまとめました。
canvasに関係ないことも書いてます。

1、HTMLでcanvasタグを書く

    <canvas id="mycanvas" width="500" height="250">
        Canvasに対応したブラウザを使ってください。
    </canvas>

2、JavaScriptcanvas定義 コンテキストを取得

    canvas = document.getElementById('mycanvas');
    if(!canvas || !canvas.getContext) return false;
    ctx = canvas.getContext('2d');

3、四角を描く

    ctx.fillStyle = #000000; //色指定
    ctx.fillRect(x座標, y座標, 横の長さ, 縦の長さ);

4、丸を描く

    ctx.beginPath();
    //ctx.arc(x座標, y座標, 半径, 開始角度, 終了角度);
    ctx.arc(this.x, this.y, this.r, 0, Math.PI*2);
    ctx.fillStyle = this.color;
    ctx.closePath();
    ctx.fill();

5、クリックした座標を取得

    canvas.addEventListener('click', function(e){
        var x, y, rect;
        //canvasの座標に合わせる
        rect = e.target.getBoundingClientRect();
        x = e.clientX - rect.left;
        y = e.clientY - rect.top;
    });

6、canvasはみ出し判定

    if(this.x + this.r > canvas.width || this.x - this.r < 0){
        //x軸はみ出す時の処理
    }
    if(this.y + this.r > canvas.height || this.y - this.r < 0){
        //y軸はみ出す時の処理
    }

7、canvasクリア

    ctx.fillStyle = "#ecf0f1";  //canvasの背景色
    ctx.fillRect(0, 0, canvas.width, canvas.height);

8、星を描画

    var theta = Math.PI * 72 / 180;
    var dx1 = this.r * Math.sin(theta);
    var dx2 = this.r * Math.sin(2 * theta);
    var dy1 = this.r * Math.cos(theta);
    var dy2 = this.r * Math.cos(2 * theta);
    ctx.beginPath();
    ctx.moveTo(this.x, this.y - this.r);
    ctx.lineTo(this.x - dx2, this.y - dy2);
    ctx.lineTo(this.x + dx1, this.y - dy1);
    ctx.lineTo(this.x - dx1, this.y - dy1);
    ctx.lineTo(this.x + dx2, this.y - dy2);
    ctx.fillStyle = this.color;
    ctx.closePath();
    ctx.fill();
    ctx.stroke();

9、乱数の取得

    function rand(min, max){    //第一引数に最小値、第二引数に最大値
        return min + Math.floor(Math.random() * (max - min + 1));
    }

10、キーボード入力判定

    document.onkeydown = function(e){
        if(e.keyCode == 37){
            console.log("←");
        }else if(e.keyCode == 38){
            console.log("↑");
        }else if(e.keyCode == 39){
            console.log("→");
        }else if(e.keyCode == 40){
            console.log("↓");
        }else if(e.shiftKey){
            console.log("shiftKey");
        }else if(e.ctrlKey){
            console.log("ctrlKey");
        }else if(e.altKey){
            console.log("altKey");
        }
    };




テキストや動画の丸写しではなく、自分で考えてコーディングできるようになってきたので、javascriptがかなり楽しくなってきました!
でもインベーダーゲームのように、自分の機体を動かしたり、敵をたくさん描画したりするのが、難しくて苦戦しました。
現在は、自分の箱を矢印キーとマウスで動かせられるようにしました。それと、shiftキーを押すことにより弾も打てるようになりました。
そして、敵をたくさん描画して動かすこともできたので、あとはあたり判定を入れれば、シューティングゲームの土台は完成します。

今まで、javascriptはかなり苦手で、ネット上のコードのコピペでしかできなかったのでかなり達成感があって嬉しいです!
とりあえず、シューティングゲームを完成させてブログにあげることが目標です!


Vagrantの時刻がおかしい。

こんにちは!
n-hirokiです!

今回はローカル開発環境のVagrantについてです!
hostはMacです。


Vagrantの時刻を調べる

Vagrantの時刻を調べました。
Vagrantにログインした状態でdateコマンド。

2018年 7月 15日 日曜日 12:57:17 JST
と表示して欲しいのですが...

2018年 7月 12日 木曜日 03:56:12 JST
と表示されました!

なので修正しないといけません。

Vagrantの時刻を修正する

Vagrantの時刻を修正します。

 sudo yum -y install ntpdate

でntpdateをインストールした後、

 sudo ntpdate ntp.nict.jp

これで時刻は修正されるはずなのですが、、、

2018年 7月 15日 日曜日 03:55:05 UTC

と表示されまだおかしいです。
もともとJSTだったのに、UTCに変わってしまいました。
確かに日付は正しくなったのですが、まだ修正できていませんね。

UTCJSTに修正する

  $ sudo rm /etc/localtime
  $ sudo ln -s /usr/share/zoneinfo/Asia/Tokyo /etc/localtime

これでできるみたいです。
ですが、Vagrantにログインしている状態で1行目を実行してみると、

[vagrant@localhost ~]$ sudo rm /etc/localtime
rm: cannot remove `/etc/localtime': そのようなファイルやディレクトリはありません

となってしまいます。
なので、Vagrantにログインしていない状態で実行するのではないか?
と思い、ログアウトして実行してみました。

 $ exit
 $ cd
 $ sudo rm /etc/localtime
 $ sudo ln -s /usr/share/zoneinfo/Asia/Tokyo /etc/localtime

................( ;∀;)

ターミナル自体の時刻が変わってしまいました。
2018年 7月 15日 日曜日 00:01:05 UTC
そしてPCの時計もおかしくなり上記の時刻を表示していました。

ターミナルの時刻を修正したいけど、、、。

いきなり時計がおかしくなってしまったら怖いですね(泣)


ターミナルの時刻も修正しないといけないのかーと思い、調べていたら、ターミナルを閉じてしばらくすると時計の表示が正常に戻ったのでdateコマンドで確かめてみたら戻っていました。

あの現象はなんだったのだろう、、、。
普段ターミナルをあまりいじらない僕にはわからないので、勉強しないといけないですね!

Vagrantの時刻が修正できた!!

ターミナルの時刻がなんとかなったのでVagrantに戻ります!
とりあえず、色々調べても先ほどのやり方しかなさそうだったので、もう一度試すことにしました!

Vagrantfileの下から2行目に追記

 config.vm.provider :virtualbox do |vb|
 vb.customize ["setextradata", :id, 
 "VBoxInternal/Devices/VMMDev/0/Config/GetHostTimeDisabled", 0]
 end

Vagrantにログインした状態です。

  $ sudo rm /etc/localtime
  $ sudo ln -s /usr/share/zoneinfo/Asia/Tokyo /etc/localtime

1行目を実行すると、やはり先ほどと同じく「そのようなファイルやディレクトリはありません」と表示されてしまいました。
ですが、構わずに2行目も実行してみたら時刻が現在時刻に修正されました!!

2018年 7月 15日 日曜日 13:46:57 JST

Macの時計までおかしくなった時はかなり怖い思いをしました。やっぱりターミナルをいじる上であまり知識や経験がないと怖いですね。そのためにローカル開発環境を構築してみようと思っていじっていたのでいい経験になったと思います!
色々経験して理解を深めようと思います。

・参考
https://polidog.jp/2014/01/08/vagrant/

Chart.jsの使い方を簡単に!!

こんにちは、n-hirokiです!

今回は、Chart.jsの使い方です!

Chart.jsの準備

・インストール
GitHubからダウンロードする

Chart.jsはnpmまたはbower経由でインストールできます。


npm v2.7.2

npm install chart.js --save

Bower v2.7.2

bower install chart.js --save



CDN
CDNJS

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.min.js"></script>


・ライセンス
Chart.jsはMITライセンスで利用できます。


Chart.jsを使い始めよう!

1、まずは、Canvas要素を用意します

  <canvas id="myChart"></canvas>

2、Chart.jsをインクルードします。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.min.js"></script>

3、スクリプト作成

  var ctx = document.getElementById('myChart').getContext('2d');
  var chart = new Chart(ctx,{
    type:'line',
    data:{
      labels:["1月","2月","3月","4月","5月","6月","7月","8月"],
      datasets:[{
        label:"テスト",
        backgroundColor: 'rgb(255, 0, 0)',
        borderColor:'rgb(255,0,0)',
        data:[0, 10, 20, 30, 40, 50, 60, 70],
      }]
    },
    options:{
      //ここに設定オプションを記入します。
    }
  });



Canvas.js パラメーターのメモ

こんにちは、n-hirokiです!

今回はCanvas.jsのパラメーターのメモです。
基本的なグラフはこれらのパラメーターを使えれば十分です。

Canvas.jsのパラメータ

・グラフ描画をアニメーション化
animationEnabled

・アニメーション時間
animationDuration

・グラフ上部に記述されるタイトル
title

・タイトル下のサブタイトル
subtitles


・グラフの幅(指定しないと100%になる)
width


・グラフの高さ
height

・棒グラフの幅
dataPointMaxWidth

・横項目の設定
axisX

・縦項目の設定
axisY

・棒グラフにカーソルを乗せた時に表示されるバルーン
toolTip

・グラフを生成する上で必要な値の設定
data

・グラフの種類
type

・グラフの色
color

・グラフにカーソルを乗せるとポインターになるようにする
cursor


Canvas.jsの記述例

  data:[{
      type:"stackedColumn",
      color:'#B0D0B0',
      name:"テスト",
      legendText:"テスト",
      showInLegend:true,
      cursor:"pointer",
      dataPoints:[
        {label:"2018/1", y:200},
        {label:"2018/2",y:250},
        {label:"2018/3",y:270},
        {label:"2018/4",y:150},
        {label:"2018/5",y:300},
      ]
    }

注意:Canvas.jsは商用利用は有償です。


arduinoでのmicroSDカードスロットの使い方

こんにちは、n-hirokiです!

今回は、microSDカードスロットの使い方についてです!

簡単に必要な部分だけ記します。

  //SDカードスタート宣言
  SD.begin(SDカードのピン番号);

  //SDカード内に指定のファイル名が存在するかチェック
  SD.exists(ファイル名);

  //指定したファイルを削除する
  SD.remove(ファイル名);

  //書き込み宣言
  df = SD.open(ファイル名, FILE_WRITE);

  //読み込み宣言
  df = SD.open(ファイル名,FILE_READ);

  //書き込む
  df.println("内容");

  //ファイルを閉じる
  df.close();

  //1文字アスキーコードで読み出す
  df.read();