Kibana CanvasとMicrosoft SharePointを連携して、アドベントカレンダーを盛り上げよう

# はじめに
NTTテクノクロスのかわちゃきこと、川崎です。こんにちは。
この記事は[NTTテクノクロスアドベントカレンダー2021](https://qiita.com/advent-calendar/2021/ntt-tx) 17日目の記事です。

# やりたいことと完成図

社内Webサイトで[@suzukimaの日々育つ木](https://qiita.com/suzukima/items/0e4fc6209cd93af503dd)を見て、「いいねや閲覧数の可視化？！超かわいい」「わたしも可愛い可視化がしたい🎄」「クリスマスツリーverとして~~パクれ~~オマージュできないかな」と思ったことがキッカケです。

社内WebサイトにNTTテクノクロスアドベントカレンダー2021のお祭り具合をレポートした、ワクワクできるページを作りたいという思いもあったため、LGTMが増えたら、オーナメントが増えて、豪華になっていくクリスマスツリーを実装しよう！と考えました。


実装は、社員がアクセスしやすいようにMicrosoft SharePointにレポートページを作成し、その中に大好きなKibana Canvasで作成した表やクリスマスツリーを埋め込むことにしました。Kibana Canvasって何？という方は、[私の一番お気に入りのコレ](https://www.ntt-tx.co.jp/column/elastic_blog/20180907/)を見てください。

それでは、これを作っていきます。

![ac01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309010/245be79a-a075-2b4b-d73c-39fb41958f77.png)

「え、Kibanaを使っているの？」と思いました？真ん中のクリスマスツリー・サンタさん・表部分がKibana Canvasです。

# 実装
今回はSharePointとKibana Canvasを連携する部分に絞ってポイントを記載します。

- KibanaのSSL設定
- SharePointのサイト設定

LGTM数を取得してElasticsearchに投入する所はがっつりカットしていますのでご了承ください。

## KibanaのSSL設定
SharePointではセキュリティ保護されていないWeb サイト(`http://`)のコンテンツ埋め込みが出来ないため、Kibanaを`https://`でアクセス出来るように設定します。

具体的な設定方法は公式サイトブログ[^1]や色々な記事で紹介されているので端折りますが、サーバ証明書を作って配置し、kibana.ymlに追記します。

```
server.ssl.enabled: true
server.ssl.key: /usr/share/kibana/kibana.key
server.ssl.certificate: /usr/share/kibana/kibana.crt
```

## クリスマスツリーの実装
Kibana CanvasでElementから画像をぽちぽちーっと配置していきます。
![ac02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309010/afc4685a-dab7-08e0-9aa2-be7af216fb0f.png)

オーナメントはif文を利用して、出力画像を変更します。LGTM数が特定数以上になったらオーナメントを表示、そうでなければ透過画像を表示します。例えば一番上のオーナメントはLGTM10個以上、一番右下のオーナメントは100個以上に設定します。

```
filters
| esdocs index="ac*" fields="lgtm"
| image dataurl={if {math "size(lgtm)" | gte 10 } then={asset "asset-6b94f289-1e5c-4e4d-98de-c28893826b3f"} else={asset "asset-bd4c87ad-36ba-4dba-86aa-c1c9f3669d57"}}
| render
```

これでElasticsearchにLGTM数が追加されていく度に、ツリーが豪華になっていきます。画像では47LGTMなので4個オーナメントが飾られました。

せっかくなので、LGTM数が10の倍数になったら、サンタさんにゲスト出演してもらいましょう:santa:
![ac06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309010/388ed4c0-a311-3126-42fb-b6a3bd0c18e1.png)

サンタさんはオーナメントの応用で、剰余とif文を組み合わせます。割り切れたらサンタさん出現です。

```
filters
| esdocs index="ac*" fields="lgtm"
| image dataurl={if {math "mod(size(lgtm),10)" | eq 0 } then={asset "asset-80c77ed7-2c0f-4209-bc03-3da3d145a58c"} else={asset "asset-bd4c87ad-36ba-4dba-86aa-c1c9f3669d57"}}
| render
```

また、この後の手順で利用するSharePointと連携するURLは、ピンク囲いの`Enter full screen mode`を押して遷移したURL、末尾が`xxx?__fullScreen=true`を使います。

![ac03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309010/37ba9cf7-dce1-0acd-6755-24bd290da7d7.png)

## SharePointの設定
SharePointは、ページにコンテンツを埋め込む機能：HTMLタグの`iframe`を使うための設定を公式ドキュメント[^2]にならって実施します。

作成するSharePointのページの右上歯車から、`サイトの設定＞HTML フィールドのセキュリティ`へ遷移し、`このドメインからの iframe を許可`にKibanaのURLを設定します。

## 連携
これまでの手順でKibana,SharePointの準備はバッチリです。連携していきます。
SharePointの編集画面から、Kibanaを埋め込みたいセクションに`新しいWebパーツ＞埋め込み`を追加します。埋め込みの`Web サイトのアドレスまたは埋め込みコード`にiframeタグで、Kibana CanvasのURLを設定します。

![ac04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309010/6367ff70-7630-60f5-5f03-b26596980a9a.png)

```
<iframe src="https://192.168.241.17:5601/app/canvas#/workpad/workpad-44842027-00e7-4203-a497-716c432652b6/page/1?__fullScreen=true" width="800" height="500">
</iframe>
```

本キャプチャはKibanaを埋め込んでいることが分かりやすいように、URLから`?__fullScreen=true`を削除しています。

ここでiframeタグのwidth,heightを、Kibava CanvasのWorkpadサイズと合わせます。合わせないと、SharePointで表示する際にサイズが合わない部分に黒い帯が出てしまい見栄えが悪くなってしまいます。
今回は実施しませんでしたが、Kibana CanvasのWorkpadに複数のPageを作成し、`Auto refresh settings`で自動ページ切り替え設定をすれば、PowerPointの自動スライドショーのようにKibana Canvasのページ切り替えもできます。

# おわりに
今回はNTTテクノクロスアドベントカレンダー2021のお祭り具合をレポートした、ワクワクできるページを作りたいという思いから、この実装はスタートしました。ですが、実は社内に公開するまでには至りませんでした。というのも、SharePointでページのソースを見ると、KibanaのURLが丸見えになってしまうのです。今回SharePointと連携するためにKibanaのユーザ認証機能をオフにしているため、Kibanaにアクセスすると、誰でも好き勝手に操作が出来てしまうという事態になってしまいました。
今回の課題を踏まえて、次回はKibanaの前段にReverseProxyを置いたり、ネットワークを分離したり改善をして、お披露目したいと思います。
**大々的にお披露目が出来なかったこともあり、かわちゃきは手応え不足です:cry:感想やコメントなどSNSやコメント等でいただけたら、嬉しいです！**

はー、やっぱりKibana Canvasはかわいいですね:heart:
明日は@Arithmetic02の記事です。これからの[NTTテクノクロスアドベントカレンダー2021](https://qiita.com/advent-calendar/2021/ntt-tx)も引き続きよろしくお願いします！

[^1]: [SSL、TLS、HTTPSを設定してElasticsearch/Kibana/Beats/Logstashを安全に保つ](https://www.elastic.co/jp/blog/configuring-ssl-tls-and-https-to-secure-elasticsearch-kibana-beats-and-logstash)
[^2]: [SharePoint ページにコンテンツを埋め込む機能を許可または制限する](https://support.microsoft.com/ja-jp/office/sharepoint-e7baf83f-09d0-4bd1-9058-4aa483ee137b)