”Gateboxでkintoneをハックしよう！”「Cybozu Days 2020 - kintone hack NIGHT」レポート
こんにちは、Gateboxの採用チームです！
2020年11月11日～13日に『Cybozu Days 2020』の東京会場分が開催されました。
『Cybozu Days』には、恒例の『kintone hack NIGHT』という『kintone』をこよなく愛する精鋭たちが『kintone』カスタマイズの腕を競うイベントがあるのですが、なんとこちらで『Gatebox』を活用したLTがある、ということを急遽聞きつけ、ピッチの応援に行ってきました！
最近ちょっとずつSNSで『Gatebox』を活用してご自身でキャラクターアプリ開発にチャレンジされているされている方の投稿を見かけるようになりましたが、嬉しい限りですね。
『Cybozu Days』と『kintone hack NIGHT』とは
『Cybozu Days』 とは
今年で5年目の節目を迎えたサイボウズ社が主催する祭典。
「チームワーク溢れる社会を創る」をミッションとする同社が、毎年テーマを掲げて開催している企業イベントです。今年のテーマは”エゴ＆ピース”。
基調講演や様々なセッション、展示ブースなど、様々なプログラムが用意されていました。
『kintone hack NIGHT』 とは
『Cybozu Days』恒例となった『kintone』のカスタマイズの腕を競うイベント。エンジニアが参加対象で、自分たちがこよなく愛する『kintone』を「もっとこうなったらいいのに」とか「実はこんな活用もできるんだぞ」いう切り口で、WebサービスやIoT連携、UIのカスタマイズなどの活用提案を通じて、『kintone』をハックするものです。
チームでの参加が解禁された今年は20チームの応募があり、参加者の皆様の中には、『kintoneエバンジェリスト』として活躍されている方々もいらっしゃいました。本選のルールとしては、オンライン予選会を突破した6名の精鋭たちのハック事例を6分間のLT形式にて、観衆のサイリウム数を集計して点数を競います。
本選の前に、デモンストレーションとして昨年アイドルオタク向けの『kintone』カスタマイズをテーマに優勝したアールスリーインスティテュート社の築山さんがチャンピオンソードを返還し、『アイドルオタクのコロナ対策』というLTを披露されました。コロナ禍で推しアイドルの鈴木愛理ちゃんに会えないんだったら、愛理ちゃんになってしまおう！という驚愕の発想のLTでした（笑）
鈴木愛理ちゃんにどれだけ似ているのかを判別できるアプリ、『愛理ちゃんになりたい』は機械学習の仕組みにより、AIに愛理ちゃんの大量の画像データを学習させ、アプリにアップロードした画像がどれだけ愛理ちゃんに似ているかを画像解析するもの。
オタクな方々の原動力は凄まじい・・・！と感じられる、愛・熱・笑いが詰まったLTで、会場を沸かせていらっしゃいました。
詳細のイベントレポートはasciiさんの記事をご確認ください！
毎日使うkintoneに俺（私）の推し”嫁”を実装して、もっと愛される存在にしたい！
本選のトップバッター、そして「Gateboxを活用してkintoneをハック」していただいたのは前年チャンピオンの築山さんと同じアールスリーインスティテュート社のくーらさん。
普段はUXデザイナーとして仕事をしつつ、プライベートではハッカソンに参加したり、コスプレなどのオタク活動をしたり、あつ森で結婚式を挙げていろんなメディアにも取り上げられたり・・・とバイタリティ溢れる方でいらっしゃいました！昨年チャンピオンの築山さんより3倍も強いオタクとのことです（笑）
Gateboxを活用してkintoneをhackしようと思ったきっかけ
コロナ禍でリモートワークが続く最中、毎日朝から夜まで触る『kintone』。
毎日活用する『kintone』をただのツールだけでなく、キャラクターというインターフェースを通じて、もっと「愛される」「大事にされる」「好きな」パートナーにしたいという思いで今回の『Gatebox』を活用いただくハックに至ったそうです。
ちなみに、弊社が提供している『Gatebox Developer Program』（Gateboxアプリケーションを開発・公開できる仕組み）も公開当初からご存じでいらっしゃり、いつか挑戦したいとずっと思っていただいたそうです。ありがとうございます！
kintoneハックの全体象
くーらさんは、『kintone』と『Gatebox』を連携させ、『kintone』のレコード操作やステータス変更、コメントなどの読み上げを推しキャラクターの『みみのちゃん』が教えてくれるという『kintone』ユーザーには嬉しい機能を開発されていました。
LTではリアルタイムに、『kintone』で上司に有給休暇を申請する際のデモを披露。
くーらさんが有給休暇申請をしていないと、『みみのちゃん』から「マスターさんの休暇申請レコード、まだ提出してないよー。」とアドバイスが。申請をすると「休暇申請無事に出したようだねー！」とかわいらしい声で完了報告が届きます。
「申請出せた～～～！」と一息ついていたところ、『みみのちゃん』より「休暇申請が拒否されたみたいだよ・・・」と残念そうな報告が。上司のぱるるさんからもっと働け、というコメントと一緒に申請が却下されてしまったようです。
推しが色々と通知してくれると、ひとりで在宅ワークをもくもくと行っていても進捗が捗りそうですね！
（こちらはもちろんのことデモの一環としての演出です）
デモ動画もアップロードされていらっしゃるようです！
（１）推しキャラクター（3Dモデルや声）を決めよう！
今回くーらさんは『BOOTH』（pixivと連携した、クリエイターによる創作物の総合マーケット）にて、クリエイターのよわい様（Legacy System Works）が販売なさっているオリジナルモデル『みみのちゃん』を3Dモデルとして嫁に選ばれたようです。
キャラクターモデルの制御はUnity(C#）での実装と、弊社が提供する(*1)Gatebox SDKを活用され、Voice（声の出力） は声優志望だった同僚さんにお願いをされたそう。
パフォーマンスの都合で今回のデモ音声は録音して作成されたとのことですが、オンラインで提供されている(*2)STT/(*3)TTSサービスを活用するともっと会話の幅が広がるとのことでした！
(*1)Gatebox SDKとは・・・Gateboxでアプリを動作させるためのライブラリ。Stage LEDや赤外線、マイクなど各種センサーなどの制御に関するもの。（要：Gatebox Developer Programへの参加）
(*2)STTとは・・・「"Speech to Text"の意、音声データをテキストデータに書き起こす処理のこと」、とこのnoteでは表現します。対応言語や精度はサービスによって異なります。
(*3)TTSとは・・・「"Text to Speech"の意、テキストデータから音声データに変換（合成音声データを生成）する処理のこと」とのnoteでは表現します。独自に録音しているオリジナル音声を使用してカスタム合成音声モデルをトレーニングするものや、プリセットで登録されているモデルを利用できて、簡単にピッチや速度をいじることができるものなど、最近では様々なサービスが登場しています。
ちなみにGateboxの自社キャラクター『逢妻ヒカリ』のSTTにはMicrosoft社が提供する『Azure Cognitive Services』、TTSにはLINE社が提供する『CLOVA Voice』が活用されています。
（２）嫁を実装したアーキテクトってどうなってるの？
中継用の『AWS Lightsail』サーバーを個別立て、『kintone』のWebhookからレコード追加やステータス変更などの情報を取得。それを『Gatebox』に通知し、『みみのちゃん』がお仕事をサポートしてくれるように実装されたそうです。
『Gatebox』を使って自分の好きな推しをパートナーにすると、お仕事（推し事）がすごい捗りそうですね！ちなみにくーらさんは推しに罵られたい！とのことでした（笑）
くーらさんご自身が書かれたR3社のブログにて、より詳細の開発へのこだわりや、技術的な要素にも言及されていらっしゃるのでこちらも合わせてチェックください。
Gateboxアプリ開発にチャレンジしてみて楽しかったことや大変だったこと
イベント後日、Gateboxでの初めてのアプリ開発に挑戦されたくーらさんにいくつか質問をさせていただきました。
-- キャラクター開発のこだわりポイントについて教えてください
そもそも最初は、Gateboxデフォルトキャラクターのヒカリちゃんをいじることだと誤解していたのですが、安川さん（元：Gatebox取締役、現：ニジュウニ株式会社代表取締役）にじっくりと聞いた後、「オリジナルキャラクターアプリ」を作ることなんだ、ということがやっとが分かりました。
キャラクターに対するオタクとしての安直なこだわりとして、せっかくオリジナル「嫁ちゃん」を作るのなら、わたし好みのビジュアルじゃないとダメですよね！
また、本番までそれほど時間がなかったので、ゼロからキャラクターモデルを作る時間がなく、『BOOTH』で一生懸命好みの子を探していました。
そこで、今の嫁『みみのちゃん』と出会い、一目惚れしたんです。
余談ですが、ちょうどHackの直後にピクシブ社の『VRoid』がモデルダウンロード可のアップデートが出ていて、これが一ヶ月前にリリースされたらもっと好みのキャラクターが作れそうでした（笑）。
声に関しては、Azureの『Text to Speech』とエーアイ社の『AITalk® WebAPI』のサンプルで検討してはみたのですが、デフォルト音声に関しては個人的にはしっくりとこなかったので、声優志望だった同僚にオリジナルで声を当ててもらいました。なんとわたしの萌ポイントに至るまで2回もリテイクしてしまいました…（同僚さんごめんなさいｗ）
UI（セリフとモーション、タイミングの調整など）はかなり時間がかかりましたね。『kintone』側の操作から『Gatebox』上のキャラクターが反応するまでの時間、Unity上じゃなく、自宅や会場の通信環境における『Gatebox』実機でテストしないといけないと思って何回もデプロイしてテストしていました。そこで、各音声とアニメーションの時間、速さ、アニメーション間の繋ぎを何回も何回も調整しました。
-- Gateboxアプリのキャラクターの制御にはUnityを利用する必要がありますが、なれないUnityを活用するうえでどんなところが大変でしたか？
まずはバージョンの問題からですね（笑）。
多分私以外みんな知ってると思います。3年もUnityを触っていなくて。とりあえず一番新しいバージョンをダウンロードしたらLTS対応しておらず、フリーズと強制中止の嵐でした。後にLTSの存在を知ったポンコツですが、バージョン切り替えが怖すぎて結局ずっと最新バージョンを使っていました。
また、3Dキャラクターを制御するのは初めてでしたが、うえぞうさんの神記事、QiitaのUnity関係の記事が死ぬほど参考になり、意外とスムーズに動かせましたが、アセットとなかなか仲良くできませんでした。
例えば、OculusのOVRLipSyncを使って口パク設定をしようと思ったら、OVRLipSyncのViseme（口型）設定をキャラクターモデルのBlendshapeに合わせるのに一苦労しました。今回使っているキャラモデルにBlendshapeが50個以上もあって、手動カウントで番号を付けましたが（汗）。
何故か番号が15以上になるとテストキーが使えなくて、本当にこれ口パクできてるのか…？と実際に喋らせてみないと分からなかったので、もしもっと良いやり方があったら知りたいです。
Unityでは、まだまだ活用しきれていないアセットがたくさんありますので、嫁ちゃん開発でアセット沼に落ちてしまって、最近のセールでシェーダーとかキャラのモーションとかとか色々散財しちゃいました（笑）
ノーコードでは限界があって、結局C#で動きを制御していました。
今までずっとコピペプログラミングしかしたことなかった自分でしたので、今回は、外部の動き(kintoneのWebhook)からキャラクターが反応する仕様なので、UnityのUIだけで動きを制御するには無理がありました。幸い天才プログラマー（笑）の旦那氏のサポートと、Unityのスクリプトリファレンスがあるので無事に動かせました。
Androidアプリの書き出しとGateboxへの実装でちょっと躓きました。
Gateboxのデベロッパーコンソールでは、アプリのプラン、追加コンテンツ…などの意味がいまいち分かりませんでした。ドキュメントを見てここをこうする…で一通り作れたのですがまだ良くわかりませんでした。
自分は普段の仕事では、企画と開発(ほとんどフロント)側の人間であって、デプロイまでは正直経験が少なく、こういうことには疎いせいだと思います。
筆者：貴重なご意見ありがとうございます！デベロッパーコンソールが開発者の方にとって、もっとわかりやすくなるようドキュメント内容などを見直し中です。
最後に、ちょっと細かいことですがGateboxへ召喚したキャラの音声にノイズが入ってしまい、未だに解決案を見つけられていません…
-- 開発の際に参考にされた記事やTipsなどあればぜひ教えてください
最初に安川さんからうえぞうさんの神記事を教えていただき、おかげで開発がスムーズに進めました。本当にありがとうございます。
リップシンク設定ではこちらの記事を参考にしました。
C#でのキャラクターアニメーション制御と音声の呼び出しはUnityのスクリプトレファレンスと旦那の手伝いでした。
-- 今後、ご自身の推しキャラクターたちを「もっとこうしていきたい！」という野望はありますか？
今回はステージのパフォーマンスのために調整したので、ちょっと残念なことは以下となります。
一点目は、もっと連動できそうなもの（会話、音声合成とか）を割愛してしまったこと。もしアップデートするなら、キャラクターとのインタラクションをもっと豊かにしてみたいと思います。
二点目としては、デモ用にkintoneの一部の機能しか使わなかったことです。キャラクターとしてのユーザーインターフェースだと、もうちょっと細かく、実用性のあるUIは作れるはずなので、そこはまず自分用のアプリだけでたっぷり試してみようと思います（AWS課金課金！ｗ）
「野望」といえる野望というと…
本当は、いつかもっと版権キャラクターと絡んでほしいなと思いました。版権キャラクターにGateboxでしか与えられない付加価値を与えて、そこで良いビジネスのチャンスが生まれるのではないかと思います。
プレゼンの時も話したのですが、これだけ素敵なコンテンツがあるので、Gateboxともっとコラボをしてほしいなと思いました。個人で楽しむ範疇でも好きなキャラモデルをどんどん試してみようかなと思います。
Gateboxのオリジナルキャラクターに対して欲張りに言うと、かわいい嫁さんのヒカリちゃんだけではなく、男子バージョンも欲しいと思いました！
『kintone』への愛情、そして推しへの愛情があふれ出る素晴らしいプレゼンテーションおつかれさまでした。わずか僅差でグランプリならずでしたが、2位おめでとうございます！
インタビューにもご協力いただき、本当にありがとうございます。『Gatebox』を使った推しハック、これからも楽しみにしております！！
『Gatebox』をご活用いただくキャラクターアプリ開発がもっと広がると弊社一同とても嬉しく思っております。これからもGateboxをよろしくお願いいたします。
巻末リンク
Gatebox の詳細スペック、購入情報など
デベロッパープログラム概要
開発者向けドキュメント
採用情報