ハッカソンでアニメ「PSYCHO-PASS」をテーマにアプリを作った話

皆さん、こんにちは！
先日、社内で開催されたServiceNowハッカソンに参加してきたので、そのドタバタ体験記を、反省も込めてお届けします！

ハッカソンの進め方やREST API連携に興味がある方は、ぜひ最後まで読んでみてください！

:::note info
これはあくまで私の超個人的な体験談です！面白半分で読んでいただけると嬉しいです！
:::

当記事は「ServiceNow Advent Calendar 2024」の2枚目12/18(水)公開分の記事です。
他の方も面白い記事をたくさん投稿してくれていますので、ぜひ覗いて行ってください！

https://qiita.com/advent-calendar/2024/servicenow

# 22世紀のソリューションだと！？

今回参加したのは、ServiceNowでアプリ開発＆プレゼン勝負のハッカソンです。

普段一緒に仕事をしているメンバー5名（私含む）でチームを結成しました。開発メンバーは私（ServiceNowベテラン…のはず）と、2～4年目の若手たち。私はよそでも開発経験がありますが、他メンバーは今の現場で普段は徹底したFit to Standardで貫いているので、本格的な開発は初体験なメンバーでした。

お題は「22世紀を感じさせる」「社会的インパクト」「技術的先進性」。

未来年表見ても全然明るい未来が想像できず、悩んでいたところ、「アニメや映画の世界観を参考にすればいいんじゃない？」という議論に。

そして私たちが選んだのは…SFアニメ **『PSYCHO-PASS』** の世界観です！

『PSYCHO-PASS』をご存じない方はぜひこちらで世界観を除いてみてください。プレゼンの冒頭でも1分30秒ほど流しました。
<iframe width="560" height="315" src="https://www.youtube.com/embed/lHb_BJAg4DA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" loading="lazy" allowfullscreen></iframe>

# 公安局×ServiceNow！仮想エージェントでメンタルヘルス管理！

『PSYCHO-PASS』の世界観にはField Service Managementがぴったり。サイコパスの異常をWork Orderと捉えれば、公安局長が作業をディスパッチし、エージェント（公安局員）が現場へ急行…まさにFSMそのものじゃないですか！さらに、アニメに登場するアシスタントボットは、ServiceNowのVirtual Agentで再現できそうです。
▼絵に起こしたらこんなイメージ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634581/7595ed9e-6938-fe63-a92c-54a580ce9a5a.png)

今回は、一般市民が利用するVirtual Agent部分に焦点を当てて開発することにしました。技術的な先進性を追求するため、音声コミュニケーションに挑戦！音声で会話しながら、音声の特徴から心理状態を分析してアドバイスする…そんな未来的なVirtual Agentを目指しました。

▼そこで考えた構成イメージが以下です
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634581/00d2fd83-d68a-8e91-d784-b040a6524bf2.png)

連携サービスは、LINE、OpenAI、Cloudconvert、AmiVoiceの4つ。

<dl>
  <dt>LINE</dt>
  <dd>ユーザインターフェースとして利用しました。Virtual Agentとの連携プラグインが提供されており<a href="https://www.servicenow.com/docs/ja-JP/bundle/xanadu-conversational-interfaces/page/administer/virtual-agent/task/messg-line-configure.html">Docs記事</a>でも手順が開設されているので、容易に接続ができました</dd>
  <dt>OpenAI</dt>
  <dd>Whisperを使ったText to Speechも利用できるので、メインの音声会話部分で利用しました</dd><dd>使用したAPIは<a href="https://platform.openai.com/docs/api-reference/audio/createTranscription">Create transcription</a>と<a href="https://platform.openai.com/docs/api-reference/chat/create">Create chat completion</a></dd>
  <dt>AmiVoice</dt>
  <dd>音声解析ソリューション。感情分析機能を使うと20ものパラメタで解析結果を返してくれるのが魅力的で選定しました。</dd><dd>使用したAPIは<a href="https://docs.amivoice.com/amivoice-api/manual/async-http-interface">非同期 HTTP インタフェース</a>で、<a href="https://docs.amivoice.com/amivoice-api/manual/request-parameters#sentimentanalysis">sentimentAnalysis</a>のオプションを使うことで感情分析結果を返してくれました。</dd><dd>✓<a href="https://docs.amivoice.com/amivoice-api/manual/sentiment-analysis#result-parameters-list">感情分析のパラメタの一覧</a></dd><dd>✓<a href="https://docs.amivoice.com/amivoice-api/manual/sentiment-analysis#result-parameters-interpretation">感情パラメタの解説</a></dd>
  <dt>Cloudconvert</dt>
  <dd>LINEのファイル形式からAmiVoiceで扱えるファイル形式に変換するために利用しました。</dd><dd>使用したAPIは<a href="https://cloudconvert.com/api/v2/jobs#jobs-create">Create jobs</a>に<a href="https://cloudconvert.com/api/v2/import#import-base64-tasks">Create import base64 tasks</a>、<a href="https://cloudconvert.com/api/v2/convert#convert-tasks">Create convert tasks</a>、<a href="https://cloudconvert.com/api/v2/export#export-url-tasks">Create export URL tasks</a>をインクルードしたものと、Documentに記載無いものですが、変換後のファイルURLに対するGETリクエストです。</dd>
</dl>

# ペアプロ＆ポモドーロで開発ラッシュ！…のはずが！？

開発メンバーの経験値はバラバラ。特にシステム連携は私以外が未経験…さらに、普段はリモートワークなので、集まって作業する機会もほとんどありませんでした。そこで、ペアプログラミングと<a href="https://ja.wikipedia.org/wiki/%E3%83%9D%E3%83%A2%E3%83%89%E3%83%BC%E3%83%AD%E3%83%BB%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF">ポモドーロテクニック</a>を導入！

ペアプログラミングはナレッジ共有が目的。ポモドーロテクニックは25分作業、5分休憩のサイクルで、集中力と休憩のメリハリをつけます。今回は2名×2チームで、23分作業＋2分進捗共有＋5分休憩のサイクルで実践しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634581/96647505-e7b0-f907-8584-50338628fbe9.png)


ポモドーロテクニックの狙いは、頻繁な情報共有で課題を早期発見＆全員同時休憩で気兼ねなく休むこと！

実践してみてのフィードバックは…
* 25分は短すぎる！もっと作業したい！
* でもダレる前に休憩は良い！
* 業務でも使いたい！
* 休憩中も画面見てデバッグしてた…切り替えが難しい…

課題はありましたが、おおむね好評でした！
実際、ハッカソン後も業務で活用し、生産性向上に繋がったという声も！作業内容によって調整が必要ですが、皆さんもぜひ試してみてください！

# 開発の壁…そして、反省…

開発中にぶつかった壁を3つご紹介します。

### 1. Cloudconvertからのファイルダウンロード大作戦…失敗！

Cloudconvertで変換したファイルをServiceNowに格納する処理で苦戦しました。

Flow DesignerのREST StepでCloudconvertにGETリクエストを送信し、バイナリデータを取得。それをScript StepでGlideSysAttachmentを使って添付ファイルとして格納…のはずが、ファイルが破損！再生できませんでした…。

なにが悪かったか分からずでしたが、REST Stepに添付ファイル保存オプションを有効化し、添付先のレコードを指定することで、無事ファイル保存に成功しました。
ローコード開発をしていると「あるある」ですよね、便利機能に気づかず無駄な開発してしまうこと…。

▼作成したサブフロー
　赤枠部分が躓いたところ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634581/23c22c0c-e1f5-a530-491f-66ca9f8a1f36.png)

▼Save as Attachmentに✓入れるだけでよかった
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634581/9b00113a-1f7e-6c77-6a1d-8c7b6f830b91.png)


### 2. AmiVoiceの感情分析…時間かかりすぎ問題！

AmiVoiceの感情分析処理が想像以上に時間がかかりました。

2024年12月現在、感情分析オプションは非同期HTTPリクエストのみ対応。この点を事前によく理解しておくべきでした。

非同期リクエスト送信後、キューで処理待ち時間があるため、処理完了まで5分程度かかることも…20パラメータからメンタルヘルススコアを算出するロジックは作成ができたものの、デモでお披露目するには厳しく断念しました…。

▼作成したサブフロー
　赤枠内のジョブ完了待ちで30秒から4分程度かかってしまいました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634581/148aa64a-599e-3614-6142-68bd9ce8f46c.png)


### 3. LINEとOpenAIの連携…謎のエラー発生！

LINEから受け取ったファイルをOpenAIに送ってテキスト化するリクエストが動きませんでした。

Virtual Agentが受け取ったファイルを<a href="https://www.servicenow.com/community/virtual-agent-nlu-articles/virtual-agent-user-input-file-picker-paris/ta-p/2306903">この記事</a>を参考にカスタムテーブルに格納し、Flow Designerで作った上記のステップを含むサブフローを呼び出す設定にし、Virtual AgentからファイルのSysIDを渡す処理を作ったのですが…「リクエストのボディが大きすぎる」というエラーが発生！

サブフロー単体でテスト実行するとエラーが出ず正常に動作し、Virtual AgentからファイルのSysIDも正しく渡っていることもサブフロー内でログ出力して確認済み…同じファイルのSysIDなのに、手動で渡すと正常に動くのにVirtual Agentから渡すと動かない…~~これバグ？~~

会話が成立しないじゃないか…と絶望し、開発期限ギリギリまで粘りましたが解決できず、発表は誤魔化しながらの実演となりました…。

▼作成したREST STEP
　FileのパラメタはファイルのSysIDを渡すのがポイントでした。勝手にバイナリ化して送ってくれるようです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634581/b69818bc-d1b4-478c-dbcd-6d82477c0bc0.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634581/fd309f17-fe34-2143-1b99-945b25b5b0e9.png)

# 嬉しい結果！でも反省！

アプリの開発については、やりきれなかった部分が多く悔しい気持ちでいっぱいでした。
▼なんとか乗り切ったデモ画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634581/53a14073-31b0-b9c4-5f4e-88babe01532d.png)

それでも、尖ったアイデアと見せ方にこだわったプレゼンが評価されて、なんと結果は…

**総合優勝！！！**

評価観点に正面から向き合ったこと、予期せぬ問題にも対応する力でプレゼンを形にできたことが、結果に繋がったと思います。

個人的にこだわった音声会話部分について、マルチモーダルが刺さったとコメントを頂けたので、大満足でした。
でも、自分でもやったことのないチャレンジに、若手メンバーを振り回したのはちょっと反省です笑

### お財布を痛めた話
開発終了1時間前にLINE越しのVirtual Agentが応答を返さなくなる事象が発生！。
まもなく発表時間なのに！

焦る気持ちを押し殺しながら、
直前に触っていた箇所を調べてみても思い当たるところはなし
接続先のインスタンスを変えてみても状況変わらず
となるとLINEが怪しい…

確認してみると、
LINE公式アカウントのフリープランは、月のメッセージ制限が200まで
管理画面でメッセージ数を見てみると、ハッカソン前日の12/5までで100
当日のデータは表示されてなかったものの、おそらく引っかかったのだろうという推測。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634581/1530b998-a161-d1bf-7a45-1aa3e33228c3.png)

その場でクレジットカードを取り出し、上位プランにアップグレードしようとしたら、**5,000円！！**
背に腹は代えられないとその場でポチリました(  இωஇ  )
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634581/6c4c0542-6d5b-8614-2542-430b347ebacb.png)

# 終わりに
つたない記事でしたが、お楽しみいただけましたでしょうか？

普段は目の前の業務に忙殺されて頭の中が現実的な考えに向いてしまいますが、たまにはハッカソンで自由に発想を広げると楽しいし、普段の業務においても「将来的にはこうだよな」と少し先を見た仕事ができるような気がします。

これを見て面白そうだなと思った方は、ぜひハッカソンに参加してみてください～

ぜひいいね！お待ちしております。