はじめに
前回、DataV について触りの部分のみ紹介させて頂きました。
今回は前回紹介しきれなかったその他の機能について、いくつか紹介させて頂きます。
動画の表示
DataV では動画を表示させることも可能です。主にプレゼン用途で使うものになるでしょう。
"Video"の項目を選択します。
使い方はシンプルです。右ペインの Video URL の項目に表示させたい Video の URL を貼るだけ。
注意点としてはサポートしているのは mp4 フォーマットのみということです。
今回はフリーの動画サイトのサンプル動画を利用させて頂きました。
キャプチャなのでよくわかりませんが、動画が表示されました。
出来れば youtube の動画とかそのまま利用出来ればもっと便利なのですが...。
マップの表示
また、マップ(地図)を表示させる機能もあります。
今回は Globe を使用。
サンプルでは地球図の上に光球と各光球に飛び込むビームが表示されてます。
見た目が凄い綺麗でとにかく感動します。
スタイルのレイヤがいくつかわかれていますが、それぞれ光球の位置を緯度と経度で管理したり、
どこからどこへビームを飛ばすか管理するものだったりします。
使い道としては、グローバル企業が各地からの注文状況を視覚化するのにつかったりするのかな。
後は DDOS 攻撃食らってる時にどこからアタックが来てるかとか...?
開発ツール
実は DataV には開発ツールも用意されてます。
まず npm 利用出来る環境を準備します。
# yum install -y gcc-c++ make
# curl -sL https://rpm.nodesource.com/setup_6.x | sudo bash -
# yum install -y nodejs
# npm -version
3.10.10
で、開発ツールのインストール。
# npm install --registry=https://registry.npm.taobao.org datav-cli -g
開発ツールをインストールしたら、datav init を実行。開発環境の初期セットアップを行います。
多分、名前を入力しなさい的なメッセージが出てるので適当に入力。
# datav init
___ ___ ___ ___ ___
/\ \ /\ \ /\ \ /\ \ /\__\
/::\ \ /::\ \ \:\ \ /::\ \ /:/ /
/:/\:\ \ /:/\:\ \ \:\ \ /:/\:\ \ /:/ /
/:/ \:\__\ /::\~\:\ \ /::\ \ /::\~\:\ \ /:/__/ ___
/:/__/ \:|__| /:/\:\ \:\__\ /:/\:\__\ /:/\:\ \:\__\ |:| | /\__\
\:\ \ /:/ / \/__\:\/:/ / /:/ \/__/ \/__\:\/:/ / |:| |/:/ /
\:\ /:/ / \::/ / /:/ / \::/ / |:|__/:/ /
\:\/:/ / /:/ / \/__/ /:/ / \::::/__/
\::/__/ /:/ / /:/ / ~~~~
~~ \/__/ \/__/
如果您感觉检查版本号非常慢，建议您配置npm镜像: npm config set registry http://registry.cnpmjs.org, 也可以使用您自己喜欢的镜像.
[Mon Jul 16 2018 17:57:37 GMT+0800 (CST)] [INFO] ""
? ?你要创建的组件名(字母, -, 数字)是... test-datav
? ?你要创建的组件中文名是... test-datav
? ?你要创建的组件描述是... test-datav
? ?请从组件模板中选择你要创建的组件... 基本文字
exec npm install
[Mon Jul 16 2018 17:58:33 GMT+0800 (CST)] [INFO] "组件创建完毕"
作成されたディレクトリに移動してから datav run で datav を起動します。
# ls
test-datav
# cd test-datav/
# datav run
___ ___ ___ ___ ___
/\ \ /\ \ /\ \ /\ \ /\__\
/::\ \ /::\ \ \:\ \ /::\ \ /:/ /
/:/\:\ \ /:/\:\ \ \:\ \ /:/\:\ \ /:/ /
/:/ \:\__\ /::\~\:\ \ /::\ \ /::\~\:\ \ /:/__/ ___
/:/__/ \:|__| /:/\:\ \:\__\ /:/\:\__\ /:/\:\ \:\__\ |:| | /\__\
\:\ \ /:/ / \/__\:\/:/ / /:/ \/__/ \/__\:\/:/ / |:| |/:/ /
\:\ /:/ / \::/ / /:/ / \::/ / |:|__/:/ /
\:\/:/ / /:/ / \/__/ /:/ / \::::/__/
\::/__/ /:/ / /:/ / ~~~~
~~ \/__/ \/__/
如果您感觉检查版本号非常慢，建议您配置npm镜像: npm config set registry http://registry.cnpmjs.org, 也可以使用您自己喜欢的镜像.
[Mon Jul 16 2018 17:58:51 GMT+0800 (CST)] [INFO] "起服务中..."
[Mon Jul 16 2018 17:58:51 GMT+0800 (CST)] [INFO] "服务启动，如果浏览器还没打开，麻烦手动用chrome浏览器打开localhost:1111/"
[CUBE] init cache from disk
[CUBE] init cache from disk
デフォルトでは起動サーバの port 1111 でサービスが起動します。
まあ、まだ何も作ってないので画面には値の１文字だけ表示されるのみ。
なお、作成されたフォルダ配下は以下のようになってます。
node.js ガリガリ書いていけば理想の可視化ツールが作れる...かも。
# ls
README.md index.js node_modules package.json
まあ、開発ツールについては、まだ中国版ドキュメントにしか記載されてないので、日本で使うのは想定してないと思います。
そのうち正式に公開されるのを期待しましょう。
おわりに
DataV 紹介その2でした。見栄えが良いガジェットは色々用意されてるので、
センスの良い人なら超カッコいいプレゼン画面が作れると思います。
簡単にですが、以上です。