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

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

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

第一回目の記事は[こちら](https://qiita.com/shinfrom/items/715c2255b173bd2dabdc?fbclid=IwAR3oqqowBvhYcmDrVxEZiGN2Xlm26QCgn8HzJ7z7cUvWsSuD5vyfxCITYww)です。
今回は2回目の記事となっており、ハードウェアの作成と、ハードウェアの動作確認を行うことがゴールになります。
## 最終的に作成するもの
　本記事では「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)のページを参考にします。
## 注意事項
　最低限の動作確認のためには、通信モジュールとM5stack用のコネクタ(オス)を実装すると十分です。動作確認用のLEDやM5stack用のコネクタ(メス)の実装は失敗する可能性が高いので、本当に実装する必要があるかどうか慎重に検討してください。実装する明確な理由がないときには、実装しないことを強く推奨します。
※作成例では基板に通信モジュールを直接はんだ付けしていますが、バッテリー駆動させる予定がなければ、ピンヘッダをつけてはんだ付けしていくことを推奨します。
## 必要な道具
開発用基板のはんだ付けは、難易度が高いです。はんだ付けに不安がある場合は、良い道具と必要な材料を事前に準備して、道具でカバーするようにしてください。
| 道具 |必要な個数| 価格（円） |
| --- | --- |---|
[はんだごて（温度調整機能付き）](https://akizukidenshi.com/catalog/g/gT-05660/)|1|8500|
|[はんだごて台（クリーナー付き）](https://akizukidenshi.com/catalog/g/gT-02537/)|1|770|
|[精密ニッパ―](https://akizukidenshi.com/catalog/g/gT-06872/)|1|1680|
|ルーペ|1||
|六角レンチ(1.5mm)|||
|USBタイプCケーブル|||

### 材料（事前にそろえておくことを推奨します）
| 材料 |必要な個数| 価格（円） |
| --- | --- |---|
|[はんだ 0.8mm](https://akizukidenshi.com/catalog/g/gT-02594/)|1|280|
|[はんだ吸い取り線](https://akizukidenshi.com/catalog/g/gT-02539/)|1|210|
|[チップリフレッサー](https://akizukidenshi.com/catalog/g/gT-03641/)|1|450|
|フラックス|1||
|パーツクリーナー（フラックス除去液）|1||
|キムワイプ|1||
|マスキングテープ|1||

必要な部品、道具については[こちら](https://qiita.com/shinfrom/items/d195c30ea8da26de56a6)の記事も参考にします。

## 開発用基板の内容の確認
まずは中身がそろっているか確認します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/0e16bed1-ac1c-ac80-2256-421b0efe07d2.png" width=50%>  
　特に通信モジュール、M5stack用のコネクタ、アンテナは今回の動作確認の上で必要になりますので、確実に入っていることを確認します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/6b92a9d1-a5b7-5224-3760-a3572222aa1f.jpeg" width=30%>  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/9749c1aa-528d-b88c-b528-1d59195a43e1.png" width=34%><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/e3b82e20-2d68-1cdb-e0b0-cda7f8817d65.jpeg" width=30%>
　通信モジュールの裏に書かれてあるSIMの情報は、通信を設定する際のSIM情報の登録の際に必要になります。この時点で写真を撮るか、メモに書き残すかして確実に参照できるようにしておきます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/3110d7db-f081-c1f2-75af-68f445fdadc0.png" width=50%>
## 開発基板の組み立て
### 通信モジュールのはんだ付け
　まずはマスキングテープで基板を固定した後、モジュールの位置決めをします。抵抗の足などをカットして、位置決めに利用すると便利です。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/158df1f9-fa5d-4efc-386a-8e1fbfc1dfbb.png" width=50%>
　一か所をはんだ付けで仮留めした後に、ピンセットなどでつついて位置決めします（この時点でのはんだ付けは適当で構いません）。位置決めをした後に、マスキングテープで固定して、4隅を仮留めしていきます。はんだごての温度は350度程度に設定しておきます。
仮留めが終わったら、他の部分に余計な熱がかかってトラブルが起こることを防ぐために、はんだ付けの際に不要な部分をマスキングテープで保護しておきます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/51bb0fe3-5501-d4fb-118f-fbbf29531946.png" width=50%>　
マスキングをして保護が終わったら、しっかりとはんだ付けしていきます。はんだを流した後に、毛細管現象ではんだが上がってくることを確認しながらはんだ付けをます。先ほど仮留めしていた部分も、しっかりとはんだ付けしておきます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/a46957e9-4475-33e8-c743-30fb8da5f7cd.png" width=50%>
### コネクタのはんだ付け
　コネクタ（オス）をつけていきます。一か所に予備はんだをしておきます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/7a0e0430-958a-70b2-6c87-5f3ce009c43e.png" width=50%>
コネクタをのせて予備はんだをしているところに熱をかけることで、仮留めします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/56ef9ef5-a6d8-038c-04e4-973e37535a30.png" width=50%>
四隅を仮留めした後に、不必要な場所に熱がかかるのを防ぐために、マスキングテープを張って、しっかりとはんだ付けしていきます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/e2d83a61-8a02-e9ac-68fc-314b4ea6e234.png" width=50%>
## フレームに固定する
　事前準備編で用意したM5stack用プロトモジュールの基盤をとりはずして、開発基板を取り付けます。取り付けには、1.5mmの六角レンチが必要です。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/8c5e6437-4a00-82c6-5bb0-cd0adcf10d6c.png" width=30%>　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/0ce4796f-4861-e830-4531-94789dc5d68f.png" width=30%>　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/cc5e9bbe-4f3b-ba43-4708-f822c062ca22.png" width=30%>

アンテナをつけて、M5stackに装着します。

 装着した写真

## 動作確認
### 必要なプログラムのインストール
　arduinoIDEを開いて、テスト用のプログラムの書き込みを行います。arduioIDEのインストールと設定については、事前準備を参考に先に行っておく必要があります。
[こちら](https://github.com/shinrinakamura/esp_sipf_client/tree/main)から必要なプログラムをダウンロードします。zipファイルとしてダウンロードします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/e44529f9-7649-ceb2-5274-9c1059269cf9.png)
ダウンロードしたプログラムをarduinoの中に読み込みます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/441685c7-7960-17d6-202a-6ff5d566fcb6.png)
スケッチ→ライブラリのインクルード→.ZIP形式のライブラリをインストールをクリックします。
クリックすると、エクスプローラーが開きます。ダウンロードしたZIPファイルを選択することで、プログラムをライブラリとしてarduinoへ読み込みます。
### テストプログラムの書き込み
テスト用のプログラムを開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/a4bebca1-70b4-f0d9-72b6-1f75775ee39e.png)
ファイル→スケッチ例からテスト用のプログラムを開きます
カスタムライブラリのスケッチ例のところにありますので、esp_sipf_clientからsamplecounterを選択するとプログラムを開くことができます。
ここから先の作業はM5stackと開発用PCを接続した状態で行う必要があります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/f42ce186-4346-cb54-cea4-23ce1cda7b73.png)
プログラムを開いた後に開発ボードと通信ポートを選択します。
矢印で示している場所をクリックすることで、ポートとボードが選択できるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/d876ee71-1e02-5976-a8eb-23fe19e5368f.png)
ボードの選択窓にesp32 devと入力します。
ESP32 Dev Moduleを選択して、通信ポートを選択します。
通信ポートがわからないときは、デバイスマネージャーで確認してください。
### 通信モジュールとM5stackが通信できているか確認
　プログラムをM5stackに書き込んだ後にシリアルモニタを開きます。右上にある虫眼鏡ボタンを押すことでシリアルモニタを開けます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/24b2fe34-5b47-60b0-7640-bbd9913b64c0.png)
シリアルモニタに
```
*** Booting Zephyr OS build v2.6.99-ncs1-1  ***
I: Starting bootloader
I: Primary image: magic=unset, swap_type=0x1, copy_done=0x3, image_ok=0x3
I: Secondary image: magic=unset, swap_type=0x1, copy_done=0x3, image_ok=0x3
I: Boot source: none
I: Swap type: none 
```
のような表示が出てきたら、成功です。
これは通信モジュールの起動メッセージですので、通信モジュールとM5stackが通信できていると判断できます。
これで、ハードウェアが想定通りに動作していることが確認できました。


## 終わりに
　今回は、開発用の基板（ハードウェア）の組み立てと、ハードウェアの最低限の動作確認を行いました。少し難しくなってきましたが、わかりにくいところなどあればご質問ください。次回はいよいよ、実際に通信を行っていきます。
　今回はカホパーツセンターで部品をそろえました。試作コーナーなどもありますので、お近くの人はぶらりと立ち寄ってみてはいかがでしょうか。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/a763ca4b-232b-b781-5f89-88b52c739973.png" width=50%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/3c81c4f3-6807-a838-fcb1-e03057bb9d8c.png" width=50%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/499b149d-f544-4bd0-c7cf-121e84d0d060.png" width=50%>
[カホパーツセンター](https://www.facebook.com/kahopartscenter/?locale=ja_JP)
## appendix
<font color="#ff0000">ここから先の作業については、失敗することも多いので実装するかどうかは慎重に検討する必要があります。</font>
実装する際には、はんだ付けの熟練者に指示を仰ぐようにします。
### LEDの実装と抵抗の実装
LEDの極性を確認します。LEDの足が長い方がアノード(+)、切り欠きがある方がカソード(-)ですが、テスターのダイオードチェックモードで確認します。極性があっていれば、LEDが点灯します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/efd25cb9-f466-48d7-df42-91c61384e2a4.png" width=30%>
基板のシルク印刷を見ながら、LEDの極性を間違わないように差し込みます。
片方を軽くはんだ付けして仮留めします。
LEDを親指で抑えながらはんだをはんだを融かして、位置決めを行います。この時に親指でしっかりと押し込んで固定します。
位置が決まったら、両方ともしっかりとはんだ付けします。
余分な足についてはニッパでカットします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/c3295b5f-46a1-c682-fb98-ff12cc78ff5d.png" width=30%>
抵抗のはんだ付けは比較的容易です。R1とR2に1kΩの抵抗をはんだ付けします。
抵抗の足を適当な長さでまげて、基板に差し込みます。LEDと同じように片方ずつはんだ付けします。
余分な足についてはニッパでカットします。
### トランジスタのはんだ付け
　極性を間違えないように基板に差し込みます（シルクを見るとわかるようになっているので、よく確認します）。足を切る前に、３本まとめてはんだ付けします。
ここでは、はんだを多めにつけておきます（ここでは、ショートしていても気にしないでください）。
余分なはんだを取り除きます。はんだを温めてはんだごてを融かした後に、はんだごてを足の方に振ることで余分なはんだをこそぎ落します。
余分なはんだが除去されており、きれいにはんだ付けができたようでしたら、テスターを使用して、ショートしていないかを確認します。
### M5stackのコネクタ（メス）のはんだ付け
まずは、基板にコネクタをのせてみます。
手で触って位置決めを行うと、カチッとはまるところがありますので、位置を決めます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/016e3a6d-c2b9-23e6-3abc-c59f3e270e3c.png" width=30%>
一か所仮留めして、位置を確認します。
四隅を仮留めして、もう一度位置を確認します。
位置決めが良さそうであれば、固定と部品の保護のためにマスキングテープで固定します。
はんだ付けをしていきます。
<font color="#ff0000">ここから先は非常に難しいです。失敗したと思ったら、問題が起こる前にはずすようにします。</font>
実際にはんだ付けをしていきます。はんだが多すぎると、ソケット部分にはんだが上がってきてしまって、ピンを挿せなくなってしまいますので、はんだを流し過ぎないようにしてください。
ぞのためには、母材を十分に温めて、はんだを少しだけ流し込みます。
### 失敗例とはずし方
このようにソケットの中にはんだが上がってきてしまったら。コネクタとして使用することができません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/b956fa33-19f9-fdef-0ab3-9d1a328bbebe.png)
このように樹脂部分をニッパでこじって、樹脂部分をはずしてしまいます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/bf9f8e76-d38a-2a52-9dd6-d52cd30a2ea6.png)
樹脂部分をはずした後はこのようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/4fb9874b-f93c-c7a8-efb4-206fc834defb.png)
樹脂部分をはずした後にさらにはんだを流していきます。
はんだが十分に流れ込んだら、はんだが溶けていることを確認して、はんだごての先で金属部分を払うことで、除去することが出来ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/e46be05f-189a-7ec7-386e-4b59b4cac27d.png)
はんだ吸い取り線を利用して余分なはんだを除去していきます。はんだ吸い取り線を適当な長さにカットして、フラックスを塗ります。その後にはんだ吸い取り線に熱を加えて、はんだを吸い取っていきます。
余分な負荷が加わるとパターンがはがれることがありますので、小手先でごしごしこすらいないように注意します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/de7897c8-0a6c-c203-d352-b364e5bc1c81.png" width=30%>　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/afe0395c-8ae4-ae67-ba99-77ca6de2f589.png" width=30%>
残った汚れを除去していきます。
パーツクリーナー又ははんだ除去液を、キムワイプにつけて、やさしくふき取るようにします。（キムワイプがなければ綿棒などでも大丈夫です）。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/6e890b0e-057c-fd57-03c1-d6eb5625d3d3.png" width=25%>　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/a6de2e04-c8d6-9540-52d4-0b71256f6bea.png" width=35%>　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/ada5a3f1-e292-df4c-a3c0-9ed75759f549.png" width=30%>

## リリース予定
予定よりも少し遅くなってしまいましたが、サンプルアプリケーションの作成までコンスタントに記事を作成していく予定にしています。
ご意見ご要望があれば可能な限り内容を反映させたいので、コメント等いただけると幸いです。
## 関連記事
[さくらのモノプラットフォームを使用したアプリケーション開発　第1回](https://qiita.com/shinfrom/items/715c2255b173bd2dabdc)
[さくらのモノプラットフォームを使用したアプリケーション開発　第1.5回（事前準備編）](https://qiita.com/shinfrom/items/d195c30ea8da26de56a6)
[さくらのモノプラットフォームを使用したアプリケーション開発　番外編](https://qiita.com/shinfrom/items/2bce28565778e495962b)
## 参考情報
[さくらのモノプラットフォーム　開発者向け情報](https://iot.sakura.ad.jp/platform/development/)
[秋月電子通商](https://akizukidenshi.com/catalog/)
[スイッチサイエンス](https://www.switch-science.com/)
### 参考動画
[アルディーノIDE v2.0のインストール](https://youtu.be/su8pZzPY37I)
[Esp32をArduino IDEで使えるようにしよう](https://youtu.be/yGKforrbP74)
[0-1.GCPアカウント作成方法](https://youtu.be/mGtyJPeVwxM)