MQTTブローカー shiftr.io の新バージョンをチェックしてみる！ 〜デスクトップアプリ編〜

## はじめに

IoTな開発で良く利用している MQTTブローカーサービスの shiftr.io。
その新しいバージョンが出たっぽいので情報をチェックしてみました。

知ったきっかけは、サービスに登録していたメールアドレスに届いた公式のお知らせからです（以下のツイートの添付画像）。

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">メールで来ていた内容（添付画像）や、今回の話のブログ記事。<br><br>●New Beginnings - <a href="https://t.co/8lBLAbEaDK">https://t.co/8lBLAbEaDK</a><br>　<a href="https://t.co/K5VLR4buuK">https://t.co/K5VLR4buuK</a> <a href="https://t.co/saFC4gzpFG">pic.twitter.com/saFC4gzpFG</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1327045195167199233?ref_src=twsrc%5Etfw">November 13, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 公式のブログ記事の内容を見てみる

上記のツイートの本文に書いているリンクは、以下となります。

●New Beginnings - shiftr.io
　https://next.shiftr.io/blog/2020-11-12-new-beginnings

そして、上記の記事の始まりの部分には、以下のような記載がありました。

![New_Beginnings_-_shiftr_io.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/b6b9c8eb-81f9-40c6-486e-fd78b7d34163.jpeg)

ざっくり見てみると「次世代の shiftr.io ができて、shiftr.io Cloud と shiftr.io Desktop app がある」という内容のようです。そして、文章内のクラウドサービスとデスクトップアプリについて書かれた部分につけられたハイパーリングを開くと、以下のページが開きます。

●Cloud - shiftr.io
　https://next.shiftr.io/cloud/

●Desktop - shiftr.io
　https://next.shiftr.io/desktop/

これまでのURLで「 https://shiftr.io 」となっていた部分が、新しいバージョンのほうは「 https://next.shiftr.io 」となっているようです。
⇒ 旧バージョンは「 https://legacy.shiftr.io/ 」という名称になり、新バージョンのほうが「 https://shiftr.io/ 」という名称になってました（2020/12/5時点）。

## デスクトップアプリについてさらに情報を見てみる

新バージョンのサービス・アプリのうち、これまでは提供されていなかった[デスクトップアプリ](https://next.shiftr.io/desktop/)について、上記の「Desktop - shiftr.io」のページに書かれた内容を見ていこうと思います。

ページのトップには以下のように書かれており、このデスクトップアプリはオフラインで MQTTブローカーを提供してくれるようなもののようです。

![Desktop_-_shiftr_io.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/cf70b473-5067-09cd-2bd0-bda755e88d0c.jpeg)

そして、ページの下のほうへ移動していくと、以下のような部分があります。
このデスクトップアプリは、Windows・Mac・Linux のマルチプラットフォームに対応したアプリで、GUI版だけでなく CLI のものも提供されていることが分かります。

![Desktop_-_shiftr_io.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/7e1c652d-dfa9-9587-9a27-cd64712028d2.jpeg)

## デスクトップアプリを実際に試してみる

それでは、デスクトップアプリを実際に試してみます。
自分は Macを使っているので、Mac用の GUI版を試してみました。

DMG のほうをダウンロードし、アプリをインストールして起動してみた様子が以下となります。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">MQTTブローカーサービスを提供している <a href="https://t.co/8lBLAbEaDK">https://t.co/8lBLAbEaDK</a> で新しくリリースされた、デスクトップアプリをインストールしてみた。 <a href="https://t.co/yDws8xbtaS">https://t.co/yDws8xbtaS</a> <a href="https://t.co/gozUvY2L5p">pic.twitter.com/gozUvY2L5p</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1327426690541264896?ref_src=twsrc%5Etfw">November 14, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

起動したアプリの画面の上部中央あたりを見てみると「localhost 1883/1884」という記載があります。
どうやら、既にローカルで MQTTブローカーが立ち上がっているようです。

本当にクライアントから接続してメッセージの送受信ができるか試してみます。
手軽に試すために、MQTT のクライアントとなるアプリ（GUIフロントエンド）の「[MQTT.fx](https://mqttfx.jensd.de/)」を使い、Pub/Sub をやってみます。

自分が設定した部分は 2箇所で、Profile Name と、Client ID の部分でした。この後に少し補足しますが、実際に設定が最低限必要なのは Profile Name のみ（※ 自分が識別しやすい名前を設定）です。
設定について、接続先の設定は書きかえる必要があるかと思ったのですが、その設定項目である Broker Adress には 127．0．0．1 が設定されていて、ローカルにつながる指定になっていたため、そのまま用いることができました。Client ID は Generate ボタンを押して生成しましたが、デフォルトでも文字列が設定されたいたので、とりあえず今回試す分にはデフォルトのものを使っても問題ありません。

設定を保存した後は、上記で設定した Profile を選択して接続をさせ、適当な共通の Topic を設定して Pub/Sub を試してみてください。以下のツイートの添付画像のように、デスクトップアプリのほうで送受信されたメッセージの情報が可視化されます。

【追記】 この時利用した「MQTT.fx」で Pub/Sub を行うための方法を、ざっくり記事に書いてみました。
●GUIベースのMQTTクライアントアプ「MQTT.fx」の使い方メモ - Qiita
　https://qiita.com/youtoy/items/1086cb1c9518a34968be

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr"><a href="https://t.co/8lBLAbEaDK">https://t.co/8lBLAbEaDK</a> のデスクトップアプリ、サクッとローカルでMQTTブローカーが立ち上がったっぽい。<br><br>マルチプラットフォームで、GUIでMQTTクライアントを立ち上げられる MQTT.fx を組み合わせて、デスクトップでMQTT！ <a href="https://t.co/DNFwycmAB7">pic.twitter.com/DNFwycmAB7</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1327427775188271104?ref_src=twsrc%5Etfw">November 14, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

それと上記の「localhost 1883/1884」という部分、ポート番号は「1883/1884」の2つ書かれていますが、以下のような使い分けとなります。
　・ポート番号 1883： MQTT over TCP
　・ポート番号 1884： MQTT over WebSocket
例えば、HTML＋JavaScript で MQTT の処理を実装しブラウザ上で動作させる場合、TCP が利用できないため MQTT over WebSocket が利用されます。その場合は、接続先の指定でポート番号 1884 を指定する必要があります。

今まで、ローカルで MQTTブローカーを使う際は [Mosquitto](https://mosquitto.org/) を使ってましたが、手順や設定はそれよりも簡単に行えました。

## おわりに
今回、新しくリリースされたバージョンの shiftr.io で提供されている、以下の 2つのうちのデスクトップアプリのほうを試してみました。

* [Cloud - shiftr.io](https://next.shiftr.io/cloud/)
* [Desktop - shiftr.io](https://next.shiftr.io/desktop/)

まだ、ローカルで動作する CLI版と、上記の新バージョンのクラウド版について、あまり詳細をチェックできていないため、それらも見てみたり試してみようと思います。

あと、ドキュメントも見てみなければ！
●Docs - shiftr.io
　https://next.shiftr.io/docs/