“声” と “プログラマブル” に感じる違和感のはなし。

こんにちは。hugtech.io です。普段はプログラマーとしていくつかのStartupさんのお手伝いをしながら、Alexa をはじめとしたVUI 界隈を漂っております。先日、Voice UI/UX Designer Meetup にお邪魔して、とても感じるところがあったので参加レポートもかねて書きます。

Voice UI/UX Designer Meetupとは?

@vui_rie が日本で主催する VUI Designer のためのコミュニティです。Developer が多い中で デザインにフォーカスしてくれるコミュニティは貴重です。

スピーカーのかたたちも、こんな素晴らしい資料を惜しげも無くUPしてくれています。どれも 一読オススメです。
https://vuidesigner.connpass.com/event/177473/

とても新鮮でした。

声によるインタラクションをプログラムするときに感じていた違和感

今回の主題は、私が普段感じている 音声デザインとプログラムに関する違和感についてです。私はいつも Alexa Skill を コマンドラインベースのツール類を使って作ります。Developer には馴染みの深い ASK-CLI、ASK-SDK、AWS ですね。ただ、会話をテキストエディターでコーディングしている時は、いつも小さな違和感を感じていました。

プログラムの性質

コーディングはとても論理的なものです。曖昧さがありません。y = x のように、なんらかの入力に対して、なんらかの結果を返すものです。ソフトウェアの世界ではよくMECE(ミーシー、「漏れなく、ダブりなく」)なんてことが 言われます。要件を実現するために、MECE に項目を洗い出して、よいソフトウェアを作りましょう、ということです。コーディングの世界においても、同じようなことはよく言われます。DRY(Don’t Repert Yourself) や Software Design Pattern などは、論理的整合性を保ちながらより、スマートにその論理性を磨き上げる考え方、思想群であるとも言えます。VUI アプリを作る際もこれはそのまま当てはまるでしょうか?

会話デザインの性質

会話とはあいまいで不確実なものです。それはシーンが特定された状況でもです。私はVUIアプリが GUI や これまで普及したアプリケーションよりも 「シチュエーション スペシフィックで(シーンを選ぶ)」ということをかなり前から感じていました。

少し昔の話になりますが、2017年の Re:Invent の Alexa のセッションの一つに、言語学、コミュニケーション学の観点から、「良いVUIデザインとは?」という趣旨のセッションがありました。アカデミックな知見から、音声インタラクションに関しては、「変化に富むほうが人は喜ぶ」というのです。つまり、VUI の インタラクションにおける良体験は、「一つのゴールに到達することでさえも、変化に富む会話体験を提供すること」ととることができると思います。

「変化に富むように設計する」これはプログラムと相対する考えかたです。少しずつ共通な部分を見つけだして、小さく、小さくしていくプログラム脳と、一つの答えにバリエーションをつけて拡散させていくVUI脳。この根本的な違いが、違和感の正体であることに、Designer 目線で話す人たちや進んでいくチャットを思い返して、腑に落ちました。

人間の会話の不確実性をプログラムの論理性で表現することは基本できない。

VUI デザインとは「脚本を作ること」である

Voice UI/UX Designer Meetup のセッションでは、VoiceFlowAdobe XD のセッションがありました。VoiceFlow は 日常私が使う開発環境よりも 開発フローとしては自然に見えました。そして、それよりも Adobe XD の方がもっと自然に見えました。答えが出そうで出なくてモヤっとしながら仕事をしていました。

では、会話をもっともわかりやすく表現できるフォーマットはなんでしょうか?

それは「脚本」です。

(日本放送作家協会 九州支部 のブログより引用)

脚本には、「ト書き」という構成要素があり、そこに会話の前提となる背景や設定を記載する部分があります。

「ト書き」に記載された背景を前提に、セリフを構成していき、一つのシーンが終わればまた「ト書き」から始まります。

演劇やドラマでは、これが地続きに長いストーリーになりますが、VUIではそのゴールが 天気予報を教えたり、ものを動かしたり、ゲームキャラクターへのアクション、になったりするわけです。

この小さな脚本を、ユーザーがたどり着きたいゴールに向けて、たくさんのバリエーションを考え出す。

これが、VUI 設計なんだと気づきました。

Adobe XD の モックデザインのほうがもっと自然に見えたのは、セリフがありシーンが想像しやすく、音声インタラクションがより自然に見えたからだったんだ。ということに2日かけて気づきました。

そして改めて、シーン、背景、会話、この3つの要素がバリエーション豊かにわかりやすく、繋がっていることが大事であって、できるだけ「論理的な設計」を目指すプログラマ脳からは離れて、考えることに気付かされたミートアップでした。

さいごに

それに気づかせてくれた Voice UI/UX Designer Meetup。とってもいいものですね。(淀川○治風に)さよなら。さよなら。。。。さよなら。
…. 時代古すぎw

鯖寒リターンズ。鯖の寒干しをあいつらから守ろうじゃないか feat ABEJA Platform

この投稿は、ABEJA Advent Calendar 2019 12 日目 の記事です。

この記事は、オランダで新鮮な魚の干物を作りたいプログラマーが、大切な干物を外敵から守るためだけのシステムを構築するために、まだプレビューの ABEJA Platform を使わせてもらって、関係者を引きづり回し(ている)記録です。執筆時点で、構築は途中でありこの話題は来年も続いていくであろうことを先にご報告しておきます。

前提として、筆者は ML に関して深い知識はほぼゼロです。 「ML(おもに教師データあり)周りのプロセスと、用語、そしてそれがなんとなく何するかはわかる」というレベルです。

Continue reading “鯖寒リターンズ。鯖の寒干しをあいつらから守ろうじゃないか feat ABEJA Platform”

Shifter+WordProofで静的サイトにコンテンツ保護をプラスしよう

この投稿は、Shifter Advent Calendar 2019 9 日目の記事です。

Shifterを使って WordPressサイトを静的化しつつ、記事のタイムスタンプをブロックチェーンに記録して、コンテンツのオリジナリティを証明しましょう」というお話です。WordPressの文脈からはあまり聞こえることがないブロックチェーンというワードですが、この記事を通して WordPressとブロックチェーンがどのように関わるのか。そして、Shifter と組み合わせたときにどんなシナジーが生まれるのかについて、お話したいと思います。

Continue reading “Shifter+WordProofで静的サイトにコンテンツ保護をプラスしよう”

Simplify Mocking AWS-SDK with Jest

Background

I could find lots of examples of mocking the AWS-SDK. But I have been finding it complex. I have been exploring some other approach that it will be easier to mocking AWS-SDK.

Outlines

  • Eventually, AWS-SDK is a wrapper of WebAPI. All functions contain in a services object.
  • For keeping versatility, each service has versions of API
  • When a service instance created, the latest service is called from inside SDK.

Thus backdoor approach, We can mock only specified aws-sdk functions.

Example(Lambda Invoke)

example.test.ts

import * as AWS from 'aws-sdk'
jest.spyOn(AWS.Lambda.services ["2015-03-31"].prototype, 'invoke').mockImplementation( (request) => {
    return {promise: () => 'debug'}
})
  • many cases, the promise method seem to be called. Return an object which includes the promise method.
  • spyOn is helpful. because it’s easy to restore the mock by calling jest.restoreAllMocks()

Conclusion

I think this is helpful. You don’t have to add another package, You don’t have to make a wrapper class of AWS-SDK for achieving testable. many cases, to keep testability, these wrapper class inserted as a parameter of constructer. (Dependency Injection)

[Tips] Expanding Native Type on Typescript

Background

Sometimes, We need to extend a native class(object) with inheritance. But some meta programmer has a different direction to solve it. They extend the native class by editing itself. It has beneficial because Not necessary to define a new extended class. There surely has some point you should take care of.

Let’s see on typescript

typescript provides these feature, it calls ‘Declaration merging

https://www.typescriptlang.org/docs/handbook/declaration-merging.html

This is example, The Array object extedns by adding the uniq method which eliminating duplicated item in a Array.

array.extensions.ts

export {}

declare global {
    interface Array<T> {
        uniq<T> (comparer: (value1: T, valu2: T) => boolean): T[];
        contains<T> (value: T): boolean;
    }
}

/* eslint no-extend-native: ["error", { "exceptions": ["Array"] }] */
Array.prototype.uniq = function<T> (comparer: (value1: T, valu2: T) => boolean): T[] {
    return this.filter((value1, index1, array1): boolean => {
        const index2 = array1.findIndex((value2): boolean => comparer(value1, value2))
        return (index1 === index2)
    })
}

To use this extension library, like this.

import './array.extensions'

['aaa','bbb','ccc','bbb','ccc']
.filter(elem => elem === 'ccc')
.uniq((v1,v2) => (v1 === v2))

objectの配列でも
[{ID:'aaa'}, {ID:'bbb'},{ID:'ccc'},{ID:'bbb'},{ID:'ccc'}]
.filter(elem => elem.ID === 'ccc')
.uniq((v1,v2) => (v1.ID === v2.ID))

Note

If you use eslint, You should turn off the no-extend-native rule. (like this)

/* eslint no-extend-native: ["error", { "exceptions": ["Array"] }] */

And, There is a risk of this feature that it spoil to native namespace. You should take care of spoiling namespace when you add (or extend) native object.

Simple Mocking of DynamoDb data mapper in the Jest code

DynamoDB Data Mapper is an awslab’s open source project. This is very helpful as the ORM library for your application. But for testing, there is something tricky because Query and Scan return QueryIterator(nearby AsyncIterator)

DynamoDB data mapper
https://github.com/awslabs/dynamodb-data-mapper-js

Mocking

import { DataMapper } from '@aws/dynamodb-data-mapper'

describe('test', () => {
  beforeEach(() => {
    const asyncIteratorMock = new Object()
    asyncIteratorMock[Symbol.asyncIterator] = async function*() {
      yield 'hoge'
      yield 'hage'
      yield 'huge'
    }
    jest.spyOn(DataMapper.prototype, 'query').mockImplementation(() => {
      return asyncIteratorMock
    })
  })

  afterEach(() => {
    jest.restoreAllMocks()
  })
})

I’m happy to become this example can be helpful to you.

Alexa Day 2019

Outline

Space Alpha Sannomiya – KOBE, Japan

Fully Amazon Alexa Focusing Conference and of the around ML, IoT technologies of AWS.
https://alexaday2019.aajug.jp/
– Shift to Voice First –

Attendees 200 (Registrations 240)
Supporters: 24 https://alexaday2019.aajug.jp/supporters/
Speakers: 18 + 7 challengers. https://alexaday2019.aajug.jp/speaker/
Staffs: 17

This is fully organized by volunteers from the AAJUG (Amazon Alexa Japan User Group) and JAWS-UG (Japan AWS User Group) community.

For Designers, Builders, and all interesters.

There were many sessions with many scopes. VUX Designing, Deep diving of development, Operations, Analytics, collaborating with Machine Learning, Case Studies in Cooking, Alexa Skills of Traffic company, and workshops.

https://alexaday2019.aajug.jp/session/

Workshop for families

For families, Of making a robot who is controlled by Amazon Alexa.
All programming with Node-RED. Visual Style programming and building some board.

https://alexaday2019.aajug.jp/session/49/

Blueprints Lab

Recently, Alexa Blueprints was launched in Japan. There were petit Labo of Blueprints with Alexa Evangelist. People all were surprised how quick with launching a skill!

https://blueprints.amazon.com/

After Party

Many attendees participated After Party. Many ‘real’ discussions. Have a mixing all of the contributors.

Go Next

We changed the Name of this event to ‘Voice Con Japan” to be more globally.
Enjoy Voice World Community, Enjoy more Humanic Ways of interaction.

Let’s make a simple observing with Notification powered by AWS deeplens and Amazon Alexa.

Today’s Goal

The goal of this post is that you can feel fun and you feel that using the AI and Alexa is easier.

Background Story

  • I’m a Japanese. I’m really missing Japanese foods.
  • Fortunately, I can get the really fresh fish every weekend at the Market.
  • I want to store these fishes longer. So I decided to make a dried fishes.

I tried to dry fishes at our balcony. And They came from the sea to pick up my lovely fishes.

Thus, I decided to observe our enemies to save my fish.

Designing of Observation

Details

1. AWS Deeplens

The deeplens provides the power of AI easier. We can deploy pre build training model to the deeplens for several simple steps.

https://aws.amazon.com/deeplens/

2. Amazon Echo

For notifying to me, I could use Amazon Echo.

Let’s go to cooking.

Setting and Deploying the Object Detection Model to the deeplens

Left : selecting Project template on the deeplens console
Middle: MQTT topic filter on the deeplens console
Right: testing dialog on the AWS IoT console

The deeplens provides the Project Template to implement models easier.

Select the Object Detection in Project template.

MQTT

MQTT is the lightweight M2M protocol. When the model deployed to the deeplens, MQTT topic which sends the detecting status is deployed too. You can see on the deeplens console.

Also, you can test that the handling messages in AWS IoT Core console. You can access it from Project output column.

As you can see, Simple message is receiving on AWS Iot Core console like this.

{ "chair": <percentage of confidence> }

when some bird coming, the deeplens will send message as follows.

{ "bird": <percentage of confidence> }

Make the Alexa skill with notification

OK. Now We could make Object detection part. Let’s make Alexa Skill for accepting notification. To do this, We have to configure the Manifest file for using the Alexa proactive API. The API provides a capability to send notification which Alexa defined schemas.

Defined Schemas
https://developer.amazon.com/ja/docs/smapi/schemas-for-proactive-events.html

Unfortunately, We can only use a defined schema. So In this demo, I alternatively use the WheatherAlert Schema for notifying as assuming the bird to storm. 🙂

AMAZON.WeatherAlert.Activated

If you want to add some schemas, You can send a request to add a new schema in the Alexa Developer Forum.
https://alexa.uservoice.com/forums/906892-alexa-skills-developer-voice-and-vote

To use proactive API is a really simple modification in Alexa Skill Manifest (skill.json). You only add the permission block and the events block

Then, You can deploy by using ASK-CLI.

ask new
git clone https://github.com/haruharuharuby/server-room
ask deploy

Source:
https://github.com/haruharuharuby/server-room

After deploying succeeded, Let see Alexa Developer Console. And check the ClientId and ClientSecret in the permission dialog. (these are used later)

Deploy Lambda function

Until now, You deployed two front interfaces individually. (deeplens, alexa skill). So Let’s connect each other!! This lambda code does two things.

  • Filtering the message to pick up the specific word ‘bird’
  • alling Alexa proactive API

To deploy this function, You need to pass 2 steps.

Step1: Add clientId and clientSecret to the parameter store on AWS System Manager

If you can use AWS CLI. Run the script. (Of course, You can set t on AWS Management Console)

aws ssm put-parameter --type String --name bird-detection-client-id --value <your-client-id>
aws ssm put-parameter --type String --name bird-detection-client-secret --value <your-client-secret>
aws ssm put-parameter --type String --name bird-detection-topic-filter --value <your-mqtt-topic-filter>

Step2: deploy lambda function by the serverless framework

The serverless framework is really useful to deploy function and around resources. This script deploy Lambda function and set the trigger from AWS IoT Rules.

git clone https://github.com/haruharuharuby/bird-detect-message-handler
cd bird-detect-message-handler
serverless deploy

Source:
https://github.com/haruharuharuby/bird-detect-message-handler

After deploying, you can see lambda function and set the trigger on the AWS IoT Rules.

Now current configuration assumes the message has 80% confidence of the bird.

Note: AWS IoT Rules

AWS IoT Rules is a feature for filtering the message by (like) SQL query.

If you want to change the topic filter, and notify to another skill, You just modify serverless.yml

:
functions:
  hello:
    handler: handler.handler
    events:
      - iot:
          name: 'birdDetection'
          sql: "select bird from '${self:custom.iot.topicFilter}' where bird > 0.800"
    environment:
      STAGE: ${self:custom.stage}
      CLIENT_ID: ${self:custom.alexa.clientId}
      CLIENT_SECRET: ${self:custom.alexa.clientSecret}
      PROACTIVE_AUTH_ENDPOINT: https://api.amazon.com
      PROACTIVE_EVENT_ENDPOINT: https://api.amazonalexa.com
      ALEXA_NOTIFICATION_EXPIRY_MINUTES: ${self:custom.alexa.notificationExpiryMinutes}

If you are in EU, or Asia Pacific region, You should be changed the PROACTIVE_EVENT_ENDPOINT to appropriate one.

https://developer.amazon.com/docs/smapi/proactive-events-api.html#call-proactive

Let’s take a check!

This film is for testing. I was setting the AWS IoT Rules as follows.

select 'person' from <<topic-filter>> where 'person' > 0.600

All Done! We could use AI power and Alexa without deeply knowledge of Machine Learning 🙂

Let’s enjoy Alexa style 🙂

https://www.npmjs.com/package/ask-cli

https://serverless.com/framework/docs/providers/aws/guide/variables/#reference-variables-using-the-ssm-parameter-store

https://docs.aws.amazon.com/deeplens/latest/dg/deeplens-getting-started.html

https://docs.aws.amazon.com/iot/latest/developerguide/iot-rules-tutorial.html