フレクトのクラウドblog re:newal

http://blog.flect.co.jp/cloud/からさらに引っ越しています

Amazon Chime SDKの新機能 背景置き換え機能(≒仮想背景機能)を使ってみた

こんにちは。研究開発室の岡田です。

先日(2022/1/25)、Amazon Chime SDK for Javascript に待望の背景置き換え機能が追加されましたね。

aws.amazon.com

これまで、Amazon Chime SDKアプリ開発者は独自の方法で仮想背景機能を作成する必要がありましたが()、AWS 公式での今回の機能追加によって、よりシンプルに仮想背景機能を作成することができるようになりました。

また、この機能は以前より提供されていた Amazon Chime SDK for Javascript の Video Processing API を使用して実現されているので、この機能を使用していた開発者(例えばBackground Blur)にとっては、ほとんど追加の学習なく使用できるようになっています。

それでは、どのような感じで動くのか、仮想背景機能を作成して試してみましょう。作成した仮想背景機能の動作は次のような感じになります。 ezgif com-gif-maker

続きを読む

MuleSoft開発 Salesforceを使用してSSOを実現する - OpenID Connect編

こんにちはCI事業部の川瀬です。

前回に引き続きSalesforceを使用してSSOを実現したいと思います。今度はOpenID Connectを使用します。前置きは省略し実際にやっていきましょう!

では、Salesforceの設定から実施していきましょう。途中までは、前回のSAML編と同じです。

1. Salesforceで「私のドメイン」を設定する。

f:id:k2-flect:20220115121228p:plain

2. Salesforceで「IDプロバイダの有効化」を有効化する。

f:id:k2-flect:20220115110936p:plain

3. Salesforceで「接続アプリケーション」を作成する。

下記の画面で、「接続アプリケーション名」、「API 参照名」、「取引先責任者 メール」に対し、任意の値を設定してください。 f:id:k2-flect:20220115111718p:plain

下記の画面で、「OAuth 設定の有効化」をチェックしてください。 f:id:k2-flect:20220115200922p:plain

3.1 「コールバック URL」の設定

コールバック URLには何を設定するのでしょうか?どこを探してもそのような記事はないです。そうなんです、この時点では設定すべき値はどこにも存在しないので、「https://hoge.hoge.com」で大丈夫です。

3.2 「選択した OAuth 範囲」の設定

選択した OAuth 範囲には何を設定するのでしょうか?全部設定してしまうことが簡単ですが、気になりますよね。これもどこを探しても、何を設定すべきかを記載している記事はないです。
ここでは次の2つを設定すれば大丈夫です。
・ID URL サービスにアクセス
・一意のユーザー識別子にアクセス
設定したら、「保存」ボタンを押します。

3.3 「コンシューマ鍵」と「コンシューマの秘密」

保存ボタンを押すと以下の画面に遷移します。そうしたら、「コンシューマ鍵」と「コンシューマの秘密」を保存しておいてください。後で使います。 f:id:k2-flect:20220115202552p:plain

4. 「Identity Provider」の設定

ここからは、Anypoint Platformの作業になります。 Access Managementの「Add Identity Provider」→「OpenID Connect」を選択します。 f:id:k2-flect:20220115114127p:plain

4.1 「Use manual registration」の設定

以下の図で「Use manual registration」をクリックします。 f:id:k2-flect:20220115203052p:plain

そうすると、次の図のようになります。 f:id:k2-flect:20220115203322p:plain

4.2 「Name」の設定

はい、適当に任意の値を設定してください。

4.3 「Client ID」の設定

手順3.3で取得した「コンシューマ鍵」を設定してください。

4.4 「Client ID」の設定

手順3.4で取得した「コンシューマの秘密」を設定してください。

4.5 「OpenID Connect Issuer」の設定

https://≪MYDOMAIN≫.my.salesforce.com/services/oauth2​/clients
≪MYDOMAIN≫は手順1で取得した値です。

4.6 「Authorize URL」の設定

https://≪MYDOMAIN≫.my.salesforce.com/services/oauth2/authorize

4.7 「Token URL」の設定

https://≪MYDOMAIN≫.my.salesforce.com/services/oauth2/token

4.8 「User Info URL」の設定

https://≪MYDOMAIN≫.my.salesforce.com/services/oauth2/token
はい、ここまできたら「Save Changes」を押してください。

4.9 「redirect URI」の取得

保存したら、再度、開いてください。図のようにredirect URIが設定されています。 f:id:k2-flect:20220115204307p:plain

5. Salesforceに「コールバック URL」を設定する

手順3.3で「https://hoge.hoge.com」を設定しましたよね。これを手順4.9で取得した値に置き換えます。

6. SSOの確認

Anypoint Platformにログインしている場合は、一旦、ログアウトし、下記のURLブラウザに入力してください。 https:/anypoint.mulesoft.com/accounts/login/DOMAIN-NAME
DOMAIN-NAMEはAnypoint Platformaのドメインです。組織ドメインは以下の図の箇所で確認できます。 f:id:k2-flect:20220115112822p:plain

Salesforceのログイン画面がでてきてログインできましたか?成功するとAnypoint Platformのユーザーに以下のようなユーザーが登録されています。

f:id:k2-flect:20220115121353p:plain

前回に引き続き、「OpenID Connect」を使用したSSOの設定方法を紹介しました。分かると簡単なのですが、「コールバック URL」など肝心なところの説明、設定方法が欠落しておりイライラしてしまいます。

なんでこんなことを紹介したかというと、勿論Salesforceを導入しているならそちらでアカウント管理したほうが便利ですよね。更に、API Community Managerなるものがあり、こちらの事前設定で必要になるのです。

docs.mulesoft.com

次回は、「クライアント認証」か「Standalone」について説明するつもりです。

MuleSoft開発 Salesforceを使用してSSOを実現する - SAML編

こんにちはCI事業部の川瀬です。

今回はSalesforceを使用してSSOを実現したいと思います。具体的はAnypoint Platformにログインするときに「Salesforceアカウントを使用」しますということになります。

具体的には以下のサイトを手掛かりに設定を行うのですが、よく分からないので、図で示しながら、簡潔に説明していきます。 docs.mulesoft.com

では、Salesforceの設定から実施していきましょう。

1. Salesforceで「私のドメイン」を設定する。

f:id:k2-flect:20220115121228p:plain

2. Salesforceで「IDプロバイダの有効化」を有効化する。

f:id:k2-flect:20220115110936p:plain

3. Salesforceで「接続アプリケーション」を作成する。

下記の画面で、「接続アプリケーション名」、「API 参照名」、「取引先責任者 メール」に対し、任意の値を設定してください。 f:id:k2-flect:20220115111718p:plain

下記の画面で、「SAML の有効化」をチェックしてください。そうすると、いくつかの項目は自動で生成されるのでそのままで大丈夫です。 次に、「開始 URL」、「エンティティ ID」、「ACS URL」に対し値を設定していきます。 f:id:k2-flect:20220115111951p:plain

3.1 「開始 URL」の設定

https://anypoint.mulesoft.com」を設定してください。

3.2 「エンティティ ID」の設定

Anypoint Platformの組織ドメインをDOMAIN-NAMEとすると、「DOMAIN-NAME.anypoint.mulesoft.com」を設定してください。 組織ドメインは以下の図の箇所で確認できます。 f:id:k2-flect:20220115112822p:plain

3.3 「ACS URL」の設定

私がいろいろ調べたのですが、よく他の記事では「ACS URLはサービスプロバイダで取得した値を設定してください。」と記載されています。じゃ、MuleSoftの場合は何ですか?となります。 どこかに記載してあるのかもしれませんが、この段階では実は存在しないのです!ここがポイントです。 なので、適当に「http://hoge.hoge.com」で最初は大丈夫です。この状態で「保存」ボタンを押します。

3.4 「メタデータ」のダウンロード

下記の画面(アプリケーションマネージャで作成した接続アプリケーションのManageを選択)で「メタデータのダウンロード」を選択し、Salesforceの設定情報をダウンロードし保存します。 f:id:k2-flect:20220115113741p:plain

4. 「Identity Provider」の設定

ここからは、Anypoint Platformの作業になります。 Access Managementの「Add Identity Provider」→「SAML 2.0」を選択します。 f:id:k2-flect:20220115114127p:plain

4.1 「メタデータ」のアップロード

手順3.4でダウンロードしたメタデータを「Chose file」を選択しアップロードします。 f:id:k2-flect:20220115114459p:plain

4.2 「Name」、「Sign Off URL」、「Audience」の設定

アップロードとすると、以下の図のようになります。アップロードしたほうが遥かに簡単です。 f:id:k2-flect:20220115115755p:plain

「Name」は適当に設定してください。
Sign Off URL」は「≪Issure≫/services/auth/idp/saml2/logout 」と設定してください。
≪Issure≫はメタデータをアップロードした時に設定されています。4.1の図を見てください。

「Audience」は手順3.2と同じで「DOMAIN-NAME.anypoint.mulesoft.com」となります。 設定したら、「Save Changes」を押します。

4.3 「ACS URL」の取得

保存したら、再度、開いてください。図のようにACSが設定されています。 f:id:k2-flect:20220115120434p:plain

5. Salesforceに「ACS URL」を設定する

手順3.3で「http://hoge.hoge.com」を設定しましたよね。これを手順4.3で取得した値に置き換えます。

6. SSOの確認

Anypoint Platformにログインしている場合は、一旦、ログアウトし、下記のURLブラウザに入力してください。 https:/anypoint.mulesoft.com/accounts/login/DOMAIN-NAME
DOMAIN-NAMEは手順3.2で確認したもの

Salesforceのログイン画面がでてきてログインできましたか?成功するとAnypoint Platformのユーザーに以下のようなユーザーが登録されています。

f:id:k2-flect:20220115121353p:plain

今回は、SAMLを使用しましたが、次回はOpenID Connectで設定する方法を紹介します。こちらも、少しクセがあります。

Bolt for JavaScriptと静的なコンテンツ、REST API, SocketIOを共存させる

本記事は Slack Advent Calendar 2021 の 23 日目の記事です。

こんにちは。研究開発室の岡田です。

はじめに

今年の Advent Calendar では、Slack について7 日目の Slack 通話の内容を Slack 上で見えるようにしようと、AWS について18 日目の Amazon Chime SDK for JavaScript で Among Us Automute とゲーム実況配信 その2を執筆しました。

そして、本記事が今年ラストの Advent Calendar への投稿となります。

上記の AWS Advent Calendar18 日目の 記事を執筆した後、そこで紹介した機能を Slack から起動できるように拡張しました。本記事では、その際に必要となった、 「Bolt for JavaScript の Web サーバ(Express)と、静的なコンテンツ、REST API, Socket.IO を共存させる方法」をご紹介します。

image

続きを読む

Amazon Chime SDK for JavaScript で Among Us Automute とゲーム実況 その2

本記事は AWS Advent Calendar 2021 の 18 日目の記事です。

こんにちは、フレクトの Among us 部所属の岡田です。

はじめに

今回は、Amazon Chime SDK for JavaScript(以降 Amazon Chime SDK と略す)を使って Among Us の Automute 機能+画面配信機能を作った話です。以前のブログでもご紹介したのですが、いくつか改良すべき点があったので、それについてお話しします。

ところで、ちょっとした宣伝ですが、弊社は日本企業で最初の Amazon Chime SDK のパートナーです。また、Amazon Chime SDK について AWS のサイト上でGuest ブログを執筆させていただいていたりもしています。今回の内容は(半分執筆者の趣味で)ゲームを題材としてますが、オンラインビデオを活用した真面目な(?)サービス開発の実績もございますので、興味を持たれましたらぜひ弊社にご相談いただければと思います。1

image


  1. ゲームが不真面目というわけではありません。執筆者はこの記事も本気で書いています。

続きを読む

Slack通話の内容をSlack上で見えるようにしよう

本記事は Slack Advent Calendar 2021 の 7 日目の記事です。

はじめに

こんにちは。研究開発室の岡田です。

ここ数年で多くの企業がリモートワークを導入するようになりました。このような企業では、Slack をはじめ、業務を効率化するために様々なコミュニケーションツールを活用していると思います。しかし、それでも会話や雑談が不足して様々な問題が発生している状況のようです。

参考:会話と雑談の不足で 7 割以上が心的不調

一方で、オフィスのように雑談が突発的に時間を選ばずに発生するような環境のほうが嫌だという人も一定数いそうです。仕事に集中したい時に、近くで面白そうな話を雑談されていると気になって困ることもありますし(自分の意志が弱いだけです。。)。

とはいうものの、やはり楽しそうに話している雑談や興味のある話をしている雑談には混ざりたいです。おそらく、"雑談の内容が面白そうレベル"が"仕事に集中したいレベル"を超える場合があり、そういったときに意識的に参加できるというのがストレスのない環境なのではないでしょうか。

ところで、私の職場では Slack に雑談用のチャネルがあり、そこで Slack 通話を用いて雑談をすることが多いです。Slack 通話を始めてしまうと参加者以外は雑談の内容を一切知ることができません。オフィスで業務している時であれば、雑談の内容が漏れ聞こえてきて、面白そうなら参加するといったこともできました。しかし、Slack 通話の場合は内容がわからないので、私のような引っ込み思案の人たちは参加していいものか迷ってしまいます。もし、Slack 通話の内容を参加者以外が知ることができれば、このような人たちが雑談に加わる機会が増えるかもしれません。また、オフィスでは耳栓でもしないと雑談を完全にシャットアウトするのは難しいです。しかし、Slack 通話の内容を Slack 上で見えるようにする方法であれば意図的に雑談用のチャネルを開かなければ雑談に気を散らされることなく仕事に集中できそうです。

そういうわけで、今回は Slack 通話の内容をチャネル内に表示する "speech-to-text-chat" という Slack App を作ってみましたのでご紹介します。 実際の動きとしては、下図のように Slack 通話の内容がテキストで投稿されるようになります。 image

続きを読む

Amazon Chime SDK for JavaScriptの新機能背景ぼかしの性能を評価する

こんにちは。研究開発室の岡田です。

先日Amazon Chime SDK for JavaScript に待望の背景ぼかし機能が追加されました[参考]。これまでも以前ご紹介したようにVideo Processing API を用いて仮想背景を実装することはできました。しかし、この場合 bodypix など人物と背景を分離するための機能を開発者が用意しなければならず、比較的実装のハードルが高くなっていました。今回の新機能により、人物と背景を分離したうえで背景をぼかすところまでを Amazon Chime SDK for JavaScript が全部やってくれるようになり、簡単に実装できるようなりました。

この機能の利用方法やデモについては、AWS 様の Guest Blog という形で 紹介させていただくことができましたので、こちらのブログをご参照ください。

https://aws.amazon.com/jp/blogs/business-productivity/blur-your-background-and-suppress-noise-in-an-online-meeting-application-built-with-the-amazon-chime-sdk-for-javascript/

このブログでは、上記の Guest Blog の執筆と合わせて実施した簡易版の性能評価の結果についてご紹介したいと思います。

続きを読む