Amazon Web Services ブログ

AWS の AI/ML サービスを使ってアプリケーションのアクセシビリティとインクルージョンを向上し、視覚やコミュニケーションの課題を解決する

この記事は Use AWS AI and ML services to foster accessibility and inclusion of people with a visual or communication impairment を翻訳したものです。

AWS では豊富な人工知能 (AI) と機械学習 (ML) のサービスを提供しており、特に AI サービスでは ML の経験がない開発者でも学習済みの機械学習モデルをすぐに利用することができます。本記事では、そのようなサービス群を利用して、視覚、読字、発話、聴覚に障害あるいは外国語でのコミュニケーションに障壁のある方々のインクルージョンを向上できるアプリケーションの構築方法をご紹介します。Amazon Transcribe、Amazon Polly、Amazon Translate、Amazon Rekognition、Amazon Textract といったサービスを利用することで、リアルタイム文字起こし、音声合成、翻訳、物体検知、画像からのテキスト抽出などの機能をご自身のプロジェクトに組み込むことができます。

AWS AugmentAbility の紹介画像

世界保健機関 (WHO) によると、全世界人口の約 15% にあたる 10 億人以上の人々が何らかの障害と共に暮らしており、高齢化や慢性的な病の流行によってこの数字は今後も増加すると見込まれています。発話、聴覚、視覚などの障害を持った人々にとっては、人の話やテレビ番組を聴いたり、感情や要求を表現したり、物を探し回ったり、本を読んだりするといった日常的な行動も不可能な挑戦に感じられます。そのため数多くの研究が、障害を持った人々の社会参入を支援するテクノロジーの重要性を強調しています。 欧州議会調査局 (European Parliamentary Research Service) の調査によると、現在主流になっているスマートフォンなどのテクノロジーは、障害を持つ人々のニーズに応じるのに適した機能をますます提供しています。さらに、障害のある人々のためのデザインは、すべての人々の体験向上に繋がる傾向にあり、これは「カーブカット効果」として知られています。

本記事では、AWS SDK for JavaScript を用いて、AWS の AI サービスで提供される機能をご自身のソリューションに組み込む方法をご紹介します。そのために今回は、Amazon Transcribe、Amazon Polly、Amazon Translate、Amazon Rekognition、Amazon Textract を使って簡単にアクセシリビティ向上のための機能が実装されたサンプルの Web アプリケーションを扱います。このアプリケーション「AWS AugmentAbility」のソースコードは、GitHub で公開しており、ご自身のプロジェクトの出発点としてご利用いただけます。

ソリューションの概要

AWS AugmentAbility では 5 つの AWS の AI サービス、Amazon Transcribe、Amazon Polly、Amazon Translate、Amazon Rekognition、Amazon Textract を活用しています。また、ユーザーの認証および認可のため、Amazon Cognito のユーザープールと ID プールも利用しています。

Web アプリケーションをデプロイすると、以下の機能にアクセスできるようになります。

  • リアルタイム文字起こしと音声合成 – 音声認識サービス Amazon Transcribe を用いて会話・発話をリアルタイムでテキストに書き起こします。また、話したい内容をテキストとして入力すると、Amazon Polly の音声合成機能を用いて再生します。この機能は Amazon Transcribe のストリーミング音声認識での自動言語識別とも統合されており、発話言語を明示的に指定することなく、最低 3 秒の発話音声から自動で言語を判別して音声を書き起こすことができます。
  • リアルタイム文字起こしと音声合成 (翻訳あり) – 会話・発話をリアルタイムでテキストに書き起こし、翻訳を行います。また、話したい内容をテキストとして入力すると、翻訳して合成音声で再生します。Amazon Translate でサポートされている 75 以上の言語で翻訳機能を利用することができます。
  • リアルタイムの会話翻訳 – ターゲットとなる言語を選択し、ご自身の言語で話すと、あなたの発話をターゲット言語で再生します。この機能は Amazon Transcribe、Amazon Translate、Amazon Polly の組み合わせで実現されます。
  • 物体検知 – スマートフォンで写真を撮ると、アプリケーションは Amazon Rekognition のラベル識別機能を用いて、あなたの周囲の物体を説明してくれます。
  • ラベル・標識・書類のテキスト検知 – スマートフォンでラベル・標識・書類などの写真を撮ると、アプリケーションが読み上げてくれます。この機能では Amazon Rekognition と、Amazon Textract のテキスト抽出機能が活用されています。また、抽出されたテキストを 75 以上の言語に翻訳したり、読字障害 (ディスレクシア) をお持ちの方々がより読みやすいように OpenDyslexic フォントで表示したりできます。

リアルタイム文字起こし、音声合成、そしてリアルタイムの会話翻訳機能は、現在中国語、英語、フランス語、ドイツ語、イタリア語、日本語、韓国語、ブラジルポルトガル語、スペイン語で利用できます。また、テキスト認識機能は現在アラビア語、英語、フランス語、ドイツ語、イタリア語、ポルトガル語、ロシア語、スペイン語で利用できます。各機能の対応言語の一覧は、AugmentAbility の GitHub リポジトリで公開しています。

AugmentAbility のビルドとデプロイは、お客様のローカル PC で行うことも、AWS Amplify ホスティングを用いてご自身の AWS アカウントで行うこともできます。AWS Amplify ホスティングはフルマネージドの CI/CD と静的 Web ホスティングのサービスで、高速、セキュアかつ信頼性の高い静的あるいはサーバーサイドでレンダリングされるアプリケーションを作成できます。

以下の図では、AWS Amplify ホスティングを用いてクラウドにデプロイされた想定で、アプリケーションのアーキテクチャを示しています。

AWS Amplify ホスティングを利用してアプリケーションをデプロイした場合のアーキテクチャ図

本ソリューションのワークフローは以下のステップで構成されています。

  1. モバイルの Web ブラウザから Web アプリケーションにアクセスします。このアプリケーションは HTML、CSS、JavaScript でコーディングされており、AWS Amplify ホスティングでホスティングされています。また、実装には AWS SDK for Javascript と AWS Amplify Javascript library が利用されています。
  2. ユーザー名とパスワードを入力してユーザーがサインインします。認証には Amazon Cognito ユーザープールを利用します。ログインに成功すると、Amazon Cognito ID プールによって、アプリケーションの機能にアクセスするための AWS の一時的な認証情報がユーザーに付与されます。
  3. ユーザーがアプリケーションの様々な機能を利用する際、モバイルブラウザは Amazon Transcribe (StartStreamTranscriptionWebSocket)、Amazon Translate (TranslateText)、Amazon Polly (SynthesizeSpeech)、Amazon Rekognition (DetectLabels と DetectText)、Amazon Textract (DetectDocumentText) と連携します。

AWS サービスは AWS SDK for JavaScript を用いてモバイル Web アプリケーションと統合されています。一般に、AWS SDK for JavaScript は各種 AWS サービスへアクセスする機能をブラウザスクリプトと Node.js のどちらでも提供しており、このサンプルプロジェクトではブラウザスクリプトで SDK を利用しています。ブラウザスクリプトから AWS サービスにアクセスする方法の詳細については、こちらのドキュメントをご参照ください。AWS SDK for JavaScript は、デフォルトで設定された AWS サービスに対応した JavaScript ファイルとして提供されています。このファイルは一般に、ホストされた SDK パッケージを参照する <script> タグでブラウザスクリプトにロードされます。今回はカスタムのブラウザ SDK が、指定したサービス群で事前に作成されています。(こちらの作成手順はブラウザ用
SDK 作成に関するこちらのドキュメントをご参照ください)

それぞれのサービスは AWS SDK for JavaScript Developer Guide のガイドラインとサンプルコードに沿って Web アプリケーションと統合されています。なおリアルタイム文字起こしの機能実装には、これらに記載の手順に追加のステップが必要でした。これは Amazon Transcribe Streaming WebSocket を利用する際には開発者側で音声をイベントストリームのエンコーディングにエンコードする必要があり、また HTTP で送信された AWS API のリクエストに認証情報を追加するために署名バージョン 4 の署名プロセスを利用する必要があるためです。この方法の詳細については、WebSocket で Amazon Transcribe を利用してリアルタイムの文字起こしを実装する方法を説明しているこちらのブログ記事をご覧ください。

ユーザーのサインイン用の Web ページは、AWS Amplify JavaScript ライブラリの認証機能で実装されています。認証と認可の流れの詳細については、サインイン後に ID プールを使用して AWS サービスへアクセスするをご覧ください。

以降では、AWS Amplify ホスティングを用いて AugmentAbility をデプロイする方法をご説明します。大まかなステップは以下の通りです。

  1. Amazon Cognito ユーザープールと ID プールの作成と、AWS AI サービス群へのアクセス権限の付与
  2. GitHub リポジトリのクローンと設定ファイルの編集
  3. AWS Amplify コンソールでのモバイル Web アプリのデプロイ
  4. モバイル Web アプリの利用

Amazon Cognito ユーザープールと ID プールの作成と、AWS AI サービス群へのアクセス権限の付与

アプリケーションをデプロイする最初のステップでは、Hosted UI を有効化した Amazon Cognito ユーザープールを作成し、Amazon Cognito ID プールを作成し、2 つのプールを統合した上で、ID プールと紐付けされた AWS Identity and Access Management (IAM) ロールに各種 AWS サービスにアクセスできる権限を付与する必要があります。それぞれの手順を手動で実施することで、あるいは AWS CloudFormation テンプレートを使って、このステップを完了させることができます。

今回利用する CloudFormation テンプレートは、Amazon Cognito のプール、IAM ロール、IAM ポリシーを含む、必要なリソースを自動で作成、設定します。

  1. AWS マネジメントコンソールにサインインし、Launch Stack (スタックの作成) をクリックして CloudFormation テンプレートのスタックを作成します: Launch Stack (スタックの作成)
    このテンプレートはデフォルトでは EU West (アイルランド) リージョンにスタックを作成するように設定されています。異なるリージョンでスタックを作成する場合は、コンソールの上部ナビゲーションバーのリージョンセレクターからリージョンを変更してください。この際、今回利用する AWS サービスが利用可能なリージョン (us-east-2, us-east-1, us-west-1, us-west-2, ap-south-1, ap-northeast-2, ap-southeast-1, ap-southeast-2, ca-central-1, eu-central-1, eu-west-1, eu-west-2) を選択するように注意してください。
  2. 次へを選択します。
  3. Region の欄では、サポートされている選択肢の中から利用したいリージョンを選択してください。
  4. Username の欄に、アプリケーションのアクセスに利用したいユーザー名を入力してください。
  5. Email の欄に、初回のサインインの際に一時的なパスワードが送信されるメールアドレスを入力してください。
  6. 次へを選択します。
  7. スタックオプションの設定のページで次へを選択します。
  8. レビューのページで設定を確認します。
  9. ページ末尾の、AWS CloudFormation によって IAM リソースが作成される場合があることを承認するチェックボックスを選択します。
  10. スタックの作成を選択してスタックをデプロイします。

AWS CloudFormation のコンソールのステータスの列でスタックの状態を確認できます。デプロイ開始から数分で CREATE_COMPLETE のステータスになるはずです。

テンプレートのデプロイでは、認証されたユーザーが利用する IAM ロールに以下の権限が付与されます。

  • transcribe:StartStreamTranscriptionWebSocket
  • translate:TranslateText
  • comprehend:DetectDominantLanguage
  • polly:SynthesizeSpeech
  • rekognition:DetectText
  • rekognition:DetectLabels
  • textract:DetectDocumentText

なお Amazon Comprehend は今回の Web アプリケーションで明示的に利用されてはいませんが、comprehend:DetectDominantLanguage のアクションの権限が付与されています。翻訳元の言語の指定がない場合、Amazon Translate は自動的に Amazon Comprehend をコールして言語を識別します。

GitHub リポジトリのクローンと設定ファイルの編集

以上の手順で AWS の AI サービスへのアクセス設定が済んだので、次に GitHub リポジトリをクローンして設定ファイルを編集していきます。

  1. AWS AugmentAbility の GitHub リポジトリで、Code のプルダウンメニューを選択し、Download ZIP を選択します。この際 ZIP ファイルはダウンロードする場所を選択して保存するか、あるいは自動的にダウンロード用のフォルダに保存されます。
  2. ZIP ファイルをダウンロードした後、解凍し、元の ZIP ファイルを削除します。解凍後には、ファイルとサブフォルダで構成されている aws-augmentability-main というフォルダが得られているはずです。
  3. お好みのテキストエディタで config.js というファイルを作成し、以下の内容を入力してください。 
    var appConfig = {
    "IdentityPoolId": "INSERT_COGNITO_IDENTITY_POOL_ID"
}

var amplifyConfig = {
    "Auth": {
        "region": "INSERT_AWS_REGION_ID",
        "userPoolId": "INSERT_COGNITO_USER_POOL_ID",
        "userPoolWebClientId": "INSERT_COGNITO_USER_POOL_CLIENT_ID",
        "mandatorySignIn": true,
        "cookieStorage": {
            "domain": window.location.hostname,
            "path": "/",
            "expires": 30,
            "secure": true
      }
    }
}
  4. 作成した config.js ファイル内で、4 箇所の INSERT_ から始まる文字列を、それぞれ Amazon Cognito ID プールの ID、リージョン ID、Amazon Cognito ユーザープール ID、ユーザープールのクライアント ID に置き換えます。これらの値は、AWS CloudFormation のコンソールを開き、augmentability-stack というスタックを選択し、出力タブを開くことで確認できます。
    AWS CloudFormation の出力タブ
  5. aws-augmentability-main フォルダに config.js ファイルを保存し、そのフォルダを圧縮することで aws-augmentability-main.zip ファイルを作成します。

Amplify コンソールでのモバイル Web アプリのデプロイ

AugmentAbility のプロジェクトファイルのダウンロードと編集を済ませたので、Amplify コンソールを用いてモバイル Web アプリをビルドそしてデプロイしていきます。

  1. Amplify Hosting の開始方法のページで、Git プロバイダーなしでデプロイを選択します。
  2. 続行を選択します。
  3. 手動デプロイを開始のセクションで、アプリケーションの名前の欄にアプリケーションの任意の名前を入力します。
  4. 環境名の欄に、development あるいは production など、意味のある環境名を入力します。
  5. 方法の欄で、ドラッグアンドドロップを選択します。
  6. PC 上の aws-augmentability-main.zip を指定のゾーンにドラッグ & ドロップするか、あるいはファイルを選択ボタンから aws-augmentability-main.zip を選択します。
  7. 保存してデプロイを選択し、デプロイ成功のメッセージが表示されるのを待ちます。

モバイル Web アプリの利用

ここまでの手順を終えると、無事にモバイル Web アプリがデプロイされているはずです。アプリケーションへの初回アクセスの前に、ステップ 1 で自動的に作成されたユーザーに対して新しいパスワードを設定する必要があります。一時的なログイン画面へのリンクは、CloudFormation スタックの出力タブの UserPoolLoginUrlの項目で確認できます。初回のサインインでは、スタック作成時に指定したユーザー名と、メールで受け取った一時的なパスワードを利用します。

新規パスワードを設定すると、今回のモバイル Web アプリケーションを試せるようになります。

Amplify コンソールの全般セクションの、本番環境の URL 以下に URL リンクがあるはずです。直接開くか、あるいはスマートフォンに送信してから、ユーザー名と新しいパスワードでログインし、AugmentAbility の機能を触ってみてください。

AWS AugmentAbility の「Live transcription and text to speech (リアルタイム文字起こしと音声合成)」機能

AWS AugmentAbility の「Object detection (物体検知)」機能

AWS AugmentAbility の「Text recognition (テキスト認識)」機能

次のステップ

このモバイル Web アプリケーションに変更を加えたい場合、リポジトリからクローンしたファイルを編集し、ローカル環境でアプリをビルド (README ファイル参照) し、Amplify コンソールで変更後の zip ファイルをアップロードすることで再デプロイできます。あるいは、GitHub、Bitbucket、GitLab、または AWS CodeCommit のリポジトリを作成して、そこにプロジェクトのファイル群を保存した後に Amplify をリポジトリと接続することで、全てのコミットの度に自動的にビルドが実行されるようにできます。この方法についての詳細は、既存コードからの利用開始を参照してください。なお、こちらのチュートリアルを進める際には、Step 2a で npm run build コマンドを npm run-script build に変更してください。

Amazon Cognito のコンソールで追加のユーザーを作成するには、AWS Management Console での新しいユーザーの作成をご参照ください。また、ユーザーのパスワードを復元する必要がある場合には、初回サインイン時に一時的なパスワードの編集で利用したログイン画面を利用します。この一時的なログイン画面へのリンクは、CloudFormation スタックの出力タブの UserPoolLoginUrl の項目に表示されています。

後片付け

テストが終了したら、リソース稼働による課金の増加を防ぐために、本記事を通して作成したリソースを削除してください。

  1. AWS CloudFormation コンソールを開き、左ペインのメニューでスタックを選択します。
  2. augmentability-stack を選択します。
  3. 削除を選択し、確認のプロンプトでスタックの削除を選択します。
  4. Amplify コンソールを開き、今回作成したアプリケーションを選択します。
  5. アクションのメニューで、アプリの削除を選択し、確認のプロンプトで削除を承認します。

まとめ

本記事では、リアルタイム文字起こし、音声合成、物体検知、あるいはテキスト認識をすべての人々に提供するために AWS の AI/ML サービスを活用するコードのサンプルのデプロイ方法をご説明しました。ハンディキャップの有無によらず、様々な人々が利用できるアプリケーションの作成方法を知っておくことは、よりインクルーシブでアクセシリビリティが高い製品を開発する際に重要なポイントです。

AugmentAbility を使い始めるには、GitHub リポジトリをクローンあるいはフォークして、モバイル Web アプリケーションを触ってみてください。もしも AugmentAbility をご自身の AWS アカウントにリソースをデプロイせずに試してみたい場合は、こちらのデモページをご利用ください。(ユーザー名: demo-user, パスワード: Demo-password-1)

筆者について

本記事の筆者 Luca Guida

Luca Guida は AWS のソリューションアーキテクトです。ミラノを拠点として、イタリアの ISV セグメントのお客様のクラウドジャーニーを支援しています。情報科学と工学に学術的バックグラウンドを持ち、大学から AI/ML の分野に情熱を注ぎ始めました。AWS 内の自然言語処理 (Natural Language Processing; NLP) コミュニティーのメンバーとして、Luca はお客様の AI/ML サービス導入の成功を支援しています。

翻訳は Solutions Architect の安藤慎太郎が担当しました。原文はこちらです。