kintone 単体の帳票機能をカスタマイズして、運用に耐えられるレイアウトを実現してみました。

1. 2017.2.10
安藤光昭
@m_ando_japan
標準の印刷機能で
少し頑張ってみました

2. 自己紹介
š ビットリバー(株) 代表取締役
šIoTLT広島 主催
škintone Café 広島支部 主催
šCoderDojo広島 メンター

3. kintone Café 広島 Vol.1
参加：35名（通算１００回の記念日）
＠２０１６．８．３１

4. 本題

5. kintone って帳票がね・・・
[demo]
例えば請求書作成アプリの場合

6. kintone って帳票がね・・・
数値の処理や
業務フローの整理は
バッチリ！

7. kintone って帳票がね・・・
標準の帳票は
ガッカリ

8. 帳票ソリューションは群雄割拠

9. 複数の帳票を作成するケースには有効
メジャーな帳票ソリューションは、アカウント毎の課金
＝
たくさん作れば作るほどお得です

10. 逆に・・・
1つだけ帳票を作りたい時は割高になる

11. ということで、kintone 単体でやってみる

12. ということで、kintone 単体でやってみる
https://cybozudev.zendesk.com/hc/ja/articles/212084643-
%E5%8D%B0%E5%88%B7%E7%94%BB%E9%9D%A2%E3%82%92%E3%83%A1%E3%82%A4%E3%82%AF%E3%82%A2%E3%83%83%E3%83%97-kintone-
%E5%8D%98%E4%BD%93%E3%81%A7%E7%B6%BA%E9%BA%97%E3%81%AB%E5%8D%B0%E5%88%B7-

13. Developer network
の事例で作成
ということで、kintone 単体でやってみる

14. ということで、kintone 単体でやってみる
標準のカスタマイズでなんとか綺麗になる
けど、めんどくさい

15. ということで、kintone 単体でやってみる
＜めんどくさいところ＞
・レイアウトはあくまでもフォームが基準なので
自由度に限界あり
・フォーム部品の配置が印刷レイアウトに引きずられる
ため操作性が落ちる
・固定の画像などは設定できない（jsから読み込むことは可能）

16. ということで、禁断のカスタマイズ
HTMLを流し込んで
データを作る

17. ということで、禁断のカスタマイズ
①レイアウト用にスペースを定義
②それ以外の部品はjsで非表示に設定
③帳票用のHTMLをスペースの子要素
に流し込む

18. ということで、禁断のカスタマイズ
帳票レイアウトとフォーム部品の配置が分離
できるため、操作を優先できる

19. ということで、禁断のカスタマイズ
＜ポイント＞
・フォームにレイアウト用のスペースを定義
・スペースのエレメントにHTMLを流し込み
イベントで取得したレコード情報をjsで埋め込む
・標準のDOM部分への操作は無いため
バージョンアップの影響は少ない

20. まとめ
š複数の帳票を運用する場合は連携ソリューション
š正攻法のカスタマイズではちょっと厳しい
š禁断のカスタマイズにより戦うことは可能