Canvasのデータ表要素およびデバッグ要素の使用方法について説明します。ElasticsearchおよびKibanaに組み込まれているサンプルデータを使用します。

canvas_debug_banner.jpg

thumb-bw-gears-motor.jpg

Canvas: Data Table and Debug Elements

Canvas: データ表要素とデバッグ要素

fullbleed2.jpg

canvas_metric_thumb.jpg

Canvas: Metric and Markdown Elements

Canvas：メトリック要素とマークダウン要素

<p><strong>スコアボードやプレゼンテーションを手動でアップデートしていたのは過去の話</strong>。&nbsp;
</p>
<p>Canvasは、Kibanaに内蔵されているプレゼンテーションツールです。Elasticsearchのライブデータから直接、ピクセルパーフェクトなプレゼンテーションやスライドデッキを作成することができます。つまり、プレゼンテーションを手作業でアップデートする必要はなくなり、いつでも最新のチャートやグラフ、グラフィックが表示されるということです。ちなみに、Canvasはこの記事で取り上げる主なユースケースのほかにも多数の機能やフレキシビリティを備えています。&nbsp;
</p>
<p>下でご紹介しているのは、Canvasを開発したラシード・カーンがElastic{ON} 2018で行ったプレゼンテーションです。
</p>
<div class="video embed-container" style="height: 319.725px;">
	<img style="width: 100%; margin: auto; display: block;" class="vidyard-player-embed" src="https://play.vidyard.com/ga3NJzS76dX9kCgVaDBCrV.jpg" data-uuid="ga3NJzS76dX9kCgVaDBCrV" data-v="4" data-type="inline">
</div>
<h2>Canvasを使う理由</h2>
<p>プレゼンテーションの作成はそれほど短時間には終わりません。単純なJSON形式より見やすくするため、表現するデータに加工が必要な場合は特に時間も手間もかかります。棒グラフのスクリーンショットを撮り、プレゼンテーションに画像をドロップするだけの単純作業でも、定期的にデータを更新するとなれば大変です。残念なことに、データをエクスポートしてクリーンにし、プレゼンテーションに貼り付け、画像を加える… という手順はよくある光景です。辛く、面倒なプロセスという以外の何物でもありません。
</p>
<p>しかし、「（プレゼンテーションが続く間）変化し続けるデータを加工する」という手順を排除できれば、こうした悩みが生じることもありません。ある企業の売上について、4半期ごとに詳細をレポートするスライドを例に考えてみましょう。プレゼンテーションの最中にCEOが突然、「月別のレポートにしてくれ」と言ったらどうでしょう？中にはこのリクエストを想定して別のスライドを準備しておく、という人もいるかもしれません。でもそうではない（多くの）人は「すみません、後ほどご提出します...」と言う羽目になります。
</p>
<p>Canvasのメリットは、プレゼンテーションの可視化要素を定期的に更新する作業を回避することだけではありません。刻々と変化するデータを調整するパワフルなツールで、フィルター機能を備え、フレキシブルでダイナミック、かつ心に響くプレゼンテーションを作成することができます。
</p>
<h2>Canvasの要件とインストール</h2>
<h3>要件</h3>
<p>Canvasを使いはじめるには、次の準備が必要です。
</p>
<ul>
	<li>Elasticsearch：データの格納・インデックスに使用</li>
	<li>Kibana：UIとして使用</li>
</ul>
<p>ElasticsearchとKibanaをまだインストール/実行していない場合は、ドキュメント「<a href="/guide/en/elastic-stack-get-started/6.4/get-started-elastic-stack.html">Elastic Stackを使いはじめる</a>」で詳しい情報をご確認ください。また、わずか数分でUbuntuマシン上でElasticsearchとKibanaを使いはじめる方法を紹介している<a href="https://github.com/elastic/quick-deploy">Quick Deploy repo</a>もあります。
</p>
<h3>Canvasをインストールする</h3>
<p>バージョン6.5から、CanvasはKibanaにデフォルトで搭載されるようになりました。
	<a href="https://www.elastic.co/downloads/elasticsearch">Elasticsearch</a>と<a href="https://www.elastic.co/downloads/kibana">Kibana</a>をインストールするだけでCanvasを使い始めることができます(注：2018年12月に6.5以上のインストール手順に更新しました)。
</p>
<h2>データソース</h2>
<p>本記事ではチュートリアル用に、手軽で安定性に優れた<a href="/jp/beats/metricbeat">Metricbeat</a>をライブデータソースとして使用します。
</p>
<h3>1.Metricbeatをダウンロードして解凍する</h3>
<p><a href="/jp/downloads/beats/metricbeat">Metricbeatのダウンロードページ</a>で、お使いのOSに最適なバイナリをダウンロードします。ダウンロード後、展開してください。&nbsp;展開すると、Metricbeatディレクトリに複数のファイルが加わります。
</p>
<h3>2.Metricbeatを設定する</h3>
<p>Elasticsearchインスタンスにデータを送信できるよう、Metricbeatを設定を設定します。お好みのコードエディターで<code>metricbeat.yml</code>を開きます。Elasticsearchインスタンスが
</p>
<ol>
	<li><strong>Localの場合：</strong> デフォルトで設定済みの構成で、Elasticsearchにデータを送信できます（<code>http://localhost:9200</code>で実行）。変更を加える必要はありません。変更したい場合は、次の手順と同じです。</li>
	<li><strong>Remoteの場合：</strong> <em>Elasticsearch output</em>セクションに移動し、お使いのインスタンスのポイントになるよう修正します
	<pre class="prettyprint">setup.kibana:
  host: "url-to-my-kibana-instance:5601"
...
...
output.elasticsearch:
  hosts: ["url-to-my-elasticsearch-instance:9200"]
	</pre>
	</li>
</ol>
<h3>3.Metricbeatを実行する</h3>
<p>metricbeat.ymlファイルを保存します。次に<code>-setup</code>オプションでMetricbeatを実行します。このオプションはシステムに、デフォルトのメトリックダッシュボードをKibanaに読み込むよう指示します。
</p>
<pre class="prettyprint">./metricbeat -c metricbeat.yml -setup -e
</pre>
<p><em>Tips：Metricbeatの実行時に-eオプションを追加すると、実行中にログを表示できます。</em>
</p>
<h2>Canvas workpadを作成する</h2>
<p>Canvasのプロジェクトは"workpad"と呼ばれます。"workpad"はプレゼンテーションと同義で、複数のページを作成することができます。
</p>
<ol>
	<li>CanvasのインストールとMetricbeatの設定が完了したら、Kibanaインスタンスを開き、サイドバーで<em>Canvas</em>を選択します（下の画像を参照）。</li>
	<li>[Create workpad]をクリックします。</li>
	<li>workpadに一意の名前をつけます。</li>
</ol>
<p><img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/bltdb55167a4649a9ed/5c5837f365ace9e30b316503/image1.gif" data-sys-asset-uid="bltdb55167a4649a9ed" alt="image1.gif" data-image="r6kb6wouo89k">
</p>
<h3>Canvasのインターフェースを理解する<br><img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt1ad52e250654077f/5c304e37c05f480270a742ec/canvas.jpg" data-sys-asset-uid="blt1ad52e250654077f" alt="canvas.jpg" data-image="kmsbacpo2o38"><br></h3>
<ol>
	<li><strong>各種ボタン</strong>
	<ul>
		<li><strong>データ更新間隔</strong>：CanvasがElasticsearchの更新を確認する間隔を設定します</li>
		<li><strong>フルスクリーン切り替え</strong>："Presentation mode"の切り替えを行います</li>
		<li><strong>Workpadの出力</strong>：workpadをPDFファイルに出力します</li>
		<li><strong>編集サイドバーの切り替え</strong>：図の"6"セクションを非表示にします</li>
	</ul></li>
	<li><strong>要素の追加</strong>：要素ピッカーを起動して、チャート、グラフ、画像などをworkpadに追加できます</li>
	<li><strong>要素のレイヤーコントロール</strong>：どの要素を最上部に配置するか指定したり、グループ化、非表示などを選択できます</li>
	<li><strong>要素の複製</strong>：この機能を使用するには、1つの要素が選択されている必要があります</li>
	<li><strong>Canvas Workpad</strong>：メインの作業エリアです</li>
	<li><strong>編集コントロール</strong>：選択された要素のフォント、カラー、カスタムスタイルシートなどを含むプロパティ編集を表示するコンテクストアウェアなパネルです</li>
	<li><strong>Canvasのメインメニューを開く</strong>：workpad間での移動、workpadの複製、インポート/エクスポート、削除を行います</li>
	<li><strong>ページコントロール</strong>：新規ページの追加、または既存のページを切り替えます</li>
	<li><strong>要素のコードエディター</strong>：不明点がある場合、コードを表示することができます。クエリや、フォーマット、パイプラインのフレキシビリティを補完できます（次回以降の記事でさらにご紹介します）</li>
</ol>
<h2 id="canvas_elements">Canvasで要素を作成する</h2>
<h3>要素の種類
</h3>
<p><img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/bltff2744f4cd06c410/5c5839ba122247d10be8ecad/image8.jpg" data-sys-asset-uid="bltff2744f4cd06c410" data-image="ryao0cojup41" style="display: block; margin: auto;">
</p>
<ol>
	<li>[Add element]をクリックします</li>
	<li>Canvasにあらかじめ用意された要素が表示され、すぐに使いはじめることができます。[Horizontal Bar Chart]を選択します
	<br><em>Tips：はじめて要素を作成すると、デモ用データが入った状態で表示され、すぐに触ることができるようになっています。</em></li>
	<li>右のパネルで[Data]タブを選択します</li>
	<li>[Change your data source]をクリックします</li>
	<li>[Elasticsearch Raw Documents]を選択します
	<br><br>
	<table style="border:none">
	<tbody>
	<tr>
		<td style="border:none"><img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt7ce97e22180c753c/5c57de54773ad9030c5c2bfa/image5_small.png" data-sys-asset-uid="blt7ce97e22180c753c" alt="image5_small.png" data-image="ryx7ffiomaa2">
		</td>
		<td style="vertical-align:middle; border:none"><strong>データソースの種類：<br></strong><br>
			<ul>
				<li><strong>Demo Data：</strong> はじめてCanvas要素を作成する場合に使える簡単なサンプルデータセットです。主にテスト用に使用します。</li>
				<li><strong>Elasticsearch Raw Documents：</strong> Elasticsearch内のrawデータにアクセスできます。</li>
				<li><strong>Timelion：</strong> Elasticsearchの時系列データを扱うために使用します。</li>
				<li><strong>Elasticsearch SQL：</strong> SQL構文機能を使用して、Elasticsearch Raw Documentsと同じようにElasticsearchのデータにアクセスできます。</li>
			</ul>
		</td>
	</tr>
	</tbody>
	</table>
	</li>
	<li>ドロップダウンリストで<code>metricbeat-*</code>インデックスを選択します</li>
	<li>サイドバーの下部に移動し、[Save]をクリックします</li>
	<li>サイドバー上部に戻り、[Display]タブを選択します</li>
	<li>metricsetの名前に対してラウンドトリップタイムをプロットします。このため、棒グラフの軸を次のように設定ます。
	<ul>
		<li>X軸
		<ul>
			<li>Measurement：値</li>
			<li>Field：metricset.rtt</li>
		</ul></li>
		<li>Y軸
		<ul>
			<li>Measurement：値</li>
			<li>Field：metricset.name</li>
		</ul></li>
		<li>Color
		<ul>
			<li>Measurement：値</li>
			<li>Field：metricset.name</li>
		</ul></li>
	</ul>
	</li>
</ol>
<p><img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt251899278831d9b2/5c304cae29d13af10bc2ab20/image7.gif" data-sys-asset-uid="blt251899278831d9b2" data-image="8viqpbbag34l" style="display: block; margin: auto;">
</p>
<p>もう1つ要素を追加しましょう。
</p>
<ol>
	<li>[Add element]をクリックします</li>
	<li>[Metric]要素を選択します</li>
	<li>見やすい場所にドラッグします</li>
	<li>右のパネルで[Data]タブを選択します</li>
	<li>今度は[Elasticsearch SQL]を選択します</li>
	<li>SQLクエリエディターに、次のように入力します。<br>
	<code>SELECT COUNT(*) FROM metricbeat*</code></li>
	<li>[Save]をクリックします</li>
	<li>要素が警告を表示します。これは、この要素がどのデータもプルしなくなったためです。</li>
	<li>サイドバーの上部で[Display]タブを選択します</li>
	<li>[Numbers]セクションで、次のように設定します。
	<ul>
		<li>Measurement：<code>値</code></li>
		<li>Field：<code>COUNT_1</code></li>
	</ul></li>
	<li>Elasticsearchのエントリ数が表示されるようになりました。そこで、要素のラベルを[Entries]に変更します。</li>
	<li>Metricbeatが稼働している限り、数字はライブでアップデートされます。画面左側の上部で、[Refresh]をクリックします</li>
	<li>リフレッシュレートを5秒に設定します</li>
	<li>あとはプレゼンテーションがライブデータで自動更新されるのを眺めるだけ！</li>
</ol>
<p><img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt91dde0dbfdd24acc/5c30479f4657a057675ba64a/image4.gif" data-sys-asset-uid="blt91dde0dbfdd24acc" alt="image4.gif" data-image="rgzo7mc3zlk3">
</p>
<h3>プレゼンテーションを手動で更新する作業はもう必要ありません。</h3>
<p><img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt036f8600b18aa124/5c583bf4a669c2e50b763f2f/image6.2018-10-11_11_23_03.gif" data-sys-asset-uid="blt036f8600b18aa124" data-image="w7sjb3qo1lnh" style="display: block; margin: auto;">
</p>
<h2>その他の便利なリソースリンク</h2>
<p>お疲れ様でした。Metricbeatを経由するライブデータを使用して、はじめてのCanvas workpad作成を完了しました。ぜひ他の要素もworkpadに追加して、Canvasの機能をお試しください。
</p>
<p>Canvasのチュートリアルはこの他にもあります。ぜひご活用ください。
</p>
<ul>
	<li><a href="/jp/blog/kibana-canvas-metric-and-markdown-elements">How to Add Metric and Markdown Elements to Canvas</a>
	</li>
	<li><a href="https://canvas.elastic.co/stories/index.html">Canvasストーリー</a></li>
	<li><a href="/jp/blog/elasticon-kibana-canvas-story-elasticoffee">But First, Coffee...（Elastic{ON}、Canvasストーリー）</a></li>
	<li><a href="/jp/blog/elasticon-kibana-canvas-story-ama">Here to Help...（Elastic{ON}、Canvasストーリー）</a></li>
</ul>
<hr>
<p><em>Banner Image:"<a href="https://www.flickr.com/photos/ekilby/711547840">By hand</a>" by <a href="https://www.flickr.com/photos/ekilby/">Eric Kilby</a>, used under <a href="https://creativecommons.org/licenses/by/2.0/">CC BY</a> / Cropped from original</em>
</p>

canvas-dashboard-kibana-scoreboard-v2.jpg

canvas_intro_thumb.png

Getting Started with Canvas in Kibana

KibanaでCanvasを使いはじめる

Start free trial

Blog Footer CTA

Sign up for Elastic Cloud free trial

Ethan_Groves.jpg

Eng Sr, Product Marketing

Ethan Groves

<p>Надсилаючи цю форму ви погоджуєтеся з <a href="/legal/terms-of-use">Умовами надання послуг Elastic</a>. Ваші особисті дані будуть опрацьовані відповідно з <a href="/legal/privacy-statement">Положеннями про конфіденційність Elastic</a>.</p>

Newsletter GDPR Text - Ukrainian

Intentionally Blank

<p>提交即表示您確認已詳閱並同意我們的<a href="/legal/elastic-cloud-account-terms" target="_blank">服務條款</a>，且同意 Elastic 使用您在上方提供的個人資料<a href="/legal/privacy-statement#how-we-use-the-information" target="_blank">與您聯絡</a>，為您提供相關產品和服務的資訊。如需詳細說明或隨時想停止收到產品和服務資訊，請參閱 <a href="/legal/privacy-statement/" target="_blank">Elastic 的隱私聲明</a>。</p>

Newsletter GDPR Text - TW

<p>Inviando la registrazione (1) esprimi il consenso ai <a href="/legal/terms-of-use">termini e condizioni di Elastic</a> e <a href="/legal/privacy-statement">all’informativa sulla privacy</a>, nonché (2) a ricevere saltuarie e-mail.</p>

Newsletter GDPR Text - Italian

<p>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.</p>

Communication Preferences - ONLY for /communication-preferences

<p>送信することにより、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>をご覧ください。これらの同意についてはいつでもオプトアウトすることが可能です。</p>

<p>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.</p><p>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.</p>

GDPR Text + Google Cloud

<p>送信することにより、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>ポリシーをご覧ください。これらの同意についてはいつでもオプトアウトすることが可能です。</p><p>このフォームを送信することにより、Elasticが私の連絡先情報をGoogle Cloudに共有することに同意します。また、Elasticが私に食材パッケージを発送する目的で私の情報をベンダーに提供することにも同意します。</p>

<p>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.</p>

Serverless GDPR Text

<p>送信することにより、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>ポリシーをご覧ください。これらの同意についてはいつでもオプトアウトすることが可能です。</p>

<p>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>.</p>

Cloud Trial GDPR Text

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

<p>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.</p>

Newsletter GDPR Text

<p>送信することにより、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>ポリシーをご覧ください。これらの同意についてはいつでもオプトアウトすることが可能です。</p>

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 Ethan Groves

Eng Sr, Product Marketing, Elastic

Canvas: データ表要素とデバッグ要素

Canvas：メトリック要素とマークダウン要素

KibanaでCanvasを使いはじめる

SNSリンク

会社概要

参加する

パートナー

信頼とセキュリティ

投資家向け情報

優秀賞