2019年06月01日

Kibana日本語対応まもなく!

今回はElastic社が開発している可視化ツールKibanaの多言語対応化について紹介します。

Kibanaの言語は標準では英語のみ対応でした。
19年に入ってからElastic社から多言語対応の発表があり、日本語は7.1から対応と発表されました。
すでに19年5月下旬時点では7.1.1がリリースされていますが、日本語対応していません。

Githubのコミット状況をみると、19年5月下旬に日本語対応関連のコミットがあり、7.1.2か、7.2当たりで正式に日本語対応されそうです。


ちなみに日本語化する場合は
kibana.yml
の最終行にi18nの設定項目があり、コメントアウトを解除して設定します。

デフォルトは
i18n.locale: "en"
となっています。

中国語にする場合は
i18n.locale: "zh-CN"

日本語にする場合は
i18n.locale: "ja-JP"

設定変更後はkibana.ymlを反映させるためにkibanaの再起動が必要です。

19年6月上旬時点では中国語と英語のみの対応となっていますが、もうあと数週間以内には日本語対応されそうです。
日本語対応版のkibanaが待ち遠しいです。
posted by Crescent at 00:00| Comment(0) | ナレッジ | このブログの読者になる | 更新情報をチェックする

2019年04月13日

Node-Red Dashboardテンプレート

今回はNode-Red Dashboardテンプレートの使用方法について紹介します。


Node-Red Dashboardテンプレートを使用すると標準で用意されているUIよりもリッチで多彩なUIを実現することができます。
テンプレートはAngularJSベースで実装されているため、Angularのスクリプトやhtml記述を利用することができます。
Node-Red上でmsg.payloadの値を受けて表示を変えたり、ボタンを押してmsg.payloadへ値を渡すこともできます。



■要素紹介
・ボタン

ui5-4.jpg

<md-button ng-click="send({payload: {index_name:model_name}})" layout-align="start center" >
登録
</md-button>

model_nameには送りたい情報のモデルを入れて使用する

・トグルボタン
ui5-5.jpg
<md-switch ng-model="model_enable" ng-change="send({payload: {enable:model_enable}})" layout-align="start center" >
トグルボタン1
</md-switch >

ng-changeを指定することでボタン操作でmsg.payloadに情報が渡される

・数字入力

ui5-2.jpg

<input type="number" ng-model="model_id" />


・テキスト入力

ui5-3.jpg

<input type="text" ng-model="model_name" />

・日付選択

ui5-1.jpg

<input type="date" ng-model="mydate" ng-change="send({payload: mydate})">


■msg.payload受け取り方


ui1-2.jpg


・手前のfunctionノード
var nowDate=new Date();
msg.payload=nowDate.toLocaleString("ja-JP",{hour12:false});
return msg;

・テンプレートノード
<div>
更新日時:{{msg.payload}}
</div>

ui1-1.jpg

timestampボタンを押すと更新日時が表示されます。

■mas.payload送り方

ui2-3.jpg

・テンプレートノード
<body>
 <input type="number" ng-model="model_id" />
 <input type="text" ng-model="model_name" />
 <md-button ng-click="send({payload: {index_id:model_id, index_name: model_name}})" layout-align="start center" >
 登録
 </md-button>
</body>

ui2-1.jpg


ui2-2.jpg

登録ボタンの際に、数字入力と文字入力のモデルから情報を受け取ってpayloadに格納しています。


■応用編
・表に要素を並べる例

ui3-2.jpg


・手前のfunctionノード
var source_array = new Array();
source_array.push({ enable:true, id:1, name:"Name1"});
source_array.push({ enable:false, id:2, name:"Name2"});
msg.payload = source_array;
return msg;


・テンプレートノード
<table id="table" border="1" align="center">
 <tr>
  <th>無効/有効</th>
  <th>番号</th>
  <th>名</th>
  <th>テキスト</th>
  <td align="center" colspan="2">
   ボタン
  </td>
 </tr>
<tbody>
 <tr ng-repeat="row in msg.payload" align="center">
 <td align="center">
 <md-switch tr ng-model="row.enable" ng-change="send({payload: {row}})">
   </md-switch>
 </td>
 <td>{{row.id}}</td>
 <td>{{row.name}}</td>
 <td>
 <input tr type="text" ng-model="row.text1" />
 </td>
 <td>
 <md-button tr ng-click="send({payload:[{row},{update:1,delete:0}]})">更新
 </md-button>
 </td>
 <td>
 <md-button tr ng-click="send({payload:[{row},{update:0,delete:1}]})">削除
 </md-button>
 </td>
 </tr>
</tbody>
</table>



ui3-1.jpg

受け取った配列を表として表示することができます。
配列の数に応じて表の行が自動的に変化します。
例えば、データベースやセンサから受け取った情報を並べて表示するといったことができます。
また、表の中のボタンを押すことでボタンを押した行の情報をmsg.payloadとして次のノードに渡すことができます。

Node-Red Dashboardテンプレートを使用するとこのように動的なUIを実現することができます。
今回紹介したNode-Redのフローをこちらから利用できます。


posted by Crescent at 00:00| Comment(0) | ナレッジ | このブログの読者になる | 更新情報をチェックする

2019年03月23日

NodeJS Portableで気軽にNode-Redを始める方法

Windows環境でNode-Redを使用する場合、DockerやUbuntuをVM上で動作させて使用することが多いと思います。
ただ、初心者にとってDockerの設定、VM導入は少し敷居が高いです。

WindowsにNodeJSを直接インストールしてNode-Redを使用することもできないことはないですが、UnixベースのOSでNodeJSが開発されていることもありうまくインストールできないことが多々あります。また、PC毎にインストール作業が必要で構築に労力を要します。


ここで紹介するのはNodeJS Portableを活用する方法です。
NodeJS Portableはその名の通り、Portableなので
一度、Portable版でNode-Redをインストールすれば、
そのフォルダ毎コピーで別のPCでも動きます。

フォルダで管理することができるため、
同じPC上でもバージョンやアプリケーションごとに分けて
フォルダ管理するということも可能です。


■NodeJS PortableにNode-Redを導入する手順
@NodeJS Portableをダウンロードする
※sourceforgeからダウンロードできなくなったため、githubを使用してください

AダウンロードしたNodeJS Portableを実行し、
NodeJS Portableフォルダを生成する
※注意点としてNodeJS Portableフォルダは浅いディレクトリで実行してください
フォルダの階層が深いとファイル生成に失敗する可能性があります。
例:C:\Users\XXXXの直下にフォルダを生成する XXXXはユーザー名

※NodeJSをアップデートするまでNodeJS Portableフォルダ内のNodeJSPortable.exeを起動させないでください
初回起動で古いNodeJSのファイルがDataフォルダ内に展開されます


BNodeJSをダウンロードする
デフォルトのNodeJS Portableはv5.7.0でNodeJSのバージョンが非常に古いです。
そのままではNode-Redがインストールできても実行できません。

今回はNodeJSサイトからnode-v8.15.1-win-x86.zip をダウンロードしました。
なお、デフォルトのNodeJSがx86のため、同様にx86版のv8を選択しています。

Cnode-v8.15.1-win-x86.zipを解凍する

DNodeJSの置き換え
\NodeJSPortable\App\NodeJS内のnode.exeを削除し、先ほど解凍したnode-v8.15.1-win-x86内のnode.exeに置き換えてください。

また、\NodeJSPortable\App\DefaultData\node_modules内のnpmフォルダを削除し、先ほど解凍したnode-v8.15.1-win-x86.zip\node-v8.15.1-win-x86\node_modules内のnpmフォルダに置き換えてください。

Dataフォルダ内に古いNodeJSのファイルが展開されている場合はDataフォルダ内を全削除してください

ENodeJSPortable起動
\NodeJSPortable内のNodeJSPortable.exeを実行します。
コンソール画面が表示され、置き換えしたNodeJSバージョンが表示されれば置き換え成功です。


node.jpg

NodeJS Portableのデフォルトはv5.7.0ですが、
置き換えをしてv8.15.1と表示されています。

FNode-Redインストール
npm install -g --unsafe-perm node-redと打ち込んでインストールします。
数分でインストールが完了します。

GNode-Red起動
node-redと打ち込んでEnterで実行されます。

初回は下記のようにファイアウォールの設定が自動で表示されます。
「アクセスを許可する」をクリックしてください。

firewall.jpg

起動に成功すると下記のようにNode-Redのコンソールが表示されます。

node-red2.jpg

HNode-Redにアクセス
ブラウザ(FirefoxもしくはChrome、IEは非推奨)から下記のアドレスにアクセスします。

お馴染みの画面が表示されればあとはNode-Red三昧です。

node-red3.jpg

必要に応じてパレットに「node-red-node-serialport」や「node-red-dashboard」といった追加ノードをインストールしてください。

I終了する
コンソールウインドウを閉じるか、
Ctrl+cを押してy、exit、yで終了させてください。

■NodeJS Portable固有の情報
・インストール時にnode-gyp系のエラーがでる場合は
WindowsのビルドツールPythonをインストールしてください。

・置き換え後にNode-Redのインストールに失敗する場合、先にNode-Redをインストールしてからnode.exeを置き換えして起動させてください。

・フローの保存場所について
\NodeJSPortable\Data\.node-red内のflows_XXXX.jsonが作成して保存されたフローです。XXXXにはPC名が入ります。
他のPCであらかじめ作成したフローを開く場合はXXXXを動かすPCのPC名に書き換えてから起動させてください。

・NodeJSPortableはSerial Port Nodeを使用することができます。パレットから追加することができますが、エラーが発生して追加できない場合はnode-redインストール同様にnpm install node-red-node-serialportと打ってコマンドからインストールすると上手くいく場合があります。
DockerやVMのNode-RedではUSBデバイスやシリアルノードを使用することが簡単にはできません。NodeJSPortable版は簡単にUSB Serial等をNode-Redから操作できます。これは組込系の機器と連携することができるため、非常に魅力的です。

・デプロイがうまくできなくなってしまう場合やNode-Red画面の応答がない場合、コンソール画面でEnterキーを連打して溜まったログを出力させてください。


posted by Crescent at 00:00| Comment(0) | ナレッジ | このブログの読者になる | 更新情報をチェックする

2019年01月26日

Node-RedからのElasticsearchデータ検索

Node-RedからElasticsearchのデータを取得する場合に
少し煩わしい点があったため備忘録として紹介します。

Node-Redに限らず、
Elasticsearchにデータ投入する場合はPostメソッドを使用します。

Elasticsearchに投入したデータを検索して取得する場合は
CurlコマンドやKibanaのコンソール画面からはGetメソッドですが...

公式のElasticsearhの検索APIの説明でもGETメソッドを使用しています。

一方、Node-Redから検索APIを使用する場合は
Getメソッドでは取得できませんでした。
Getメソッドを使用するとmatch_allコマンド同様の結果となり、
意図した検索がされず、投入データすべてがhitとなってしまいます。

Node-Red本家のIBMのサイトで検索APIをNode-Redから使用する際の方法について説明がありました。
「複数の検索条件を指定する場合はメソッドがPOST」を使用する

直観的にはGetメソッドですが、
Node-Redからの場合はPostメソッドの使用するのがポイントのようです。

実際にPostメソッドで検索APIを使用すると
意図した検索範囲の結果を返してきました。

同様にPostメソッドを使用します。


CurlコマンドやKibanaのコンソール画面ではGetメソッドで取得できるにも関わらず、
Node-Redからは取得できないため、Wiresharkで小一時間色々試行錯誤してしまいました。

posted by Crescent at 00:00| Comment(0) | ナレッジ | このブログの読者になる | 更新情報をチェックする

2017年05月18日

Eclipse Index更新方法

SW4STM32に限らず、
Eclipseを使用して開発を行っている場合、
Eclipseのインデックス機能が便利だと思います。


インデックス機能は
ifdefで定義されていない場合に
グレーアウトする機能や
定義へのジャンプ機能などです。


ただ、時々インデックス機能がうまく働かない場合があります。
その場合に確認すべきインデックス機能の設定と操作を紹介します。


「ウインドウ」→「設定」を開く
indexer3.png



「C/C++」→「Indexer」内の「Build configuration for the indexer」の
「Use active build configuration」を選択。

indexer.png


プロジェクトフォルダを右クリックし、
「Index」→「Rebuild」をクリック。
indexer2.png


数秒待って、
インデックスが更新されれば、完了です。
posted by Crescent at 00:00| Comment(0) | TrackBack(0) | ナレッジ | このブログの読者になる | 更新情報をチェックする