0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2023-06-10

初めに

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

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

第1回目の記事はこちらです。
第2回目の記事はこちらです。
 今回は3回目の記事となっています。モノプラットフォームの設定を行い、モノプラットフォームでのデータ受信の確認まで行います。

最終的に作成するもの

 本連続記事では「IoTセンシング」、「マイコンでのプログラムと書き込み」、「モノプラットフォームの設定」、「クラウドアプリケーション」「データの可視化」、「はんだ付け」について説明しており、サンプルアプリケーションとしてIoT環境モニタリングシステムを作成できます。
image.png

この記事の対象者

  • さくらのモノプラットフォームを体験してみたい人
  • IoTを体験してみたい人
  • 開発基板を請求したがその後どうして良いかわからない人
  • webエンジニア、ソフトウェアエンジニア
    を対象としています。

事前準備

  • 開発基板の調達
  • さくらのアカウントの作成
  • ArduinoIDEのインストール
  • Googleアカウントの準備
  • 部品の調達
    こちらのページを参考にします。
    組み立てやプログラムの書き込みについては、こちらのページを参考にしてください。

モノプラットフォームでの受信準備について

今回はweb socketを利用しての受信を例として説明していきます。
1 SIMの登録
2 SIMの情報をプロジェクトに紐づける
3 サービスアダプタを作成する
4 データ受信の準備
5 受信データの確認

1 SIMの登録

さくらのクラウドからセキュアモバイルコネクタのページに入ります。
image.png
左側のメニューからセキュアモバイル→SIMを選択して、右上のSIMの追加をクリックします。
image.png
SIMの情報を登録していきます。
前回メモした内容を参考にして、ICCIDとパスワードを入力します。

キャリアはソフトバンクを選択します。名前は任意になっています。接続先はモノプラットフォームを選択します。
入力が終わったら右下の作成ボタンをクリックして作成します。
image.png

2 SIMの情報をプロジェクトに紐づける

モノプラットフォームを利用するにはSIMやサービスアダプタをプロジェクトに登録して使用する必要があります。
左側のモノプラットフォームメニューからプロジェクトを選択し、右上の作成ボタンを押すことでプロジェクトの作成を開始します。
必要事項を入力して、プロジェクトを作成します。
(名前を空欄にした際には自動で命名されます)
image.png
プロジェクトへのSIMの登録を行います。
左側のメニューから、セキュアモバイル→SIMでSIM一覧画面を出します。
使用するSIMをチェックボックスで選択して右上の詳細ボタンを押します。
image.png
右上の接続先の変更を押します。ラジオボタンを押して接続先をモノプラットフォームにします。プロジェクトのドロップダウンで作成したリソースを選択して変更をクリックします。
image.png
詳細画面からモバイルゲートウェイとIPアドレスが入っていることを確認します。
登録したSIMが表示されていれば成功です。
image.png

3 サービスアダプタを作成する

サービスアダプタにはweb socketとwebhookがあります。今回はweb socketを選択しました。
左側のメニュー→モノプラットフォームサービスアダプタを選択して、右上の作成ボタンを押します。
名前を付けて、前の手順で作成したプロジェクトを選択します。サービスアダプタはweb socketを選択してください。
image.png
左側のメニューからモノプラットフォーム→サービスアダプタを選択します。使用するサービスアダプタのチェックボックスで選択して詳細をクリックして内容を確認します。
image.png

4 データ受信の準備

サービスアダプタの詳細からweb socket URLを確認します。ここで指定されたURLはデータを引き込む際に必要になりますので、メモをしておきます。
※このURLはtokenとなり、デバイスとの接続の際に使用されますので取り扱いには注意してください。image.png
受信データを確認するためのwebs ocketビューアーをダウンロードします。
公式で用意されていますので、こちらからダウンロードします。
zipファイルとしてダウンロードします。
image.png
ダウンロードしたzipファイルを適当な場所で解凍します。
解凍が終わったらindx.htmlをブラウザで開きます。

先ほどメモをしておいた、URLを貼り付けて、Connectボタンを押します。
これでデータ受信の準備はできました。

5 受信データの確認

M5stackからデータを送信します。2回目に書き込んだプログラムを使用します。
このプログラムはサンプル用のカウンターとなっており、M5stackのボタンを押すことで、カウンターの値を送信するようになっています。

ボタンの機能は以下のようになっています。

  • Aボタンを押すことでカウントを1つアップして、カウンターの値の送信。
  • Bボタンを押すことでカウントを10アップして、カウンターの値の送信。
  • Cボタンを押すことでカウンターをリセットして、カウンターの値を送信。

ボタンを押すことでM5stackからデータが送信され、モノプラットフォームで受信できていることが確認できます。
image.png
※今回はデバイスに対してのデータの送信は実装していませんので、データの送信ボタンについては使用しません。

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

終わりに

 いかがでしたでしょうか、今回はモノプラットフォームの設定を行いました。デバイスから送信したデータをモノプラットフォームで受信するところまで確認ができます。
 ここまで確認することができれば、使用方法の流れは把握出来たのではないでしょうか。さて、次回はいよいよサンプルアプリケーションの作成を行ないます。サンプルアプリケーションとして、環境モニタリングシステムの作成を行ないますので、楽しみにしておいてください。

関連記事

さくらのモノプラットフォームを使用したアプリケーション開発 第1回
さくらのモノプラットフォームを使用したアプリケーション開発 第1.5回(事前準備編)
さくらのモノプラットフォームを使用したアプリケーション開発 第2回
さくらのモノプラットフォームを使用したアプリケーション開発 番外編

参考情報

さくらのモノプラットフォーム 開発者向け情報
sipf-simple-websocket-viewer

参考動画

アルディーノIDE v2.0のインストール
Esp32をArduino IDEで使えるようにしよう
0-1.GCPアカウント作成方法

0
0
0

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
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?