html macroを使って、定期レポートを作る

1. Confluence上で
レポート自動生成によって
KPIを共有する
第17回TokyoAtlassianユーザーグループ
株式会社リクルートコミュニケーションズ
アドテクノロジーサービス開発部 サービス開発グループ
早川 敦士
2016年1月25日

2. 自己紹介
早川 敦士
お仕事
趣味・特技
経歴
·
·
データ分析、データに関連するシステムの開発-
·
ランニング、自転車、花火の打ち揚げ-
·
2013年〜2015年: 電気通信大学大学院
2015年〜: 株式会社リクルートコミュニケーションズ
-
-
2/33

3. 活動例
Japan.Rの主催 (R言語コミュニティでは日本最大)
第1回データアントレプレナーカンファレンス
データサイエンティスト養成読本を共著にて執筆
·
·
パネルディスカッションにてモデレーターを担当-
·
3/33

4. 初めに
社内で実験的に取り組んでいる内容を紹介します。
Confluenceを活用した開発の一助になれば幸いです。
·
·
4/33

5. 共有すべきKPI達
様々な施策が同時に走り、複数のKPIを見なければならない。
Impression数
コンバージョン数
CTR
CPC
など
·
·
·
·
·
5/33

6. KPIを共有しやすい定期レポートが欲しい
6/33

7. BIツール達
新しいツールを導入すれば、それの認知が必要になる。
できれば、既存のツール内で完結させたい。
tableau
DATADOG
DOMO
など
·
·
·
·
7/33

8. 皆が見ている
8/33

9. Confluenceで共有するメリット・デメリット
メリット
デメリット
日常的にアクセスをする場所である
アクセス制限の管理が容易
メール通知が出来る
·
·
·
SQLを逐次発行するようなシーンには向いていない
事前準備されているChart Macroでは物足りない.(nvd3.js使いたい)
機能が無ければ自分で作る必要がある
·
·
HTML Macroで対応-
·
ポジティブに考えれば、何でも出来る-
9/33

10. HTML Macro(1/2)
Confluenceのページ内でhtmlを記述することが出来る
<script></script>を使えば、JSだって動く
CSSも書ける
·
·
·
10/33

11. HTML Macro(2/2)
参考
https://confluence.atlassian.com/doc/html-macro-38273085.html
<ac:structured-macro ac:name="html"><ac:plain-text-body><![CDATA[
ここにHTMLを書く
]]></ac:plain-text-body></ac:structured-macro>
11/33

12. 定型レポートはテンプレートエンジンを使う
Python製
Flaskなどで利用されている
·
·
12/33

13. テンプレートの記述
http://jinja.pocoo.org/ より転載·
13/33

14. テンプレートの呼び出し
使い方·
テンプレートファイルのあるディレクトリを指定
ファイル名を指定
レンダリングに必要な引数を与える
-
-
-
14/33

15. 綺麗なグラフはnvd3.jsで
d3.jsを利用しやすくしたライブラリ· 15/33

16. python-nvd3
サンプル
chart = nvd3.lineWithFocusChart(name="graph name"",
x_is_date=True,
x_axis_format="%Y/%m/%d %H:%M",
height=600, width=700)
extra_serie = {"tooltip": {"y_start": "There are ", "y_end": " calls"}}
chart.add_serie(y=y,
x=x,
name=legend,
extra=extra_serie)
16/33

17. エンジニア御用達twitter bootstrap
17/33

18.
jQueryがConflict!!
18/33

19. jQueryのバージョン問題(1/2)
jQueryのバージョンを上げる必要がある
参考
Any way to upgrade jQuery version in Confluence?
https://answers.atlassian.com/questions/70598/any-way-to-upgrade-
jquery-version-in-confluence
ConflueceのjQueryはバージョン1.7.2
twitter bootstrap3はバージョン1.9.0以降
·
·
19/33

20. jQueryのバージョン問題(2/2)
<script>
jQueryOriginal = (typeof jQuery == 'undefined') ? null : jQuery;
if (typeof jQuery0 == 'undefined')
document.write('
<script src="https://・・・/2.1.4/jquery.min.js">
</script><script type="text/javascript">jQuery.noConflict();
</script>');
else
jQuery = jQuery0;
</script>
やりたい処理
<script>
jQuery0 = jQuery;
jQuery = jQueryOriginal;
</script>
20/33

21. DataTables Table plug-in for jQuery
データを見やすく、検索しやすく
機能·
データの検索
並び替え
ページング
-
-
- 21/33

22. DataTablesの使用例
これだけで、指定したtableが検索可能に！！！
<script type="text/javascript">
jQuery('#data').DataTable();
</script>
22/33

23. PythonからConfluence上にページを作る
https://pypi.python.org/pypi/confluence を使うか。→動かない。·
Confluence用のラッパーを開発
社内でラッパーの共有
·
·
23/33

24. Confluenceが提供するAPIの形式
https://developer.atlassian.com/confdev/confluence-rest-api
/confluence-xml-rpc-and-soap-apis
とあるので、RESTを使えば良さそう。
XML-RPC
JSON-RPC
REST
·
·
·
The XML-RPC and SOAP APIs are deprecated since Confluence 5.5.
Confluence has a new REST API that is progressively replacing our
existing APIs. We recommend plugin developers use the new REST
APIs where possible.
24/33

25. ConfluenceのREST API
https://developer.atlassian.com/confdev/confluence-rest-api
/confluence-rest-api-examples
25/33

26. サンプル - ConfluenceのREST API
hogeユーザのスペースに新規ページを作る
curl -u username:password
-X POST
-H 'Content-Type: application/json'
-d '
{"type":"page","title":"new page",
"ancestors":[{"id":12345}],
"space":{"key":"~hoge", "type":"global"},
"body":{"storage":{"value":"<p>This is a new page</p>",
"representation":"storage"}}}
' https://hoge.jp/rest/api/content/
26/33

27. 実行環境
cronを辞めて、rundeckに変えたい
AWS EC2
cronによるバッチ処理
·
t2.micro-
·
27/33

28. 仕上げとして
施策毎に前週比の表を作成
内部リンクによって、該当グラフへジャンプ
グラフ・数表・データ説明・取得時のSQLをタブ切り替え
Confluence上に専用のスペース、ユーザを作成
·
·
·
·
28/33

29. スクリーンショット(1/3)
29/33

30. スクリーンショット(2/3)
30/33

31. スクリーンショット(3/3)
31/33

32. 最後に
KPIを共有する時に候補の一つとして、どうでしょうか？
既存のBIツールに頼ることなく、定期レポートを開発
日頃よりアクセスのあるので、新ツールの認知が必要無い
もっと◯◯な便利機能がある！などを教えて頂けると幸いです。
·
·
·
32/33

33.
Enjoy Confluence!!
33/33