Slide 1

Slide 1 text

Copyright © 2019 Cavity.LLC All Rights Reserved. DataV hands-on #1 On AliEatersOsaka#4

Slide 2

Slide 2 text

Copyright © 2019 Cavity.LLC All Rights Reserved. DataVとは? DWHからデータを取り出す データダッシュボード

Slide 3

Slide 3 text

Copyright © 2019 Cavity.LLC All Rights Reserved. DataVとは? https://jp.alibabacloud.com/help/doc-detail/30360.htm DataV には、次の 4 つのエディションが用意されています。 ● ベーシックエディション ● エンタープライズエディション ● 開発(ベータ版) 今回は豪華「エンタープライズエディション」を利用します(345k円/年) ベーシック(41.4k円/年)との主な差分は、 ・データソース(次頁)に使えるサービスが多い ・地図などが高機能 ・ダッシュボードの限定公開が可能 ・テンプレートも豊富です

Slide 4

Slide 4 text

Copyright © 2019 Cavity.LLC All Rights Reserved. Data source(2019/03/1 ) RDS for MySQL MySQL Compatible DB CSV API Static JSON AnalyticDB DataV Data Proxy Service RDS for PostgreSQL RDS for SQLServer HybridDB for PostgreSQL API Gateway TableStore Alibaba Cloud Intranet IP OSS(Object Storage) Alibaba Cloud LogService Oracle オレンジがベーシックエディションのみ

Slide 5

Slide 5 text

Copyright © 2019 Cavity.LLC All Rights Reserved. DataVの注意点 DataVはブラウザで操作できますが、 Google Chrome の最新版(*)でのみ動作 *ver50以降(2019/03/03時点) 違うブラウザで開くと、サポート外ではなく動かない 当然ハンズオンで利用しますので、無い方は今から即install

Slide 6

Slide 6 text

Copyright © 2019 Cavity.LLC All Rights Reserved. DataVの注意点 細かい通信でブラウザと情報の取得や更新を繰り返します。 通信環境への依存が結構大きいです そのため通信環境が悪いと○○が映らない、項目が見当たらない、 など一部不可思議動作が出る場合があります 通信環境がいいところ、あとは愛情をもって接してください

Slide 7

Slide 7 text

Copyright © 2019 Cavity.LLC All Rights Reserved. 今日の到達点 ● DataVについて分かる、LEOさんのblogが読める ● hands-onアカウントのルール ● AliEatersOsakaで借りているDataVでログイン ● DataV各機能説明 ● とりあえずデータを入れて、リスト表示 ● 地図をいじる ●

Slide 8

Slide 8 text

Copyright © 2019 Cavity.LLC All Rights Reserved. ハンズオンアカウントのルール 1. ご自分のDataVエンタープライズがある方は、ぜひそちらをご利用下さい 2. 手元にログイン情報を書いた紙ありますか? 3. RAMユーザは皆さん同じなので、人のダッシュボードを潰さないように注意 4. ダッシュボード(プロジェクト)やデータソースは、識別用に  OSK-[Your name]-  こんな感じでヘッダー識別子をつけてください 5. ハンズオン後は2,3日でダッシュボードの掃除をするのでご留意ください 6. 消すんじゃねー!という方は、オーガナイザーにご相談ください 本気の企業には、別途RAMアカウント切り出しを依頼します

Slide 9

Slide 9 text

Copyright © 2019 Cavity.LLC All Rights Reserved. ログイン+DataV選択

Slide 10

Slide 10 text

Copyright © 2019 Cavity.LLC All Rights Reserved. Functions 強気のメッセージ 機能タブ ・プロジェクト(ダッシュボードを分類可能) ・データソース(利用データの管理)詳細次頁 ・ウイジット(開発者ベータなので何できるか不明) Osaka-handson グループを選んでください グループリスト ダッシュボード分類用 ダッシュボードのプレビュー

Slide 11

Slide 11 text

Copyright © 2019 Cavity.LLC All Rights Reserved. Select template 今回は無地テンプレートを選択 作りこまれたテンプレート

Slide 12

Slide 12 text

Copyright © 2019 Cavity.LLC All Rights Reserved. Create project OSK-[名前]-hogehoge

Slide 13

Slide 13 text

Copyright © 2019 Cavity.LLC All Rights Reserved. Home ツールバー 描画エリア

Slide 14

Slide 14 text

Copyright © 2019 Cavity.LLC All Rights Reserved. カルーセルリスト 見た目の 設定タブ データの 設定タブ 追加設定の設定タブ チュートリアルが中国語 orz ユーザ操作をした際の drildown 動的表示切替など 重なった際 オブジェクトを選択できる ここから探す

Slide 15

Slide 15 text

Copyright © 2019 Cavity.LLC All Rights Reserved. カルーセルリストの設定 1. OSSに入っている[oss-aed-map-kwng-withSimbolname-utf8.csv]を使います 2. 右側データタブ{/}を選択 3. 中段ぐらいにあるデータソースタイプ[静的データ]を[CSVファイル]へ変更 4. [新規]ボタンから1.のcsvファイルをアップロードする(osk-名前-aedmap) 5. 保存できたらデータソースファイルとして4.のデータを選択 ※ハンズオン参加者全員分が入るため、量が多いので気を付けてください この時点では表示はまだ変わりません 6. 設定タブへ移動し、一番下の[カスタムカラム]を開く 7. データのマッピングを変更 データタブ名 カラムフィールド名 カラムの表示名 ラベル1 place エリア ラベル2 area 住所 ラベル3 symble シンボル

Slide 16

Slide 16 text

Copyright © 2019 Cavity.LLC All Rights Reserved. ロゴウォール 材料

Slide 17

Slide 17 text

Copyright © 2019 Cavity.LLC All Rights Reserved. ロゴウォールの設定 1. OSSに入っている[logo.csv]を使います 2. 右側データタブ{/}を選択 3. 中段ぐらいにあるデータソースタイプ[静的データ]を[CSVファイル]へ変更 4. [新規]ボタンから1.のcsvファイルをアップロードする(osk-名前-logo) 5. 保存できたらデータソースファイルとして4.のデータを選択

Slide 18

Slide 18 text

Copyright © 2019 Cavity.LLC All Rights Reserved. 2D map マップ

Slide 19

Slide 19 text

Copyright © 2019 Cavity.LLC All Rights Reserved. 2D mapの設定 1. [設定]タブ-[ベースマップレイヤー]-[タイル]から地図デザイン選ぶ 2. OSSに入っている[map-base-conf.csv,map-area.json,map-mappingdata.json]を使います 3. 右側データタブ{/}を選択 4. 中段ぐらいにあるデータソースタイプ[静的データ]を[CSVファイル]へ変更 5. [新規]ボタンから1.のcsvファイルをアップロードする(osk-名前-mapbase-conf) 6. 保存できたらデータソースファイルとして4.のデータを選択 これで、関西地方がズームアップしたかと思います static jsonに直書きしたほうが楽かも lng(経度)/lat(緯度)で、デフォルト(中国)からzoomで倍率(1-20)を指定 7. [データ]タブ-[コロプレスレイヤー]-[エリア]にstatic jsonでmap-area.json転写 8. 同[マッピングデータ]にmap-mappingdata.jsonを転写 9. マッピングデータのarea_idフィールドを”id”でカスタム設定

Slide 20

Slide 20 text

Copyright © 2019 Cavity.LLC All Rights Reserved. Result 河内長野市に色が塗れた!

Slide 21

Slide 21 text

Copyright © 2019 Cavity.LLC All Rights Reserved. 自分の故郷でやってみる(自由課題 ) [Japan City Geo Json 2016] https://github.com/niiyz/JapanCityGeoJson 超ツワモノ。全都道府県・市区町村のマッピングデータを公開。(Thanks alot!) githubからダウンロードしたjsonにpropertiesとしてid追加すれば読めた #追加箇所はmap-area.jsonを参考にしてください

Slide 22

Slide 22 text

Copyright © 2019 Cavity.LLC All Rights Reserved. #1まとめ 1. 動的なアクションが豊富なダッシュボード 2. csvで読ませる場合には、先頭一行目にカラム名が必須 3. OSSや他データソースの場合にはアカウントのAccessKey情報が必要 4. エンタープライズエディションのAliEaters試用アカウント有り〼 5. 次はデータソースいろいろRDS/table storeとかをやりたい 6. 資料が見たい、という方もいるかも知れないのでブログにします #明日ぐらいにデータ掃除/アカウント利用ができなくなります

Slide 23

Slide 23 text

Copyright © 2019 Cavity.LLC All Rights Reserved. EoF