伊予銀行の問合せ対応画面の開発プロセス
shokai.icon shokaiです
Cosenseを開発しています
登場人物
sawachin.icon、mune
事業開発
shokai.icon
エンジニア
KCSとは
電話オペレーターがすごく知的な作業をする
問題解決した後、それをドキュメントにする
作業内容の正しさや速度が評価項目になっている
最終的にこうなった
問合せログとナレッジ記事の2種類のページを管理して、問合せ対応していく
多対1の関係
「どうやって解決したか」を他のオペレーターが再利用可能な形で残していく
https://gyazo.com/2907b24e84f2a16fcdc170ed3dc8bdac
問合せログ作成→メモ書く→ナレッジ記事生成→状態が待機中に戻る
ナレッジ記事と問合せログは1対1ではなく、1対多で対応する
動画のものとは別のワークフローもある
ナレッジ記事を探して問合せログに紐づける
生成せず手で書く
おおまかな開発プロセス
sawachin.iconが調査
実際のコールセンターの業務
sawachin.iconが必要そうな機能をshokai.iconと話し合う
オペレーターとページの両方に状態がある
hashtagで状態宣言しよう
UIからページ本文を書き換える機能が必要
複数の画面を行ったり来たりする
shokai.iconが機能に必要そうなUserScript APIを追加
sawachin.icon、muneが実装
動くものができた
JavaScriptに詳しいわけではないが、サンプルコードを継ぎ接ぎしたり、LLMを使ったりして「使えるもの」ができた
shokai.iconが高速化
cosense.Page.insertLine(text, index)
cosense.Page.updateLine(text, index)
行番号とテキストを指定してinsertやupdateする
例
これが最も簡単な例shokai.icon
async cosense.Page.waitForSave()
手元の変更がサーバーに保存されるまで待機する
awaitを付けて呼び出す
insertLineやupdateLineしたchangeがサーバーに間違いなく保存されるまで待ってからユーザーに「保存されました」等のメッセージを表示するのに使う
例
この時点で工夫した所shokai.icon
await waitForSyncで保存完了を待てるのが便利
変更データそれぞれに、自分がUI操作して行った変更か、UserScript由来の変更なのか、サーバーからか、他ユーザーからか、等の情報を入れるようにした
特定のユーザーがページ編集した時だけUserScriptでさらに追記するのに必要
例 await cosense.Page.show('shokai')
別のページに書き込んでしまったらかなわんので
UserScriptがPage.showで移動を命令した瞬間に、ユーザーがリンクをクリックして別ページに移動する事もありうる
注意：未pushのデータがまだある状況でcosense.Page.show(title)を呼び出さない
変更がコンフリクトした場合にコンフリクト解消できない
実装してみての感想、面白かったところ
顧客に接している人がプログラミングすると、ちゃんと役に立つものができる
この時点では高速に動かなくて良い
将来的に高速化できるように実装されていればよい
shokai.iconは勘でAPIとサンプルコードを渡した
詳細はわからんけどこういうパーツでできるだろう
このパーツ使えばおかしな設計にならないだろう
足りないかもしれないパーツは、後で辻褄合わせながら高速化できそうな物ばかり
今は作らない
必要になったら作る
かなり複雑な動作が実装されている
ボタンを押したら、今表示しているページの本文を書き換えつつ
別ページに移動して、元いたページの内容を元に新規ページ本文を作って
元いたページに紐づける
けっこうすごいshokai.icon
社内の複数の部署に、プログラマじゃないけどプログラムちょっと書いたり、SaaSつなぎ合わせてツール作ったりする人が存在する みんなプライベートや業務で色々なUIを触ってるせいか、おかしな画面設計になったりしなくなってきてるのかも
常識的に考えてこうだろ、というリテラシーがまあまあ育っている