Hello Chartsは、ブロックエディターのネイティブチャート作成エクスペリエンスを開始します

公開: 2021-12-03

WPエンジンが2020年にピックアップした3人のブロックラボチームの2人であるルークカービスとロブスティンソンは、新しいプロジェクトに一緒に戻ってきました。今回は、バイロンキートが参加します。このトリオは、HelloChartsという名前の一連のブロックを介してWordPressチャートスペースを利用しています。

「一部の人々はブラックフライデーに取引を開始します」とチームは先週、7月以来の2回目のツイートで書いた。「私たちは製品全体を発売します！」

Carbisは、チームがブロックエディターのネイティブプラグインの作成に努めたと指摘しました。管理画面や設定ページはなく、ユーザーはエディターから操作するだけです。

ウェブサイトのホームページのマーケティング資料によると、HelloChartsは「最初のチャートプラグインビルドブロックエディタ」であるとのことです。ただし、SB Chartsは1年近く前から存在しており、ChartBlockは数週間前にWordPressプラグインディレクトリに到達しました。 CSVインポートをサポートするGutenbergのChartsBlocksは、半年前に最初のリリースを取得しましたが、それ以降は更新されていません。

最初であるという主張は、おそらく、マーケティングの遅れです。私がすぐにそれを見つけた唯一の理由は、ブロックエディタのためのまともなチャートソリューションを見つけることを望んで、私がしばらくの間同様のプラグインを注意深く見守っていたということです。 Hello Chartsは技術的には最初に登場するわけではありませんが、これまでで最高のユーザーエクスペリエンスを提供します。

ほとんどの場合、私は棒グラフと折れ線グラフに依存しています。ただし、プラグインは合計5つのブロックタイプを提供します。

棒グラフ
折れ線グラフ
円グラフ
極域面グラフ
レーダーチャート

データの入力と出力のカスタマイズでは、それぞれがほぼ同じように機能します。各タイプに固有のオプションとコントロールがいくつかあります。さらに、ユーザーはデータを失うことなく、ボタンをクリックするだけで、あるチャートブロックから別のチャートブロックに変換したり、元に戻したりすることができます。

オプションに慣れた後、月ごとの3年間の製品販売データチャートを作成しました。私は棒グラフブロックから始めました。これは最も理にかなっています。各ブロックには「チャートデータの編集」ボタンがあります。クリックすると、通常のスプレッドシートプログラムのように機能するオーバーレイが画面に開きます。

表計算ソフトウェアのように見えるチャートデータを入力するためのWordPressエディターのポップアップオーバーレイ。 — チャートデータオーバーレイ。

ユーザーは各セルをタブで移動し、データを追加して新しいデータセットまたは行を作成できます。省略記号ボタンをクリックして、データセットを複製したり、前後に新しいデータセットを追加したりするためのオプションがあります。高校のコンピュータクラス以来、スプレッドシートソフトウェアの操作に多くの時間を費やしていない人にとっては、すべてが簡単だと感じました。

数分後、棒グラフができました。テーマの色を使用するように調整するだけで済みました。

WordPressエディターでの3年間の月間売上データを示す棒グラフ。 — 棒グラフブロック。

プラグインのカスタマイズオプションは豊富でしたが、圧倒されないように十分にバランスが取れていました。テーマのデザインに大騒ぎせずにマッチさせたかったのですが、それを実現するのにそれほど時間はかかりませんでした。

既存のデータを使用して、折れ線グラフブロックをエディターに追加しました。私が行う必要がある唯一の調整は、「カーブ」オプションでした。波のように流れるのではなく、まっすぐに見えるようにしたかったのです。その時点で必要だと気付く前に、チームがすべてを考えていたのではないかとすでに思っていました。

WordPressエディターでの3年間の月間売上データを示す折れ線グラフ。 — 折れ線グラフブロック。

念のため、円グラフブロックをテストしました。たまに使うチャートタイプです。全体的に、それは他と同様に機能しました。

私が見逃した機能は、画面上の各円セグメントのデータを印刷することでした。データはホバーまたはフォーカスのポップアップを介して利用できますが、訪問者はすべてのセグメントデータを一度に表示することはできません。

不明なデータセットを使用したWordPressエディターの円グラフブロック。 — 円グラフブロック。

確かに、私は極域面グラフとレーダーチャートのブロックに多くの時間を費やしませんでした。それらに関する私の経験は実際のシナリオには存在しないため、他の人が望む可能性のある機能があるかどうかをしっかりと把握していません。私は単にそれらが機能することを確認するためにそれらをテストしました。セット内の他のブロックと同様に、問題は発生しません。

プラグインのブロックに統合されたタイトルまたはキャプションオプションを見たいのですが。ただし、どちらも見出しブロックまたは段落ブロックを使用して簡単に追加できます。次のスクリーンショットに示すように、背景を一致させるには、Groupブロックでラップすることが役立ちます。

月次売上データとその上の見出しを含む棒グラフ。 — チャートをグループ化してタイトルを追加します。

他のいくつかの歓迎すべき機能は、X軸とY軸の線とデータテキストのカラーオプションと、ブロックギャップまたはマージンのサポートです。凡例の間隔は少し残されており、多くの場合、チャート出力に近づきすぎています。いくつかの配置オプションがありますが、特に上部または下部に配置する場合は、余分な空白が必要です。

全体的に、私は不満を言うことはあまり見つかりませんでした。 Hello Chartsは、WordPressブロックシステム用に構築されたように機能するチャートソリューションが必要な人におすすめするプラグインです。

購入フローと設定

現在の無料のブロックプラグインから少しマイレージを得ることができますが、HelloChartsは価格をアップグレードする価値があります。それは価値のために低価格でさえあるかもしれません。チームがCSVインポートを組み込む場合、それは完全に盗むことになります。

ユーザーは、5つの個別のブロックタイプを個別に4ドルで購入するか、アップグレードしてすべてを16ドルで入手できます。これらは、サポートなしで単一サイトの生涯更新を提供します。無制限のサイトと1年間のサポートには、より高額な199ドルのティアがあります。

ユーザーがインストールする必要のあるプラグインは1つだけです。各ブロックタイプはプラグインにバンドルされています。ユーザーは技術的に、それぞれをアクティブ化するためのライセンスキーを購入しています。

Carbisは、この購入フローがどのように機能するかをテストし、フィードバックを提供するための割引コードを提供してくれました。チームは、ブロックを購入して別のルートを取りたいと考えていました。ユーザーのためにオールオアナッシングの取引を作成する代わりに、ユーザーは実際に必要なものを購入するだけで済みます。「したがって、棒グラフが必要な場合は、棒グラフブロックを購入するだけです」とCarbis氏は述べています。「または、すべてのチャートタイプをセットとして取得できます。」

購入フローに問題はありませんでした。私は棒グラフから始めました。これは、他のブロックよりも頻繁に必要となるブロックです。その後、セット全体にアップグレードしました。

プラグインには設定ページがなかったので、最初に私が抱えていた唯一の問題は、ライセンスをアクティブ化する方法を理解することでした。ライセンスフィールドは、実際にはプラグイン管理画面にあります。

WordPressプラグイン管理画面からのHelloChartsプラグインリスト。説明とデータの下にライセンスキーフィールドがあります。 — プラグイン画面のライセンスキーフィールド。

ブロックタイプごとに個別のライセンスを持つことの欠点は、ユーザーが1つのキーを入力して送信し、ページがリロードされるのを待って、プラグインまでスクロールダウンし、別のライセンスで最初からやり直す必要があることです。プロセスが非常に面倒だったので、興味のないチャートタイプのテストをやめたいと思いました。しかし、私は前に進み、ライセンスキーの後にライセンスキーを入力しました。

はい、少し誇張していますが、一度に複数のライセンスキーを入力するか、ページの読み込みを待たない方がはるかに簡単です。これはたまたま、プラグインの残りの部分によって設定された標準に適合しなかったエクスペリエンスの一部でした。