Alexaで簡単アプリ開発~フジロックまでの日数を教えてもらう。~

# やりたいこと
##CASE1. カウントダウン
Gさん「アレクサ、フジロック」
アレクサ「フジロックまで、あと○○日です。」
↓クリックで完成動画が流れる

[![完成イメージ](https://qiita-image-store.s3.amazonaws.com/0/184509/21fdb197-c029-ffa8-1a3a-8bbca99ba9f8.png)](https://youtu.be/3YKyaXVFhnU)

##CASE2. ニュース読み上げ
Gさん「アレクサ、フジロックでニュースを教えて」
アレクサ「1つ目のニュース。FUJI ROCK FESTIVAL'18開催！」
アレクサ「2つ目のニュース。世界一クリーンなフェスを目指して」
Gさん「ストップ」
アレクサ「。。。」

# 全体の構成
ALEXAで声を聴いて、AWS上のlambdaに発話内容を送信
↓
lambdaで処理
↓
ALEXAで発音
![概要.PNG](https://qiita-image-store.s3.amazonaws.com/0/184509/9b742a42-dabb-681b-3a03-7c06f936943f.png)

# 手順
1. amazon開発者コンソールでスキルの初期設定をする
2. AWSコンソールにログインし、サーバー側の設定を書く
3. 会話の流れを設定
4. 処理を書く
5. テスト
6. 自分のアレクサに配布

# CASE1. カウントダウン
## 1. amazon開発者コンソールでスキルの初期設定をする

- [https://developer.amazon.com]
 にアクセスして　amazon　alexaをクリック
![develop画面.PNG](https://qiita-image-store.s3.amazonaws.com/0/184509/b3c1183a-e482-f829-c6b4-a474b180bc23.png)

<br>

-  「あなたのダッシュボード」をクリック

![alexa_develop_console.PNG](https://qiita-image-store.s3.amazonaws.com/0/184509/62b4624d-3a61-ec4a-5d61-1a47b2c11c67.png)

<br>

- 「Alexa Skill Kit」をクリック
![alexa_develop_loged_in.PNG](https://qiita-image-store.s3.amazonaws.com/0/184509/8d422806-071f-5585-e20e-1a2f6ed156da.png)
<br>

- 「新しいスキルを追加する」をクリック
![alexa_skill.PNG](https://qiita-image-store.s3.amazonaws.com/0/184509/a3fb28d3-7f6f-bf2a-e845-fe0109c4a987.png)
<br>

- 言語を「日本語」。スキル名を「フジロック情報」。呼び出し名を「フジロック情報」とする。
![make_skill.PNG](https://qiita-image-store.s3.amazonaws.com/0/184509/ba13a567-f00f-e530-be2c-43a6f06fb8d1.png)
<br>

- 画面下の「保存」をクリック
![skill_save.PNG](https://qiita-image-store.s3.amazonaws.com/0/184509/8cc41002-e125-0a95-94d7-4613e4a35aaf.png)
<br>
## 3. 会話の流れを設定
- 「対話モデル」をクリック
![対話モデルに遷移.PNG](https://qiita-image-store.s3.amazonaws.com/0/184509/b068ffe7-f7cb-7635-cc38-9c48b1658180.png)
<br>
- 今回は起動できたらそれでいいので
適当なintent（呼び出し時に使用する変数）を設定する。関係ないことは気にしない。

```json
{
  "intents": [
    {
      "intent": "HelloIntent"
    },
    {
      "intent": "AMAZON.StopIntent"
    },
    {
      "intent": "AMAZON.CancelIntent"
    }
  ]
}
```

![対話モデル構築.PNG](https://qiita-image-store.s3.amazonaws.com/0/184509/8361ee91-6da8-16bf-a54b-cc41f02f5d17.png)
<br>

- エラーになるからしゃあなしでサンプル発話を設定する

```
HelloIntent  こんにちは
```
<br>

- 画面下の「保存」をクリック
![サンプル発話.PNG](https://qiita-image-store.s3.amazonaws.com/0/184509/2d0131d5-6c15-61ef-3b35-178e04baaa9e.png)

 - 以上で会話の設定は完了！
 - 「設定」移行の作業は後程書きます。進みたい気持ちを抑えて
 - まずはAWSコンソールを開いてlambdaの処理を書きます！


## 2. AWSコンソールにログインし、サーバー側の処理を書いていく

- [https://aws.amazon.com/jp/console/]
にアクセスし、「コンソールへログイン」をクリック
![awsコンソールログイン.PNG](https://qiita-image-store.s3.amazonaws.com/0/184509/8f0b6792-0860-cbe7-e32d-cb7bcd10ce2e.png)
<br>

- 緑枠に検索枠に「lambda」と打ち込み、赤枠の「lambda」をクリック
![lambda検索.PNG](https://qiita-image-store.s3.amazonaws.com/0/184509/760accbb-3bff-e195-c1d9-4f9ca7ffe5cb.png)
<br>

- 「関数の作成」をクリック
![lambda関数の作成.PNG](https://qiita-image-store.s3.amazonaws.com/0/184509/eaa139ad-12ad-606f-822e-366604a661a1.png)
<br>

- 「一から作成」をクリック
↓
名前に「myFujirock」、ランタイムに「Node.js 6.10」を選択し、「カスタムロールの作成を」選択
![lambda関数の設定.PNG](https://qiita-image-store.s3.amazonaws.com/0/184509/a43645e8-6fed-b146-576c-42671b1363c6.png)

<br>

- 下記画面が出てくるので「許可」をクリック
![ロールを作成.PNG](https://qiita-image-store.s3.amazonaws.com/0/184509/7a5bab91-5e56-66cb-152f-a5bed2fbb014.png)
<br>

- 既存のロールに先ほどのロールを選択し、「関数の作成」をクリック
 ![関数作成ボタンクリック.PNG](https://qiita-image-store.s3.amazonaws.com/0/184509/90ee071e-e9e0-27cb-74e8-542eb99b044e.png)
<br>

- 「Alexa Skill Kit」を選択し、下へスクロール
![lambdaの設定.PNG](https://qiita-image-store.s3.amazonaws.com/0/184509/dca9d1be-cdbf-da05-8f22-c96bd114ef84.png)

<br>

- 上で作成したamazon developer[https://developer.amazon.com]のダッシュボード からアプリケーションIDをコピーし、lambdaのアプリケーションID欄に書く
![アプリIDスキル取得.PNG](https://qiita-image-store.s3.amazonaws.com/0/184509/240c6b3d-8e45-7344-3f63-54a980571c6c.png)

<br>

![アプリID入力.PNG](https://qiita-image-store.s3.amazonaws.com/0/184509/2842f866-536a-e445-a31a-d8503264cafc.png)


## 4. 処理を書く
- lambdaの「myFujiRock」をクリックし、下へスクロール
- 右側に「Amazon　CloudWach」等表示されていますが不要なので気にしないでください。

![lambdaをクリック.PNG](https://qiita-image-store.s3.amazonaws.com/0/184509/7d495f1e-cd10-50ca-9e5e-a99588031bde.png)

<br>

- 下記コードを貼り付け、「保存」をクリック

```javascript
//フジロック


'user strict';
var http = require('http');
exports.handler = function (event, context) {
	try {
		var request = event.request;

		if (request.type === "LaunchRequest") {
			handleLaunchRequest(context);
		} else if (request.type === "IntentRequest") {
			if (request.intent.name === "HelloIntent") {
				handleLaunchRequest(context);
			
			} else if (request.intent.name === "AMAZON.StopIntent" || request.intent.name === "AMAZON.CancelIntent") {
				context.succeed(buildResponse({
					SpeechText: "なえばで会いましょう",
					endSession: true
				}));
			} else {
				throw "Unknown intnt";
			}

		} else if (request.type === "SessionEndedRequest") {

		} else {
			throw "Unknown intent type";
		}
	} catch (e) {
		context.fail("Exception" + e);
	}
}

function getDif() {
	var fujiDate = new Date('2018/07/27 09:00:00');
	var myDate = new Date();
	var diffTime = fujiDate.getTime() - myDate.getTime();
	var diffDay = Math.floor(diffTime / (1000 * 60 * 60 * 24));
	return diffDay
}

function buildResponse(options) {
	var response = {
		version: "1.0",
		response: {
			outputSpeech: {
				type: "SSML",
				ssml: "<speak>" + options.SpeechText + "</speak>"
			},
			shouldEndSession: options.endSession
		}
	}
	if (options.repromptText) {
		response.response.reprompt = {
			outputSpeech: {
				type: "SSML",
				ssml: "<speak>" + options.repromptText + "</speak>"
			}
		};
	}
	return response;
}

function handleLaunchRequest(context) {

	let options = {};
	options.SpeechText = 'フジロックまで、あと<break time="0.5s"/>' + getDif() + '日です。';
	// options.repromptText = "はい　か　いいえ　で　答えてください。";
	options.endSession = true;
	context.succeed(buildResponse(options));
}


```
![コード.PNG](https://qiita-image-store.s3.amazonaws.com/0/184509/64e91f37-ae28-e383-5cc2-f94c84b5d35d.png)

<br>

- 上へスクロールし、ARNをコピー

![ARNをコピー.PNG](https://qiita-image-store.s3.amazonaws.com/0/184509/823babd7-1de6-a032-8974-25a55ac36161.png)

<br>

- amazon developerにて「設定」をクリック
- 「AWS lambda のARM」をクリック
- デフォルトに先ほどのARMを張り付ける
![ARN登録.PNG](https://qiita-image-store.s3.amazonaws.com/0/184509/2e6d69da-2458-15ae-d216-d77e875907d1.png)

<br>

- 下にスクロールして「次へ」をクリック

![スキル設定保存.PNG](https://qiita-image-store.s3.amazonaws.com/0/184509/fc378407-d21c-1e69-db7a-d3d3c05ff9e9.png)

<br>

- カテゴリー、テストの手順、国と地域を適当に入力する
![公開情報上.PNG](https://qiita-image-store.s3.amazonaws.com/0/184509/63ab3fd4-0c86-5d9b-3c95-3bd6bdc083e9.png)

<br>

- 簡単な説明、詳細な説明、サンプルフレーズを適当に入力
![公開情報中.PNG](https://qiita-image-store.s3.amazonaws.com/0/184509/10ef0a65-e1e5-c177-2c00-31c864534297.png)

<br>

- キーワードを適当に入力
- 小アイコン、大アイコンを選択し
- 「保存」をクリック
- 「次へ」をクリック 
![公開情報下.PNG](https://qiita-image-store.s3.amazonaws.com/0/184509/3dc4003e-592a-9696-382b-5dbe3dd723e7.png)

<br>

- プライバシーとコンプライアンスをクリック
- 適当にチェック！
![プライバシーとコンプラ.PNG](https://qiita-image-store.s3.amazonaws.com/0/184509/0991a810-248d-73f0-0c66-cdfe288babbb.png)

<br>

- 下にスクロールして「保存」をクリック

![コンプラ保存.PNG](https://qiita-image-store.s3.amazonaws.com/0/184509/6574cca2-9d96-c4e8-ed99-c620dca76a3b.png)

<br>

- 「スキルのベータテスト」をクリック
![skillbatatestクリック.PNG](https://qiita-image-store.s3.amazonaws.com/0/184509/3c8b789e-1793-0eaf-9146-b46c613668c3.png)

<br>

- 「テスターのメールアドレス」にテストしたいアカウントのアドレスを記載し、「テストを開始」をクリック！！！
![テスター設定.PNG](https://qiita-image-store.s3.amazonaws.com/0/184509/55654804-3b60-addd-9963-8fd032ca9e32.png)


## 5. テスト

## 6. 自分のアレクサに配布
- メールが届くので、下記リンクをクリック！！
![メール.PNG](https://qiita-image-store.s3.amazonaws.com/0/184509/0eea7897-6908-8350-8a19-34d4995b695c.png)

<br>

- 「スキルテスト」をクリック！！！！！！
![テスト開始.PNG](https://qiita-image-store.s3.amazonaws.com/0/184509/00ccffd4-c022-8de7-4ca8-19efcc238c05.png)

<br>

- 「有効にする」をクリック！！
![有効にする.PNG](https://qiita-image-store.s3.amazonaws.com/0/184509/be2807ed-2423-7bfe-845e-7c38a3a6d0eb.png)


<br>

- 処理が終了したら、ALEXAにこう言ってみよう

「フジロック情報を起動して」

↓をクリック
[![完成イメージ](https://qiita-image-store.s3.amazonaws.com/0/184509/21fdb197-c029-ffa8-1a3a-8bbca99ba9f8.png)](https://youtu.be/3YKyaXVFhnU)

<br>
細かいことはこちらの記事がわかりやすいです！
[Amazon Echo (Alexa) のSkillの開発に必要な基本概念を押さえる](https://qiita.com/chroju/items/3f30fe424df36e4b4d80)

↓↓不明点やご質問はこちらまで↓↓
tsugumi.plus@gmail.com