カスタムチャート
はじめに
[管理者設定] またはAnalyzerで、SVGファイルのカスタムチャートをDomoインスタンスに追加できます。チャートを追加しておくと、追加したチャートをユーザーがAnalyzerのチャートピッカーの [カスタムチャート] で選択できます。これを使うと、Domoでデフォルトでは用意されていないが、お客様のビジネスに関連するような可視化データを作成できます。チャートの複雑さに応じて、SVGをそのまま使えることもあれば、かなり変更が必要になることもあります。多くの場合、大規模な変更には実践的なXMLの知識が必要になります。
カスタム地域ツールを使用して、下位地域まで含んだ新しいカスタム地域の列を持つDataSetをアップロードすることもできます。これは独自のSVGファイルを構築するほど堅牢ではありませんが、XMLの知識は必要ありません。詳細は、「地域区分のあるマップを作成する」を参照してください。
簡単な例を挙げましょう。香港の人形工場のエグゼクティブであるユーザーであるJJが、香港全区の新しい人形シリーズの売上を示すカードを作成しようと考えているとします。事前インストールでDomoに用意されているマップ一式では、このようなカードを作成できません。ところが、Domoのカスタムチャート機能を使うと、オンラインで香港のSVGマップをダウンロードし、[管理者設定] またはAnalyzerを使ってマップをDomoに追加するだけで、JJは必要なカードを作成できます。この結果、カード作成権限を持つユーザー全員が、JJと同じようにこのマップを使えるようになります。売上データの入ったDataSetをアップロードしてからAnalyzerを開き、マップタイプ [香港] を選択し、DataSetの列を差し込むことで、JJは他のマップのカードを作成するときと同じ要領でカードを作成します。この手順で以下のマップができあがります。
もう少し複雑な例を挙げましょう。ユーザーRodrigoは米国内で多数のタイムシェア物件を管理しているとします。これらの物件は、5つの別々の地域（西部、南西部、中西部、南東部、北東部）に分散されています。Rodrigoは、各地域の収益を一目で把握できるようにしたいと考えています。前の例と同じように、Domoには、米国内の地域のマップは事前インストールされていません（事前インストールされている場合も、Rodrigoの会社の地域グループとは若干異なる方法で州がグループ化されている可能性があります）。このケースでは、地域のグループ化をカスタマイズする必要があるため、Rodrigoは、米国のSVGマップにグループ化を組み込むようにカスタマイズすることが必要です。Rodrigoには幸いXMLの基礎知識があるため、マップを適宜分割するために必要なグループ化タグを比較的簡単に追加できます。
比較的簡単な例を2つ挙げて、Domoユーザーがカスタムチャートを実装する方法を紹介します。より複雑な例には、地理的なマップ以外のマップなどがあります。たとえば大学のキャンパスや
飛行機の座席表などです。
特殊な例では、こちらの車のバンパーをはじめとする組立説明も挙げられます。
カスタムチャートを使えば、想像力を働かせ、費やせる時間や専門知識を駆使することにより、何でも実装できます。以上の3例と同等のチャートは非常に複雑で、作成するには高度なXMLの知識が必要です。現時点ではサポートされていないXMLタグがあることにも注意してください。該当するタグのリストは、この記事の後半に掲載します。
トレーニングビデオ - カスタムマップとチャート
注記：この製品トレーニングビデオは、Domoのお客様とクライアント様のみを対象としています。
大まかな手順
カスタムチャートをDomo に追加し、カードを作成する一般的プロセスは次のとおりです。
SVGチャートを取得する
ほとんどのケースでは、a）インターネットからSVGチャートをダウンロードするか、b）自作するかのどちらかの方法で、Domoで使うSVGチャートを取得できます。
Domoで未対応の国のマップをインストールするには、http://www.amcharts.com/svg-maps/ や https://simplemaps.com/resources/svg-maps などからダウンロードできます。こうしたウェブサイトはたくさんあります。これらのサイトは、仏領ギアナやアルバなど、海外の領地も掲載しています。このようなマップをダウンロードしたら、そのマップをそのままDomoにアップロードできます。XMLを編集する必要はありません（マップ内を分割しない場合）。
SVGチャートを自作する場合は、Adobe IllustratorやInkscapeなどのベクター描画ツールを使うことができます。こうしたツールは多数あります。こうしたアプリケーションまたはその他のアプリケーションの詳細については、それぞれのドキュメントを参照してください。
必要なチャートに合わせてXMLを編集する
SVGが複雑な地域マップでカスタマイズを必要とする場合、XMLを編集して必要な変更を加える必要があります。目的とするカスタマイズの内容とチャートの複雑さに応じ、この編集は最小限で済むこともあれば、膨大となることもあります。DomoにSVGチャートをアップロードしようとしてエラーが発生することもありますが、通常、その原因はXML内でサポート対象外のタグを使っていることにあります。そのようなケースでは、問題となるタグを削除するか、サポート対象のタグで代替する必要があります。
このセクションでは、DomoのSVG変換プログラムがサポートするタグと現時点ではサポートしていないタグを紹介します。
サポート対象のXMLタグ
サポート対象の図形タグ
以下の図形タグがサポート対象です。
-
パス（円弧の回転を除くすべてのコマンドがサポート対象）
-
長方形
-
円
-
楕円
-
折れ線
-
ポリライン
-
多角形
このうち折れ線とポリラインを除くすべてのデータを組み込むことができます。
サポート対象のスタイルタグ
以下のスタイルタグは、スタイル属性内またはSVGにエンベッドしたCSSにおけるタグとともに、サポートされています（これらのタグはデータ組み込み不可）。
-
塗りつぶし
-
ストローク
-
ストローク幅
-
塗りつぶしの不透明度
-
ストロークの不透明度
-
不透明度
サポート対象の変換
制限付きでDomoがサポートする変換：
-
matrix()
-
translate()
-
scale()
-
rotate()
テキストタグ
テキストタグは制限付きでサポートしています。フォントは設定できませんが、指定された文字色と文字サイズについては、Domoが極力再現します。
rotate()はテキストタグでサポートしています。matrix()変換を使うと、テキストタグを回転できます。
サポート対象外のXMLタグ
DomoのSVG変換プログラムで現在サポート対象外：
-
グラデーションペイント
-
パターン
-
フィルター
-
その他の複雑な塗りつぶし
-
エンベッドされた画像
SVGファイルの構造について
次のXMLコードは、コロンビアの国内マップに相当するSVGファイルから取得したものです。このコードはファイルの基本フォーマットを示しています。余分な要素を削除してシンプルに記載してあり、ほとんどのパスデータ要素は縮約表示（楕円表示）になっています。このファイルで使われているタグはすべてDomoのサポート対象です。
パスタグには常にdサブタグを組み込みます。これで特定地域のパスデータ要素を示しつつ、他のサブタグで地域の一意のIDまたは名前を1つまたは複数指定します。上の例では、各地域パスにIDサブタグと名前サブタグを組み込みます。これらのタグはDataSetの [地域] 列にも対応しているので、重要です。Analyzerでマップを作成する場合は、マップのプレビューの上にある [州名] フィールドに地域列をドラッグします。（列の適用の詳細については「DataSetの列をチャートに適用する」を参照）。この例では、以上で参照した列（地域のIDまたは名前の付いた列）を少なくとも一つDataSetに組み込んで、SVGマップと一致させます。
DataSetで使う可能性のある名前をほかにも検討する必要がある場合、適宜、他のサブタグも追加します。たとえば、ほとんどの国のマップのDataSetでは、ISO 3166地域コードが組み込んであります。そのため上の「コロンビア」の例では、XMLが3つ目のサブタグと各地域のコードを含む場合があります。このタグはシンプルに「コード」と呼びます。[name="Amazonas"] タグの下に「code="01"」（アマゾナス州のISO 3166コードが「01」であるため）などを追加し、他地域についても同じ要領で記述を続けます。
次の例は、先ほどのコード例に対応する列を備えたシンプルなDataSetです（先ほど説明されたとおり [ISO 3166] 列を追加）。
マップ内の地域を結合して大きい地域を設定する場合は、SVGファイルに組み込んだ<path>タグをすべて、適切なグループにグループ化し、それぞれのグループを<g>タグと</g>タグで囲みます。ファイル内の<g>タグにはID属性または名前属性、あるいはその両方を組み込む必要があります。
次のコード例は、グループ化を組み込んだSVGファイルの一部を示しています。このコードは米国を多種多数のグループに分割したマップに使います。スクリーンショットは、これらのグループのうち「西部」と「南西部」の2つを示しています。
すべてのコードサンプルにアクセスして米国地域マップを作成するには、こちら（usa_regions.svg）を参照してください。各州に対応する<path>タグをカットアンドペーストして適切なグループに編成し直すだけで、地域を自由にカスタマイズできます。たとえばこのファイルでは、オクラホマ州を「南西部」グループに配置していますが、この州を「中西部」に移動するには、「中西部」のIDを持つグループにコピーアンドペーストするだけです。必要に応じてグループの追加や削除もできます。
Domoにカスタムチャートを追加する
Domoインスタンスに追加するチャートを取得し、対応するXMLを適宜編集したら、次はそれをDomoにアップロードしていきます。この操作は、以下のいずれかの場所で実行できます。
-
[管理者設定]、[カンパニー設定]、[カスタムチャート] の順に選択する。[カンパニー設定] にアクセスするには、[管理者] のセキュリティプロフィールが必要です。
-
Analyzerのチャートピッカーで [カスタムチャート] を選択し、ペイン下部の [+] ボタンをクリックする。このボタンは [管理者] セキュリティプロフィールを持つ場合のみ表示されます。
セキュリティプロフィールの詳細については「セキュリティ権限リファレンス」を参照してください。
[管理者設定] でカスタムチャートをDomoに追加するには
-
[
]、[管理者設定]、[カンパニー設定]、[カスタムチャート] の順に進みます。
-
[チャートを追加する] をクリックします。
-
以下のいずれかを行います。
-
SVGファイルを [ここにファイルをドロップ] フィールドにドラッグアンドドロップする
-
[ファイルを選択] をクリックし、目的のSVGファイルに進んで選択する
-
-
（オプション）ファイルの名前を変更し、必要であれば説明を入力します。
-
[保存] をクリックします。
AnalyzerでカスタムチャートをDomoに追加するには
-
カード用にAnalyzerを開きます。
-
チャートピッカーで [カスタムチャート] を選択します。
-
[カスタムチャート] ペイン下部の [+] ボタンをクリックします。
-
次のいずれかを行います。
-
SVGファイルを [ここにファイルをドロップ] フィールドにドラッグアンドドロップする
-
[ファイルを選択] をクリックし、目的のSVGファイルに進んで選択する
-
-
（オプション）ファイルの名前を変更し、必要であれば説明を入力します。
-
[保存] をクリックします。
これでこのチャートをAnalyzerのチャートピッカーの [カスタムカード]ドロップダウンメニューで選択できるようになります。このチャートをDomoから削除するには、[管理者設定]、[カンパニー設定]、[カスタムチャート] の順に移動し、このチャートを選択して、右上隅にレンチマークで表示されているメニューの [削除] を選択します。同じように、チャートに使うSVGファイルをする場合は、同じメニューの [ファイルを変更] を選択します。