Kibana 6.1では、新しい実験的なビジュアライゼーションタイプであるControlsが導入されました。Kibanaのダッシュボードに対話型入力を追加できる機能が用意されており、ドロップダウンと範囲スライダーという2種類の入力を作成できます。
この記事では、これらの2つの新しい入力を使用する方法について、例を取り上げながら説明します。その前に、まず、手順を説明したこちらの短い動画（2:23）をご覧ください。
<div class="video embed-container" style="height: 478px;">
	<img style="width: 100%; margin: auto; display: block;" class="vidyard-player-embed" src="https://play.vidyard.com/LS4ij6jVJvcwBDdvXpwQHv.jpg" data-uuid="LS4ij6jVJvcwBDdvXpwQHv" data-v="4" data-type="inline">

</div>Controlsのビジュアライゼーションを試す前に、データセットを使用してElastic Stackを設定する必要があります。最近、Nick Peihlが<a href="https://www.elastic.co/jp/blog/visualizing-france-salary-data-with-region-maps-in-kibana">Kibanaのリージョンマップを使ってフランスの給与データを可視化する</a>というブログ記事を公開しました。ここでは、Nickの作業を引き継ぎ、Controlsを使用して対話型のダッシュボードを構築する方法をご紹介します。<a href="https://www.kaggle.com/etiennelq/french-employment-by-town">フランスのINSEE雇用、給与、市区町村ごとの人口</a>データセットをElasticsearchにインポートする手順については、Nickのブログに従ってください。必ず、<code>france-example-*</code>と合うように、Kibanaで新しいインデックスパターンを作成してください。
<h2>ドロップダウンと範囲スライダーを作成する</h2>まず、ドロップダウン入力を作成し、地域ごとにフィルタリングできるようにしましょう。ドロップダウンオプションリストには、用語アグリゲーションの結果が動的に入力されます。
最初に、ビジュアライゼーションアプリケーションに切り替え、<code>+</code>ボタンをクリックして、新しいビジュアライゼーションを作成します。<code>Others</code>セクションまで下にスクロールし、<code>Controls</code>を選択します。デフォルトで<code>Options list</code>が選択されているため、そのまま<code>Add</code>をクリックします。次に、インデックスパターン<code>france-example-*</code>を選択し、<code>Region_Name.keyword</code>フィールドを選択して、サイズを25に設定します（データセットには25個の固有の地域があります）。最後に、<code>play</code>をクリックします。ビジュアライゼーションには、ドロップダウンが1つ表示されます。そのドロップダウンには、<code>france-example-*</code>インデックスから<code>Region_Name.keyword</code>フィールドで用語アグリゲーションを実行した結果が入力されます。
<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt38d4b5e89034bc45/5c3056a1b7017c456eff09d3/First_Shot.png" data-sys-asset-uid="blt38d4b5e89034bc45" alt="First Shot.png"> 
次に、給与の手取額でフィルタリングできるように、範囲スライダーを作成しましょう。範囲スライダーの最小値と最大値には、最小値および最大値アグリゲーションの結果が動的に入力されます。
範囲スライダー入力を追加するには、<code>Range slider</code>を選択して、<code>Add</code>をクリックします。インデックスパターン<code>france-example-*</code>を選択し、<code>mean_net_salary</code>フィールドを選択して、<code>play</code>をクリックします。ビジュアライゼーションに範囲スライダーが表示されます。この範囲は、<code>france-example-*</code>インデックスの<code>mean_net_salary</code>フィールドに対して行われた最小値および最大値の集計結果に基づいて設定されます。
<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt276bca9250125b31/5c30569d760e7f7a666d6921/withSlider.png" data-sys-asset-uid="blt276bca9250125b31" alt="withSlider.png">
<h2>ドロップダウン入力を連鎖させる</h2>Kibana 6.3では、ドロップダウン入力を連鎖させ、最初の入力の選択によって2番目の入力の用語をフィルタリングする新機能が導入されています。別のドロップダウンコントロールを追加して、市区町村でフィルタリングできると、どのように便利になるのかを見てみましょう。
<code>Options list</code>を選択し、<code>Add</code>をクリックして、別のドロップダウンコントロールを追加します。インデックスパターン<code>france-example-*</code>を選択し、<code>Town_Name.keyword</code>フィールドを選択して、サイズを100に設定します。そのコントロールを地域コントロールに連鎖させるには、親コントロールの［region］を選択します。最後に、<code>play</code>をクリックします。ビジュアライゼーションには別のドロップダウンが表示されます。地域ドロップダウンに値が入力されるまで、このドロップダウンは無効化されます。市区町村ドロップダウンには、<code>france-example-*</code>インデックス の<code>Town_Name.keyword</code>フィールドに対して実行された用語アグリゲーションの結果が、選択した地域でフィルタリングして表示されます。
<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt121acde9b5ebb40c/5c305699e7a0881470c3a4af/allthree.png" data-sys-asset-uid="blt121acde9b5ebb40c" alt="allthree.png">
<h2>すべてを組み合わせる</h2>ダッシュボードアプリケーションに切り替え、新しいダッシュボードを作成します。Controlsビジュアライゼーションと、<a href="https://www.elastic.co/jp/blog/visualizing-france-salary-data-with-region-maps-in-kibana">Nickのブログ記事</a>で作成された「Average Gender Salary Ratio by Department - Region Map」ビジュアライゼーションを追加します。コントロールを任意の値に設定します。［変更を適用］をクリックすると、ドロップダウン入力と範囲スライダー入力に基づいてデータセットがフィルタリングされます。
<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt64c02637fb32b01a/5c305697760e7f7a666d691b/withmap.png" data-sys-asset-uid="blt64c02637fb32b01a" alt="withmap.png">
<h2>新しいエクスペリエンス</h2>Controlsのビジュアライゼーションはまだ実験段階です。ぜひ試してみて、<a href="https://discuss.elastic.co/c/kibana">Kibanaフォーラム</a>でフィードバックをお寄せください。皆様のフィードバックは、今後の機能を設計するうえで役に立ちます。

Kibana Intput Controls FullBleed.jpg

Kibana Input Controls thumbnail.jpg

Interactive Inputs on Kibana Dashboards

Kibanaのダッシュボードでの対話型入力

Start free trial

Blog Footer CTA

Sign up for Elastic Cloud free trial

Kibana Engineer

Nathan Reese

By submitting you acknowledge that you've read and agree to our <a href="/legal/elastic-cloud-account-terms" target="_self">Terms of Service</a>, and you agree to receive the <a href="/legal/privacy-statement#how-we-use-the-information" target="_self">selected communications</a> at the contact details you provided above. See <a href="/legal/privacy-statement/" target="_self">Elastic’s Privacy Statement</a> for more details or to opt-out at any time.

Communication Preferences - ONLY for /communication-preferences

送信することにより、Elasticの<a href="/jp/legal/elastic-cloud-account-terms" target="_self">利用規約</a>を読み、同意したものと見なされます。また、上記で提供された連絡先に<a href="/jp/legal/privacy-statement#how-we-use-the-information" target="_self">特定の通知</a>が送信されることを認めたことになります。詳細については、<a href="/jp/legal/privacy-statement/" target="_self">Elasticのプライバシーポリシー</a>をご覧ください。これらの同意についてはいつでもオプトアウトすることが可能です。

By submitting you acknowledge that you've read and agree to our <a href="/legal/elastic-cloud-account-terms" target="_blank">Terms of Service</a>, and that Elastic may <a href="/legal/privacy-statement#how-we-use-the-information" target="_blank">contact you</a> about our related products and services, using the details you provide above. See <a href="/legal/privacy-statement/" target="_blank">Elastic’s Privacy Statement</a> for more details or to opt-out at any time.By submitting this form, I agree to Elastic sharing my contact information with Google Cloud. I also agree to Elastic giving my information to the vendor for the purpose of shipping my food package.

GDPR Text + Google Cloud

送信することにより、Elasticの<a href="/jp/legal/elastic-cloud-account-terms" target="_self">利用規約</a>を読み、同意したものと見なされます。また、関連する製品やサービスについて、上記で提供された情報を使用してElasticから<a href="/jp/legal/privacy-statement#how-we-use-the-information" target="_self">連絡する</a>場合があることを認めたことになります。詳細については、<a href="/jp/legal/privacy-statement/" target="_self">Elasticのプライバシー</a>ポリシーをご覧ください。これらの同意についてはいつでもオプトアウトすることが可能です。このフォームを送信することにより、Elasticが私の連絡先情報をGoogle Cloudに共有することに同意します。また、Elasticが私に食材パッケージを発送する目的で私の情報をベンダーに提供することにも同意します。

By submitting you acknowledge that you've read and agree to our <a href="/legal/serverless-preview-terms" target="_blank">Terms of Service</a>, and that Elastic may <a href="/legal/privacy-statement#how-we-use-the-information" target="_blank">contact you</a> about our related products and services, using the details you provide above. See <a href="/legal/privacy-statement/" target="_blank">Elastic’s Privacy Statement</a> for more details or to opt-out at any time.

Serverless GDPR Text

送信することにより、Elasticの<a href="/jp/legal/serverless-preview-terms" target="_self">利用規約</a>を読み、同意したものと見なされます。また、関連する製品やサービスについて、上記で提供された情報を使用してElasticから<a href="/jp/legal/privacy-statement#how-we-use-the-information" target="_self">連絡する</a>場合があることを認めたことになります。詳細については、<a href="/jp/legal/privacy-statement/" target="_self">Elasticのプライバシー</a>ポリシーをご覧ください。これらの同意についてはいつでもオプトアウトすることが可能です。

By submitting you agree to <a href="/agreements/global/cloud-services-monthly" rel="nofollow">Elastic Cloud Terms of Service</a>. Your personal data will be processed in accordance with <a href="/legal/privacy-statement">Elastic's Privacy Statement</a>.

Cloud Trial GDPR Text

送信することにより、<a href="/jp/agreements/global/cloud-services-monthly" rel="nofollow">Elastic Cloud利用規約</a>に同意したものとみなされます。個人情報は<a href="/jp/legal/privacy-statement">Elasticのプライバシーポリシー</a>に基づいて取り扱われます。

By submitting you acknowledge that you've read and agree to our <a href="/legal/terms-of-use" target="_blank">Terms of Service</a>, and that Elastic may <a href="/legal/privacy-statement#how-we-use-the-information" target="_blank">contact you</a> about our related products and services, using the details you provide above. See <a href="/legal/privacy-statement/" target="_blank">Elastic’s Privacy Statement</a> for more details or to opt-out at any time.

Newsletter GDPR Text

送信することにより、Elasticの<a href="/jp/legal/terms-of-use" target="_self">利用規約</a>を読み、同意したものと見なされます。また、関連する製品やサービスについて、上記で提供された情報を使用してElasticから<a href="/jp/legal/privacy-statement#how-we-use-the-information" target="_self">連絡する</a>場合があることを認めたことになります。詳細については、<a href="/jp/legal/privacy-statement/" target="_self">Elasticのプライバシー</a>ポリシーをご覧ください。これらの同意についてはいつでもオプトアウトすることが可能です。

Explore similar demos

Overview

Speakers

Close

See more insights

The content on this page is not available in the selected language. As Elastic grows globally, we continue to support content in multiple languages.

The content on this page is not available in the selected language.

このページのコンテンツは、選択された言語ではご利用いただけません。Elasticでは現在、コンテンツをさまざまな言語でご利用いただけるよう取り組んでいます。お使いの言語が準備されるまでお待ちくださるようお願いいたします。

Author

Articles by

Watch now (no PT)

Watch now

See all top stories

すべてのトップストーリーを見る

All (no PT translation)

Contact information

Press Release

Share on Reddit

Share this story

Share by Email

Thank you for your interest!

Contact Info

Follow us on Youtube

Load More

Share on LinkedIn

Search Integrations

All Solutions

Video for

See when this webinar starts in my time zone

現在のタイムゾーンでこのウェビナー開始時間を見る

Register to Watch

See All Posts

Can't make it? Register and we'll send you the recording. You'll also receive an email with related content

他の予定と重なってしまった…という場合も、問題ありません。参加登録されると、録画配信をご利用いただけます。関連コンテンツのご案内もメールでお届けします。

Author

Articles by Nathan Reese

Kibana Engineer, Elastic

Kibanaのダッシュボードでの対話型入力