- 投稿日:2021-01-16T23:43:11+09:00
Zoom Web SDK を試す
この記事は、Zoom Web SDK を試してみた手順のメモです。
●Web - Client SDKs - Zoom Software Development Kit (Zoom SDK) - Zoom Developer - Technical Documentation and Reference
https://marketplace.zoom.us/docs/sdk/native-sdks/webZoom Web SDK の概要
公式ページの記載を引用して見てみます。
The Web SDK enables the development of video applications powered by Zoom’s core framework inside an HTML5 web client through a highly optimized WebAssembly module.
As an extension of the Zoom browser client, this SDK is intended for implementations where the end user has a low-bandwidth environment, is behind a network firewall, or has restrictions on their machine which would prevent them from installing the Zoom Desktop or Mobile Clients.引用元: 公式ドキュメントより
説明はいろいろと書いていますが、この SDK を使うと、ブラウザ上で Zoomクライアントを立ち上げることができるもののようです。
Zoom Web SDK をとりあえず試す
公式ドキュメントの「Quick install」を見ると、以下手順でサクッと試せるようです。
パッケージのインストール
まずは、任意のディレクトリでパッケージのインストールを行います。
この手順を試す時、最初は Node.js のバージョンを 12 にしていて途中の手順でエラーが出ました。その後、バージョンを 14 にして試してエラーが出なくなったので、補足しておきます。npm i @zoomus/websdk2つのキーの取得について
公式ドキュメントによると Web SDK を使う際に API Key と Secret を取得する必要があるようです。
Zoom のApp Marketplaceにアクセスしてログインをし、画面右上の「Develop」のメニューから「Build App」を選択します。
その後の手順については以下の記事などを参照して、JWT の「API Key」と「API Secret」の 2つを取得してください。以下は、Zoom API についての記事ですが、取得するキーは今回の Zoom SDK を用いる場合と同じでした。
●Zoom APIをPostmanで試す | ヤマムギ
https://www.yamamanx.com/zoom-api-postman/サンプルアプリのソースの取得
そして、公式ドキュメントの Sample Apps の部分に書かれた以下の手順を進めていきます。
まずは最初の2つのコマンドを実行して、ソースを取得し、取得したソースのサブフォルダへと移動します。
git clone https://github.com/zoom/sample-app-web.git --branch master --depth 1 cd sample-app-web/Localサンプルアプリのソースの書きかえ(キーの設定)
ここで、取得したソースの中の一部を書きかえます。具体的には、先ほど準備した 2つのキーを設定します。
取得したソースの「Local」フォルダ内のさらに下に「js」フォルダがあり、その中に「index.js」というファイルがあります。ソースの取得元の情報でいうと、以下の URL の「13行目」と「19行目」です。
●sample-app-web/index.js at master · zoom/sample-app-web
https://github.com/zoom/sample-app-web/blob/master/Local/js/index.js具体的には以下の部分で、
const API_KEY = "YOUR_API_KEY";
の部分とconst API_SECRET = "YOUR_API_SECRET";
の部分の式の右側に、先ほど取得しておいたキーを設定します。それが完了したら、以下のコマンドを順次実行していきます。
npm install npm run start
ブラウザでミーティング設定画面を開く
上記のコマンドを入力すると、以下のような文字などが出力されます。
ローカルでポート番号「9999」でアクセスできる状態になったようです。
「0.0.0.0」や「localhost」にポート番号 9999 を指定して、ブラウザでアクセスしてみてください。そうすると、以下の画面が表示されるので「Meeting Number」と「Meeting Password」のそれぞれに、参加したい Zoomミーティングの ID とパスワードを入力してください。
また、言語設定が「English」となっている部分は「Japanese 日本語」という選択肢があるので、プルダウンから選択して変更します。その後、画面のメニュー右端にある「Join」ボタンを押しましょう。
そうすると、以下のように自分が用意したブラウザ上のアプリから Zoom ミーティングに参加できます。この時、「Meeting Number」の数字の中に半角スペースが入るとうまくいかないようなので、ご注意ください。うまく接続できたら、別タブが開き、以下のように Zoomミーティングへ参加した際の画面が表示されます。
Zoomミーティングに入った後は、ブラウザ上の UI で画面共有の操作なども行うことができます。
おわりに
今回の内容は単にブラウザ上でZoomミーティング へ参加しただけで、これだけだと、Zoom 標準のブラウザからのミーティング参加機能と同じですが、ソースコードに手を入れれば拡張とかもできるかと思ってます。
詳細は確認できてないので、引き続き情報をチェックしてみようと思います。
- 投稿日:2021-01-16T23:43:11+09:00
Zoom Client SDK の Web SDK を試す
この記事は、Zoom Client SDK の Web SDK を試してみた手順のメモです。
●Introduction - Client SDKs
https://marketplace.zoom.us/docs/sdk/native-sdks/introduction
●Web - Client SDKs - Zoom Software Development Kit (Zoom SDK) - Zoom Developer - Technical Documentation and Reference
https://marketplace.zoom.us/docs/sdk/native-sdks/webZoom Client SDK の Web SDK の概要
公式ページの記載を引用して見てみます。
The Web SDK enables the development of video applications powered by Zoom’s core framework inside an HTML5 web client through a highly optimized WebAssembly module.
As an extension of the Zoom browser client, this SDK is intended for implementations where the end user has a low-bandwidth environment, is behind a network firewall, or has restrictions on their machine which would prevent them from installing the Zoom Desktop or Mobile Clients.引用元: 公式ドキュメントより
説明はいろいろと書いていますが、この SDK を使うと、ブラウザ上で Zoomクライアントを立ち上げることができるもののようです。
Web SDK をとりあえず試す
公式ドキュメントの「Quick install」を見ると、以下手順でサクッと試せるようです。
パッケージのインストール
まずは、任意のディレクトリでパッケージのインストールを行います。
この手順を試す時、最初は Node.js のバージョンを 12 にしていて途中の手順でエラーが出ました。その後、バージョンを 14 にして試してエラーが出なくなったので、補足しておきます。npm i @zoomus/websdk2つのキーの取得について
公式ドキュメントによると Web SDK を使う際に API Key と Secret を取得する必要があるようです。
Zoom のApp Marketplaceにアクセスしてログインをし、画面右上の「Develop」のメニューから「Build App」を選択します。
その後の手順については以下の記事などを参照して、JWT の「API Key」と「API Secret」の 2つを取得してください。以下は、Zoom API についての記事ですが、取得するキーは今回の Zoom SDK を用いる場合と同じでした。
●Zoom APIをPostmanで試す | ヤマムギ
https://www.yamamanx.com/zoom-api-postman/サンプルアプリのソースの取得
そして、公式ドキュメントの Sample Apps の部分に書かれた以下の手順を進めていきます。
まずは最初の2つのコマンドを実行して、ソースを取得し、取得したソースのサブフォルダへと移動します。
git clone https://github.com/zoom/sample-app-web.git --branch master --depth 1 cd sample-app-web/Localサンプルアプリのソースの書きかえ(キーの設定)
ここで、取得したソースの中の一部を書きかえます。具体的には、先ほど準備した 2つのキーを設定します。
取得したソースの「Local」フォルダ内のさらに下に「js」フォルダがあり、その中に「index.js」というファイルがあります。ソースの取得元の情報でいうと、以下の URL の「13行目」と「19行目」です。
●sample-app-web/index.js at master · zoom/sample-app-web
https://github.com/zoom/sample-app-web/blob/master/Local/js/index.js具体的には以下の部分で、
const API_KEY = "YOUR_API_KEY";
の部分とconst API_SECRET = "YOUR_API_SECRET";
の部分の式の右側に、先ほど取得しておいたキーを設定します。それが完了したら、以下のコマンドを順次実行していきます。
npm install npm run start
ブラウザでミーティング設定画面を開く
上記のコマンドを入力すると、以下のような文字などが出力されます。
ローカルでポート番号「9999」でアクセスできる状態になったようです。
「0.0.0.0」や「localhost」にポート番号 9999 を指定して、ブラウザでアクセスしてみてください。そうすると、以下の画面が表示されるので「Meeting Number」と「Meeting Password」のそれぞれに、参加したい Zoomミーティングの ID とパスワードを入力してください。
また、言語設定が「English」となっている部分は「Japanese 日本語」という選択肢があるので、プルダウンから選択して変更します。その後、画面のメニュー右端にある「Join」ボタンを押しましょう。
そうすると、以下のように自分が用意したブラウザ上のアプリから Zoom ミーティングに参加できます。この時、「Meeting Number」の数字の中に半角スペースが入るとうまくいかないようなので、ご注意ください。うまく接続できたら、別タブが開き、以下のように Zoomミーティングへ参加した際の画面が表示されます。
Zoomミーティングに入った後は、ブラウザ上の UI で画面共有の操作なども行うことができます。
おわりに
今回の内容は単にブラウザ上でZoomミーティング へ参加しただけで、これだけだと、Zoom 標準のブラウザからのミーティング参加機能と同じですが、ソースコードに手を入れれば何らか拡張とかもできるかと思ってます。
詳細は確認できてないので、引き続き情報をチェックしてみようと思います。また、今回使った「Client SDK」以外の SDK(例えば、「Fully Customizable SDK」)も見てみようと思います。
●Introduction - Client SDKs
https://marketplace.zoom.us/docs/sdk/native-sdks/introduction
●Introduction - Fully Customizable SDKs
https://marketplace.zoom.us/docs/sdk/custom/introduction
- 投稿日:2021-01-16T12:51:31+09:00
Node.jsでhelloworld
ゴール
Node.jsを使用して、コンソールにhelloworldを表示させる
前提
Visual Studio Code(以下 VSCode)使用
DockerでNode.jsのコンテナを使用Node.jsとは
- 本来クライアント側の言語であるjavascriptを、サーバー側でも使えるようにした仕組み(※1)
- webサイトやwebアプリ、スマートフォンサイト、ゲームなど様々なものをつくることができる =>paypalやuverなどもNode.jsでつくられているそう!
- 大量のデータ処理が得意で、処理スピードも早いのが特徴
※1 progate「Node.jsとは」より引用 https://prog-8.com/nodejs/study/1/1#/2
参考:https://udemy.benesse.co.jp/development/system/node-js.htmlDockerにNode.jsをダウンロードする
VScodeの拡張機能のDockerをあらかじめインストールしておく。(※2)
docker-compose.ymlファイルの作成
Nodejs-sample-app
(任意のフォルダ名でよい)フォルダを作成。
その下にdocker-compose.yml
ファイルを作成。
こちらはdockerにコンテナをダウンロードする時のお決まりのファイルとなるので、ファイル名は固定。ymlファイルは、YAMLという書き方に沿って記載されたテキストファイルで、データの受け渡しなどに使用される。
今回は以下のように記載した。docker-compose.ymlversion: "3" services: node: image: node:14.15 volumes: - .:/project tty: true working_dir: /project command: bashそれぞれの項目の意味
※2 詳しくはこちらのページがおすすめです
@Teach 「VSCodeでDocker入門」 https://qiita.com/Teach/items/ca09b8882f519dca600cdocekerにイメージをダウンロード
VSCodeのターミナル機能を使い、
Nodejs-sample-app
フォルダの中に入り、以下のコマンドを打つと、docerにNode.jsがダウンロードされる。docker-compose up -dコンテナの中に入るためにはAttach shellを選択します(写真参照)
ローカル内のターミナルとコンテナ内のターミナルはこちらで切り替えができます
app.jsファイルの作成
docker-compose.yml
と同階層にapp.js
ファイルを作成。
今回は以下のように記載app.jsconsole.log("Hello nodejs");コンテナ内のターミナルで
$ node app.js
とコマンドを打ち、以下のように表示されたら、Node.jsの環境構築は完了です!
- 投稿日:2021-01-16T12:49:12+09:00
ターミナルから爆速で回線速度を計測する
はじめに
昨今、インターネットを使っていて使っている回線の速度を測るサービスが多く存在しています。
その中に、Netflix が展開している FAST.com という便利な Web サービスがあります。上記リンクにアクセスするとすぐに回線速度を測定してくれます。
そこで、回線速度を計測したいときにブラウザを使って測定サイトにアクセスしなくても、ターミナルから Fast.com を経由して爆速でインターネット回線速度を図る方法が便利だったためまとめてみました。
npm でインストール
npm install --global fast-cliYarn でインストール
yarn global add fast-cli実行してみる
ダウンロード速度のみの計測
fast上のコマンドで回線のダウンロードの速度計測が始まります。
--upload , -u
オプションを付けないとダウンロードのみの計測となります。ダウンロードとアップロード速度を計測
fast --upload
ダウンロード速度とアップロード速度を計測します。
ダウンロード速度を計測して一行表示
fast --single-line
一行でシンプルにダウンロード速度を計測します。
fast-cli のヘルプを表示
fast --help
使用できるコマンドと使用例を表示します。
おわりに
ターミナルから簡単に回線の速度を図れるので便利です。公式のコマンドラインツールということもあり、計測も安定していて精度も良さげです。
是非活用してみてください。
以上、ここまで読んでいただきありがとうございました。
参考
sindresorhus / fast-cli
回線速度のテストができる「fast」コマンドが便利だった
windows10 fast.com のコマンドラインツール「fast-cli」を使って回線速度を計測する
- 投稿日:2021-01-16T12:01:53+09:00
node.jsのモジュールをHTMLで読み込む
背景
HTMLファイルから3rd Partyのnode.jsのモジュールを利用しようとして、「require is not defined」というエラーにぶち当たった。
そこで、node.jsのモジュールをライブラリとしてHTMLに読み込む方法があるかを調べてみたところ、browserifyというものがあるのを知ったので、試してみた。
ちなみに、HTML用のjsファイルが用意されているモジュールもあるっぽいので、その場合は、それをそのまま読み込めばよいと思う。
「require is not defined」エラーについて
例えば、下記のようなhtmlとjsファイルを作ったとき。
test.html<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Test</title> </head> <body> <p>Test</p> <div> <textarea id="token" rows="8" cols="120">{hoge: 'hogehoge'}</textarea> <textarea id="signed" rows="12" cols="120"></textarea> </div> <button id="sign">Sign</button> </body> <script src="test.js"></script> </html>test.js// 注意:このコードは動作しません。 var jwt = require('jsonwebtoken'); document.getElementById("sign").onclick = () => { const jwt = document.getElementById("token").value; const signedJwt = sign(jwt); document.getElementById("signed").innerText = signedJwt; }; function sign(payload) { return jwt.sign(payload, 'secret'); }ブラウザで開くと、見た目はこんな感じ。
「Sign」ボタンを押すと、上のテキストエリアにあるJSON形式のテキストに署名をして、下のテキストエリアに表示しようとしたコード。
実際には、このコードは動かなくて、以下のようなエラーになる。
まぁ、当たり前なのかもしれないけど、ただのhtmlなので、require('jsonwebtoken')はエラーになる。
ちなみに、jsonwebtokenはJWTとかに署名できるライブラリで、nodejsであれば「npm install jsonwebtoken」とかでインストール後、上記のような呼び出しで利用できるようになる。
browserifyの利用
ということで、これを動くようにするために、browserifyを使って頑張ってみる。
browserifyは、node.jsのコードをブラウザで動作するようにしてくれるらしい。
最終的にはhtmlとjsだけで動くようにする予定だが、とりあえず、開発にはnode.jsの環境が必要なので環境を作る。
> mkdir browserify > cd browserify > yarn init適当に作ったnode環境のプロジェクト直下に、さきほどのtest.htmlとtest.jsを置く。
続いて、jsonwebtokenをインストール。
> yarn add jsonwebtokenもちろん、これだけでは状況は変わらない。
ということで、browserifyをインストール。
> yarn global add browserifybrowserifyを使って実行してみる。
> browserify test.js -o test2.js生成された「test2.js」は下記のような感じ。
test2.js(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;... ... (約3万行) document.getElementById("sign").onclick = () => { const jwt = document.getElementById("token").innerText; const signedJwt = sign(jwt); document.getElementById("signed").innerText = signedJwt; }; function sign(payload) { return jwt.sign(payload, 'secret'); } },{"jsonwebtoken":208}]},{},[232]);3万行ぐらいのファイルが生成された。
依存のファイルがすべて一つにまとめられた模様。
test.htmlを以下のように編集して、動作確認。
test.html<!DOCTYPE html> <html> ... <script src="test2.js"></script> </html>再度、test.htmlをブラウザで開いてみる。
「Sign」ボタンを押すと、署名されたっぽい文字列が表示された。
とりあえず、それっぽいものが表示されたけど、何か変な気もする。
このままだと、デバッグしようにも、test.jsを書き換えるたびに、browserifyでファイル生成が必要となる。
やはり「jsonwebtoken」部分だけをライブラリとしてhtmlに読み込んで、test.jsから利用するようにしたい。
node.jsのモジュールをライブラリとしてHTMLで読み込む
ということで、「jsonwebtoken」をライブラリとしてHTMLで読み込める形に出来ないか試してみた。
色々試行錯誤してみたところ、下記のようなjsファイル(jsonwebtoken-wrapper.js)を用意し、browserifyをかけることで、それっぽく動作した。
jsonwebtoken-wrapper.js(function (factory) { typeof define === 'function' && define.amd ? define(factory) : factory(); }((function () { 'use strict'; // 以降に、元のライブラリのI/Fをそのままそのまま呼び出すだけのfuntionを追加 var jwt = require('jsonwebtoken'); function sign(payload, secretOrPrivateKey, options, callback) { return jwt.sign(payload, secretOrPrivateKey, options, callback); } function verify(jwtString, secretOrPublicKey, options, callback) { return jwt.verify(jwtString, secretOrPublicKey, options, callback); } function decode(jjwt, options) { return jwt.decode(jwt, options); } // 以降で外から呼び出せるように定義する。 if (window) { if (typeof window.define == "function" && window.define.amd) { window.define("jwt_sign", function() { return sign; }); window.define("jwt_verify", function() { return verify; }); window.define("jwt_decode", function() { return decode; }); } else { window.jwt_sign = sign; window.jwt_verify = verify; window.jwt_decode = decode; } } })));browserifyを使って、htmlから読み込み可能にしておく。
> browserify jsonwebtoken-wrapper.js -o jsonwebtoken.jsjsonwebtoken.jsというファイルが生成される。
test.htmlは、下記のように修正。
test.html<!DOCTYPE html> <html> ... <body> <script src="./jsonwebtoken.js"></script> ... </body> <script src="test.js"></script> </html>ライブラリとして、生成したファイルを読み込むようにした。
また、さきほど、test2.jsに変更した部分をtest.jsに戻しておく。
test.jsは以下のように書き換え。
test.js// var jwt = require('jsonwebtoken'); この行を削除 ... function sign(payload) { return jwt_sign(payload, 'secret'); // jwt.sign(..)をjwt_sign(..)に変更 }ブラウザにtest.htmlを表示して確認。
とりあえず正しく動作している模様。
ちなみに、「test.html」、「test.js」、「jsonwebtoken.js」の3つだけを適当なフォルダにおいて実行しても、同じように動作した(nodeから切り離された環境でも動作した)。
- 投稿日:2021-01-16T08:36:10+09:00
Watson MLのWebサービスをNode-REDから呼び出す(v2対応済み)
はじめに
Node-REDから、Watson ML上にdeployしたWebサービスを呼び出す方法としては
https://flows.nodered.org/node/node-red-contrib-watson-machine-learning
に部品があるのですが、コードを調べてみたところ古いインターフェースのままで、バージョンアップも止まっていました。
(というか、API仕様が根本的に変わったので 、ML v2対応しようとすると全部作り直しになりそう)ということで、昨年9月にリリースした新しいWatson ML API仕様v2に対応するにはどうしたらいいか、考えてみました。
頑張って全部JavaScriptで実装して、新しいNode-REDの部品も作れなくないはずですが、しばらくJavaScriptから離れているため、コールバック先の関数から値を戻すのをどうしたらいいか思い出せず。。。
あまりきれいでないのですが、ひな形のフローファイルを作ってお茶を濁すことにしました。完成イメージ
下の図が、完成イメージです。
呼び出し先のAPIは、別記事Watson Studioでscikit-learn機械学習モデルをWebサービス化するで作ったものです。
(Iris datasetを学習データにした分類モデル)
こちらに関しては、Webサービスのデプロイまで済んでいることが前提になりますので、その点はご注意下さい。フローファイルは、以下のGithubサイトにアップしてあります。
https://github.com/makaishi2/sample-data/blob/master/node-red/wml-flows-share.json
このフローをNode-REDに取り込んで、2箇所ノードの設定(apikeyとscroring_url)を変更すると、Watson MLのAPIを呼び出せるようになります。
サンプルの動かし方
設定値の取得
API_KEYの値
1.3 API Keyの取得を参照して下さい。scoring_urlの値
6.3 URL取得を参照して下さい。Node-REDから呼び出す場合は、バージョンIDも付加したscoring_url2
の方を使う必要があるので、その点を注意して下さい。Node-RED上の設定
取り込んだフローの中で修正が必要なのは
① 「token取得準備」
② 「API呼び出し」
の二つのノードです。「token取得準備」ノードの設定
下記が、該当functionノードのコードです。
// header設定 msg.headers = {}; msg.headers['Accept'] = "application/json"; msg.headers['Content-Type'] = "application/x-www-form-urlencoded"; // apikey設定 var apikey = "xxxx"; msg.payload = "apikey=" + apikey + "&grant_type=urn:ibm:params:oauth:grant-type:apikey"; return msg;この中で、
var apikey = "xxxx";の行に調べたAPI_KEYの値を設定します。
「API呼び出し」ノードの設定
下記が「API呼び出し」の設定ノードです。
この中でURLの欄に、事前に調べたscring_urlの値を貼り付けます。
テスト
これで準備はすべて整いました。正しく設定ができていれば、一番左のinjectノードのクリックで、Watson MLのAPIが呼び出せるはずです。
フロー解説
最後に、フローの各ノードで何をやっているか解説します。
基本的には6. 予測(Watsonライブラリを使わない方法とまったく同じことを、Node-RED上でやっているだけです。
元記事も合わせて読んでいただけると、より理解が深まると思います。Token取得準備
コードは1章で一度載せていますが、再掲します。
// header設定 msg.headers = {}; msg.headers['Accept'] = "application/json"; msg.headers['Content-Type'] = "application/x-www-form-urlencoded"; // apikey設定 var apikey = "xxxx"; msg.payload = "apikey=" + apikey + "&grant_type=urn:ibm:params:oauth:grant-type:apikey"; return msg;この後のHTTPリクエストノードでの準備をしています。
リクエストヘッダはmsg.headers
に、データはmsg.payload
にそれぞれ設定しています。Token取得
http requestノードで、メソッドを
POST
に、URLをhttps://iam.cloud.ibm.com/identity/token
にしています。それ以外のパラメータはその前のノードで設定済みなので、これだけでTokenが取得できます。
API呼び出し準備
下記が、API呼び出し準備用のfunctionノードの内容です。
// token取得 value = JSON.parse(msg.payload); console.log(value); console.log(value["access_token"]); var token = value.access_token; // header設定 msg.headers = {}; msg.headers['Content-Type'] = "application/json"; msg.headers['Authorization'] = 'Bearer ' + token; // data設定 msg.payload = '{"input_data": [{"values": [[6.9, 3.1, 5.4, 2.1], [4.4, 2.9, 1.4, 0.2]]}]}' return msg;まず、token取得APIの戻り値をパースした後で、キー値
access_token
に対応するvalueを取得します。
この値が、次のAPI呼び出しで必要なtokenになります。header設定で、
Bearer
の後に、今取得したtokenを追加し、これをAuthorization
の値にします。最後の
msg.payload
は、APIの引数になる入力データ部分です。
今は、iris datasetの入力値2行分をベタうちにしてしまっていますが、実際のアプリでは、他からのデータを使ってこの部分を組み立てることになります。戻り値の読み取り方
最後にWatson MLの戻り値の解説をします。
リクエストの戻りをパースすると、次のような結果になります。戻り値は、赤枠で示した予測値(prediction)と青枠で示した確率値(probability)に分けられます。
このモデルの目的は、アヤメの花の種類(0か1か2)を区別することなのでが、モデルの予測結果としての種類がprediction
の値です。
もう一つのprobability
とは、それぞれの判断結果に対する確信度だと思って下さい。
今回の2件の予測結果に関して言うと、「1件目の予測結果が2である」ことは100%自信があるが、「2件目の予測結果が0である」ことに対しては、確信度が99%で、多少自信がないということになります。