りまりま団のもふもふです。この記事はElastic stack (Elasticsearch) Advent Calendar 2018 23日目の記事です。
Advent Calendarに向けてどんなCanvasを作ろうかなと思ってあれこれ探していたらそれ以上に面白そうな物を見つけてしまったため、予定を変更してお送りしています。1
Elastic UI frameworkとは
Elastic UI frameworkとは、Elasticsearch社が提供しているライブラリです。 名前の通り、Elasticsearch社から提供されている画面を構成する部品を再利用できる形にまとめています。
提供されている部品の種類としては、次のようなものがあります。
- アイコン
- ボタン
- 各要素のレイアウト(flex layout)
- 表
- カード
- フォーム
- その他Kibanaで利用されている部品
GitHubリポジトリのFAQにもありますが、Elastic製品で利用することを目的としています。 一般的なアプリケーションで利用することは推奨されていません。2 Kibanaのプラグイン開発時に利用することになりそうです。
利用されている技術
React.js + SCSSで作成されています。Reactなので、コンポーネント指向で開発されています。SCSSの書き方・管理の仕方はかなり参考になりました。3 各コンポーネントには必ずテストが書かれているので、コンポーネントに対してどうやってテストを書いているのかも参考になりそうです。
リポジトリはこちらです。components
ディレクトリより下にボタンやカレンダーなどのコンポーネントが配置されています。
眺めていて面白かった部分
Color Palettes
ありきたりな感想ですが、「ちゃんと見やすく配色してんだなー」と改めて思いました。色がぎゅっと詰まって並んでいても目がチカチカしないのは色づかいの力を感じます。
https://elastic.github.io/eui/#/utilities/color-palettes
Series charts (beta)
これはBar chartsのドキュメントの一部です。JavaScriptのドキュメントあるあるですが、Web上で実行結果とコードが比較できるのは良いですよね。Demo
をクリックすれば実行結果(グラフ)を参照できます。
https://elastic.github.io/eui/#/series-charts-beta/bar-charts
Props
の値を参照して描画する…と考えると、「Propsでこの値を使うからデータ加工しとこっと」というように、どんなデータをElasticsearchに投入するかを逆算して考えることができます。
Kibanaは他のElastic製品に比べて公式ドキュメントが少し寂しいので、どのようにデータを割り当てればいいんだろう?という情報を取集するのに良いのでは?!?!と感じました。
…とまあ短い記事になってしまいました。ただ、Kibanaの画面がどのように作られているかを知る手がかりが増えたことに嬉しくなったので、いろんな人に「みてみて!」ってしたくなったのでした。