#はじめに
昨今流行りのAIサービス、巷には色々ありますね。
逆に色々あり過ぎて、じゃあ実際には何ができるの？と迷ってしまうのも事実。
そこで数回に分けて、AI連携フレームワーク『シンプルエーアイ』を使って遊んでみたいと思います。
AIに興味ある方、ちょっと試してみたい方、どうぞお付き合い下さい。
#『シンプルエーアイ』って？
ブラウザでAIサービスを使えるフレームワークです。
動かすためには、JavaScriptの知識が多少あればOK。
フレームワークは公式サイトで配布しています。
公式サイトはこちら：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.公式サイトの「シンプルエーアイをためす」ページをクリックして下さい。
2.ページ中央付近にある「Microsoft Cognitive Services(無料で試用可能)」をクリックし、Microsoftのページを開きます。
3.Microsoftのページが開くので、「Cognitive Services を無料で試す」バナーをクリックします。
###「Face API」を取得しよう
1.開いたページの中から「Face API」を探し、「API キーの取得」をクリックして下さい。
2.利用条件のポップアップが表示されるので、チェックボックス2か所にチェックを付けて「次へ」をクリックします。
3.お持ちのアカウントでログインして下さい。
4.「Face API」の以下の項目のキーをコピーし、メモ帳などに控えておいて下さい。
- エンドポイント（画像①のキー）
- APIキー（画像②のキー）
###「Bing Speech API」を取得しよう
1.開いたページの中から「Bing Speech API」を探し、「API キーの取得」をクリックして下さい。
2.利用条件のポップアップが表示されたら、チェックボックス2か所にチェックを付けて「次へ」をクリックします。
3.再度サインイン画面が出てきた場合は、お持ちのアカウントでログインして下さい。
4.「Bing Speech API」の以下の項目のキーをコピーし、メモ帳などに控えておいて下さい。
- エンドポイント（画像①のキー）
- APIキー（画像②のキー）
###「Computer Vision API」を取得しよう
1.開いたページの中から「Computer Vision API」を探し、「API キーの取得」をクリックして下さい。
2.利用条件のポップアップが表示されたら、チェックボックス2か所にチェックを付けて「次へ」をクリックします。
3.再度サインイン画面が出てきた場合は、お持ちのアカウントでログインして下さい。
4.「Computer Vision API」の以下の項目のキーをコピーし、メモ帳などに控えておいて下さい。
- エンドポイント（画像①のキー）
- APIキー（画像②のキー）
#準備2：フレームワークをダウンロードする
キーが準備できたら、次はフレームワークです。
公式サイトの「ダウンロ－ド」ページから、フレームワークをダウンロードして下さい。
#準備3：フレームワークを解凍し、新しいファイルを準備しよう
ダウンロードしたファイル「simpleai-trial.zip」を解凍して下さい。
解凍後は「simpleai-trial」というフォルダが作成されています。
解凍されたフォルダ「simpleai-trial」の中に、これからフレームワークを動かす為の新しいHTMLファイルを作成します。
ファイルのヘッダ部分には、jqueryおよびシンプルエーアイのJSファイルを設定しておいて下さい。
以下にソースの記述例を挙げておきます。
<!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の キー① を入力
上段の項目：Bing Speech APIの エンドポイント を入力
下段の項目：Bing Speech APIの キー① を入力
上段の項目：Computer Vision APIの エンドポイント を入力
下段の項目：Computer Vision APIの キー① を入力
#最後に
今回はここまでです。お疲れ様でした。
結局、準備だけで終わってしまいましたので…
次回の記事では、実際にフレームワークを動かしてみたいと思います。