search
LoginSignup
2

More than 3 years have passed since last update.

posted at

updated at

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

はじめに

昨今流行りの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.公式サイトの「シンプルエーアイをためす」ページをクリックして下さい。
1-1.png

 
 

2.ページ中央付近にある「Microsoft Cognitive Services(無料で試用可能)」をクリックし、Microsoftのページを開きます。
1-2.png

 
 

3.Microsoftのページが開くので、「Cognitive Services を無料で試す」バナーをクリックします。
1-3.png

 

「Face API」を取得しよう

1.開いたページの中から「Face API」を探し、「API キーの取得」をクリックして下さい。
1-4.png

 

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

 
 

3.お持ちのアカウントでログインして下さい。
1-6.png

 

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

1-7.png

 

「Bing Speech API」を取得しよう

1.開いたページの中から「Bing Speech API」を探し、「API キーの取得」をクリックして下さい。
1-8.png

 

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

 

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

 

4.「Bing Speech API」の以下の項目のキーをコピーし、メモ帳などに控えておいて下さい。
* エンドポイント(画像①のキー)
* APIキー(画像②のキー)
1-9.png

 

「Computer Vision API」を取得しよう

1.開いたページの中から「Computer Vision API」を探し、「API キーの取得」をクリックして下さい。
1-10.png

 

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

 

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

 

4.「Computer Vision API」の以下の項目のキーをコピーし、メモ帳などに控えておいて下さい。
* エンドポイント(画像①のキー)
* APIキー(画像②のキー)
1-11.png

 

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

キーが準備できたら、次はフレームワークです。
公式サイトの「ダウンロ-ド」ページから、フレームワークをダウンロードして下さい。
1-12.png

 

準備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の キー① を入力
1-13.png

 
上段の項目:Bing Speech APIの エンドポイント を入力
下段の項目:Bing Speech APIの キー① を入力
1-14.png

 
上段の項目:Computer Vision APIの エンドポイント を入力
下段の項目:Computer Vision APIの キー① を入力
1-15.png

 
 

最後に

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
2