まだプログラマーですが何か?

プログラマーネタとアスリートネタ中心。たまに作成したウェブサービス関連の話も http://twitter.com/dotnsf

タグ:ibm

Zoom というアメリカ生まれの Web 会議サービスがあります:
2017050208


(自信ないですが、日本語公式ページはここかな? 一応日本語マニュアル類は入手できます)
http://zoom-japan.net/


Zoom の特徴は主催者がアカウントを持っていると参加者は URL だけで参加できるとか、簡単に録画できるとか、参加者を仮想の小部屋に分けて分科会を開けるとか、いろいろ便利そうな機能が搭載されているようです。

この Zoom 、昨年末に IBM Watson Workspace とのビデオ会議統合が発表されていました:
Zoom Provides Video Meeting Integration for IBM Watson Workspace

2017050301


IBM の新しいリアルタイム協業ツール Watson Workspace (現在はプレビュー版)に、その場でビデオ会議を行えるような機能を提供する、という発表でした。この時点では具体的な製品や機能に関する発表はありませんでした。

その Zoom が、コグニティブエンジンを搭載したチャット機能を(実際に動かすことのできる)Watson Workspace の拡張アプリケーションとしても提供していたことを最近知りました(苦笑)。プレビュー製品に対する発表とは攻めてますね~:
Zoom Showcases IBM Watson Workspace Integration at IBM Connect



当初の「ビデオ会議を行える機能を提供する」ことに加えて、なかなか面白いコンシェルジュ機能が搭載されていたので、試しにちょこっと使ってみました。Watson Workspace 自体がまだ正式版ではなく、一部の人しかアカウントをお持ちでないかもしれませんが、その雰囲気だけでも伝わることを目指して紹介します。



まず、こちらが Watson Workspace の画面です。これ自体は Slack 的なリアルタイムメッセージ共有ものをイメージしていただけるとわかりやすいかなあ。。
2017050201


そしてこちらが今回紹介する Zoom on IBM Watson Workspace です。Watson Workspace のアカウントをお持ちであれば、このページから "Add to Watson Workspace" と書かれた赤いボタンを押して拡張機能を有効にすることも可能です:
2017050202


"Zoom.ai" と呼ばれる拡張機能の設定画面です。この拡張機能を有効にするスペースを1つ選べ、みたいなことを言われますが(ここで指定したスペースにはうまく反映できなかったので、詳しくは後述)適当に1つ選んで "Add App" ボタンをクリックします:
2017050203


「正しく追加されました」みたいなメッセージが表示されます。ここでは Close ボタンをクリック:
2017050204


先程指定したスペースに以下で紹介する設定を加えてもうまく有効にできなかったので、この Zoom.ai 専用のスペースを1つ作成します:
2017050205


まず、このスペースのメンバーとして Zoom.ai を追加します。"Zoom.ai" と入力すると、それっぽい人が見つかるので、選びます:
2017050206


Zoom.ai さんがスペースのメンバーに追加されました。続けて "Name Your Space" をクリック:
2017050207


スペースの名前を指定します。ここでは "Zoom.ai" と指定しました。最後に "Create" ボタンをクリックします:
2017050208


Zoom.ai さんがメンバーに含まれた "Zoom.ai" スペースが追加されました。これを選んで、さっそく何か独り言を書いてみましょう。"Hello, Zoom.ai" と入力しています:
2017050209


すると、いきなり Zoom.ai がこの独り言に反応します! ・・・ただよく見ると「アクセス権が足りない」とか言ってますね。。
2017050210


スケジュールとアドレス帳の中身を知りたいようです。仕方ないな・・・というわけで、僕は "Google" をクリックして、GMail のカレンダーとアドレス帳をこいつに共有することにしました(試していませんが、Office365 や Apple iCloud にも対応しているようです。ノーツは・・・):
2017050201


で、Google の OAuth 認可の画面に移動します。「許可」をクリック:
2017050202


「セットアップ完了」です。この画面は閉じてもOK:
2017050203


改めて元のスペースに戻り、"Hello, Zoom.ai, again." と挨拶してみました。すると "Hello there Kei! What can I do for you?"(ハロー、けい。何かお手伝いできることある?)と聞いてきました。ほほー・・・:
2017050204


さっきカレンダー共有したから俺の予定知ってるはずだよな? というわけで、"I would like to check my schedule."(俺のスケジュールを教えてくれい)と偉そうに聞いてみました。はたして理解してくれるかなあ:
2017050205


・・・なんと、"you have no meetings today between 9:09am and 11:59pm."(今日は 09:09AM から 11:59PM まで何の予定もないよ)との返事が。ちなみに 09:09PM はこの質問を聞いた時刻です。で、実際 Google カレンダーにはこの日時の予定なし。ほう、なかなかやるな!:
2017050206


・・・他にはどんなこと聞けるんだろう? というわけで "help"(苦笑):
2017050207
 ↑前職の会社の名前が出てますが気にしないでね(アドレス帳にそう登録してあったので)。


なるほど、スケジュール確認したり、キャンセルしたり、あと Uber 呼んだり、天気確認したりもできそうね。。
2017050208


試しにメールアドレスを指定して、"who is XXXX"(XXXX って誰?)と聞いてみると、共有を許可したアドレス帳の情報を元に名前や電話番号などの情報を調べて、返事を返してくれます:
2017050209


また "weather forecast in Tokyo tomorrow."(明日の東京の天気は?)と聞くと天気予報情報を返してくれました:
2017050210





と、こんな感じでとりあえず Zoom.ai とチャットできるところまでは確認できました。ところで、もともと Zoom は Web 会議サービスの大手であり、Watson Workspace にウェブ会議機能を提供する、という発表でした。次回はこのチャット機能を使って別の人との会議を調整する様子を紹介する予定です。



(2017/May/05 追記)続きはこちら


先日、IBM Watson Summit 2017 (内のユーザーグループイベント)の開催に併せてリリースした「いらすとや検索」のチューンナップに挑戦しました。



まず、このサービスの内容を簡単に解説します。自分自身も使っていますが、質の高いフリー素材イラストを数多く公開いただいている「いらすとや」様のイラストを、なんとなく覚えている手描きイラストから IBM Watson の類似画像検索機能を使って検索できるようにする、というものです。

この検索サービスでは、「いらすとや」様のイラスト画像を、そのイラストが紹介されているページの URL 情報と併せて IBM Watson の Visual Recognition インスタンスに学習させ、類似画像検索を可能にしています。 そして「いらすとや検索」サイトで描いた絵を画像化し、似たイラスト画像を探した上でイラスト紹介ページへのリンクを作る、という比較的シンプルなロジックで作成しています。ユーザー会の中で紹介し、そこそこの反響もいただきました:
2017050201
ユーザー会での説明資料より)


ただ自分で使っているうちに、作った当初は気付かなかった部分も見えてきました。その中の1つが「カラフルなイラスト画像が検索候補にあまり出てこない」というものでした。理由も明白で、検索時に描くイラストがモノクロなのだから、「類似した画像」を検索するとモノクロの(あるいはモノクロに近い)画像が大量に候補として出て来るのです。形が似ているかどうかというよりも、色の類似性で選ばれてしまっている感じでした。


この問題を解決しようとすると、方法は大きく2つ考えることができます。1つは「検索時に描くイラストに色を付けられるようにする」方法、もう1つは「学習時にモノクロ変換した画像を学習して、そのモノクロ変換した画像の中での類似画像を探す」方法です。要はカラー画像として類似画像を探すのか、モノクロ画像として類似画像を探すのか、という2つの方法です。

実装そのものはどちらでもできると思いますが、このうちの前者はあまりユーザーフレンドリーではないと思っています(手軽に描いたイラストで検索できることがサービスの価値であり、彩色の手間をかけてまでイラストを検索したいと思えない)。というわけで、後者の解決策を実装しました。 ただ画像のグレースケール化は(ロジックが確立されているという意味で)まだ簡単なのですが、モノクロ(白か黒かの2値)化となると、中間くらいの色を白と黒のどちらと判断すべきか、というイラストの特性によってもロジックが左右される問題があるので結構難しかったりします。そのあたりはいずれ詳しく紹介できればと思っています。


で、このチューンナップのビフォー&アフターがこちら:

【ビフォー】
2017050201


【アフター】
2017050202



チューンナップ前の類似画像検索の結果は全体的に白っぽかったと思いますが、チューンナップ後の結果がかなりカラフルになったと思います。つまりモノクロ画像で類似画像を検索した結果、現在はカラフルな画像もシンプルなイラストからの検索候補として得られるようになった、ということです。

IBM Watson Summit 2017 開催記念作品!


自分だけではないと思いますが、可愛らしいフリー素材を数多く公開していただいている「いらすとや」http://www.irasutoya.com/)さんには、大変お世話になっております。



僕の場合はプレゼンテーション内のイラストに多く使わせていただいています。中にはいらすとやさんの素材だけでサイトや資料を作ってしまう職人さんもいらっしゃるようです。

ある程度「いらすとや」を使っていて感じたことは「目的の素材をうまく見つけるのが難しい」ということです。「昔こんな感じのイラストを見た記憶があるんだけど、どのカテゴリーだったっけな?」とか、「この人が使ってるこのイラストと同じものを使いたい」とか、自分の記憶が曖昧だったり、これというキーワードが思いつかない時に目的のイラストをうまく検索できないことがたまにあるのでした。


で、その解決策になるかどうかわかりませんが、興味半分でこんなサイトを作ってみました:
「いらすとや検索」



↑見た通りのサイトです。「なんとなく」覚えているイラストをなんとなく描いて、search して、そのイラストに似た「いらすとや」画像を探す、というものです。PCであればマウスで、スマホの場合はタップで描きます。検索結果は最大100件表示され、その中に含まれていれば目的のページに(クリックで)移動できる、というものです:
2017042501

    ↓

2017042502


例えばこの↑例、「鳩」で検索すればすぐに見つかりますが、「鳥」で検索するとなかなか候補が出てきません。「鳩のイラスト」とまで認識できていればテキスト検索でも探せるのですが、そこまでハッキリを覚えていないようなケースでも「たしかこんな感じの・・・」というイラストが描ければ検索できるようになっています(たぶんw)。


今のところ描くイラストは黒線一本のみで描く必要があります。描き直しに消しゴムなどはなく、reset する必要があります。編集機能にはまだ制約が多いですが、シンプルさを重要視しました(ということにします)!
2017042503



なお、このサイトはコグニティブエンジンである IBM WatsonVisual Recognition(画像認識) API を使って、あらかじめ学習させたイラストからの類似画像を人工知能のテクノロジーを使って検索する、という仕組みで実装しています。いらすとや内の全ページをクロールする方法が分からなかったので、現在は「リクエスト」ラベルから辿れる画像を対象にしています。仕組みはシンプルですが、実はそこそこなテクノロジーが裏に潜んでいたりします。


・・・まあ、ネタにどうぞ(笑)。
 

また、このアプリを作る上で、以下の2つの情報を参考にしました。HTML5 の Canvas にマウス移動(とスマホのタッチ)で線を描画するワザと、特にスマホのタッチで描画をする際に画面のスクロールを強制的に止めるワザです:

JavaScript でマウス座標を取得し、Canvas上に線を描画


IBM SecureGateway は、プライベート環境内のデータをクラウド環境から利用する際のトンネリングを行う上で簡単かつセキュアに環境を用意することができて、ハイブリッドクラウドを実現する上で非常に便利なサービスです(詳しくはこちらも参照ください):
2017041804


このトンネリング環境を作る方法として3つのクライアント環境が用意されています。この3つの環境を比較してみました:
2017041900


まず1つ目は「IBM インストーラー」と名付けられている、専用ソフトウェアです。ハイブリッド化の対象となるプライベートネットワークに接続された Windows/Mac/RHEL/Ubuntu(z, PPC, x86_64) に、各システム向けにビルドされた軽量な専用モジュールからインストールして利用します:
2017041801


2つ目は「Docker」です。ハイブリッド化の対象となるプライベートネットワーク内に Docker 環境があれば(または用意して)、専用の Docker イメージをダウンロードしてコンテナ上で稼働させます:
2017041802


そして3つ目が「IBM DataPower」と呼ばれる専用アプライアンスサーバーです。ハイブリッド化の対象となるプライベートネットワークに直接接続して電源を入れると稼働する、専用サーバーおよびハードウェアです:
2017041803


ちなみに DataPower サーバーの実体の外見はこんな感じです。「ザ・サーバー」って感じ:
ibm datapowers



Secure Gateway のクライアントとして利用する場合、いずれも機能そのものとしての違いはないのですが、選択する上で考慮する要素はいくつかあるので考えてみました。

まずは配布形態と、その形態による依存条件です。IBM インストーラーの場合はソフトウェアとしての配布なので、(仮想)マシンと OS があれば導入できます。Docker の場合は Docker 環境が必要です。プライベートネットワーク内に Docker 環境が用意されていればいいのですが、新たに構築可能かどうか、という点は問題になるかもしれません。そして DataPower は専用サーバーハードウェアなので、このハードウェア資産の購入とネットワークに新たに1サーバーを接続するという必要があります。

次に操作画面の違いです。IBM インストーラーと DataPower の場合はサービスとしてクライアントが実行され、その設定や操作は専用のウェブアプリケーションにアクセスして行うことになります。良く言えば詳しくなくてもウィザート通りにすすめていけるので便利、悪くいうとブラウザ環境必須(コマンドラインからは操作できないのでターミナルでリモートログインして・・というわけにはいかない)のです。Mac や Windows などの GUI 環境が用意されているマシンをネットワーク内で使える場合はいいですが、(現実的な)Linux でやろうとすると X Window まで用意された環境が必要になります:
2017041901


一方 Docker の場合は専用イメージを起動すると操作専用のコマンドラインが起動します。このコマンドラインから目的の操作を直接入力できるので、ターミナルを用いたリモート操作も可能です。Linux 環境前提で、ある程度コマンドライン操作に慣れた人が使うのであれば、こちらの方が便利かもしれません:
2017041902


まとめるとこんな感じですかね。トンネリング部分として同じ機能を提供するものなので、後は前提ネットワーク環境内のルールや操作する人のスキルを元にどれを選ぶかを判断することになると思います:
 IBM インストーラーDockerIBM DataPower
配布形態ソフトウェアDocker イメージアプライアンスサーバー
プライベート環境側に必要な事前準備このソフトウェアをインストール可能な Windows/Mac/RHEL/Ubuntu システムが同一ネットワーク内に存在している(或いは接続できる)こと同一ネットワーク内で Docker 環境が構築されていること特になし
クライアント起動形態サービスDocker コンテナ内で常に実行中サービス
クライアント操作画面GUI(ウェブブラウザ)専用のコマンドラインGUI(ウェブブラウザ)
メリットウィザード形式に沿って設定可能
既存環境の活用
コマンドラインから目的のコマンドを直接実行可能
新たにリソースを調達する場合のコスト
ウィザード形式に沿って設定可能
別途システムやハードウェア、ソフトウェアの準備準備不要
デメリット慣れてくると GUI が面倒
別途 OS が必要
Docker 環境必須
全てコマンドライン操作
(仮想環境なので)パフォーマンスの担保が難しい
専用アプライアンスサーバーの購入が必要


個人的な感想ですが、DataPower は「専用機を買う」という選択肢なので対象外。Docker 環境を用意できるなら Docker が一番楽で、用意できない場合は仮想サーバーの Linux に X Window と専用ソフトウェアをインストール、かな。


久しぶりに IBM BluemixNode-RED を使ったら、ちょっと挙動というか、使い始めるまでのステップが変わっていたことに気付きました。クラウド環境なので今後も UI 含め色々な変更があるかもしれませんが、このブログエントリを書いている2017年4月18日時点での「Bluemix 環境下での Node-RED の使い方」をまとめてみることにしました。

既に Bluemix や Node-RED を使っている方にとっては復習の部分も多く含まれていると思いますが、ユーザー名やパスワードの設定など比較的最近になって変わった部分もあるので参考にしてください。


まず PC のウェブブラウザ(FireFox, Chrome 推奨)で Bluemix 環境にログインします。アカウントをお持ちでない方は無料体験版のアカウントを申し込むなどしてアカウントをご用意の上でログインしてください。


では早速 Node-RED 環境を用意します。ログイン後のダッシュボード画面で「アプリの作成」をクリックします:
2017041801


Bluemix の Node-RED は「ボイラープレート」の「Node-RED Starter」として簡単に環境が用意できるテンプレートが用意されています。こちらを選択します:
2017041802


これから作成する Node-RED 環境の名称(URL の一部)を入力します。例えばここで test という名称を付けると、デフォルト状態では(カスタムドメインを使わなければ)Node-RED 環境のホスト名は test.mybluemix.net となります。URL の一部になる名称のため、簡単すぎる名前だと既に使われている可能性があり、その場合は利用できません(先に進めません)。例えば (自分の名前)-(日付) など、他と被らないような名称を指定してください(以下の例では dotnsf-nodered-20170418 という名称を指定しています。この場合のホスト名は dotnsf-nodered-20170418.mybluemix.net となります)。指定し終わったら最後に「作成」ボタンをクリックしてこの環境を作成します:
2017041803


(おまけ)
なお、上記画面をよく見ると分かるのですが、この Node-RED Starter ボイラープレートを使って Node-RED 環境を構築すると、Node.js ランタイム(アプリケーションサーバー)と Cloudant NoSQL データベースが1インスタンスずつ作成されます:
2017041804


Node.js ランタイムは Node-RED の実行前提環境として必要なサーバーなのですが、Cloudant の使いみちについて補足しておきます。通常の(Bluemix 環境ではない、オープンソース版の)Node-RED も Node.js サーバー上で動くウェブアプリケーションですが、そのままでは1つのサーバーインスタンス上で稼働する前提の挙動がいくつかあります。具体的にはフロー図の情報などはファイルシステムとして保存しています:
2017041801


そのため、例えばクラウド環境で使う場合のインスタンス数を2つや3つなどに増やした場合、最新の保存情報は複数あるインスタンスのどれかのファイルシステムに保存されている、ということが発生してしまい、インスタンスによって定義されているフローが異なる、という事態が発生してしまいます。そのため負荷が高くなったからといって単純にスケールアウトさせるわけにはいかなくなります:
2017041802



一方、Bluemix 環境ではこの辺りが拡張されており、フロー情報などは全て Cloudant のデータベース内に格納されます(これらのファイルを書き換えるイベントをフックして、ファイルではなくDBを書き換えるような拡張が加えられています)。全てのインスタンスは同データベースにバインドされており、インスタンスの増減があっても常に(論理的に)1つのデータベースに対してこれらの情報を読み書きするため、スケールメリットの大きなクラウド環境においても Node-RED が安心して利用できる環境となっています。ここも Bluemix で Node-RED を利用する上でのメリットだと思っています:
2017041803


(おまけおわり)


話を戻します。Node-RED ボイラープレートから「作成」ボタンを押すと一瞬画面が暗転して・・・
2017041804


しばらくするとこの環境(Node.js + Cloudant NoSQL の2つのサーバー)を作成中のステータスに変わります。しばらくお待ち下さい:
2017041805


しばらくするとステータスが「実行中」に変わります。この段階では Node-RED が利用できるようになっているので、横のホスト名部分をクリックして、Node-RED にアクセスします(ここまでは今までの Node-RED と同じです):
2017041806


最新の Bluemix の Node-RED はここからが少し変わりました。以前はここから早速フローエディタが使えるようになっていましたが、現在はもう1段階の簡易設定を行う画面に移行します。まずは Next をクリック:
2017041807


Node-RED のフローエディタにアクセスできる人を制限する設定画面が表示されます。上の "Secure your editor as only authenticated users can access it" にチェックを入れると、その下に指定するユーザー名/パスワードを入力できた人だけが編集できるようになります。なお、更にその下の "Allow anyone to view the editor, but not make any changes" にチェックすると、「誰でもフローエディタを見ることはできるが、変更はできない」というモードになります(下図ではチェックしていません):
20170418075


一方、下のように "Not recommended: Allow anyone to access the editor and make changes" にチェックを入れると(これまで同様に)URL を知っている誰もがフローエディタにアクセスし、変更できるようになります。このいずれかをチェックした上で "Next" をクリックします:
2017041808


後で詳しく説明しますが、標準の Node-RED には含まれていない拡張機能を後から追加することもできるようになっています。そのような拡張機能の代表的なものが紹介されています:
2017041809


例えば node-red-dashboard という箇所をクリックすると、ダッシュボード機能を追加する拡張モジュールの説明が表示され、内容を確認できます。このモジュールの追加方法については後述します:
20170418095


最後に設定内容の確認を行います。なお、ここで行った設定については実行環境の環境変数でも挙動を指定/変更することが可能です。最後に "Finish" をクリックします:
2017041810


すると一瞬このような画面になってから・・・
2017041811


改めて Bluemix 環境での Node-RED のスタート画面が表示されます。ここでは "Go to your Node-RED flow editor" ボタンをクリックしてフローエディタ画面に移動します:
2017041812


先程の画面でパスワードによる認証が設定されていると、ここでユーザー名とパスワードを入力する画面になります:
2017041813


設定時に自分で指定したユーザー名/パスワードを入力して「ログイン」します:
2017041814


正しい情報が入力されていると、Node-RED フローエディタ画面に移動します。これで Bluemix 環境下の Node-RED が利用できるようになりました:
2017041815



さて、比較的最近のアップデートで Node-RED 環境に GUI 操作でカスタムノードモジュールを追加できるようになりました(今まではソースコードの package.json を編集する必要があったので、それを意識せずに環境を構築できる Bluemix ではこの作業のためにソースコードを用意する必要があったりして不便に感じていました)。最後にその方法を紹介しながら、先程参照したダッシュボード機能のモジュールを追加してみます。Node-RED 画面右上のハンバーガーメニューから「処理ノードの追加削除」を選択します:
2017041801


すると画面左に「処理ノードの追加削除」というペインが現れ、ここで現在利用中のノードモジュールの一覧を参照したり、追加/削除といったカスタマイズが可能になります:
2017041802


ここで「処理ノードを追加」タブを選び、検索フィールドに dashboard と入力すると、検索結果一覧の中に "node-red-dashboard" が出て来るはずです(似た名前もあるので注意)。これを選んで「処理ノードを追加」ボタンをクリックします:
2017041807


ノードを追加インストールする確認メッセージが表示されます。ここでは "Install" を選択:
2017041803


しばらくするとノードが追加され、成功を示すメッセージが(一瞬)表示されます:
2017041804


この状態でノード一覧を下の方にスクロールすると、"dashboard" カテゴリの中にいくつもの node-red-dashboard ノードが追加されたことが確認できるはずです。またこの dashboard ノードが利用するための "dashboard" タブが右ペインにも追加されているはずです:
2017041806


動的なノード追加も簡単にできるようになっていることが確認できました!








 

このページのトップヘ