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

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

タグ:ibm

先日、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


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








 

以前に紹介した SaaS 型のデータ解析サービス IBM Watson Analytics は強力な解析エンジンが安価で使えて、面白いサービスだと思っています:
2017040501



ただちょっと不便に感じたのは、データのインポート方法でした。手元に CSV などのファイルがあれば Watson Analytics 側に用意された機能でインポートできます。またデータが Box や Twitter などのクラウドに公開されたものであれば、やはり Watson Analytics に用意された機能で取り込むことができました:
2017040502


しかし現実的にはデータベースサーバーから直接取り込むことができると便利です。更に言うと、インターネットに公開されたデータベースサーバーではなく、プライベートネットワーク内にあるデータベースのデータを簡単に取り込むことができると、プライベートデータを(いちいち CSV にしてから手動インポートする必要がなくなって)便利なのですが、現在 Watson Analytics 単体にそこまでの機能は提供されていません。


しかし、単体では提供されていなくても、IBM Bluemix から提供されるいくつかの機能を組み合わせることで上記の要件は可能になります。具体的には Secure Gateway サービスと Data Connect サービスを使います。Secure Gateway でプライベートネットワークのデータベースに対してセキュアなトンネリングを貼った上で Data Connect を使い、そのプライベートデータベースと Watson Analytics との間での自動データマイグレーションが実現できます(そのマイグレーションを定期的に実行するようなスケジューリングまで含めて可能になります)。






以下に実際の手順を紹介しますが、実際にこの手順を行うにはプライベートネットワーク内のデータベースに加えて、IBM Bluemix および IBM Watson Analytics 両方のアカウントが必要です。そして IBM Bluemix では Secure Gateway と Data Connect の2つのサービスインスタンスが有効になっている必要があります。無料版にサインアップするなどして、あらかじめご用意ください。


まずプライベートネットワーク内のデータを確認しておきます。今回対象とするのはプライベートネットワーク内のデータベースサーバーで管理されている(仮想の)人事情報とします。名前(name)や年齢(age)、収入レベル(income)、容姿(looking)、血液型(blood_type)、出身地(prefecture)といった情報が格納されているものです(注 乱数で生成した偽データです)。これは認証は当然ですが、現時点ではプライベートネットワーク内からのアクセスしか許可していないものです。目的はこれらのデータを(一度 CSV ファイルにして取り出して手動アップロードしたりするのではなく)Watson Analytics で解析可能なデータとしてシステマチックにインポートすることとします:
2017040513


では実際の手順を紹介します。まずは Secure Gateway でこのプライベートネットワーク内のデータベースを IBM Bluemix 環境からアクセスできるようにします。その手順はこちらを参照してください。
SecureGateway で Bluemix とプライベートネットワークをセキュアに接続する


次に Secure Gateway で参照できるようになったプライベートデータを Data Connect のデータセットとして定義します。この手順についてはこちらを参照してください。
Data Connect サービスでデータベースをマイグレーションする


ここまで完了したら、次は Data Connect の接続先として利用できるよう、Watson Analytics を追加します。Data Connect サービスのダッシュボード画面左メニューから "Connections" を選択し、画面右上の "Create New" をクリックします:
2017040501


接続先のデータベースタイプの選択画面では "IBM Watson Analytics" を選択します:
2017040502


詳細設定画面に移動しますが、ここで設定する項目は接続名称を入力するだけです。最後に画面右上の "Create Connection" をクリックします:
2017040503


この接続情報が保存される際に IBM Watson Analytics への認証が行われます。IBM Watson Analytics を利用している IBM ID とパスワードを指定してログインしてください:
2017040504


正しく有効な ID が確認されると、Data Connect の接続情報として IBM Watson Analytics が追加されます:
2017040505


では作成した Watson Analytics にプライベートデータベースからデータをマイグレーションします。引き続き Data Connect ダッシュボードの画面左メニューから "Activities" を選び、右上の "Create New" をクリックします:
2017040506


まずマイグレーション元を指定します。あらかじめ作成してある Secure Gateway 経由の(プライベートデータベースの)データセットを選択します。選択したら画面右上の "Copy to Target" をクリックします:
2017040507


次にマイグレーション先を指定します。今回のマイグレーション先は IBM Watson Analytics なので、Connections から上記で定義した IBM Watson Analytics の接続名を選択します。このままマイグレーション実行スケジュールの指定("Schedule Activity")も可能ですが、まず1回手動で実行してみることにします。画面右上の並んだボタンから "Run" をクリックします:
2017040508


指定したとおりの(プライベートデータベースから Watson Analytics への)マイグレーション処理が実行され、アクティビティとして記録されます。なお、このアイコンから実行スケジュール(定期実行など)を編集することも可能です:
2017040509


実際にマイグレーションが行われたかどうかを確認してみます。改めて IBM Watson Analytics にログインすると、元々は存在していなかったデータセットが作られているはずです。これをクリックして、実際に解析してみます:
2017040510


解析テンプレートが表示されます。いくつかありますが、"What is the trend of looking over age by blood_type?"(血液型別に年齢と容姿にどういったトレンドがあるか?)が面白そう(笑)なので選択してみます:
2017040511


この解析用の画面に移動します。画面左側に年齢ごとの容姿の推移が血液型ごとの折れ線になって表示されます。また画面右にはこれらの分析からの発見として、「43歳の収入が一番高い」とか「年収をトータルすると AB 型が一番低い」といったインサイトも併せて表示されています(※繰り返しますが、乱数を使って生成した偽データです):
2017040503


特別何もしなくてもデータを与えるだけでここまで分析してくれる Watson Analytics もすごいのですが、その Watson Analytics に直接プライベートデータや社内データをセキュアにマイグレートしてくれる Secure Gateway や Data Connect と併せて利用することで、より便利に大事な情報を簡単に解析できるようになると感じます。


このページのトップヘ