ステップ4. SORACOMメタデータサービスの設定を行う（SORACOM回線を使ったスマートフォンとAWSサービスを用いた画像認識サービスを構築する）

当コンテンツは、エッジデバイスとしてスマートフォン、クラウドサービスとしてAWSを利用し、エッジデバイスとクラウド間とのデータ連携とAWSサービスを利用した画像認識を体験し、IoT/画像認識システムの基礎的な技術の習得を目指す方向けのハンズオン(体験学習)コンテンツ「SORACOM回線を使ったスマートフォンとAWSサービスを用いた画像認識サービスを構築する」の一部です。

ステップ4. SORACOMメタデータサービスの設定を行う

ステップ4アーキテクチャ図

ステップ4では、対象のSIMにメタデータサービスの設定を行い、デバイス側からメタデータサービスを利用する仕組みを構築します。

メタデータサービスの設定は、SORACOM管理コンソールから設定することが可能です。 まずは、SIMグループを作成しメタデータサービスの有効化を行い、対象のSIMに作成したSIMグループを割り当てます。

目的

概要

＜SORACOM メタデータサービスとは？＞

SORACOM Air for セルラーのメタデータサービスは、デバイス自身が使用している IoT SIM の情報を HTTP 経由で取得、更新することができます。 また、書き込みアクセスが許可されている場合には、速度の変更、タグの追加など、各種操作が行えます。

メタデータに対する読み込み・書き込みリクエストは、内部的には https://api.soracom.io/v1/subscribers/{SIMのIMSI} 配下のAPIリクエストにマッピングされる仕組みとなっています。API リファレンスに掲載されている subscribers/{imsi} 配下のものであれば全てのAPIを実行可能です。

メタデータサービスの設定方法、ユースケースは、SORACOM開発者向けサイトをご確認ください。

4-1. SIMグループを作成しメタデータのユーザデータを設定する

SORACOM管理コンソールにログインし、SIMグループを作成します。 続いて、メタデータサービスの有効化とユーザデータの設定を行います。

4-1-1. SORACOM管理コンソールにログインする

まずは、SORACOM管理コンソールにアクセスし、ログインしてください。 ルートアカウント、SAMユーザーのいずれでも問題ありません。

4-1-2. SIMグループを作成する

メタデータサービスを設定するためのSIMグループを作成します。

4-1-3. SIMグループにメタデータサービスの設定を行う

メタデータサービスの設定を行っていきます。

※ 「読み取り専用」チェックを外せば、メタデータを更新することも可能です

APIのエンドポイントの確認方法

AWSのコンソールで、ステップ3-2-6でデプロイしたAPIのステージを選択すると、「URLの呼び出し」の箇所にAPIのリソースパスが表示されます。 その後ろに「リソース名（指定通りに作成した場合は「/search」）」を不可してください。 （例：https://xxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/prod/search）

3-2-8-1_1

APIキーの確認方法

AWSのコンソールで、ステップ3-2-7で作成したAPIキーを[表示]します。

3-2-8-1_2

＜CORSとは？＞

オリジン間リソース共有機能（CORS＝Cross-Origin Resource Sharing）

セキュリティ上の理由から、ブラウザーは、スクリプトによって開始されるオリジン間 HTTPリクエストを制限しています。 追加の HTTP ヘッダーを使用して、あるオリジンで動作しているウェブアプリケーションに、異なるオリジンにある選択されたリソースへのアクセス権を与えるようブラウザーに指示するための仕組みです。

https://developer.mozilla.org/ja/docs/Web/HTTP/CORS

＜メタデータサービス入力項目 補足説明＞

4-1-4. 対象SIMにSIMグループを割り当てる

ステップ4-1-2で作成したSIMグループを、対象のSIMに割り当てます。

4-1-5. 対象SIMの速度クラスを変更する

今回使用するWebアプリでは、スマートフォンから画像をWeb API経由でAWSに送信しますので、速度クラスをfast以上に設定しておくことを推奨します。 速度が遅い場合は、タイムアウトが発生します。

4-2. 【参考】メタデータサービスを利用するプログラムの作成

今回はWebアプリケーションは構築済みですので、参考情報としてどのようにWebアプリケーション（Vue.jsプログラム）側を実装するのかをご紹介します。

デプロイしたWebアプリケーションにはすでにAPIにアクセスするためのプログラムが組み込まれていますので、こちらの章ではコードを適宜引用しながら、APIにアクセスしている部分の解説を行います。

SORACOMメタデータの取得方法

      /**
       * SORACOMメタデータ(userdata)取得
       */
      getSoracomMetadata() {
        // API接続情報の初期化
        this.apiEndpoint = '';
        this.apiKey = '';
        // HTTP非同期通信
        axios
          .get("http://metadata.soracom.io/v1/userdata", { timeout : 1000 })
          .then(response => {
            if (response.status == 200) {
              // SIMグループから取得したuserdataを内部変数に保存
              this.apiEndpoint = response.data.apiEndpoint;
              this.apiKey = response.data.apiKey;
            } else {
              console.log('レスポンスステータス：' + response.status);
              this.errorMessage = 'メタデータの取得に失敗しました。API接続情報を手動で入力してください。';
            }
          })
          .catch(error => {
            // メタデータ取得時にエラーが発生した場合はエンドポイント・ApiKeyクリア
            this.errorMessage = 'メタデータの取得に失敗しました。API接続情報を手動で入力してください：' + error;
          });
      },

メタデータ取得メソッドの呼び出しと保存

// 画面作成時にコンポーネント内で利用する変数の初期値を設定する
    created() {
      // Configミックスインの情報を設定
      this.apiEndpoint = this.config.searchConfig.apiEndpoint;
      this.apiKey = this.config.searchConfig.apiKey;
      this.threshold = this.config.searchConfig.threshold;
      // SORACOMメタデータサービスにアクセスしAPI接続情報を取得
      this.getSoracomMetadata();
    },

次のステップへ進んでください