ネット証券だけどWebページにアクセスするのが面倒になってきたのでAlexa対応してみた

こんにちは、マネックス・ラボの渡瀬です。

音声操作ってしたことありますか?
スマホを使ってGoogleやSiriで操作するのが一番身近でしょうか。既に生活に取入れて、家電の操作や自宅の施錠をしている、という方もいらっしゃるかもしれません。

マネックス証券では2019年4月17日に「マネックスアドバイザー for Alexa」 の提供を開始しました。「マネックスアドバイザー for Alexa」は、Alexa対応端末に話しかけると、ロボアドバイザー「マネックスアドバイザー」で保有している残高情報を音声と画面で確認することできるサービスで、マネックス・ラボでサービス開発を進めてきました。

f:id:monex_engineer:20190507165515p:plain

マネックスアドバイザー for Alexa」のAlexaスキル作成環境

 音声認識の開発ということで、通常の設計に加えて音声ユーザーインターフェース(VUI)を作成し、スキルの開発と画面デザインをしています。
今回はスキル開発者とAlexa端末画面のデザイナーのお二方にインタビューしました。

スキル開発者に聞きました

 ――まず初めに、音声操作に関する開発経験はありましたか?
いいえ、Alexa スキルなどスマートスピーカーに提供するサービスは初経験でした。

――スキル開発は無い、、では、スキルの開発情報はどうやって得ましたか?参考にした文献とか教えてください。
Amazon の公式ドキュメント、および公式フォーラムがほぼ全てでした。今回スキルに採用した画面作りの規格である Alexa Presentation Language(APL)は開発時点ではβ版であったため、公式ドキュメントからは読み取れない情報もあり、公式フォーラムにおける Amazonの方から提供される情報には助けられました。

――音声操作のテスト方法はどのように実施しましたか?工夫した点などありましたらお願いします。
今回は初の Alexa スキル開発ということもあり、なるべく素直な方法で行いました。 SAM CLI でイベントを生成し、ローカルに立ち上げたサーバーに投げて結果を検証するシステム的なテストの他、実際にデバイスに話しかけて行う人力によるテストなどです。また、いくつか発声パターンを音声ファイルとして作成し、それを再生することでテストする半人力のような工夫も行っています。

――スキル開発にはamazonアカウントが必要ですが、アカウント作成時に注意が必要と言われていますよね。amazon.comamazon.co.jpの問題を詳しく教えてください。
Alexa の開発には Amazon アカウントが必要なのですが、日本で取得したアカウント (.co.jp) とアメリカで取得したアカウント (.com) で Alexa Developer Console に機能差があります。例えば先に挙げた APL のシミュレーターを使うには .com のアカウントが必要なのですが、今回のスキルは日本国内に限定したリリースのため、ストアへの掲載確認は .co.jp のアカウントが必要になるなど、場合によって複数のアカウントを使い分ける必要があります。

――amazon.comのアカウントに結びつけをした端末では英語っぽく「Alexa!」と呼びかけないと応答しませんでした。。他に苦労した点ありますか?
現時点では Alexa スキルの開発におけるベストプラクティスは確立していない状態といえるため、土台作りは試行錯誤でした。また、APL で画面定義するための JSON は多機能なものの、可読性が低いという問題があったため、独自の XML から APL の JSON に変換するコンバーターを作成したりと、快適に開発するための環境作りの方が大変だった印象です。

――最後に今後スキル開発をするエンジニアに一言どうぞ。
スマートスピーカーは世界的にもシェアを伸ばし、ますます開発できるエンジニアが求められています。開拓の余地が大きい分野なので苦労は多いかもしれませんが、知的好奇心を満たすには絶好の場とも言えます。少しでも興味を持つエンジニアが増えてくれれば幸いです。

――ありがとうございました。

 

デザイナーに聞きました

――どうやって進めていきましたか?
まず丸型画面のAmazon Echo Spotから着手し、WEBのメイン画面をそのままはめていきました。ですが、マネックスアドバイザーには棒グラフの資産推移があるのですが、丸い画面では表示できる情報量に限界があり..
画面数は少なかったので少しずつ変更を加えながらやっていきました。

最初は白と当社のコーポレートカラーの黄色をメインの背景にしていましたが、デバイスがほとんど黒だったことから、パイチャートが浮き出て見えるような黒を背景にしました。イメージ案の段階では黒が強いかな、といったところでしたが、実機で画面にはめてみたところ違和感がなく満場一致で決定しました。その次にアイコンとエラー画面も最後に追加しました。

f:id:monex_engineer:20190507170337p:plain

表示するフォントはデバイスフォントしか使用できなかったので、デザインの作業としては可読性を意識してフォントサイズやマージンのレイアウト・配色の決定のみを行いました。

――背景に関して当初は白と黄色で進んでいました。社内の意見では白よりインパクトのある黄色で、と傾きかけていましたが、黒案が登場しAPLオーサリングツールで確認してすぐに決まりましたね。他に意識したことはありますか?
今回は音がメインで、画面は補足情報ということから、情報量少なく、分かりやすく、を意識するようにしました。また、その方向性にしてからは残高照会のメインとなるパイチャートから始めました。
バイスの丸型を生かすようにして、パイチャートを簡略化していきました。

――苦労したところはありますか?
やっぱり丸型の画面は珍しいので..
情報を最小限にしたいから、文字を大きくしたり、パイチャートからはみ出すようにしたりしました。文字に白縁をつけてはっきりさせる案もありましたが、エンジニアに調査してもらったところAlexa特有の制限があり実現できませんでした。資産金額は桁数が大きくなる場合には文字を小さくするということも検討していたのですが、最終的には実施しませんでした。

最後に四角型画面のEcho Showに着手しましたが、丸型を分解してやりましたが丸型が固まっていたのでそれほど難しくはなかったです。ただFire TV が様々なデバイスに対応しはじめたことにより、画面が固定サイズではなくなったので、これからの課題でしょうか。

――ありがとうございました。

 

マネックスアドバイザー for Alexa」の未来

マネックスアドバイザー for Alexa」は音声だけで無く、お客様に安心して利用して頂けるように、ディスプレイという視覚からの情報にも対応しました。今後、様々なユーザーインターフェースの組合せで利用できるシーンを増やしていきたいと思います。

 

 

渡瀬 桂システム開発マネックス・ラボ