内容を修正したwebアプリを再度デプロイする

参考

・EC2にDockerとDocker-composeをインストールする

kacfg.com

・使ってないコンテナを削除するコマンド

tektektech.com

docs.bitnami.com


    ssh -i keyの名前 ec2-user@IP
    "制作したイメージを全消去する"
    docker system prune -a --volumes
    cd ..
    "ディレクトリを消去する"
    sudo rm -rf review_test_app
    "確認"
    ls
    "クローンする"
    git clone https://<自分のリポジトリ>
    "バックグラウンドで起動"
    docker-compose up -d
    

M5Stack用ジョイスティックユニットを使ってみた

今回は以下のジョイスティックを使ってみようと思います。

M5Stack用ジョイスティックユニット [U024]www.switch-science.com

 

M5Stack用と書いてありますが、私のPCではM5Stackが認識されなかったためM5Atomを使用しました。

※認識されないときはいろいろドライバを入れる必要があるようですが、結局わからずじまいでした。

dev.classmethod.jp

 

M5Atomをに変えたことにより使用することができました。

ただ、M5Atomのスケッチ例のJOYSTICKはサンプルにもかかわらず、動かなかったため、少し修正を加えました。

プログラムは以下のようにしました。


    /*
*******************************************************************************
* Copyright (c) 2021 by M5Stack
*                  Equipped with Atom-Lite/Matrix sample source code
*                          配套  Atom-Lite/Matrix 示例源代码
* Visit the website for more information:https://docs.m5stack.com/en/unit/joystick
* 获取更多资料请访问:https://docs.m5stack.com/zh_CN/unit/joystick
*
* describe: JOYSTICK.
* date:2021/8/30
*******************************************************************************
  Please connect to Port,Read JOYSTICK Unit X, Y axis offset data and button status
  请连接端口,读取操纵杆单位X, Y轴偏移数据和按钮状态
*/

#include M5Atom.h

#define JOY_ADDR 0x52 //define Joystick I2C address.  定义摇杆的I2C地址

void setup() {
 M5.begin(true, false, true);
  //M5.begin();//ここを変えました
  Serial.begin(115200);
  Wire.begin(26,32);
}

char data[100];
void loop() {
  static uint8_t x_data,y_data,button_data;
  Wire.requestFrom(JOY_ADDR, 3);  //Request 3 bytes from the slave device.  向从设备请求3个字节
  if (Wire.available()) { //If data is received.  如果接收到数据
    x_data = Wire.read();
    y_data = Wire.read();
    button_data = Wire.read();
    sprintf(data, "x:%d y:%d button:%d\n", x_data, y_data, button_data);
    Serial.print(data);

    Serial.printf("x:%04d y:%04d button:%d\n", x_data, y_data, button_data);
  }
  delay(200);
}

--------------------------------------------------------------------------------------

ちなみに、Arduino IDEでは以上のファイルをAtomに書き込むことで動きますが、VScodeのPlatformIOを使用している人は少し手間が必要(ライブラリのダウンロードなど)です。

何をすればよいのかというと、

  1. main.cppの一番上に#include Arduino.hを追加します
  2. 以下のアイコンをクリックしてからLibraliesを選択し、M5AtomライブラリとFastLEDライブラリ(なんで必要かわからん)をプロジェクトに追加します
  3. シリアルモニタのbps値をそろえるためにmonitor_speed = 115200platformio.iniの一番下に記述します。

Platform IO

これで書き込むといけました。

Fafeicy アーケードゲームボタンキット ゼロディレイアーケードゲーム DIYキットパーツ 10ボタン+ジョイスティック+ USBエンコーダ用 MAME PC を使用してみる

今回はこちらを使用していこうと思います。

www.amazon.co.jp

調べてみたところ、意外と仕様書とか使ってる人の記事とかが無くてわかりづらかったです。

参考はこちらになります。

lotuteon.blog.fc2.com

上の参考記事から取ってきた下の写真がわかりやすかったです。

スイッチのコントローラとどこが対応しているのかを示しているものになります。

スイッチのコントローラとの対応関係

こちらを動かすのに必要なのは、

上で示すDIYキットとJoyToKey(PCソフト)だけです!

 

JoyToKeyのダウンロードに関してはこちらの記事。

challenge-think.hatenablog.com

 

簡単ですね!

 

では、どのようにつなげるのか見ていきましょう。

ケーブルは二種類あります。

  1. 赤/黒(ボタン用)
  2. 青/白(スティック用)

それぞれ飛び出している金具に差し込みます。

ケーブルのつなぎ方

USBJoystick

ボタンとジョイスティックをつないで、片方がUSB端子になっているケーブルを左上の部分に差し込んでパソコンとつなげます。

 

あとは、JoyToKeyを立ち上げてジョイスティックやボタンを動かしてみると反応していることが確認できました。

Vue.jsが反映されない

初めに

DjangoとVue.jsを使用してアプリ開発をしていてハマってしまった点がありました。

全然気が付けなく、2,3日奮闘してやっと今日気が付いたので、忘れないように書いておきます。

エラー

エラーとしては、Djangoのテンプレート言語を使用してVue.jsを<script>タグで記述していました。

二つのページそれぞれで中身が全く同じVueを定義していたのですが、片方のページではしっかりと動き、もう一方ではリアクティブに動いてくれませんでした。

 

Djangoのテンプレート言語を用いて、base.htmlからCDNの部分一部引っ張ってくる方法をしていました。

試行錯誤

まず初めにエラーの原因として考えたのは、同じCDNを複数回呼んでしまっている事でした。

次に考えた原因は、vue.jsの書き方idの不一致やv-modelの値の不一致などを考えました。

次に考えた原因は、二つのHTMLファイルで同じ名前の関数を定義している(el, id は異なる)ことがダメなのではないのかという事。

 

しかし、以上のどれも解決できませんでした。

console.logなどで確認してみたところ、初めの一回目はしっかりとVueが作用しているようでした。

そのため、Vueの書き方が間違っているという事もなさそうでよりわからなくなりました。

原因

Vueがちゃんと動いているページと細かく見比べたときに、やっと原因が分かりました。


        {% block content %}
        -----
        {% block cdn %}
        --
        {% endblock cdn %}
        {% block script %}
        --
        {% endblock script %}
        
        {% endblock %}
    

と{% endblock %}の位置がおかしい事が原因でした。 いろいろ書き足していくうちにごちゃまぜにしてしまっていました。

以下のように書き換えると嘘みたいにちゃんと動くようになったので、良かったです。


        {% block content %}
        -----
        {% endblock content %}
        {% block cdn %}
        --
        {% endblock cdn %}
        {% block script %}
        --
        {% endblock script %}
    

HTML/CSSボタンを自由自在に配置する

HTML/CSSを書いていると、ボタンの位置をほかの要素にかぶせたいとき、たまにありますよね。。。

 

そんな時はposition: relativeを使用してみましょう

例えばこんな感じにすることができます。

ボタンの位置変更


CSSは以下のように書けばいいです。


    .box{
    position: relative;
    height: 80px;
}
.box button{
    padding: 0;
    position: absolute;
    left: 300px;
    top: -13px;
    width: 40px;
    height: 40px;
    text-align: center;
}

親要素のクラスをboxとしたとき、親要素のpositionをrelativeにします。 そして、その子要素のpositionをabsoluteにしてleftとtopの値を変更して微調整しましょう。

ポテンショメーターの値をNode.jsで取得したとき、出力値がおかしい

今回の記事は以下の記事の続きになっています。

challenge-think.hatenablog.com

 

ポテンショメータから受け取った値をNode.jsでコンソール画面に書き出してみたところ、0~5Vで変化する値のはずが、途中で7やら98やら変な値が取れました。

 

ここで、原因がわからずにハマってしまいました。。。

 

そこで、送られてくるデータをすべて確認したところ、


        0.98
        0
        .98
        3.23
        2
        .32
        1
        .22
        2.33
    

等、変な位置で切り取られていることが判明しました。 この問題に対する本質的な対処法に関してはわかりませんでしたが、 (送られてくる文字数)==4でちゃんとしたデータを抽出することで解決しました。

~追記(2022.10.24)~

後日、再度console.log(data.toString().split(''));とデータを出力してみると、以下のように区切りがおかしいことが判明しました。


[ '5', '.', '0', '0', '\r', '\n' ]
[ '5', '.', '0', '0', '\r', '\n' ]
[ '5', '.', '0', '0', '\r', '\n' ]
[
  '5',  '.',  '0',  '0',
  '\r', '\n', '5',  '.',
  '0',  '0',  '\r', '\n'
]
[
  '5',  '.',  '0',  '0', '\r',
  '\n', '5',  '.',  '0', '0',
  '\r', '\n', '5',  '.', '0',
  '0',  '\r', '\n'
]
[
  '5',  '.',  '0',  '0',
  '\r', '\n', '5',  '.',
  '0',  '0',  '\r', '\n'
]
[
  '5',  '.',  '0',  '0',
  '\r', '\n', '5',  '.',
  '0',  '0',  '\r', '\n'
]
[ '5', '.', '0', '0', '\r', '\n' ]
[ '5', '.', '0', '0', '\r', '\n' ]
    

ボーレートは正しいのになんでかはまだわかっていませんが、対処法としては、

volt = data.toString().split('\n');
VOLT=volt[0].trim();

とすると、ほとんどの値を取得することができます。

Arduinoに何もつないでないのにanalogRead()が反応する

少し気になったので調べてみたところ、何も接続されていないピンに対して、analogRead()を実行しても一応値はとれるようです。

 

値は様々な要因によって不規則に変動しており、手を近づけるだけでも変化したりするようです。

 

参考はこちら。

www.musashinodenpa.com