Cognos Analytics カスタムビジュアライゼーションで図式レポートを作成

Cognos Analytics カスタムビジュアライゼーションの機能として図を使用した視覚化（図式）があります。
カスタムビジュアライゼーションで図式として使用する図の形式はSVG形式となります。
よって、使用したい図がSVG形式以外（ExcelやPDF形式）の場合はSVG形式に変換する必要があります。

今回、Excelで作成されたレイアウト図をSVG形式に変換し、図式を使用したレポートを作成してみたので、その際の手順を記載したいと思います。

当手順で使用するCognosのバージョンは11.1.6です。

#1.図をSVGに変換
**1-1.図を画像ファイル形式で保存**
Excelで作成された以下のようなレイアウト図があります。
![1-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977329/b59d8fa5-8668-02aa-e2c7-bc21e1a8ef85.png)
このレイアウト図をドローソフト（当手順ではInkscapeを使用）で開くため、画像ファイル形式で保存します。
当手順ではPNG形式で保存しています。
![1-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977329/ea79106c-6a21-cb29-6a53-535625cf3cd6.png)

**1-2.画像ファイルをSVG形式に変換**
保存した画像ファイルをInkscapeで開き、画像をインポートします。

Inkscapeを起動し、「ファイル」の「開く」をクリックします
![1-2-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977329/15b93d17-0a96-a3a6-8e0f-00c5748ab379.png)
先ほど保存した画像ファイルを開き、インポートします。
![1-2-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977329/b372d211-15ac-a6d2-8c4c-45f012fa907e.png)
![1-2-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977329/620caa0f-fc07-335d-bf9e-d0e341237311.png)
インポートが完了したら、SVG形式でファイルを保存します。
「ファイル」の「名前を付けて保存」をクリックします。
![1-2-4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977329/18024774-c0bb-9dda-daac-97ad1862753d.png)
ファイルをSVG形式で任意のフォルダに保存します。
![1-2-5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977329/e7102a64-bb91-1f8f-d034-06cc39a74b2b.png)
レイアウト図をSVG形式に変換することができました。
![1-2-6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977329/66fd6668-6e6b-a830-09e6-22daad046f1e.png)
以上がSVG形式への変換手順となります。

#2.図式を使用したレポートの作成
SVG形式に変換したレイアウト図をCognosで図式として配布し、レポートを作成します。
今回は以下のような会議室ごとの定員稼働率（定員数に対する利用人数の割合）を表すレポートを作成します。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977329/8119de04-895e-1133-6e7a-c78aec6c7b44.png)

**2-1.注釈の付与**
SVGファイル内にて、値をマッピングする領域（SVG要素の塗りつぶし）に注釈（data-cv-key）を付与します。
注釈を付与することで、値によって領域の色や透明度が変化し、視覚的に表現できるようになります。
SVGファイルを直接編集しても注釈を付与することができますが、当手順ではInkscapeを使用して注釈を付与します。

InkscapeでSVGファイルを開きます。
![2-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977329/d9ca8881-1d89-26c0-251c-2ca9967bc548.png)
「編集」から「XMLエディター」をクリックします。
![2-1-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977329/1da6661f-560f-1bbd-e9a0-964139803251.png)
注釈を付与したい領域を選択ツールを使用してクリックし、XMLエディターの「＋」をクリックします。
下の画像では会議室A01の領域を選択しています。
※注釈を付与したい領域に塗りつぶしの設定がされていない場合は塗りつぶしを設定する必要があります
![2-1-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977329/72241854-827e-c391-328b-825634994157.png)
名前ボックスに「data-cv-key」、値ボックスに領域を識別するための任意の値を入力します。
![2-1-4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977329/c42b735c-34e7-a25c-b3ea-be88883ea38a.png)
上と同様の手順で値をマッピングしたい領域に注釈を付与します。
注釈の付与が完了したらSVGファイルを保存します。

**2-2.図式パッケージの編集**
レイアウト図を図式として使用できるように図式パッケージを編集します。

Cognosの新規レポート画面を開き、「ツールボックス」の「DEVELOPER」から「図式テスト」を挿入します。
![2-2-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977329/b51e323c-c6da-b39f-5ce0-e7394c5ffc55.png)
「ページ・デザイン」を「ページ・プレビュー」に変更します。
![2-2-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977329/77913ec9-9081-7bb6-323e-73db773435ae.png)
「ファイルの選択」をクリックします。
![2-2-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977329/ee2e7b6b-2986-4701-f19f-be5c7ea2bd50.png)
注釈を付与したSVGファイルを選択します。
![2-2-4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977329/043c3131-8bc3-db28-75cf-41cf2a41bb63.png)
レイアウト図のプレビューが表示されます。
![2-2-5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977329/3c49cfae-28ee-098a-0963-436b8cb8e45c.png)
データアイテムを配置して、値がマッピングされるか確認します。
以下のように、会議室と時間帯ごとに定員稼働率を算出したデータで、データ・モジュールを作成しています。
※「会議室」列の値は注釈で設定した値に紐付いています
![2-2-6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977329/d443ad8a-d71f-a01c-c37f-e5df50568b6c.png)
「場所」スロットと「場所の色」スロットに適切なデータアイテムを配置します。
下の画像のように、値によって領域の色が変化し、値がマッピングされていることを確認できます。
![2-2-7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977329/5ca2af2e-65ec-d1cd-26fd-94ef47997618.png)
「編集」アイコンをクリックします。
![2-2-8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977329/8639f6ce-f1be-aa93-56f6-87c83f44d175.png)
パッケージの編集画面が開いたら、「パッケージ」をクリックします。
![2-2-9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977329/c9205269-b603-1c65-3b26-8e740dd2af62.png)
名前ボックスに任意のパッケージ名を入力し、「OK」をクリックします。
![2-2-10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977329/0baad7d4-753f-ab8c-37a5-ad9c3a5e9c79.png)
「ダウンロード」アイコンをクリックし、図式パッケージを任意のフォルダにダウンロードします。
![2-2-11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977329/9a8508b7-c859-b156-491a-7731d326d3e4.png)
![2-2-12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977329/9922750a-3af6-c770-e7fc-7767601e6251.png)

**2-3.図式パッケージの配布**
ダウンロードした図式パッケージを配布します。
図式パッケージを配布することで、作成した図式をカスタム・ビジュアルとして、レポート等で使用できるようになります。

Cognosポータル画面から「管理」の「カスタマイズ」をクリックします。
![2-3-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977329/c80831e9-cf67-fc73-4650-f64660b423ac.png)
「カスタム・ビジュアル」をクリックします。
![2-3-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977329/541b76b0-1f92-dd3b-de87-9eed82584afe.png)
「カスタム・ビジュアルのアップロード」アイコンをクリックします。
![2-3-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977329/b88ad67e-8fc0-42fe-5bde-1d0976fdecd5.png)
ダウンロードした図式パッケージを選択します。
![2-3-4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977329/0b2ec64e-710e-58e0-7daf-6394de72896d.png)
正常にアップロードされると、カスタム・ビジュアルの一覧にアップロードした図式パッケージが表示されます。
![2-3-5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977329/293074c6-d468-e5e6-6a87-9fcc2c5c3c22.png)
![2-3-6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977329/91f82dec-7c97-787f-21bb-315ce94067f9.png)

**2-4.図式を使用したレポートの作成**
図式パッケージを配布したので、カスタム・ビジュアルとして図式を使用することができるようになりました。
図式を使用してレポートを作成していきます。

新規レポート作成画面を開き、「視覚化」を挿入します。
![2-4-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977329/6748afb3-8172-f607-ac0c-64017bd0d871.png)
視覚化ギャラリー画面が開いたら、「カスタム」をクリックします。
![2-4-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977329/12e3f419-109b-cc5f-4e19-fa5ffad7c9e2.png)
使用する図式を選択し、「OK」をクリックします。
![2-4-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977329/3c8118d0-4449-cc0e-8036-e4f5980aa59b.png)
「ページ・デザイン」を「ページ・プレビュー」に変更します。
![2-4-4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977329/3abc5117-c5b2-fc4c-e421-4d6052b92add.png)
データ・アイテムを配置します。
また、時間帯ごとの定員稼働率を図式に表示させるために、時間帯を選択するプロンプトを配置しています。
※プロンプトの作成手順は省略します
![2-4-5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977329/043d088a-1129-8405-3399-1c2eb8d32f87.png)
「実行オプション」アイコンをクリックし、HTML形式でレポートを実行します。
![2-4-6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977329/003b3d79-21d4-baf9-25fa-f0ecab201e9e.png)
プロンプトで選択した時間帯ごとに、各会議室の定員稼働率が色の濃さで表示されます。
また、各会議室にマウスオンすることで定員稼働率がポップアップ表示されます。
![2-4-7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977329/4600b5fa-1b67-b450-75bd-ca0d4d4ec42f.png)
以上が図式を使用したレポートの作成手順となります。

#注意点
SVGファイルのファイル名が日本語の場合、図式としてレポート等で使用した際にエラーが発生するので、ファイル名は英語にする必要があります。