あなたのサイトのAlexaスキルを作成する方法

Sep 11, 2025

操作方法

私たちの多くは、それがAmazon Echo、Apple Homepod、またはGoogleホームであるかどうかにかかわらず、家の周りにある種のボイスアシスタントを持っています。声が私たちの日常生活について行く方法に大きな影響を与えるだろうと思われます、そして私たちは自分自身に尋ねる必要があるのですが、私たちが改善できる方法は何ですか？ ユーザー体験 私たちのウェブサイトとWebアプリケーションに音声を実装することによって？

このチュートリアルでは、ウェブサイト上のニュースコンテンツを更新する簡単なAlexaスキルを構築するつもりです。カテゴリタイプは、ユーザーによる音声入力によって異なります。あなたがすでにAWSを経験しているのであればそれは助けになるでしょうが、あなたがピクルスに乗ったらあなたを助けるためにそこにたくさんの文書があります。

新しいウェブサイトを構築する？物事を善で簡単に保ちます ウェブサイトビルダー 。保存するデザインファイルを取得しましたか？それらを安全に保ちます クラウドストレージ 。

魅力的なユーザーエクスペリエンスへの10ステップ

私は何が必要ですか？

まず、このチュートリアルのファイルを見つけます Githubについて。

ANに登録する必要があります Amazon Developerアカウント と AWSアカウント 。

FireBaseはユーザー入力を保存するために使用されますので、必ずサインアップするようにしてください。 Firebase口座。また、最新のニュース記事を入手するためにニュースAPIを使用しているので、自分で無料APIキーを入手してください。 Newsapi.org. 。

目的、発話とスロット

Alexa skill: Utterances — これが私たちのスキルのためにAlexa Developerコンソールの中にセットアップしている発話です。お気軽におめでとうございます

設定したら、に移動します developer.amazon.com/alexa/console/ask. そしてスキルを作成することをクリックします。最初に行う必要があるのは、Alexa Developerコンソール内の目的、発話、およびスロットタイプを設定することです。意図は、スキルのユーザーが達成しようとしているものです。発話は、Alexaと話すときにユーザーが言う特定のフレーズです。例えば、「何日ですか？」。スロットは、次のような発話に関連する変数です。 '{place}？'です。これはカスタムスロットを{place}にするでしょう。

ダッシュボードの左側から目を選択し、[Intentを追加]をクリックします。カスタムインテントを作成してタイプを作成するようにしてください ContentUpdate テキストボックスに：これは後で関数名になります。

私達は今、私達が私達が取る必要があるところである発話に進みます カテゴリー ユーザーが更新したいというニュースの。カテゴリをスロット名として使用してから、次の発話を設定します。

 "update {category}"
"{カテゴリ}ストーリー"
"{category}への更新"
"{category}"

最後に、私たちはユーザーから取得することを期待しているいくつかの入力を書くことになるスロットタイプを作成する必要があります。ダッシュボードの左側から、[スロットタイプ]の横にある[追加]をクリックします。 'newStype'を入力して「カスタムスロットタイプの作成」ボタンをクリックします。スロット値の下では、いくつかのニュースカテゴリに追加する必要があります。スポーツ、ビジネス、技術、政治を使用します。終了したら、カテゴリのスロットタイプとしてドロップダウンから[NewStype]を選択したことを確認してください。

AWS Lambda機能

私たちは今に頭を上げます AWSの中のラムダ 。 [機能の作成]を選択し、[BluePrints]ラジオボックスを選択します。必ず選択してください Alexa-Skill-Kit-SDK-Factskill. リストから[設定]をクリックします。関数に名前を付けて、新しい役割を作成します。終了したら、ページの下部にある[機能の作成]をクリックします。あなたの関数のトリガーとしてAlexa Skills Kitを選択する必要があります。その後、機能自体に移動できます。このプロジェクトの組み込みコードエディタを使用していません。代わりに、関数をローカルに書き出してからzipファイルをアップロードします。これをローカルプロジェクトの中に貼り付けるため、必ずLambdaエディタ内のindex.jsファイルの内容をコピーしてください。

地域のプロジェクトを作成します

ローカルに新しいノードプロジェクトを作成することから始めます。私たち自身のIndex.jsファイルの中で、私たちはちょうどラムダから撮った内容を貼り付けます。 NPMを使用してFirebaseとAlexa SDKをインポートする必要があります。

 NPM Alexa-SDKをインストールします
NPM Install Firebase

index.jsファイルの上部に参照を含めるようにしてください。

Const Alexa =要求（ 'Alexa-SDK'）。
VAR FireBase =要求（ "Firebase"）。

あなたはすでにいくつかのデフォルトコードを持っているべきです、そのうちの1つは呼ばれます LaunchRequest. '。これは、ユーザーをスキルに紹介するために使用されます。ここでする必要があるのは、「ウェブサイトアップデートへようこそ」のように歓迎されたメッセージを変更します。

 'LaunchRequest'：function（）{
        this.emit（ '：尋ねる'、「ウェブサイトアップデートへようこそ」）。

を使用している場合 ：告げる コマンドでAlexaはメッセージの後にスキルを終了しますが、使用する場合は ：尋ねる その後、Alexaは次のプロンプトで8秒間待機します。私たちは使うでしょう ：尋ねる たとえば、Alexaは私たちのアップデートプロンプトを聞く準備ができています。

FireBaseの設定

次に、index.jsファイルの上部にFirebase設定の詳細を追加する必要があります。

 var config = {
    apikey： "＆lt; api_key＆gt;"、
    AuthDomain： "＆lt; project_id＆gt; firebaseapp.com"、
    DatabaseURL： "https：//

ContentUpdate関数

Alexa skill: Simulator — Alexa Simulatorは、Amazon Echoデバイスを必要とせずにマシンであなたのスキルをテストするための素晴らしい方法です

チュートリアルの以前は、「contentUpdate」という意図を作成しました。これはAを作成する必要があることを意味します ContentUpdate 作成した発話に基づいて、ユーザー入力に応答します。そのため、ユーザーが「スポーツへの更新」と言った場合、この機能は呼び出されます。私たちは、呼び出された変数を作成します カテゴリタイプ ユーザーの音声入力を受けます。その後、カテゴリタイプをFirebaseデータベース内に保存し、Alexaを入手して、更新したカテゴリの名前を教えてください。

 'contentupdate'：function（）{
    var categoryType = this.event.request.intent.slots.category.value;
    if（firebase.apps.length === 0）{
      FireBase.InitializeApp（config）;
    }
         firebase.database（）ref（ '/'）。セット（{
            好み：カテゴリタイプ
            }）。その後（（データ）=＆gt; {
            firebase.app（）。delete（）。その後（）
            }）。キャッチ（err）=＆gt; {
            console.log（err）;
            ）
        this.emit（ '：ask'、 '+ categoryType）に更新されました。

index.jsファイルを保存した後、プロジェクトをジッパーアップする必要があります。コマンドラインからプロジェクトフォルダに移動し、次のコマンドを入力します。

 ZIP -R Index.zip *

Lambda内の機能に戻り、機能コードセクションまでスクロールします。コード入力タイプのドロップダウンボックスから、「.zipファイルをアップロードする」を選択します。これでZipファイルをアップロードすることができます。

Alexa Simulator内のプロジェクトをテストする前に、Lambdaページの右上のARNを取り、これをAlexaコンソールのエンドポイントセクションに入力してください。あなたのスキルをテストするために、あなたが言う必要があるのは「オープンWeb Update」であり、Alexaは 'Web Updateへようこそ'で返答します。あなたが今「スポーツへの更新」と言うなら、Alexaは「あなたはスポーツに更新された」と言うべきです。「スポーツ」という言葉も、FireBaseデータベース内の好みの下に表示されます。

ニュースページ

Alexa skill: Final page — これが最終的なHTMLページがどのように見えるようになります。それはあなたがAlexaを通して要求したカテゴリを表示します

最後に、Alexaプロジェクトから作成したニュースページ（index.html）をダウンロードしてください - HTMLフォルダ g g 。

Main.jsファイルを開き、チュートリアルの前に行ったように、1~8行目の独自のFirebase設定の詳細を入力します。

main.jsファイルの1行目にnewsapi.orgからニュースAPIキーを入力する必要があります。

 var myapikey = "＆lt; yourapikey"＆gt;

これでindex.htmlファイルを開くと、選択したカテゴリからいくつかのニュースストーリーにロードされるべきです。 Alexaに新しいカテゴリ（スポーツ、テクノロジ、ビジネス、または政治）で更新するように言うたびに、ページ上のニュースストーリーカテゴリが変わります。

アレクサ、以降！

これはあなたがAlexaで達成できるもののちょっとした例であり、うまくいけばあなたに将来の音声プロジェクトのための良い基盤を与えます。 APIからより多くのカテゴリを取得するには、常により多くのスロット値を追加したり、プロジェクトを更新したり、自分のWebサイトのニュース/投稿を引っ張ったりすることもできます。 WebおよびApp開発者がプロジェクトにAlexaを含める方法を見るのを待つことができません。

あなたのサイトを上げて実行しましたか？それを完全に監視してください ウェブホスティング サービス

この記事はもともと発行313に発行されました ネット Webデザイナーや開発者向けの世界で最も売れている雑誌。 ここに問題313を購入してください または ここで購読する 。

関連記事：

Webデザインの次の大きな声である理由
Adobe XDにボイスプロトタイピングが追加されました
すべてのAmazonデバイスへの究極のガイド

あなたのサイトのAlexaスキルを作成する方法

私は何が必要ですか？

目的、発話とスロット

AWS Lambda機能

地域のプロジェクトを作成します

FireBaseの設定

ContentUpdate関数

ニュースページ

アレクサ、以降！

操作方法 - 最も人気のある記事

塗装ブラシをきれいにする方法：決定的ガイド

猫を描く方法

GoogleのCloud Visionのガイド

JavaScriptで誤ったテキスト効果を作成する

写真から図解の肖像画を作成する

15ファンタジーポートレートのヒント

あなたの芸術の品質デジタルコピーを作成する

イオン2でインタラクティブチャートを作成する

カテゴリ