Cognos Analytics のレポートを埋め込むポータルのHTML画面をお手軽に実装する

#概要
Cognos Analyticsでは、ページの機能が使えなくなっていますので、色々なレポートを一つの画面にまとめてポータルの様に表示させるのが苦労しますね。
Cognosの外にポータル画面を作成し、その中にiFrameでCognosのレポートを呼び出し、ポータル画面の実装を行っている環境も多いようです。
とりあえず今回は、ポータル画面と言えるほどりっぱな環境ではありませんが、Cognos Analyticsが単品で動いている環境で、手作りのhtmlファイルを置いてプチポータル画面として、そこにCognosのレポートを埋め込めるかやってみましたので、参考までにフィードバックしますね。
※正直、あんまりWEBの技術に詳しくない私がデモ用に作った、なんちゃって実装なので、かっちりした本番環境でやる時は、あくまでコンセプトとして参考にして頂き、実際の実装はWEBの専門家の方とご相談下さい。

#ポータル画面htmlの実装とレポートのiFrame呼び出し
まずはサンプルとして、呼び出したい棒グラフレポートと円グラフレポートを作成します。
それぞれのレポートのプロパティから、図の様にIDを取得しておいて下さい。
![001.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/684fc590-1891-f187-2176-66ae86dcb5c8.jpeg)

次にポータル画面のhtmlファイルを以下の様に作成し、<Cognos Analytics導入パス>/webcontent の下において下さい。
※今回はファイル名は、portal.html としました。
※storeIDで、%27に囲まれているiから始まる文字が、先ほど確認したレポートのIDです。
※localhostは、Cognosノードのホスト名なので、適宜ホスト名なりIPアドレスなりに変更して下さい。

```html
<html>
<head>
<title>Cognos Portal</title>
</head>
<body>
<p>Hello World</p>
<iframe src="http://localhost:9300/bi/v1/disp?b_action=cognosViewer&ui.action=run&ui.object=storeID(%27iBC5D1EC0BDD44B7F8A4261A2CBDFED8D%27)&run.outputFormat=HTML&cv.header=false" width="500" height="400"></iframe>
<iframe src="http://localhost:9300/bi/v1/disp?b_action=cognosViewer&ui.action=run&ui.object=storeID(%27iF477AA068BC2487C951BED27C857599C%27)&run.outputFormat=HTML&cv.header=false" width="500" height="400"></iframe>
</body>
</html>
```

んで、ブラウザで以下のURLにアクセスすると、Cognosのサービスの外で動くHTML画面で、Cognosのレポートが埋め込まれて表示されます。
http://hostname:9300/portal.html

![002.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/bedcb05f-6117-8eda-7c1e-5dc0531d141a.jpeg)

#Cognosへの認証どうするか
簡単にできた様に見せかけて、これがCognosアクセスで認証が必要な環境の場合、こうなります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/147246/a7a19185-0ac0-7bac-3565-7b4b547460af.png)

全部のiFrameで認証するのはさすがに無いと思いますので、こんな感じはどうでしょう。

HTMLアイテムを以下のように記載して置いた、logonレポートを作成します。
「完全な双方向性で実行」は「いいえ」にしておいて下さい。
![003.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/a483a44c-1b3e-4cea-0b2a-3ac4edb545b5.jpeg)


HTMLアイテムの内容

```html
<script>
open("http://localhost:9300/portal.html","_blank");
open('about:blank','_top').close();
</script>
```

logonレポートのプロパティの「共有」から、logonレポートに直接アクセスするURLを取得します。
![004.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/9f1940b4-c158-ae5b-c84b-ac4321fd730b.jpeg)

ブラウザを立ち上げ、そのURLを入力します。
![005.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/37c3a66b-6e0d-2811-1dcf-46b048730f7c.jpeg)

ログイン画面が表示されるので、ここは一回ログインしてください。
![006.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/9e5366cc-17a6-242a-7c11-dd6c60a434a1.jpeg)

logonレポートは、一瞬でporal.htmlにリダイレクトされ、logonレポート自体は閉じられますが、セッションやクッキーの情報はブラウザで引き継がれますので、portal.htmlの中のCognosレポートは問題なく表示されます。
![007.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/6893d20d-a8fe-42fa-c693-bfa70ebf8135.jpeg)

#Mobileへの対応
Cognos AnalyticsへMobileのNativeアプリではなく、iPhoneやAndroidなどのスマホやタブレットのブラウザでアクセスした場合、ピンチアウトやピンチインなどの、スマホならではの操作ができないですが、portal.htmlを以下の様にmeta name="viewport"うんぬんの行を追加すれば、ピンチ操作可能になります。

```html
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes">
<title>Cognos Portal</title>
</head>
<body>
<p>Hello World</p>
<iframe src="http://localhost:9300/bi/v1/disp?b_action=cognosViewer&ui.action=run&ui.object=storeID(%27iBC5D1EC0BDD44B7F8A4261A2CBDFED8D%27)&run.outputFormat=HTML&cv.header=false" width="500" height="400"></iframe>
<iframe src="http://localhost:9300/bi/v1/disp?b_action=cognosViewer&ui.action=run&ui.object=storeID(%27iF477AA068BC2487C951BED27C857599C%27)&run.outputFormat=HTML&cv.header=false" width="500" height="400"></iframe>
</body>
</html>
```

ちなみに、Mobileの場合、logonレポートの実装も異なります。
Mobileの場合、window.openで自動的に遷移するJavaScriptの実装は動作せず、Mobileでの何らかの操作をトリガーとする必要があるようで、以下の実装になります。

![008.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/f0c9267e-d7e7-aecc-8d69-2b844831ba2a.jpeg)

左のHTMLアイテム

```html
<script>
ExecReport=function(){
open("http://localhost:9300/portal.html","_blank");
open('about:blank','_top').close();
}
</script>
```

右のHTMLアイテム

```html
<button form="button1" onclick="ExecReport()" style="WIDTH: 130px; HEIGHT: 0px vertical-align:top;text-align:center;border-style: none;background-color:#fff">
```

Mobileのブラウザでアクセスすると、認証後、ボタンが配置されたレポート表示になるので、ボタンをクリックするとportal.htmlに遷移します。


以上、簡単ですので使ってみて下さい。