AI連携FW『シンプルエーアイ』を使ってみた(1)：ブラウザでAIを動かすぞ（準備編）

#はじめに

昨今流行りのAIサービス、巷には色々ありますね。
逆に色々あり過ぎて、じゃあ実際には何ができるの？と迷ってしまうのも事実。

そこで数回に分けて、AI連携フレームワーク『シンプルエーアイ』を使って遊んでみたいと思います。
AIに興味ある方、ちょっと試してみたい方、どうぞお付き合い下さい。


#『シンプルエーアイ』って？

ブラウザでAIサービスを使えるフレームワークです。
動かすためには、JavaScriptの知識が多少あればOK。
フレームワークは公式サイトで配布しています。

**公式サイトはこちら：[https://smartaifw.com/simpleai-trial/](https://smartaifw.com/simpleai-trial/)**


#必要なものと環境

* カメラとマイク付きの、パソコンやタブレット
* ブラウザ……記事内では、Google Chromeを使います。
* APIのキー……記事内では、MicrosoftのAPIを使います。
* 公式サイトからダウンロードしたフレームワーク「simpleai-trial」
* JavaScriptの基本知識


#まずは準備をしよう
『シンプルエーアイ』をAIサービスと連携させる為には、先にも触れましたが、APIのキーが必要です。
そこでまず事前準備として、APIキーを取得する手順を見ていきましょう。


#準備1：MicrosoftのAPIキーを取得する

###利用するAPIサービス

この記事では、Microsoftの以下のAPIサービスを利用します。

* Microsoft Cognitive Services Face API
* Microsoft Cognitive Services Bing Speech API
* Microsoft Cognitive Services Computer Vision API


###APIキーを取得する手順

1.[公式サイト](https://smartaifw.com/simpleai-trial/)の「シンプルエーアイをためす」ページをクリックして下さい。
![1-1.png](https://qiita-image-store.s3.amazonaws.com/0/255412/b7f16adc-6205-a99a-20d4-d91cb1233f29.png)

　
　

2.ページ中央付近にある「Microsoft Cognitive Services(無料で試用可能)」をクリックし、Microsoftのページを開きます。
![1-2.png](https://qiita-image-store.s3.amazonaws.com/0/255412/9b2234bb-22e9-4ab3-e2f0-ee19f67a978b.png)

　
　


3.Microsoftのページが開くので、「Cognitive Services を無料で試す」バナーをクリックします。
![1-3.png](https://qiita-image-store.s3.amazonaws.com/0/255412/78b8f74b-01ba-5464-3555-6da8b95ae94e.png)

　




###「Face API」を取得しよう

1.開いたページの中から「Face API」を探し、「API キーの取得」をクリックして下さい。
![1-4.png](https://qiita-image-store.s3.amazonaws.com/0/255412/63e75bf4-691d-52c1-3408-42d7fefe1894.png)





　





2.利用条件のポップアップが表示されるので、チェックボックス2か所にチェックを付けて「次へ」をクリックします。
![1-5.png](https://qiita-image-store.s3.amazonaws.com/0/255412/88e2bb66-bce1-9d62-9498-9072b63c8e35.png)

　
　


3.お持ちのアカウントでログインして下さい。
![1-6.png](https://qiita-image-store.s3.amazonaws.com/0/255412/e0dbe209-5ecf-da0e-57a6-a3b4d33665c6.png)

　




4.「Face API」の以下の項目のキーをコピーし、メモ帳などに控えておいて下さい。
* エンドポイント（画像①のキー）
* APIキー（画像②のキー）

![1-7.png](https://qiita-image-store.s3.amazonaws.com/0/255412/fc20fe56-42df-64a2-c646-d22fb37ad133.png)

　



###「Bing Speech API」を取得しよう

1.開いたページの中から「Bing Speech API」を探し、「API キーの取得」をクリックして下さい。
![1-8.png](https://qiita-image-store.s3.amazonaws.com/0/255412/d8294443-63eb-7675-99e1-883a65949cbd.png)

　


2.利用条件のポップアップが表示されたら、チェックボックス2か所にチェックを付けて「次へ」をクリックします。

　

3.再度サインイン画面が出てきた場合は、お持ちのアカウントでログインして下さい。

　

4.「Bing Speech API」の以下の項目のキーをコピーし、メモ帳などに控えておいて下さい。
* エンドポイント（画像①のキー）
* APIキー（画像②のキー）
![1-9.png](https://qiita-image-store.s3.amazonaws.com/0/255412/e542c881-64d2-ecc3-0062-e00129b3a7ac.png)

　


###「Computer Vision API」を取得しよう

1.開いたページの中から「Computer Vision API」を探し、「API キーの取得」をクリックして下さい。
![1-10.png](https://qiita-image-store.s3.amazonaws.com/0/255412/f53f0e29-782f-1b58-2f2b-919f94b0b5ef.png)

　


2.利用条件のポップアップが表示されたら、チェックボックス2か所にチェックを付けて「次へ」をクリックします。

　

3.再度サインイン画面が出てきた場合は、お持ちのアカウントでログインして下さい。

　

4.「Computer Vision API」の以下の項目のキーをコピーし、メモ帳などに控えておいて下さい。
* エンドポイント（画像①のキー）
* APIキー（画像②のキー）
![1-11.png](https://qiita-image-store.s3.amazonaws.com/0/255412/8c22954c-5b9d-22fb-ffcb-a7ed8ef1e9e0.png)

　

#準備2：フレームワークをダウンロードする

キーが準備できたら、次はフレームワークです。
[公式サイト](https://smartaifw.com/simpleai-trial/)の「ダウンロ－ド」ページから、フレームワークをダウンロードして下さい。
![1-12.png](https://qiita-image-store.s3.amazonaws.com/0/255412/2e4d9dcd-fa69-8a02-0a15-c5324d146478.png)

　

#準備3：フレームワークを解凍し、新しいファイルを準備しよう

ダウンロードしたファイル「simpleai-trial.zip」を解凍して下さい。
解凍後は「simpleai-trial」というフォルダが作成されています。

解凍されたフォルダ「simpleai-trial」の中に、これからフレームワークを動かす為の新しいHTMLファイルを作成します。
ファイルのヘッダ部分には、jqueryおよびシンプルエーアイのJSファイルを設定しておいて下さい。
以下にソースの記述例を挙げておきます。


```html
<!DOCTYPE html>
<html>
<head>
    <title>シンプルエーアイ　デモ</title>
    <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
    <script src="simpleai-0.1.0.min.enc.js"></script>
```
　

#余談：公式サイトでAPIキーを入れてみよう

今回取得した3種類のAPIキーは、公式サイトの「シンプルエーアイをためす」で入力することで、簡単にAIの動作を見ることができます。
ぜひ一度、試してみて下さいね。

上段の項目：Face APIの　エンドポイント　を入力
下段の項目：Face APIの　キー①　を入力
![1-13.png](https://qiita-image-store.s3.amazonaws.com/0/255412/391ce769-2b98-8298-2d0c-441837027262.png)

　
上段の項目：Bing Speech APIの　エンドポイント　を入力
下段の項目：Bing Speech APIの　キー①　を入力
![1-14.png](https://qiita-image-store.s3.amazonaws.com/0/255412/ea8a83f0-3132-6c86-7961-ac7568b85f0e.png)

　
上段の項目：Computer Vision APIの　エンドポイント　を入力
下段の項目：Computer Vision APIの　キー①　を入力
![1-15.png](https://qiita-image-store.s3.amazonaws.com/0/255412/3bda92d1-1fd9-d273-ebc4-c5d6d6537c26.png)

　
　
#最後に

今回はここまでです。お疲れ様でした。
結局、準備だけで終わってしまいましたので…
次回の記事では、実際にフレームワークを動かしてみたいと思います。