- 投稿日:2020-09-23T23:57:08+09:00
MQTTクライアントをコマンドラインで簡単に実行する(npx と MQTT.js)
はじめに
こちらのツイートをきっかけに、ふと思いついて試した内容のメモです。
npxで実行できるMQTTクライアントってないのかなぁ #iotlt
— 菅原のびすけ (@n0bisuke) September 23, 2020【追記】 @n0bisuke さんも記事を書かれていたので、リンクを掲載します。
●グローバルインストールせずにMQTTをCLIで試す - Qiita
https://qiita.com/n0bisuke/items/13d1442f3cb67664ef60@n0bisuke さんの記事では、自分の記事では触れていない PubNub の場合の事例も書かれてますので、是非ご覧ください。
MQTTクライアントをコマンドラインで簡単に動かす
IoT系のプロトタイプを作るときに、最近はよく MQTT を使っていました。
そして、以下のような様々な環境で MQTT のクライアントを動かしていました。
- Node.js
- HTML+JavaScript で作られた Webサイト
- Node-RED
- UIFlow (M5Stack向けのビジュアルプログラミング環境)
- Mac や Windows の上で動く GUIフロントエンドとなるアプリ
- ターミナル上などコマンドを使った形
上記の Node.js や Webサイト(HTML+JavaScript)で実装するときは、パッケージ・ライブラリに MQTT.js をよく使っていました。また、Mac のターミナル上のコマンドラインツールで動作させる時も MQTT.js を使いました。
この記事の冒頭のツイートを見た時に、この MQTT.js のコマンドラインツールを思い出し、ふと「MQTT.js のコマンドラインツールが使えてしまうのではないか?」と思って試しました。ローカルに mosquitto で MQTTブローカーをサクッと実行できる環境はあったので、
npx mqtt sub -t 'test' -h 'localhost'
とかnpx mqtt pub -t 'test' -h 'localhost' -m 'from MQTT.js'
とかを実行してみて、Pub/Sub の両方とも動作するのを確認し、この記事の冒頭のツイートに以下のコメントをしました。Sub のほうなら、MQTT.js で「npx mqtt sub -t 'トピック' -h 'ホスト名'」みたいなの感じでどうでしょう?
— you (@youtoy) September 23, 2020
(意図と異なるかもですが)
Pubのほう、「npx mqtt pub -t 'トピック' -h 'ホスト名' -m 'from MQTT.js'」とかやったら、メッセージを送るたびにインストールがされて微妙でしたがw【追記】 MQTT.js のコマンドラインツールを npx で実行した時の挙動の補足
MQTT.js がインストールされていない環境で実行
サブスクライブのほうは、
npx mqtt sub -t '【トピック】' -h '【ホスト名】'
とすると、MQTTブローカーへの接続を維持した状態になり、メッセージを受信し続けてくれてます。パブリッシュのほうは、
npx mqtt pub -t '【トピック】' -h '【ホスト名】' -m '【メッセージ】'
を実行すると、1回パブリッシュした後に処理が終了します。その処理終了の際にパッケージのファイル一式が削除されるので、その後コマンドを実行するごとにインストールが行われるという挙動になります。MQTT.js をローカルインストールしたフォルダ上で実行
npx は、パッケージがインストールされていない環境だと、処理の実行に必要なパッケージをコマンド実行時に一時的にインストールして、処理が終わるとインストールしたファイルを破棄します。
もし、処理の実行に必要なパッケージがローカルインストールされている場合、そのローカルのパッケージを利用して処理を実行します(インストールされたフォルダ内でコマンドを実行する必要あり)。そのため、自分でローカルインストールしたファイル一式を手動削除する必要が出てきますが、この方法ならパブリッシュするごとにインストールするような挙動は避けられます。インストールしていない状態での実行、という手軽さが失われてしまいますが・・・。
冒頭のツイートのコメントでのやりとりでも、少し触れてました。
ローカルインストールのものを
— you (@youtoy) September 23, 2020
$ ./node_modules/.bin/パッケージ名
でなく
$ npx パッケージ名
とシンプルに呼び出せる、という使い方のほう(自分がよく使うのは、こちらだったり)。【追記】 npx について
npx を初めて使ってみようと思ったきかっけは、おそらくこちらの記事を見た時でした。
●npm 5.2.0の新機能! 「npx」でローカルパッケージを手軽に実行しよう - Qiita
https://qiita.com/tonkotsuboy_com/items/8227f5993769c3df533dなるほど!
— you (@youtoy) September 23, 2020
自分は、この記事だったかで、初めてnpxについて知った時に「インストールしていないパッケージを一度だけ実行できる機能」と合わせて「ローカルのnpmパッケージを使用するのが簡単になる」の両方を同時に見ていて、という感じでした。
https://t.co/k8mUsdL5fZnpx の利用について、自分は「何か特定のパッケージのコマンドライン実行を、ずっと使わないかもしれないけれど、とりあえずは試してみたい」というときなどに、以下のような使い方をしてたりします。
1) 適当にパッケージのお試しをするフォルダを作る
2) 上記1)で作ったフォルダでnpm install 【パッケージ名】
でパッケージをローカルインストール
3) `npx 【パッケージ名】' でローカルインストールしたパッケージを実行
4) お試しが終わったら、上記1)で作ったフォルダを丸ごと削除ローカルインストールした場合、コマンドを実行したフォルダ直下に node_modules フォルダが作られて、その下にファイルが置かれるような構成になるので、コマンドを実行したフォルダを削除するだけでサクッとお試し用に追加されたファイル一式を丸ごと削除できます。
おわりに
他にも、Node.js のパッケージでコマンドラインツールが使えるようなものがあったと思うので、MQTT.js 以外でも便利に使えそうなものがないか試してみようと思います。
【追記】 wscat(WebSocket関連)で試してみて、記事を書きました。
●WebSocket のサーバー・クライアントをコマンドラインで簡単に実行する(npx と wscat) - Qiita
https://qiita.com/youtoy/items/72bbd5f6b0893756da36
- 投稿日:2020-09-23T23:55:32+09:00
mongooseでMongoDB に接続しようとしたら身に覚えのない機能に対するWarningが出た
はじめに
MongoDB を利用する中、使っていない(特に指定していない)機能に対して Warning が出た。
(node:54073) DeprecationWarning: collection.ensureIndex is deprecated. Use createIndexes instead.ensureIndex なんて書いた覚えはないので、ナンノコッチャと。Warning なので放置でも良いのだが、気持ち悪いので、解消することに。割と気になる性格。
動作環境
Item version MongoDB 4.2.8 mongoose 5.10.3 node.js 12.18.1 mongoose の最新は、2020年9月23日現在 5.10.6。週1更新!
解決方法
接続時に createIndex: true を指定すれば良い。
mongoose.connect('mongourl', { useCreateIndex: true, useNewUrlParser: true, useUnifiedTopology: true })もしくは、
mongoose.set('useCreateIndex', true) mongoose.connect('mongourl', { useNewUrlParser: true, useUnifiedTopology: true })など。
なお、エラーメッセージでは、createIndex"es" を使えと書いてあるが、指定してもそんなものはないと怒られる。おしまい。
- 投稿日:2020-09-23T18:18:03+09:00
【超解説】Azure AD B2C でシングルページ Web アプリケーションを作成する
Azure AD B2C は、企業-消費者間 ID をサービスとして提供する Microsoft のサービスです。Azure AD と聞くと、どーせマイクロソフトアカウントしか使えないんでしょ?と想像する方もいらっしゃるかもしれませんが、Azure AD B2C は好みのソーシャルアカウントを使用することもできますし、ローカル ID を使用することもできます!
今回は Microsoft が提供しているドキュメントを基に、どうやって Azure AD B2C 環境を構築するのか見ていきたいと思います。サンプルのリソース
今回試して見るサンプルは以下の GitHub に上がっているソースコードを使用します。Javascript ベースのシングルページアプリケーションです。
https://github.com/Azure-Samples/active-directory-b2c-javascript-msal-singlepageappこのサンプルは既にデモの Azure AD B2C 環境で動くように作成されています。Git Clone でダウンロードして、自身のマシンで実行するとどんな感じに動くのか試すことができます。
(このアプリケーションを動かすには Node のインストールが必要です。)サンプルコードをデモ環境で実行してみる
自身で作成したオリジナルの Azure AD B2C 環境を試す前に、まずはサンプルコードそのままでデモ環境を使用して動かしてみます。
サンプルコードを Git Clone する
Git がインストールされた環境で、以下 Git Clone を実行してみます。
git clone https://github.com/Azure-Samples/active-directory-b2c-javascript-msal-singlepageapp.gitアプリケーションを実行する
Node がインストールされた環境かどうか確認してください。(Node -v とかで確認できます。)
クローンされたディレクトリに移動し、Node アプリケーションを以下コマンドで実行します。cd active-directory-b2c-javascript-msal-singlepageapp npm install && npm update npm startアプリケーションが実行されたら、「http://localhost:6420/」にブラウザからアクセスしてみます。以下のような Azure AD B2C の Sign In ボタンがあるような画面が表示されるかと思います。
Sign In ボタンを押すと、以下のように、サインイン画面がポップアップウィンドウで表示されます。アドレスをみると 'fabrikamb2c' というテナントに向けてサインインを実行しているのだと推測できます。サンプルでは fabrikam というデモ用のテナントが準備されているのだとわかります。
これと同じ動きを、自分自身が作成したオリジナルの Azure AD B2C テナントで実行する場合の方法を次に見ていきたいと思います。オリジナルの Azure AD B2C 環境を使用してアプリケーションを実行する
Azure AD B2C 環境を作成する
Azure Portal にアクセスし、新しいリソースの作成から
Azure AD B2C
を選択します。
作成する Azure AD B2C の組織名、初期ドメイン名を入力して、確認および作成
をクリックします。今回はテストとして以下の値を入力しました。
タイトル 入力値 組織名 mikogarage 初期ドメイン名 mikogarage 国/地域 日本
検証が無事終わると、作成
ボタンを選択できるようになるのでクリックします。テナントの作成が開始されますが、だいたい3,4分かかるかと思います。
作成されたらこんな感じの Azure AD B2C のトップページに遷移することができます。ここまでで Azure AD B2C テナントの作成は完了です!
Azure AD B2C にアプリを登録する
次に今回作成するアプリケーションを Azure AD B2C に登録します。左側のメニューの
管理
からアプリ登録
を選択し、上の新規登録
をクリックします。
アプリケーションの登録画面に移ります。今回は以下のように値を入力しました。
タイトル 入力値 名前 SampleApp サポートされているアカウントの種類 Accounts in any identity provider or organizational directory (for authenticating users with user flows) リダイレクト URI http://localhost:6420
アプリの登録が完了すると、作成したアプリの認証の部分を少し編集します。デフォルトでは、暗黙の付与
というところにチェックが外れているので、どちらもチェックを入れ保存します。
ここまでで、アプリの登録は完了です。後ほどアプリのコードでこのアプリ登録したクライアントIDの情報を入力するので、概要
に戻り、Client ID をコピペしておきます。
ポリシーを作成する
ここでいうポリシーとはユーザーフローのことです。Azure AD B2C のトップに戻り、左側のメニューから、
ユーザーフロー
を選択します。
新しいユーザーフローを設定します。ここは GUI がしっかりしているので簡単にできると思います。ここで認証に必要な情報 (表示名や役職名など) を設定します。ユーザーフローの設定方法は以下のドキュメントにそのまままとまっているので必要に応じてご覧ください。
https://docs.microsoft.com/en-us/azure/active-directory-b2c/tutorial-create-user-flows
今回作成したユーザーフローは3つで、以下の通りです。
ユーザーフローの名前 タイプ B2C_1_passwordreset1 パスワードのリセット (推奨) B2C_1_profileediting1 プロファイルの編集 (推奨) B2C_1_signupsignin1 サインアップとサインイン (推奨) API を構成する
次に、Azure AD B2C で API を使用できる環境を作成します。以下の Microsoft Docs が参考になります。
https://github.com/Azure-Samples/active-directory-b2c-javascript-nodejs-webapiWebAPI サンプルコードのダウンロード
以下のように Git Clone を実行して、自身のマシンにソースコードをダウンロードします。
git clone https://github.com/Azure-Samples/active-directory-b2c-javascript-nodejs-webapi.gitコードは後で編集するので、とりあえずこここではダウンロードだけでOKです!
Azure AD B2C で WebAPI を登録する
アプリケーションの登録から、
webapi1
という新しいアプリケーションを登録します。
作成したら、左メニューのAPI の公開
から アプリ ID の URI を設定します。ここではapi
とだけ入力します。
スコープの追加
次にスコープを設定します。
+ Scope の追加
から二つの Scope を追加します。
値はこんな感じで入力しました。
スコープ名 管理者の同意の表示名 管理者の同意の説明 demo.read Read access to demo API Allows read access to the demo API demo.write Write access to demo API Allows write access to the demo API
SmapleApp
のアプリケーションに戻り、右側のメニューのAPI のアクセス許可
を選択します。ここで今追加した API を追加します。+アクセス許可の追加
を押すと、先ほど追加した二つの API が出てくるので、二つとも選択しアクセス許可の追加
をクリックします。
これだけではアクセスが付与されていません。XXXXX(テナント名)に管理者の同意を与えます
というボタンがクリックできるようになりますので、それをクリックします。
状態が緑になり、XXXXXX(テナント名)に付与されました
と緑で出てくれば成功です。
サンプルコードの編集
サンプルコードを Visual Studio Code で開きます。コードの中の
config.js
を開き以下のように編集します。config.jsconst clientID = "253cc4e6-4b4e-4ea1-9568-ba75aa6028aa"; // webapi1 のクライアント ID に置き換える const b2cDomainHost = "mikogarage.b2clogin.com"; //Azure AD B2C のテナント名に書き換える const tenantId = "mikogarage.onmicrosoft.com"; // ここも同じ const policyName = "B2C_1_signupsignin1"; //設定したポリシー名に書き換える const config = { identityMetadata: "https://" + b2cDomainHost + "/" + tenantId + "/" + policyName + "/v2.0/.well-known/openid-configuration/", clientID: clientID, policyName: policyName, isB2C: true, validateIssuer: false, loggingLevel: 'info', loggingNoPII: false, passReqToCallback: false } module.exports = config;API の方で変更する部分は上記の部分のみです。
API アプリケーションを実行する
クローンしたディレクトリに移動して、以下コマンドを実行し、Web API を実行します。
npm install && npm update npm start実行すると色々コメントが出てきますが、アプリケーションが実行され、
Listening on port 5000
と表示されたら成功です。Listening on port 5000ここまでで WebAPI の方の準備が整いました。
アプリケーションのコードを編集する
WebApp のサンプルコードは JavaScriptSPA 下の 3 つのファイルを編集します。
apiConfig.js
authConfig.js
policies.jsauthConfig.jsconst msalConfig = { auth: { clientId: "625ebccb-ed3a-4324-94db-e2681e8c8a1e", // ここを SampleApp の Client ID に変更 authority: b2cPolicies.authorities.signUpSignIn.authority, validateAuthority: false }, cache: { cacheLocation: "localStorage", // This configures where your cache will be stored storeAuthStateInCookie: false // Set this to "true" to save cache in cookies to address trusted zones limitations in IE (see: https://github.com/AzureAD/microsoft-authentication-library-for-js/wiki/Known-issues-on-IE-and-Edge-Browser) } }; /** * Scopes you enter here will be consented once you authenticate. For a full list of available authentication parameters, * visit https://azuread.github.io/microsoft-authentication-library-for-js/docs/msal/modules/_authenticationparameters_.html */ const loginRequest = { scopes: ["openid", "profile"], }; // Add here scopes for access token to be used at the API endpoints. const tokenRequest = { scopes: apiConfig.b2cScopes, // e.g. ["https://fabrikamb2c.onmicrosoft.com/helloapi/demo.read"] };policies.js// Enter here the user flows and custom policies for your B2C application // To learn more about user flows, visit https://docs.microsoft.com/en-us/azure/active-directory-b2c/user-flow-overview // To learn more about custom policies, visit https://docs.microsoft.com/en-us/azure/active-directory-b2c/custom-policy-overview const b2cPolicies = { names: { signUpSignIn: "B2C_1_signupsignin1", //作成したポリシー名に変更 forgotPassword: "B2C_1_passwordreset1", //作成したポリシー名に変更 editProfile: "B2C_1_profileediting1" //作成したポリシー名に変更 }, authorities: { signUpSignIn: { authority: "https://mikogarage.b2clogin.com/mikogarage.onmicrosoft.com/B2C_1_signinsignin1", // 作成したテナント名に変更 }, forgotPassword: { authority: "https://mikogarage.b2clogin.com/mikogarage.onmicrosoft.com/b2c_1_reset",// 作成したテナント名に変更 }, editProfile: { authority: "https://mikogarage.b2clogin.com/mikogarage.onmicrosoft.com/b2c_1_edit_profile"// 作成したテナント名に変更 } }, }apiConfig.js// The current application coordinates were pre-registered in a B2C tenant. const apiConfig = { b2cScopes: ["https://mikogarage.onmicrosoft.com/api/demo.read"], //作成したスコープに変更 webApi: "https://localhost:5000" //localhost のアドレスに変更 };以上の 3つでコードの編集は完了です。
サンプルアプリを実行する
では実行してみましょう!通常の Node App と同じように
npm start
を実行します。C:\Users\komiyasa\source\repos\qiita\active-directory-b2c-javascript-msal-singlepageapp>npm start > active-directory-b2c-javascript-msal-singlepageapp@1.1.0 start C:\Users\komiyasa\source\repos\qiita\active-directory-b2c-javascript-msal-singlepageapp > node server.js Listening on port 6420...ブラウザで 'http://localhost:6420/' にアクセスします。
サインインボタンを押すと、、
認証ウィンドウが出てきます。試しにサインアップでアドレスを入力してみましょう。
作成したアカウントでログインできることが確認できました!!
Azure AD B2C の方の
ユーザー
で登録されたユーザーを確認することができます。
これで Azure AD B2C 認証を使用したシングルページアプリを作成することができました。
Azure AD B2C は google や Facebook といった SNS アカウントでも認証をできるので、そちらも今度試して見たいと思います。参考
今回参照した URL を纏めておきます。
タイトル URL Azure Active Directory B2C のドキュメント https://docs.microsoft.com/ja-jp/azure/active-directory-b2c/ クイック スタート:Azure Active Directory B2C を使用したシングルページ アプリのサインインの設定 https://docs.microsoft.com/ja-jp/azure/active-directory-b2c/quickstart-single-page-app active-directory-b2c-javascript-msal-singlepageapp サンプルコード https://github.com/Azure-Samples/active-directory-b2c-javascript-msal-singlepageapp active-directory-b2c-javascript-nodejs-webapi サンプルコード https://github.com/Azure-Samples/active-directory-b2c-javascript-nodejs-webapi チュートリアル:Azure Active Directory B2C 内にユーザー フローを作成する https://docs.microsoft.com/ja-jp/azure/active-directory-b2c/tutorial-create-user-flows 尚、今回作成したテナントはセキュリティの観点から既に消してあります。上記のサンプルコードをそのままコピペしても動きませんのでご了承くださいー。