Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@judgeee-wase

ありきたりなボタンをかわいくしたらニヤけたって話

[まず初めに]

皆さん(不特定多数)お久しぶりです。まだまだ寒さが堪えますね。
最近、筆者は鼻水が止まらなくて、

「つ、遂にコロナウイルスに感染したかも...」

と、勝手にパニくっていたのですが、花☆粉☆症でした..めちゃ飛んでますね..
余談なんですが、最近流行りの”コロナウイルス”、どうやら日本では4~5月ごろにパンデミックが起こりうるそうで...。マスク足りない...買いためないと死ぬ...ぐはぁぁぁ...

[ところで本題]

最近、使える時間が急に増え、ゴミカスなソフトスキルを磨こうとHTMLやらCSSを触っていたのですが、これをObnizに適用してみようと思ってました。

んで、何に適用しようか考えて、ほぼObniz触ったことのある人の多くが作ったであろう
                ”Obnizラジコン”  
に適用してみることにした。
ソースコードを以下に貼っておきます。参考にしてください。また、コードをいじって、変化するところさえわかれば、自分だけのObniz スイッチができます。

大雑把にこんな感じでした。
(数ヶ月ぶりにqiita開いたらこんな下書きがあっだけどもう覚えてない)


<!DOCTYPE html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
  <script src="https://unpkg.com/obniz@3.2.0/obniz.js"></script>
 <style>
  .forward {
  display: inline-block;
  text-decoration: none;
  background: #ff8181;
  color: #FFF;
  width: 120px;
  height: 120px;
  line-height: 120px;
  border-radius: 50%;
  text-align: center;
  font-weight: bold;
  overflow: hidden;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 3px #bd6565;
  transition: .4s;
}
  .forward:active {
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
  border-bottom: none;
}


  .back {
  display: inline-block;
  text-decoration: none;
  background:#75A9FF    ;
  color: #FFF;
  width: 120px;
  height: 120px;
  line-height: 120px;
  border-radius: 50%;
  text-align: center;
  font-weight: bold;
  overflow: hidden;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 3px #003366;
  transition: .4s;
}
  .back:active {
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
  border-bottom: none;
}

  .turnl {
  display: inline-block;
  text-decoration: none;
  background:#00BB00;
  color: #FFF;
  width: 120px;
  height: 120px;
  line-height: 120px;
  border-radius: 50%;
  text-align: center;
  font-weight: bold;
  overflow: hidden;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 3px #007700;
  transition: .4s;
}
.turnl:active {
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
  border-bottom: none;
}

  .turnr {
  display: inline-block;
  text-decoration: none;
  background: #FFCC33;
  color: #FFF;
  width: 120px;
  height: 120px;
  line-height: 120px;
  border-radius: 50%;
  text-align: center;
  font-weight: bold;
  overflow: hidden;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 3px #999966;
  transition: .4s;
}
  .turnr:active {
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
  border-bottom: none;
}

  .stop {
  display: inline-block;
  text-decoration: none;
  background: #FF3300;
  color: #FFF;
  width: 120px;
  height: 120px;
  line-height: 120px;
  border-radius: 50%;
  text-align: center;
  font-weight: bold;
  overflow: hidden;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 3px #663300;
  transition: .4s;
}
  .stop:active {
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
  border-bottom: none;
}

  h1{
  position: relative;
  padding: 0.6em;
  background: -webkit-repeating-linear-gradient(-45deg, #fff5df, #fff5df 4px,#ffe4b1 3px, #ffe4b1 8px);
  background: repeating-linear-gradient(-45deg, #fff5df, #fff5df 4px,#ffe4b1 3px, #ffe4b1 8px);
  border-radius: 7px;
  }
  h1:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #ffebbe;
  width: 0;
  height: 0;
}
  </style>
</head>
<body>
<div id="obniz-debug"></div>
<h1> Obnizラジコン スイッチ</h1>  
  <a href="#" class="forward">前へ</a>
  <a href="#" class="back">後ろへ</a>
  <a href="#" class="turnl">左回転</a>
  <a href="#" class="turnr">右回転</a>
  <a href="#" class="stop">STOP</a>

<script>
  var obniz = new Obniz("02243740");
  obniz.onconnect = async function () {
      var motor_l = obniz.wired("DCMotor",{forward:3,back:2});
    var motor_r = obniz.wired("DCMotor",{forward:0,back:1});

      $("#forward").on("click",function(){
       motor_l.forward();
       motor_r.forward();
      })
      $("#back").on("click",function(){
       motor_l.reverse();
       motor_r.reverse();
      })
      $("#turnl").on("click",function(){
       motor_l.reverse();
       motor_r.forward();
      })
      $("#turnr").on("click",function(){
       motor_r.reverse();
       motor_l.forward();
      })
      $("#stop").on("click",function(){
       motor_l.stop();
       motor_r.stop();
      })


  };
</script>
</body>
</html>

0
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
judgeee-wase
Iot完全初心者です。どんどん頑張って吸収していくぞ!✌️

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
0
Help us understand the problem. What is going on with this article?