• JBATのMakerFaireTokyo 2023出展作品紹介

    • JBATのMakerFaireTokyo 2023出展作品紹介

    目次 　はじめに 　遊び方 　目的・作品コンセプトの決定 　スマスマボール-for-kintoneの概要 　「スマスマボール for kintone」の制作について 　「スマスマボール for kintone」ハードウェアの構成要素 　「スマスマボール for kintone」ソフトウェアの構成要素 　「アノ・イルカ」の制作について 　「アノ・イルカ」ハードウェアの構成要素 　「アノ・イルカ」ソフトウェアの構成要素 　まとめ

    はじめに

    こんにちは。JBAT開発チームです。 この度様々なご縁からサイボウズとMakerFaireTokyo 2023に共同で出展させていただくことになりました。 JBATとしては自社のソフトウェア技術、ハードウェア技術、及びサイボウズの製品とそのカスタマイズスキルをうまく混ぜ合わせ、 来場してきてくれた皆様に楽しいと思えるものをどういった形で展示できるかを考えてきました。 今回は、「スマスマボール for kintone」全般と「アノ・イルカ」のイルカ部分、kintoneの画面部分を担当させていただきました。

    スマスマボール画像、イルカ画像

    遊び方

    「スマスマボール for kintone」 遊び方 ・kintoneアプリを開いてスタート画面へ！ ・「QanatUniverse Edge」に付属している緑色のボタンが押されることでゲームスタート！ ・ボールを射出してどこかの穴に落とすとkintoneアプリ側でアクション！スコアに反映！ ・最後のボールまで使うと終了！高得点を目指そう！

    「アノ・イルカ」 遊び方 ・kintoneアプリを開いてマイクボタンを押して問いかけてみよう！ ・ちょっと待つとイルカが動いて答えてくれるよ！

    目的・作品コンセプトの決定

    今回作品を作る目的として以下のものです。 ・JBAT、サイボウズの製品をPRすること ・来てくれた方、作品を作る人にものづくりの楽しさを伝えること ・サイボウズとのリレーション強化すること ・社員同士のコミュニケーションを活性化させること ・製品の理解促進とスキルトランスファーを実施すること

    作品のコンセプトとしては来場してくれた方に楽しんでもらえるものを自社の製品を使って作るということです。 こちらで考えていた内容とサイボウズさんが提示してくれたサイバーパンクというブースイメージも奇跡的に合致していたので作成に取り掛かりました。

    「スマスマボール for kintone」の制作について

    「スマスマボール for kintone」を作るということを決定した際、 スマートボールとはなんだろうというところからメンバーで話し合ってすすめました。

    スマートボールはピンボールの一種です。 横モノと呼ばれある穴に入ると玉が増え、その玉を景品と交換することができるパチンコと同じようなゲームです。 実物を見たかったのですが、東京に現存する場所は探してもありませんでしたので、メンバーで秋葉原まで行ってピンボールの研究をしました。

    その後必要な構成要素を書き出して、それを実現するための部材の購入、 スマートボール台と、kintoneの画面側のチーム分けを実施し、実装をはじめました。

    「スマスマボール for kintone」の概要

    概要図

    　

    弊社サービスの「Qanat Universe」に対してEdgeデバイスがボタンスイッチを押すと通信します。 そのボタンが押されたという情報を保持しておき、「kintone」アプリが「Qanat Universe」にその情報を問い合わせることで各種動作します。

    「スマスマボール for kintone」ハードウェアの構成要素

    既存のスマートボール台を購入して使うかどうか迷ったところですが、ものづくりの楽しさを感じるため（予算的にも厳しいため）原料調達から実施していきます。

    今回購入した主なものは以下の内容です。 ・盤面となる板材(900 x 450 x 15, 900 x 450 x 5)、角材 ・木ネジ、釘（レール釘） ・表面に貼るカッティングシート、シール ・風車となる低速モーター ・ピンボール打ち出し用の器具、ベアリングボール（20mm） ・スイッチセンサー、電子工具類


    まずは大枠の作成です。板を張り合わせていきます。（ヒノキが硬い！木ネジが入りづらいので硬い材料はおすすめしません）


    張り合わせた後、ホールソー(30mm)で天板に穴を空けていきます。摩擦で焦げて煙があがります。(15mmは厚すぎた可能性あり。10mmぐらいで十分だと思われる。)
    　　　　　　


    仮で釘打ちして動作確認をします。思ったよりも釘を打つことでボールが減速してくれました。
    　　　　　　


    表面を加工していきます。カッティングシートを貼ることで摩擦を減らします。見た目もよくなりました。
    　　　　　　


    釘打ちと動作ギミックを作成し、装飾します。
    　　　　　　


    背面にスイッチを取り付けていきます。
    　　　　　　


    弊社サービス「Qanat Universe」の接続をしていきます。
    「Qanat Universe Edge」を使うことでQanatUniverseに対してセンサー情報を通知することが可能です。 通知した値をQU側に保持させ、kintone側からリクエストした際にその値を渡します。
    　　　　　　


    配線、テストを実施して梱包です。会場で最後のセットアップです！



    「スマスマボール for kintone」ソフトウェアの構成要素

    kintoneプラグインを適用することでkintoneアプリのヘッダー部分にゲーム画面が入ります。

    ハードウェアのスイッチが押されるたびに、ゲーム画面が遷移していきます。 ５つのボールが無くなったらゲーム終了です！


    ～主な画面遷移～
    ・スタート画面
    　　　　　
    ・ゲーム画面
    　　　　　
    ・宇宙人との邂逅画面
    　　　　　
    ・ボーナス画面
    　　　　　
    ・ランキング画面
    　　　　　



    「アノ・イルカ」の制作について

    サイボウズのメンバーと会話し、どんなものが作るかを決めて取り掛かりました。 弊社からQanat Universeを提供し、その上でkintoneへの通信やChatGPTへの通信を実現しています。

    いるかトーク概要

    「アノ・イルカ」ハードウェアの構成要素

    イルカを３Dプリンターを使って造形していきます。 造形したイルカに柔らかくした和紙を貼り付けて形作ります。 　　　　

    駆動部分は口、ヒレ、胴体の三か所です。

    口
    ・動きを早くするためにソレノイド（電磁石）を使っています。 ・バネの力で通常は閉じており、コマンドで口を開きます。 ・ソレノイドの力はテグス（釣り糸）で伝えています。ソレノイドを引くことにより、テグスが口を引っ張り開きます。

    　　　　

    ヒレ
    ・ヒレも動きを早くするためにソレノイドを使っています。 ・ヒレ自身の重さで通常は下がっており、コマンドで上げます。 ・ヒレはヒンジで胴体に接続されています ・ヒレの重みで垂れ下がっています ・おなかにあるソレノイドでテグスを引っ張ることによりヒレが持ち上がります ・テグスの固定には爪楊枝を押し込んでいるため高さの調整ができるようにしています


    　　　　


    胴体
    ・動きは早くないためサーボモーターを使っています。 ・上下させるのにギアではなくやはりテグスを使っています。 ・輪にしたテグスで胴体を引っ張っており、輪を横に広げることにより高さを変えています。

    　　　　
    　　　　


    Arduino Pro Microを使ってシリアル通信をPCから受けることで動作します。


    「アノ・イルカ」ソフトウェアの構成要素

    kintoneの画面で以下のシステムを実現していきます。 ・Qanat Universeに接続して、サイボウズさん作成のChatGPT用のAPIに接続してイルカからの応答を得る ・Chromeブラウザに搭載のシリアルポート出力用機能を使ってイルカを動作させる ・Chromeブラウザに搭載のSpeechRecognition機能を使ってマイク入力と音声解析を使う

    画像について WindowsXPのアノ壁紙風なものをAI出力します。今回は生成に「Fotor」を利用させてもらいました。

    Windows XPの画像風なものを出力したプロンプト windows xp, green hill, sky, blue dolphine illustration,

    イルカは生成されなかったので例のイルカの画像に見立てた画像を元に生成します。 生成されたイルカ画像は透過処理されていないため、windows標準搭載のペイント3Dを使って透過処理をさせます。 その後吹き出しをつけて画像の完成です。

    kintoneアプリはカスタマイズビューを使います。 その後CSSからbase64にした画像を読み込ませます。 kintoneで手間を掛けずに描画する方法はこの方法が一番楽に感じています。

    次にイルカの音楽を鳴らす処理を実装します。 音楽はkintoneの添付ファイルフィールドに登録したURLをコピーして音源を呼び出します。

    シリアル通信にはchromeに搭載されているシリアル通信用の機能を使います。 現在はChromeなどの一部のブラウザにしか対応していません。 https://developer.mozilla.org/ja/docs/Web/API/Navigator/serial https://developer.mozilla.org/ja/docs/Web/API/Serial/requestPort

    音声解析にはブラウザの機能を使っています。 「kintone」などの固有名詞には対応できていないところはありますが機能してくれます。 https://developer.mozilla.org/ja/docs/Web/API/SpeechRecognition

     

    まとめ

    以上、作品の紹介でした。

    ものづくりを通してメンバーのスキルを再認識し、新しい技術を触れることができたことはとてもよかったです。 また、コロナ騒動がありコミュニケーションが希薄になりかけていたメンバーとも話すにもいいきっかけになりました。 こういった機会がありましたら、また参加してみたいです。

    より詳細なことを知りたいという方がいらっしゃいましたら、弊社までご連絡ください。