Maker Faire Tokyo 2020: IoT Samurai Swords and Remote VR Existences
Tags: javascript, webdev, showdev, unity3d
Published: 2020-10-03 15:58:30

---
title: Maker Faire Tokyo 2020: IoT Samurai Swords and Remote VR Existences
description: IoT Samurai sword slashing and VR remote work experiences, seasoned with Steampunk spices
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/bw04m79firi7ao8d1dij.png
---

# Maker Faire Tokyo 2020
[Maker Faire](https://makerfaire.com/) is an event for all types of makers and crafters to exhibit the wonderful art that they've created! October 3rd and 4th were the dates for [Maker Faire Tokyo 2020](https://makezine.jp/event/mft2020/en/), held on-site (and online as well!) with many people being aware and cautious of COVID-19. Everyone wore masks, and every 5 steps would lead them to a hand sanitizer 🧼

This article introduces 2 Kintone hacks made by our team that were exhibited at our Kintone booth.

These 2 hacks were interesting, as they showed 2 different ways in which developers can interact and code with Kintone in their projects and hackathons.

Here's our booth by the way with a lovely Steampunk theme to it ⚙️💖

![A picture of the Kintone booth at Maker Faire Tokyo 2020](https://dev-to-uploads.s3.amazonaws.com/i/e49xpch5ifb5kss0s5gp.png)

# What is Kintone?
[Kintone](https://www.kintone.com/) is a web platform for teams to collaborate productively on their data.

But for developers, you just have to know that it's a cool platform that allows you to create web databases really quickly and easily with no-code, and that's it's extensively customizable with their [APIs](https://developer.kintone.io/).

Below are the exhibits we introduced at our booths.

# Exhibit 1: KATANACTION
Created by [@RyxBB8](https://twitter.com/ryxbb8)

## What is it?
*KATANACTION* is an interactive exhibit, where attendees are challenged to slice their enemies as quick as possible with our IoT samurai sword.

{% twitter 1312217828896858114 %}

Were my sword skillz too fast for you? 🌝

OK, it's actually an exhibit so that attendees will feel like they are super fast anime samurais by just partially pulling a sword out of their sheath and putting it back in again.

### How does it work?

There were two parts to the hack - we made a game on the browser using JavaScript that ran on top of the Kintone platform, and we also put together some IoT.

#### The Game
Kintone has a really neat feature that allows us to [upload some front-end JavaScript files](https://get.kintone.help/k/en/user/app_settings/js_customize.html) to the Kintone App (database). This allowed us to customize the GUI of the Kintone App - we got rid of the default GUI, and replaced it with a game screen and a score ranking page.

The score ranking displayed information stored in the Kintone App, where scores of participants were automatically recorded via REST API after they finished playing the game.

#### The IoT 
The IoT sword was made with:
- a plastic sword with some magnetic sensors to detect when the sword was partially pulled out and back into the sheath
- a cute hand-made doll with an on/off magnet to connect/disconnect the head
- 2 [M5Stick microcontrollers](https://obniz.com/products/m5stickc/) loaded with an [Obniz](https://obniz.com/) OS, located inside both the sword and the doll

#### The flow of the game
The Obniz was controlled by the JavaScript files located on the Kintone App so that the IoT and the Game would work in sync.

The player started the game by pressing on a foot switch that made an enemy pop-up on the browser after a few seconds. When the player pulled the sword partially out of the sheath and back in again, it caused several magnetic sensors to change values, that resulted in the magnet in the doll to turn off, dislocating its head.

# Exhibit 2: Remote Existence
Created by [@will_yama](https://twitter.com/will_yama)

## What is it?

*Remote Existence* gathers small tweets and posts from other team members, and visualizes it into a VR Environment.

{% twitter 1312272029777719300 %}

In Japan, many developers like to post updates of what they are thinking of while they are working, wether it's about what they're trying to code, what they're listening to, or what they'd like to eat.

Other team members like viewing these thoughts, but it's really up to the developer on where they post this content - some like to tweet on Twitter, some like to post in their Slack channel, some like to chat on discord.

*Remote Existence* gathered these scattered information and displayed it all in one VR environment.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yqeztyb3u3ckr6y4kt14.gif)

## How does it work?
As there were many channels of where developer's random thoughts were posted, these were gathered and stored into one central database, Kintone, using some help from Zapier.

We had a custom script running every few seconds in the Unity environment that made [REST API calls](https://developer.kintone.io/hc/en-us/articles/212495188) to the Kintone App, so that information of the latest tweet or post was obtained. This content, name and time stored in this data was processed and visualized into the VR environment.

We also had some large physical buttons in front of our monitor, which when pressed would place new records into Kintone, which were picked up periodically by our Unity code and visualized into the VR environment.

And that's about it - I'm still learning how to use Unity, but everything I learn from it is really exciting and fun. I'm always saved by the awesome asset creators on the store, which makes me love unity even more. I did my best though to add a steampunk theme into the environment by adding pipes, rotating cogwheels, and a victorian top hat for the little dude.

# Photos!
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/chyl5q6e5y4ibz1xccyt.jpg)
<figcaption>The Kintone booth</figcaption>


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/l4uwamraaghj559947su.jpg)
<figcaption>Explaining the VR environment for remote workers</figcaption>


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/18arc528avv52hqdro82.jpg)
<figcaption>Attendees trying out the VR environment and Iot Swords</figcaption>


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yzj77orjzabatl8bbv3f.gif)
<figcaption>Super samurai kid</figcaption>


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vl4m5jow2h5nh5uiazs5.gif)
<figcaption>Super samurai girl</figcaption>


# Final Thoughts
I hope you guys liked these introductions. Kintone can serve as the front-end or the back-end of your projects, wether it would be a web app or an IoT integration.

My favorite exhibit at Maker Faire Tokyo 2020?

Definitely this one:
{% twitter 1312260680783859712 %}