さくらのモノプラットフォームを使用したアプリケーション開発　第3回

## 初めに
　本記事は、さくらインターネット株式会社により開発環境が用意されているモノプラットフォームを使用する記事です。IoT向けのサービスを作成したい人、扱い人を対象としています。M5stackを利用してさくらのモノプラットフォーム及び、さくらのモノプラットフォーム開発基板を使用した開発について説明していく予定です。

　この連続記事は
１回目　システムと全体の構成の説明
２回目　ハードウェアの組み立て
３回目　モノプラットフォームの設定
４回目　クラウドアプリケーションの作成
のような順番で進めていきます。

第１回目の記事は[こちら](https://qiita.com/shinfrom/items/715c2255b173bd2dabdc?fbclid=IwAR3oqqowBvhYcmDrVxEZiGN2Xlm26QCgn8HzJ7z7cUvWsSuD5vyfxCITYww)です。
第２回目の記事は[こちら](https://qiita.com/shinfrom/items/0b813d01c8522356c3c4)です。
　今回は3回目の記事となっています。モノプラットフォームの設定を行い、モノプラットフォームでのデータ受信の確認まで行います。
## 最終的に作成するもの
　本連続記事では「IoTセンシング」、「マイコンでのプログラムと書き込み」、「モノプラットフォームの設定」、「クラウドアプリケーション」「データの可視化」、「はんだ付け」について説明しており、サンプルアプリケーションとしてIoT環境モニタリングシステムを作成できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/bb82b037-c7bf-3bf5-baf6-caef6b0e17ae.png)
## この記事の対象者
- さくらのモノプラットフォームを体験してみたい人
- IoTを体験してみたい人
- 開発基板を請求したがその後どうして良いかわからない人
- webエンジニア、ソフトウェアエンジニア
を対象としています。
## 事前準備
- 開発基板の調達
- さくらのアカウントの作成
- ArduinoIDEのインストール
- Googleアカウントの準備
- 部品の調達
[こちら](https://qiita.com/shinfrom/items/d195c30ea8da26de56a6)のページを参考にします。
組み立てやプログラムの書き込みについては、[こちら](https://qiita.com/shinfrom/items/0b813d01c8522356c3c4)のページを参考にしてください。
## モノプラットフォームでの受信準備について
今回はweb socketを利用しての受信を例として説明していきます。
1 SIMの登録
2 SIMの情報をプロジェクトに紐づける
3 サービスアダプタを作成する
4 データ受信の準備
5 受信データの確認

### 1 SIMの登録
[さくらのクラウド](https://cloud.sakura.ad.jp/?gclid=EAIaIQobChMIjriTi_uo_gIVZl0PAh2-zQQpEAAYASAAEgLW1fD_BwE)からセキュアモバイルコネクタのページに入ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/e0b9a501-cf74-aa6f-81d3-9951dac54bbb.png)
左側のメニューからセキュアモバイル→SIMを選択して、右上のSIMの追加をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/9590ab23-ad10-8e23-9d73-92ebe74dc41d.png)
SIMの情報を登録していきます。
※[前回](https://qiita.com/shinfrom/items/0b813d01c8522356c3c4#%E9%96%8B%E7%99%BA%E7%94%A8%E5%9F%BA%E6%9D%BF%E3%81%AE%E5%86%85%E5%AE%B9%E3%81%AE%E7%A2%BA%E8%AA%8D)メモした内容を参考にして、ICCIDとパスワードを入力します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/3110d7db-f081-c1f2-75af-68f445fdadc0.png" width=50%>
キャリアはソフトバンクを選択します。名前は任意になっています。接続先はモノプラットフォームを選択します。
入力が終わったら右下の作成ボタンをクリックして作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/c4b39671-107f-9d80-cb10-94155d35d4e8.png)
### 2 SIMの情報をプロジェクトに紐づける
モノプラットフォームを利用するにはSIMやサービスアダプタをプロジェクトに登録して使用する必要があります。
左側のモノプラットフォームメニューからプロジェクトを選択し、右上の作成ボタンを押すことでプロジェクトの作成を開始します。
必要事項を入力して、プロジェクトを作成します。
（名前を空欄にした際には自動で命名されます）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/6c759fef-02ab-fac7-8a70-687e805ee6ec.png)
プロジェクトへのSIMの登録を行います。
左側のメニューから、セキュアモバイル→SIMでSIM一覧画面を出します。
使用するSIMをチェックボックスで選択して右上の詳細ボタンを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/7d4c2908-e907-0a03-6527-0e30cdbbf2d6.png)
右上の接続先の変更を押します。ラジオボタンを押して接続先をモノプラットフォームにします。プロジェクトのドロップダウンで作成したリソースを選択して変更をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/8bdbab0a-6af1-8b23-3ed2-9647f2ffef38.png)
詳細画面からモバイルゲートウェイとIPアドレスが入っていることを確認します。
登録したSIMが表示されていれば成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/f51412e0-83ba-d2c2-1565-f5564d2573bb.png)
### 3 サービスアダプタを作成する
サービスアダプタにはweb socketとwebhookがあります。今回はweb socketを選択しました。
左側のメニュー→モノプラットフォームサービスアダプタを選択して、右上の作成ボタンを押します。
名前を付けて、前の手順で作成したプロジェクトを選択します。サービスアダプタはweb socketを選択してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/91b39555-68ca-2e09-6a05-ced0c161416a.png)
左側のメニューからモノプラットフォーム→サービスアダプタを選択します。使用するサービスアダプタのチェックボックスで選択して詳細をクリックして内容を確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/ae14a62c-a4ca-34bc-b20d-1e4d0d2c95aa.png)
### 4 データ受信の準備
サービスアダプタの詳細からweb socket URLを確認します。ここで指定されたURLはデータを引き込む際に必要になりますので、メモをしておきます。
※このURLはtokenとなり、デバイスとの接続の際に使用されますので取り扱いには注意してください。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/e085ab51-4040-3fd3-ae48-3cbf3b4fbbd8.png)
受信データを確認するためのwebs ocketビューアーをダウンロードします。
公式で用意されていますので、[こちら](https://github.com/sakura-internet/sipf-simple-websocket-viewer)からダウンロードします。
zipファイルとしてダウンロードします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/927d811a-187a-f568-755d-ffb79d2471cf.png)
ダウンロードしたzipファイルを適当な場所で解凍します。
解凍が終わったらindx.htmlをブラウザで開きます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/e2ef060b-0cec-8ab0-5e5b-6e94e41f7ab4.png" width=50%>
先ほどメモをしておいた、URLを貼り付けて、Connectボタンを押します。
これでデータ受信の準備はできました。
### 5 受信データの確認
M5stackからデータを送信します。[2回目に書き込んだプログラム](https://qiita.com/shinfrom/items/0b813d01c8522356c3c4#%E3%83%86%E3%82%B9%E3%83%88%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0%E3%81%AE%E6%9B%B8%E3%81%8D%E8%BE%BC%E3%81%BF)を使用します。
このプログラムはサンプル用のカウンターとなっており、M5stackのボタンを押すことで、カウンターの値を送信するようになっています。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/db286355-a5f4-8f66-63b7-3e95e5b2b9be.png" width=30%>
ボタンの機能は以下のようになっています。
- Aボタンを押すことでカウントを1つアップして、カウンターの値の送信。
- Bボタンを押すことでカウントを10アップして、カウンターの値の送信。
- Cボタンを押すことでカウンターをリセットして、カウンターの値を送信。

 ボタンを押すことでM5stackからデータが送信され、モノプラットフォームで受信できていることが確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/8170ef6e-9f8a-723b-6e7a-a82f130969d3.png)
※今回はデバイスに対してのデータの送信は実装していませんので、データの送信ボタンについては使用しません。

これで、デバイスから送信したデータをモノプラットフォームで受信できることが確認できました。

## 終わりに
　いかがでしたでしょうか、今回はモノプラットフォームの設定を行いました。デバイスから送信したデータをモノプラットフォームで受信するところまで確認ができます。
　ここまで確認することができれば、使用方法の流れは把握出来たのではないでしょうか。さて、次回はいよいよサンプルアプリケーションの作成を行ないます。サンプルアプリケーションとして、環境モニタリングシステムの作成を行ないますので、楽しみにしておいてください。
## 関連記事
[さくらのモノプラットフォームを使用したアプリケーション開発　第1回](https://qiita.com/shinfrom/items/715c2255b173bd2dabdc)
[さくらのモノプラットフォームを使用したアプリケーション開発　第1.5回（事前準備編）](https://qiita.com/shinfrom/items/d195c30ea8da26de56a6)
[さくらのモノプラットフォームを使用したアプリケーション開発　第2回](https://qiita.com/shinfrom/items/0b813d01c8522356c3c4)
[さくらのモノプラットフォームを使用したアプリケーション開発　番外編](https://qiita.com/shinfrom/items/2bce28565778e495962b)
## 参考情報
[さくらのモノプラットフォーム　開発者向け情報](https://iot.sakura.ad.jp/platform/development/)
[sipf-simple-websocket-viewer](https://github.com/sakura-internet/sipf-simple-websocket-viewer)
### 参考動画
[アルディーノIDE v2.0のインストール](https://youtu.be/su8pZzPY37I)
[Esp32をArduino IDEで使えるようにしよう](https://youtu.be/yGKforrbP74)
[0-1.GCPアカウント作成方法](https://youtu.be/mGtyJPeVwxM)