メインコンテンツへスキップ

はじめに

管理者設定またはAnalyzerで以下のフォーマットを使用して、カスタムチャートをDomoインスタンスに追加できます。
  • SVG(スケーラブルベクターグラフィックス) は、2次元ベースのベクターグラフィックスを記述するためのXMLベースのマークアップ言語です。
  • KML(キーホールマークアップ言語) は、Google Earthなどのアースブラウザーで地理データを表示するためのマークアップ言語です。
  • GeoJSON は、単純な地理的特徴と非空間属性を表現するためのオープン規格のファイルフォーマットです。
  • TopoJSON は、GeoJSONの拡張であり、地理空間トポロジーをエンコードします。通常はファイルサイズが小さくなります。
  • シェープ は、ESRIの標準ファイルフォーマットです。地理空間ベクトルデータが含まれています(Google EarthをインポートしてKMLとしてエクスポートします)。
チャートを追加しておくと、追加したチャートをユーザーが Analyzerのチャートピッカー[カスタムチャート] メニューで選択できます。これを使うと、Domoでデフォルトでは用意されていないが、お客様のビジネスに関連するような可視化データを作成できます。チャートの複雑さに応じて、SVGをそのまま使えることもあれば、かなり変更が必要になることもあります。多くの場合、大規模な変更には実践的なXMLの知識が必要になります。 また、カスタム地域ツールを使用して、下位地域まで含んだ新しいカスタム地域の列を持つDataSetをアップロードすることもできます。この場合、独自のSVGファイルを構築するほど複雑ではなく、XMLの知識も必要ありません。詳細は、「 地域区分のあるマップを作成する 」を参照してください。
Custom_Charts_Full.png

必要な許可

カスタムチャートをDomoインスタンスに追加できるのは、デフォルトの「管理者」セキュリティ権限が設定されているユーザーと、[全てのカード、ページ、Appを管理(App Studio)]が有効なカスタマイズされた権限が設定されているユーザーだけです。 デフォルトのセキュリティ権限の詳細については、「 カスタマイズされた権限を管理する 」を参照してください。 簡単な例を挙げましょう。香港の人形工場のエグゼクティブであるユーザーであるJJが、香港全区の新しい人形シリーズの売り上げを示すカードを作成しようと考えているとします。事前インストールでDomoに用意されているマップ一式では、このようなカードを作成できません。ところが、Domoのカスタムチャート機能を使うと、オンラインで香港のSVGマップをダウンロードし、管理者設定またはAnalyzerを使ってマップをDomoに追加するだけで、JJ氏は必要なカードを作成できます。この結果、カード作成権限を持つユーザー全員が、JJ氏と同じようにこのマップを使えるようになります。JJ氏は、ほかのマップのカードを作成するときと同様に、売上データの入ったDataSetをアップロードしてAnalyzerを開き、マップタイプ[香港]を選択してDataSetの列を差し込むことでカードを作成します。この手順で以下のマップができあがります。
custommaps_hongkong.png
もう少し複雑な例を挙げましょう。ユーザーRodrigoは米国内で多数のタイムシェア物件を管理しているとします。これらの物件は、5つの別々の地域(西部、南西部、中西部、南東部、北東部)に分散されています。Rodrigo氏は、各地域の収益をひと目で把握できるようにしたいと考えています。前の例と同じように、Domoには、米国内の地域のマップは事前インストールされていません(事前インストールされている場合も、Rodrigo氏の会社の地域グループとは若干異なる方法で州がグループ化されている可能性があります)。このケースでは、地域のグループ化をカスタマイズする必要があるため、Rodrigo氏は、米国のSVGマップにグループ化を組み込むようにカスタマイズすることが必要です。Rodrigoには幸いXMLの基礎知識があるため、マップを適宜分割するために必要なグループ化タグを比較的簡単に追加できます。
custommaps_usregions.png
比較的簡単な例を2つ挙げて、Domoユーザーがカスタムチャートを実装する方法を紹介します。より複雑な例としては、地理的なマップ以外のマップなどがあります。例えば、大学のキャンパスや
custommaps_campus.png
飛行機の座席表などです。
custommaps_plane.png
特殊な例としては、車のバンパーなどの組立説明図などがあります。
custommaps_bumper.png
カスタムチャートを使用すれば、様々なアイデアを形にできます。以上の3例と同等のチャートは非常に複雑で、作成するには高度なXMLの知識が必要です。現時点ではサポートされていないXMLタグがあることにも注意してください。該当するタグのリストは、この記事の後半に掲載します。
重要: インポートして変換できるSVG、KML、GeoJSON、TopoJSON、シェープファイルの最大サイズは25MBです 。
動画 - カスタムのマップとチャート

手順の概要

カスタムチャートをDomoに追加し、カードを作成する一般的なプロセスは次の通りです。
  1. 追加するチャートを取得します。
  2. 必要に応じてXMLを編集します。
  3. 管理者設定またはAnalyzerでDomoにチャートを追加します。
  4. Analyzerでチャートカードを作成します。

SVGチャートを取得する

ほとんどのケースでは、a)インターネットからSVGチャートをダウンロードするか、b)自作するかのどちらかの方法で、Domoで使うSVGチャートを取得できます。 Domoで未対応の国のマップをインストールするには、 http://www.amcharts.com/svg-maps/https://simplemaps.com/resources/svg-maps などからダウンロードできます。こうしたウェブサイトは多数あります。これらのサイトは、仏領ギアナやアルバなど、海外の領地も掲載しています。このようなマップをダウンロードしたら、そのマップをそのままDomoにアップロードできます。XMLを編集する必要はありません(マップ内を分割しない場合)。 SVGチャートを自作する場合は、 Adobe IllustratorInkscape などのベクター描画ツールを使用できます。こうしたツールは多数あります。こうしたアプリケーションまたはその他のアプリケーションについては、それぞれのドキュメントを参照してください。

チャートに合わせてXMLを編集する

SVGが複雑な地域マップでカスタマイズを必要とする場合、XMLを編集して必要な変更を加える必要があります。目的とするカスタマイズの内容とチャートの複雑さに応じ、この編集は最小限で済むこともあれば、膨大となることもあります。DomoにSVGチャートをアップロードしようとしてエラーが発生することもありますが、通常、その原因はXML内でサポート対象外のタグを使っていることにあります。そのようなケースでは、問題となるタグを削除するか、サポート対象のタグで代替する必要があります。 このセクションでは、DomoのSVG変換プログラムがサポートするタグと現時点ではサポートしていないタグを紹介します。

サポート対象のXMLタグ

サポート対象の図形タグ

以下の図形タグがサポート対象です。
  • path (arcの回転を除くすべてのpathコマンドがサポート対象)
  • 
    circle
    
    ellipse
    
    line
    
    polyline
    
    polygon
    
このうち linepolyline を除くすべてのデータを組み込むことができます。

サポート対象のスタイルタグ

以下のスタイルタグは、 style 属性内またはSVGにエンベッドしたCSSにおけるタグとともに、サポートされています(これらのタグはデータ組み込み不可)。
  • 
    stroke
    
    stroke-width
    
    fill-opacity
    
    stroke-opacity
    
    opacity
    

サポート対象の変換

制限付きでDomoがサポートする変換:
  • 
    translate()
    
    scale()
    
    rotate()
    

テキストタグ

テキスト タグは制限付きでサポートしています。フォントは設定できませんが、指定された文字色と文字サイズについては、Domoが極力再現します。 rotate()テキスト タグでサポートしています。 matrix() 変換を使うと、 テキスト タグを回転できます。

サポート対象外のXMLタグ

DomoのSVG変換プログラムで現在サポート対象外 :
  • グラデーションペイント
  • パターン
  • フィルター
  • その他の複雑な塗りつぶし
  • エンベッドされた画像

SVGファイルの構造について

次のXMLコードは、コロンビアの国内マップに相当するSVGファイルから取得したものです。このコードはファイルの基本フォーマットを示しています。余分な要素を削除してシンプルに記載してあり、ほとんどのパスデータ要素は縮約表示(楕円表示)になっています。このファイルで使われているタグはすべてDomoのサポート対象です。
custommaps_basic_code.png
path タグには常に d サブタグを組み込みます。これで特定地域のパスデータ要素を示しつつ、ほかのサブタグで地域の一意のIDまたは名前を1つまたは複数指定します。上の例では、各地域パスに ID サブタグと name サブタグを組み込みます。これらのタグはDataSetの地域列にも対応しているので、重要です。Analyzerでマップを作成する場合は、マップのプレビューの上にある[州名]フィールドに地域列をドラッグします(列の適用の詳細については「 DataSet列をチャートに適用する 」を参照)。この例では、以上で参照した列(地域のIDまたは名前の付いた列)を少なくとも1つDataSetに組み込んで、SVGマップと一致させます。
注記: data-name の属性が見つかった場合、それが目標のデータの名前となります。この属性が付与されていない場合、次に優先度が高いのは name です。どちらも指定されていない場合は、 ID が使われます。
DataSetで使う可能性のある名前をほかにも検討する必要がある場合、適宜、ほかのサブタグも追加します。例えば、ほとんどの国のマップのDataSetでは、ISO 3166地域コードが組み込んであります。そのため上の「コロンビア」の例では、XMLが3つ目のサブタグと各地域のコードを含む場合があります。このタグはシンプルに「 コード 」と呼びます。[ name="Amazonas" ]タグの下に「 code="01" 」(アマゾナス州のISO 3166コードが「01」であるため)などを追加し、他地域についても同じ要領で記述を続けます。 次の例は、先ほどのコード例に対応する列を備えたシンプルなDataSetです(前の段落で説明した通り「ISO 3166」列を追加)。
custommaps_basic_dataset.png
マップ内の地域を結合して大きい地域を設定する場合は、SVGファイルに組み込んだ <path> タグをすべて、適切なグループにグループ化し、それぞれのグループを <g> タグと </g> タグで囲みます。ファイル内の <g> タグには ID 属性または name 属性、あるいはその両方を組み込む必要があります。 次のコード例は、グループ化を組み込んだSVGファイルの一部を示しています。このコードは米国を多種多数のグループに分割したマップに使います。スクリーンショットは、これらのグループのうち「西部」と「南西部」の2つを示しています。
custommaps_code_with_groups.png
すべてのコードサンプルにアクセスして米国地域マップを作成するには、こちら( usa_regions.svg )を参照してください。各州に対応する <path> タグをカット&ペーストして適切なグループに編成し直すだけで、地域を自由にカスタマイズできます。例えばこのファイルでは、オクラホマ州を「南西部」グループに配置していますが、この州を「中西部」に移動するには、「中西部」の ID を持つグループにコピー&ペーストするだけです。必要に応じてグループの追加や削除もできます。

Domoにカスタムチャートを追加する

Domoインスタンスに追加するチャートを取得し、対応するXMLを適宜編集したら、次はそれをDomoにアップロードします。この操作は、以下のいずれかの場所で実行できます。
  • [管理者設定]>[カンパニー設定]>[カスタムチャート][カンパニー設定] にアクセスするには、デフォルトの「管理者」セキュリティ権限が設定されているか、[全てのカンパニー設定を管理]オプションが有効なカスタマイズされた権限が設定されている必要があります。
  • Analyzerのチャートピッカーで [カスタムチャート] を選択し、ペイン下部の[+]ボタンをクリックする。このボタンが表示されるのは、「管理者」セキュリティ権限が設定されているユーザーと、[全てのカード、ページ、Appを管理(App Studio)]が有効なカスタマイズされた権限が設定されているユーザーの場合だけです。
デフォルトのセキュリティプロフィールの詳細については、「 カスタマイズされた権限を管理する 」を参照してください。 管理者設定でカスタムチャートをDomoに追加するには:
  1. [その他] >[管理者設定]>[カンパニー設定]>[カスタムチャート] に移動します。
  2. [チャートを追加する] をクリックします。
  3. 以下のいずれかを実行します。
    • [ここにファイルをドロップ]フィールドにファイルをドラッグ&ドロップします。
    • [ファイルを選択] をクリックし、目的のファイルを選択します。
      Custom_Chart.png
  4. (オプション)ファイルの名前を変更し、必要であれば説明を入力します。
  5. [保存] をクリックします。
AnalyzerでカスタムチャートをDomoに追加するには:
  1. カード用にAnalyzerを開きます。
  2. チャートピッカーで [カスタムチャート] を選択します。
  3. [カスタムチャート] ペイン下部の[+]ボタンをクリックします。
  4. 次のいずれかを行います。
    • [ここにファイルをドロップ]フィールドにファイルをドラッグ&ドロップします。
    • [ファイルを選択] をクリックし、目的のファイルを選択します。
  5. (オプション)ファイルの名前を変更し、必要であれば説明を入力します。
  6. [保存] をクリックします。
これでこのチャートをAnalyzerのチャートピッカーの [カスタムチャート] ドロップダウンメニューで選択できるようになります。このチャートをDomoから削除するには、 [管理者設定]>[カンパニー設定]>[カスタムチャート] の順に移動し、このチャートを選択して、右上隅にレンチマークで表示されているメニューの [削除] を選択します。同様に、チャートで使用するSVGファイルに切り替える場合は、同じメニューで [ファイルを変更] を選択します。

Analyzerでチャートを作成する

チャートをDomoにアップロードしておくと、国別マップの場合とまったく同じようにAnalyzerでチャートからカードを作成できます。国別マップを作成する手順については「 国別マップ 」を参照してください。この手順は、地理的マップもそうでないマップも含め、Domoにアップロードしたすべてのカスタムチャートに適用されます。 カスタムチャートの[チャートの設定]は、ほとんどの地理的マップで使う設定と同じ内容です。これらのプロパティのリストについては「 マップのプロパティ 」を参照してください。

カスタムチャートにドリルパスを追加する

カスタムチャートにドリスパスを追加すると、特定のチャートから別のチャートにドリルダウンできるようになります。どのチャートでも、 同じ方法でドリルパスを追加 します。ドリルパスを機能させるには、ドリルダウン元のカスタムチャートの名前を、ドリルダウン先の最上位チャートのグループ名に一致させる必要があります 。例えば、アメリカの地域別カスタムマップから別のカスタムチャートの「西部地域」にドリルダウンする場合は、ドリルダウン元のカスタムマップを「西部地域」という名前で新しく作成する必要があります。 日本語