UIFlow で ATOM U（USBメモリ的な形の M5Stack系デバイス）をシンプルに試す

ATOM U に関して、以下の Qiita の記事で Arduino IDE を使ったお試しはやっていたのですが、UIFlow との組み合わせは、まだ試せていませんでした。

●ATOM U と M5Stamp C3U の情報を調べた時のメモ（＋ ATOM U を試した時の様子） - Qiita
　https://qiita.com/youtoy/items/f471bf0dcd5fd34dca8c

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">もくもくのネタ考え中。<br><br>そういえば、これまだ、きちんと試してなかったな。<a href="https://twitter.com/hashtag/UIFlow?src=hash&amp;ref_src=twsrc%5Etfw">#UIFlow</a> <a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a><br><br> <a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://t.co/wkxI1A479N">pic.twitter.com/wkxI1A479N</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1494861954888134661?ref_src=twsrc%5Etfw">February 19, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

そこで今回、シンプルな内容でお試しをしていきます。

## 下準備
UIFlow で ATOM U を扱う準備として、M5Burner でファームウェアの書き込みを行います。

M5Burner の左メニューの「ATOM」を選ぶと、右側の中に ATOM U のファームウェアを入手・書き込むための部分があります。
![M5Burner](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/73d4f09a-435f-e1fc-76ce-00744ba99c59.png)

そして、ファームウェアの書き込み後、UIFlow用のキー情報を以下の手順で確認しておいてください。
　1）以下のツイートの 2つ目の画像の画面で「Configuration」ボタンを押す
　2）その後に出てくる画面（＝ 以下のツイートの 1つ目の画像の画面）の中で、「ApiKey」と書かれた部分があるので、その右に書かれた文字列を確認

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/UIFlow?src=hash&amp;ref_src=twsrc%5Etfw">#UIFlow</a> 用のキー情報を確認。<a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a><a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://t.co/dBqwzgqQAT">pic.twitter.com/dBqwzgqQAT</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1494865993960947712?ref_src=twsrc%5Etfw">February 19, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

まずは、ファームウェアの書き込みを行いましょう。

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">手をつけはじめた。<a href="https://twitter.com/hashtag/UIFlow?src=hash&amp;ref_src=twsrc%5Etfw">#UIFlow</a> <a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a><a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://t.co/8VeoDtJv6g">pic.twitter.com/8VeoDtJv6g</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1494864942633484288?ref_src=twsrc%5Etfw">February 19, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

そして、[UIFlow](https://flow.m5stack.com/)に アクセスして、先ほど確認しておいたキー情報を入力しましょう。
また、ATOM U のイラストが出ているものを選びます。

![UIFlow上での設定](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/ed4f0023-8120-c5f1-1a46-0553aa991a8a.png)

その後は、プログラムを作っていけば OK です。

## UIFlow ＋ ATOM U を試して動かす
2種類のお試しをやったので、それぞれ動画とブロックのプログラムの内容を掲載します。
作ったものは、どちらも補足が不要なくらいにシンプルにしてます。

ちなみに ATOM U は、このような感じでモバイルバッテリーに直差ししています。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ATOM U はモバイルバッテリー に差してみた。<br>それと無事に <a href="https://twitter.com/hashtag/UIFlow?src=hash&amp;ref_src=twsrc%5Etfw">#UIFlow</a> にはつながった。<a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a><a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://t.co/UYLZLSeWoX">pic.twitter.com/UYLZLSeWoX</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1494867096379203584?ref_src=twsrc%5Etfw">February 19, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

### お試し：その1

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ATOM U ＋ <a href="https://twitter.com/hashtag/UIFlow?src=hash&amp;ref_src=twsrc%5Etfw">#UIFlow</a> のシンプルなお試し用に作った、ブロックのプログラム。<a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a><a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://t.co/vdNrwF4uoE">pic.twitter.com/vdNrwF4uoE</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1494871024898555906?ref_src=twsrc%5Etfw">February 19, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

### お試し：その2

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ATOM U ＋ <a href="https://twitter.com/hashtag/UIFlow?src=hash&amp;ref_src=twsrc%5Etfw">#UIFlow</a> のお試し、続きとしてツイートしていたほうのブロックのプログラム。<a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a><a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://t.co/MZPmCpd7PE">pic.twitter.com/MZPmCpd7PE</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1494876640308232193?ref_src=twsrc%5Etfw">February 19, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## おわりに
ATOM U に関して、UIFlow を使ったお試しを軽くやってみました。
今後は、何か面白い使い方ができないか、考えていければと思います。