More than 3 years have passed since last update.

Alexaスキルの開発キャンペーンに今年も挑戦してみた[スキル内課金編]

Last updated at 2019-12-14Posted at 2019-12-14

これは TOWN Advent Calendar 2019 14日目のエントリーです。

「Alexaスキル」というものが一体何かよくわからない方もいるかと思うのですが、すごく簡単にいうと「Amazonが出しているAmazon Echo等のスマートスピーカーで使うことのできるアプリケーション」です。

先日Alexaスキルを開発したのですが、開発するに至った一覧の流れを簡単にご紹介できればと思います。

##開発背景
Amazonは一年のうちに不定期でAlexaスキルに関するキャンペーンを実施しています。「Alexaスキルを開発したら、何かプレゼントあげるよ」っというような内容のキャンペーンです。

去年の年末（2018年）に「Alexaスキル作ってくれたら、Amazon Echo Dot(5000円相当)あげるよ」っというキャンペーンを見かけて、「ん〜〜ちょっとやってみようかな？！」っと思って作ったのが初めてのAlexaスキルです。

そして今年の年末（2019年）に「Alexaスキルにスキル内課金機能を実装したらAmazon Echo Show 5（10000円相当）をあげるよ」っというキャンペーンを見かけ、「おぉ〜！これは作るっきゃない！」っと思い立ちスキル開発に取り掛かりました。

##どんなAlexaアプリを作ったか？

今回作ったAlexaスキルは豆知識を教えてくれるスキルです。
なんで豆知識的なスキルをつくったかというと、それが一番簡単だからです笑笑

今回の開発の目的は勉強とかではなく、Echo Show5の獲得が目的だったので、手っ取り早く開発するために豆知識のようなスキルを開発しました。

##開発の流れ

Alexaのスキル開発経験が0ではないものの、前回作ってから約一年近く経っていたので、改めてAlexaの公式が用意しているチュートリアル的なものをいじって、スキル開発に必要なキーワード、概念的なものを理解して、チュートリアルを応用するような形でスキルの開発に取り組みました

Alexaのスキル開発の手順は以下のような感じです。

【Alexaスキルの開発手順】

スキルを作成
対話モデルの作成
スキル内商品の作成
バックエンドの開発
スキルのテスト
スキルの申請・公開
フィードバック

###1.スキルの作成

alexa developer consoleから「スキルの作成」を行います。

スキル名を入力して、スキルに追加するモデル、バックエンドリソースをホスティングする方法を選択します。今回はサンプルコードをお手本にしているので以下のように選択します。

スキルに追加するモデル：カスタム
バックエンドリソースをホスティングする方法：Alexa-Hosted(Node.js)

「スキルの作成」を行うと以下のような画面が出現します。

Alexaのスキルのビルドや、デバック、テスト等は以下の画面から行います。

2. 対話モデルの作成

「呼び出し名」：Alexaからスキルを呼び出す際になんて名前で呼び出すかを設定する必要があります。
以下のようにユーザーの発言に基づいて、Alexaが返す言葉をこちらで設定しておく必要があるの事細かに設定してゆきます。

対話例：
ユーザー：「アレクサ、音楽流して」
アレクサ：「わかりました、Spotifyで〇〇のプレイリストを流します」

3. スキル内商品の作成

開発者コンソールのビルドタブから「スキル内商品」を作成します。

スキル内商品では商品の「表示名」、「説明」、「アイコン」、「購入確認の説明」などの設定を行います。
この設定の際に、スキル内商品のタイプを選択するのですが、商品のタイプには大きく分けて３つ存在します。

①買い切り型：
買い切り型は、制限されているスキル内の機能やコンテンツにアクセスできるようにします。買い切り型には有効期限がありません。

②サブスクリプション型：
サブスクリプション型は、一定期間プレミアムコンテンツまたは機能にアクセスできるようにします。サブスクリプションをキャンセルするまで、繰り返し課金できます。

③消費型：
購入したスキル内アイテムは、使用すると無効になり、必要に応じて購入できます

4. バックエンドの開発

開発者コンドールのコードエディタを開くと以下のような画面が出てくるかと思います。

すると以下の3つのファイルがあることが確認できるかと思います。

index.js
package.json
util.js

コードサンプルから index.js と package.json を持ってきます。
全ての説明すると結構長くなってしまうので、一部を紹介すると、豆知識のようなスキルを開発したい場合は以下のように連想配列で豆知識に関するテキストを用意していおき、ユーザーがテキストに関する情報を求めるような言動をした際に返すようにします。

index.js


// スキルの名前
const skillName = 'プレミアムトリビア';

// トリビアの連想配列データ
// 無償(free)のトリビアに加え、science, history, spaceの３種類のプレミアムコンテンツを用意している。
const ALL_FACTS = [
  { type: 'free', fact: '1年は365日です。' },
  { type: 'free', fact: 'いち日は24時間です。' },
  { type: 'science', fact: '人間の目は平均で１年に420万回のまばたきをします。' },
  { type: 'history', fact: 'レオナルド・ダ・ヴィンチは500年前に初めてのヘリコプターや潜水艦をデザインしました。' },
  { type: 'history', fact: '古代エジプトでは、ファラオからハエを遠ざけるため、奴隷にハチミツを塗っていました。' },
  { type: 'space', fact: '太陽は太陽系の全質量のうち99.86%を占めています。' },
];

// スキルを起動した時に以下のハンドラーが呼ばれます。
const LaunchRequestHandler = {
  canHandle(handlerInput) {
    return handlerInput.requestEnvelope.request.type === 'LaunchRequest';
  },
  handle(handlerInput) {
    console.log('IN LAUNCHREQUEST');

    const sessionAttributes = handlerInput.attributesManager.getSessionAttributes();
    const entitledProducts = sessionAttributes.entitledProducts;

    if (entitledProducts && entitledProducts.length > 0) {
      return handlerInput.responseBuilder
        .speak(`${skillName}へようこそ。現在、${getSpeakableListOfProducts(entitledProducts)}を、お持ちです。` +
          'トリビアを聞くには、「トリビアを教えて」もしくは「歴史のトリビアを教えて」のように言ってみてください。' +
          '「何を買える？」と聞くとプレミアムコンテンツについて説明します。どうしますか？')
        .reprompt('どうしますか？')
        .getResponse();
    }

    // ユーザーがまだ何も購入していない場合
    console.log('No entitledProducts');
    return handlerInput.responseBuilder
      .speak(`${skillName}へようこそ。` +
        'トリビアを聞くには、「トリビアを教えて」もしくは「歴史のトリビアを教えて」のように言ってみてください。' +
        '「何を買える？」と聞くとプレミアムコンテンツについて説明します。どうしますか？')
      .reprompt('どうしますか？')
      .getResponse();
  },
};


// 入力したトリビアの連想配列からランダムに一つを選択して返す関数
function getRandomFact(facts) {
  const factIndex = Math.floor(Math.random() * facts.length);
  return facts[factIndex].fact;
}

5. スキルのテストを行う

スキルの対話モデル、スキルコード、スキル内商品の作成等を行った後に実際に、そのスキルが正しく動作するかの確認を行います。

テスト画面がは以下のようになっており、入力欄に「〇〇の開いて」などのテキストを打ち込むことでスキルのテストを行うことができます。マイクのようなアイコンをクリックすることで、音声での入力もおこなうことができます。

ここで正しく動作が行えていない場合はログをみる必要があるのですが、
コードエディタの左下部分に ログ： Amazon CloudWatch という部分があるのですが、そこにログが溜まるようになっているのでそこから確認することができます。

6. スキルの申請(公開)を行う

実際にスキルが使用可能かどうか動作確認を行ったのちに

スキル名、スキルの説明、サンプルフレーズ（どのようなフレーズでスキルが起動するか？）、アイコンなどの情報を設定し、スキルの申請を行います。

スキルの申請後に公開するっと設定しておくと、作成したスキルをAmazonの内部の人が実際に「動作確認」、「コードレビュー」を行ってくれるので問題がないと、そのまま公開してくれます。

###7. フィードバック

申請したスキルに不具合や、足りない機能などがある場合は、Amazonから直々にフィードバックが帰ってきます。

Amazonから返ってくるフィードバック明確にどこがダメか指摘してくれるのでどこをどう修正したらよいかとてもわかりやすいです！
例として以下のような感じでフィードバックが来ます。

フィードバックを元に修正を行い、再度申請を行います。

誠に残念ではございますが、申請いただいたスキルは審査プロセスの基準を満たしておらず、Alexaスキルストアに公開することができませんでした。審査結果については、下記をご覧ください。修正が完了しましたら、再度ご申請いただけますと幸いです。



スキルは、健康関連のスキルの必要要件を満たしていません。スキル詳細説明にはあくまで情報の提供や教育を目的としたものであることを記載する必要があります。

例：「このスキルはあくまで情報の提供や教育のみを目的としています。」

コンテンツガイドライン則って応答を削除または編集し、スキルを更新したうえで、認定の再申請を行ってください。

8. 公開

対話モデル、バックエンドの処理等に問題がないと無事スキルが公開されます。

公開されたスキルは、Alexaが搭載されたデバイスであれば使用することができます。

Alexaスキルを作り際に知っておいた方が良いこと

特にこれをしっていないとダメ！！っというものはないのですが、以下の物が予め用意されていると比較的スムーズに開発が進むかと思います。

Alexaスキル
- ユーザーの発言によって発生する文言の準備
- スキル本体
  - 名前
  - どういうスキルかの説明
  - アイコン
- スキル内商品
  - 名前
  - どういうスキル内商品なのかの説明
  - アイコン

##まとめ

上述したような感じでAlexaスキルの開発を行ったのですが特に複雑な処理を行っているわけでもないので、特段難しいことでもないですが、課金を行うプログラムを書いたのが始めただったのでそういった意味ではいい経験になったのではないかなっと思います！！

何よりも今回のとりくみで、しょーもないスキルを6つ公開したので

まだ実際に届いていないのでキャンペーンの内容が
本当かどうかわからないですが、、、、
Echo Show5が6つ届くと考えるとウキウキしちゃいます❤️

AmazonからのChristmasプレゼントだと思って期待して待ちたいとおもいます。

貴重なお時間を割き、お読みくださいましてありがとうございました。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up