よくある居合斬りシステムをobnizで作ってみた【KATANACTION】

# はじめに

居合斬りでよくこんなシーンないですか？
![image01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/980f8861-1501-c1d8-f86d-238c81de1f03.png)
![image02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/ea8ba3a5-2299-4f86-84bb-03b96ccd7393.png)
![image03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/6796e18d-79e0-86aa-c751-addfaf2ca47d.png)

そして大抵3枚目では **鞘にカタナを戻した** ときに倒れると思います。

そう！！それを作りました！！
ずばり **抜刀して納刀したあとに対象物が切断される** システムです！

どうですか？無駄でしょ？

これをMaker Faire Tokyo 2020のkintoneブースとして展示しました。
(obnizの [開催レポート](https://blog.obniz.com/event/maker-fairef-tokyo-2020-report/#%E3%80%8Eobniz_Board%E3%80%8F%E3%82%92%E6%B4%BB%E7%94%A8%E3%81%97%E3%81%9F%E3%80%81_%E3%82%B5%E3%82%A4%E3%83%9C%E3%82%A6%E3%82%BA%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE_%E3%80%8Ekintone%EF%BC%88%E3%82%AD%E3%83%B3%E3%83%88%E3%83%BC%E3%83%B3%EF%BC%89%E3%80%8F%E3%83%96%E3%83%BC%E3%82%B9) でも紹介してもらいました！)


## 海外ではネタとして使われている！？

意外とこの仕組、海外でも人気の様子。

https://ifunny.co/video/zfiiOixU7
https://ifunny.co/video/absolutely-no-one-anime-swordsman-hCOFn5037

真面目な顔がよりくすっとなりますね〜

# 作ったもの

<blockquote class="twitter-tweet"><p lang="en" dir="ltr"><a href="https://twitter.com/hashtag/MFT2020?src=hash&amp;ref_src=twsrc%5Etfw">#MFT2020</a> <a href="https://twitter.com/hashtag/MFTokyo?src=hash&amp;ref_src=twsrc%5Etfw">#MFTokyo</a> <a href="https://twitter.com/hashtag/kintone?src=hash&amp;ref_src=twsrc%5Etfw">#kintone</a> <a href="https://twitter.com/hashtag/madewithkintone?src=hash&amp;ref_src=twsrc%5Etfw">#madewithkintone</a> <br><br>Absolutely nobody: <br><br>Anime samurais: <a href="https://t.co/rxon290yW1">pic.twitter.com/rxon290yW1</a></p>&mdash; will@kintone (@will_yama) <a href="https://twitter.com/will_yama/status/1312217828896858114?ref_src=twsrc%5Etfw">October 3, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

この時間差が大事なんですよ。
子供にはぜんぜん受けませんでしたが、大人にはくすりと笑ってもらえましたw

# 刀

最近の100均はあなどれないですね〜
まさにIoTでつかってくれと言わんばかりの商品が売ってました！
<img src="https://docs.google.com/drawings/d/e/2PACX-1vQuzcXYCrRzcewSAjBD9Vr8QWio_zQ52dgmyzL5vWzGzQIiQ6ngX2psU8aEypMb4uDZixUBPP-qzICB/pub?w=918&amp;h=687">
まぁ200円でしたがwww

刀身にLEDが内蔵されていて、電池を入れると光る！
<img src="https://docs.google.com/drawings/d/e/2PACX-1vQT0XScQMdypXkr7g9sWzWL8q0IajcHBK7jjk7d_gAkjJAYMJ-_z03-9kVLAlxYclNzws8wYrXSYT76/pub?w=915&amp;h=341">
中身気になるのでとりあえずバラしますよね。中はこんな感じでした。
<img src="https://docs.google.com/drawings/d/e/2PACX-1vStUnLX31ZxBoOHKqtr3AFZ1uEFOLwTXTZA7kTjmtjqaOjcJIQoduoT4z-kiLeXASHAujuD58FWvOwq/pub?w=918&amp;h=684">
うん、ここにM5StickC（Obniz OS）が仕込めそうってことでなんとなく構成が決まりました。

## 仕組み

刀の抜刀納刀をどうobnizで認識するのかですが、ちょうど手元に **磁気接触センサー** があったのでこれを使いました。
刀身に磁気センサーを埋め込み、鞘に磁石をセット。刀を抜き差しすると磁気センサーが反応する。（仕組みはボタンと同じ）
<img src="https://docs.google.com/drawings/d/e/2PACX-1vRK6EfnFFjFNUYsSo3Nou4dO6pH_vMgV9ivY0h3_iJ6btKhH1J5sEYRJQfnKjNAcBgvrc4YUjXwjVsO/pub?w=637&amp;h=183">
こうやって配置すると、`刀を抜く → 接触が離れる → 刀を戻す → 接触される` となり、納刀までが判断できます。
（接触しているときはONです。ボタンを押している時と同じですね）

後はobniz側でカウントアップして2回になったら納刀と判断して処理をすすめる、って感じです。

# 切断される対象

**どうやって切断するのか** これも結構考えるのが大変でした。
納刀したら切断されるってことはデフォルトはくっついていないといけないですし、納刀に合わせて切断されないといけないです。
そして刀側をobniz使うのでこちらもobniz使いたい。。。

ふと、どこかのハッカソンでソレノイド使っているのを思い出し、**あ、ソレノイドで飛ばせばいいのか** と閃きました （感謝）

でAmazonで購入したのがこちら
![スクリーンショット 2020-12-09 19.07.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/4e988233-2f6e-bc29-79e3-bc879113f807.png)

家に届いて気づきました。 **これ飛び出るやつじゃない！！！！！**
そう。ソレノイドはプッシュ式とプル式があるらしい。どうやらプル式のやつを買ってしまったようでした。。
→ いわゆる電磁石ってやつです。電源を入れると磁石がONになり、電源を切るとOFFになる（磁力がなくなる）

ただ、本来の**くっつく**を考えるとこれでもいいか、ってことでそのままこれを使いました。適当ですね。
<img src="https://docs.google.com/drawings/d/e/2PACX-1vQuhVOACDEKJ2Vf5QsHFMlQLamzf8IVX9jR3VVW-6Z02L_S-dGpRJ8M5o6QH6smd7olM1n19cbyKTFR/pub?w=442&amp;h=480">
なんかのゲームに出てきそうな見た目してますが気にしないでくださいw

頭側にはネジが埋め込んであり、それが磁力でくっつく感じです。
ボディは100均のゴミ箱です。この中にobnizがあります。

## 仕組み

プルソレノイドについてはLEDと同じ処理が使えました。`LEDをONにする=ソレノイドをONにする→磁力が発生` って感じ。
たぶん **「obniz プルソレノイド」** とかで検索してもやり方は出てこないと思います。
でも普通のプッシュソレノイドだとサンプルあるのでそれを参考にしました。

# obnizプログラム

作ったコードはこちら。obniz部分だけです。画面周りはお好きに！

```javascript

const obnizStick = new Obniz.M5StickC('XXXX-XXXX');
const obniz = new Obniz('XXXX-XXXX');

let count = 0;
obniz.onconnect = () => {
  const obnizSolenoid = obniz.wired('LED', {anode: 0, cathode: 1});
  obnizSolenoid.on();

  obnizStick.onconnect = () => {
    const obnizButton = obnizStick.wired('Button', {signal: 26, pull: '3v'});
    obnizButton.onchange = state => {
      if (state) count++;
      if (count >= 2) {
        // ブラウザ上でゴニョゴニョ

        setTimeout(() => {
          obnizSolenoid.off();
        }, 1500);
      }
    };
  };
};
```

1.5秒後に切断されるってのが大事。この0.5秒が大事w

# 余談

ちなみにですが、11月11日~13日まで幕張メッセでCybozu Daysというサイボウズの一大イベントがあり、
そこでブースとしてこの仕組みを使ったゲームを披露しました！！
<img src="https://docs.google.com/drawings/d/e/2PACX-1vRP4vSNV2jeUSO3ScIfPmJkknG9tNOaNvexrLz-OCvXM5ao2CoTBLOjjvO87_fTI8XIVz5PUIEawqBq/pub?w=928&amp;h=521">
めっちゃブースにお金かかってる~~~ 
（中身の仕組みはほとんど同じなので、これ自体のコストはこの記事読めば察してくれるはずw）

**「画面上に敵が出てから、抜刀→納刀が早かった方の勝ち」** という2人対戦ゲームになりました。
ちなみに反応速度データの格納にkintone使ってます。あと敵が出てくる画面も。

フロント画面があってJSからデータ操作ができるWebDBの**kintone**と、
マイコン操作がJSからできる**obniz**はめっちゃ相性が良いです！！

# おわりに

最後ついつい本職が出てしまいましたが、obnizはさくっとハードがいじれるので便利！
特にWeb人間にはほぼ敷居なく使えるので最高！

これからも **obnizエバンジェリスト（仮）** としていろいろ活用していきます!!

それでは！≧(+･` ཀ･´)≦