赤字部分が核心部分である！JQUERYでA REFを操作して飛んでいった先でDCモータを操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>obniz App</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
crossorigin="anonymous"
/>
<link
href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
rel="stylesheet"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
type="text/css"
href="https://obniz.com/css/app-common.css"
/>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://obniz.com/js/popper-1.12.9/popper.min.js"></script>
<script src="https://obniz.com/js/bootstrap-4.0.0/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm nav-app">
<a class="navbar-brand" href="/webapp">obniz WebApp</a
>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a
class="nav-link"
href="/webapp/6?appFlow"
><i class="far fa-question-circle"></i> <span class="sm-none"
>How to Use</span
></a
>
</li>
</ul>
<a href="/console/webapp"
><i class="far fa-times-circle"></i> END</a
>
</nav>
<script src="https://unpkg.com/obniz@3.1.0/obniz.js" crossorigin="anonymous"></script>
<style>
.control-set{
margin: 0 auto;
}
.control-set button{
background-color: #A9AAAA;
position: relative;
padding: 2rem 2.5rem;
font-size: 30px;
margin-bottom: 10px;
border-bottom: solid 2px #3E3A39;
}
.control-set button:hover{
background-color: #00A4E3;
color: #FFF;
-webkit-transform: translateY(2px);
transform: translateY(2px); /*下に動く*/
border-bottom: none;
}
.control-set {
text-align: center;
max-width: 800px;
margin: 0 auto;
}
</style>
<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<div id="obniz-debug"></div>
<div class="container app-content">
<div class="app-content_head">
<h1>RC car Controller</h1>
</div>
<div class="app-content_body">
<div class="bg-white app-content_body-inner">
<div class="control-set">
<button id="lf" class="btn"><i class="fas fa-arrow-up"></i></button>
<button id="rf" class="btn"><i class="fas fa-arrow-up"></i></button><br/>
<button id="lb" class="btn"><i class="fas fa-arrow-down"></i></button>
<button id="rb" class="btn"><i class="fas fa-arrow-down"></i></button>
</div>
<script>
var obniz = new Obniz("OBNIZ_ID_HERE");
obniz.onconnect = async function () {
var motorA = obniz.wired("DCMotor", {forward:3, back:2});
motorA.power(40);
var motorB = obniz.wired("DCMotor", {forward:0, back:1});
motorB.power(40);
$("#lf").on('touchstart mousedown', ()=>{
motorA.move(true);
})
$("#lf").on('touchend mouseup',()=>{
motorA.stop();
})
$("#lb").on('touchstart mousedown',()=>{
motorA.move(false);
})
$("#lb").on('touchend mouseup',()=>{
motorA.stop();
})
$("#rf").on('touchstart mousedown',()=>{
motorB.move(true);
})
$("#rf").on('touchend mouseup',()=>{
motorB.stop();
})
$("#rb").on('touchstart mousedown',()=>{
motorB.move(false);
})
$("#rb").on('touchend mouseup',()=>{
motorB.stop();
})
}
</script>
</div>
</div>
</div>
</body>
</html>
