管理画面の高速開発を支えるツール 4 選

管理画面チラ見せナイト #7 の発表資料です

Transcript

1. 管理画面の高速開発を支えるツール４選
   限られた開発リソースで運用コストを最小化する
   管理画面チラ見せ♥ナイト #07 / アカデミスト株式会社 森川公康
   

   View Slide

2. 自己紹介
   ● https://alea12.net
   ● イラク日報全文検索
   ● 株式会社ポップインサイト 取締役
   ● アカデミスト株式会社 CTO
   

   View Slide

3. 自己紹介
   ● https://alea12.net
   ● イラク日報全文検索
   ● 株式会社ポップインサイト 取締役
   ● アカデミスト株式会社 CTO
   

   View Slide

4. 自己紹介
   ● https://alea12.net
   ● イラク日報全文検索
   ● 株式会社ポップインサイト 取締役
   ● アカデミスト株式会社 CTO
   

   View Slide

5. アカデミストとは
   ● 学術・研究資金の獲得に特化した
   クラウドファンディングサービス
   ● https://academist-cf.com
   ● 累計獲得資金: 1 億円弱
   ● のべ支援者数: 7,000 人超
   

   View Slide

6. Q. アカデミストは何名で運営しているでしょう?
   A. 1 - 5 名
   B. 6 - 10 名
   C. 11 - 50 名
   D. 51 名以上
   

   View Slide

7. アカデミストの運営体制
   A. 1 - 5 名
   B. 6 - 10 名
   C. 11 - 50 名
   D. 51 名以上
   

   View Slide

8. アカデミストの運営体制
   A. 1 - 5 名
   B. 6 - 10 名
   C. 11 - 50 名
   D. 51 名以上
   社長業
   

   View Slide

9. アカデミストの運営体制
   A. 1 - 5 名
   B. 6 - 10 名
   C. 11 - 50 名
   D. 51 名以上
   社長業
   エンジニア
   他社兼務
   

   View Slide

10. アカデミストの運営体制
    A. 1 - 5 名
    B. 6 - 10 名
    C. 11 - 50 名
    D. 51 名以上
    社長業
    エンジニア
    他社兼務
    ライター
    兼務
    

    View Slide

11. 社長業
    エンジニア
    他社兼務
    ライター
    兼務
    アカデミストの運営体制
    A. 1 - 5 名
    B. 6 - 10 名
    C. 11 - 50 名
    D. 51 名以上
    …
    

    View Slide

12. 優れた管理画面の高速開発が必要！
    限られた開発リソースで運用コストを最小化する
    

    View Slide

13. 管理画面の高速開発を支えるツール４選
    限られた開発リソースで運用コストを最小化する
    管理画面チラ見せ♥ナイト #07 / アカデミスト株式会社 森川公康
    

    View Slide

14. メニュー
    通知
    視覚化
    データ管理 セキュリティ
    

    View Slide

15. メニュー
    通知
    視覚化
    データ管理 セキュリティ
    DBであれ更新して！
    を撲滅しよう
    

    View Slide

16. Rails 使ってますか？
    ● academist 本体は Rails
    ● 2014 年リリース時は Scratch PHP
    ● 近年Rails へのフルリプレイスを実施
    

    View Slide

17. RailsAdmin gem
    ● rails アプリに管理画面を追加する gem
    ● モデルに対して自動的に
    良い感じの管理画面を生成する
    ● 対象とする table や field はカスタム可
    

    View Slide

18. DEMO
    

    View Slide

19. 勘所
    ● 運用担当に DB 権限を与えたいが、
    以下のような懸念があるケースに有用
    ○ 誤操作が心配
    ○ DB ロールの発行・管理が大変
    ○ SQL 覚えてもらうのが大変
    ● 他言語 / FW でも同様のライブラリ有
    ○ NodeJS: express-admin
    ○ Django: django-admin
    

    View Slide

20. メニュー
    通知
    視覚化
    データ管理 セキュリティ
    DBであれ更新して！
    を撲滅しよう
    おすすめツール：
    RailsAdmin
    

    View Slide

21. メニュー
    通知
    視覚化
    データ管理 セキュリティ
    DBであれ更新して！
    を撲滅しよう
    おすすめツール：
    RailsAdmin
    大切な管理画面は
    しっかり守ろう
    

    View Slide

22. 管理画面 守ってますか？
    ● /admin や admin.xxx へのアクセスで
    認証画面に到達できてしまうことが…
    ● 辞書型 / Bruteforce を考慮すると
    認証画面が露出すること自体がリスク
    

    View Slide

23. AWS WAF
    ● https://aws.amazon.com/waf/
    ● セキュリティルールに基づいた
    WAF をクラウド上に構築可能
    ● IP アドレス / HTTP ヘッダ 等で
    アクセスを制御可能
    

    View Slide

24. at academist
    ● ほとんどのリソースを AWS に配置
    ● 最前段に CloudFront を置いており
    そこに WAF Web ACL を設定
    ● CloudWatch でモニタリング
    

    View Slide

25. メニュー
    通知
    視覚化
    セキュリティ
    大切な管理画面は
    しっかり守ろう
    おすすめツール：
    AWS WAF
    データ管理
    DBであれ更新して！
    を撲滅しよう
    おすすめツール：
    RailsAdmin
    

    View Slide

26. メニュー
    通知
    視覚化
    定例 MTG の
    資料作成工数を 0 に
    セキュリティ
    大切な管理画面は
    しっかり守ろう
    おすすめツール：
    AWS WAF
    データ管理
    DBであれ更新して！
    を撲滅しよう
    おすすめツール：
    RailsAdmin
    

    View Slide

27. HighCharts
    ● 個人的 3 大グラフ描画ライブラリの一角
    ○ 他は Gruff, Google Charts
    ○ chartkick も気になっています
    ● サーバでデータを生成、ブラウザで描画
    ● 商用ライセンスが必要なケースもあり
    

    View Slide

28. HighCharts + Rails
    ● サーバ側で HighCharts に
    投げつけるデータを用意
    ● groupdate gem 使いたい
    

    View Slide

29. at academist
    ● 重要指標について HighCharts
    を使ったグラフを描画
    ○ 支援件数
    ○ 支援総額
    ○ ユーザ数
    ● 資料の作成時間が 0 に！
    ○ スクショを貼るだけ
    

    View Slide

30. メニュー
    通知
    視覚化
    定例 MTG の
    資料作成工数を 0 に
    おすすめツール：
    HighCharts
    セキュリティ
    大切な管理画面は
    しっかり守ろう
    おすすめツール：
    AWS WAF
    データ管理
    DBであれ更新して！
    を撲滅しよう
    おすすめツール：
    RailsAdmin
    

    View Slide

31. メニュー
    通知
    視覚化
    定例 MTG の
    資料作成工数を 0 に
    おすすめツール：
    HighCharts
    通知 as a 管理画面
    セキュリティ
    大切な管理画面は
    しっかり守ろう
    おすすめツール：
    AWS WAF
    データ管理
    DBであれ更新して！
    を撲滅しよう
    おすすめツール：
    RailsAdmin
    

    View Slide

32. Slack 使ってますか?
    ● academist でもヘビーユース
    ● 以下のような通知が日々流れます
    ○ 新着の支援
    ○ 問い合わせ
    ○ ニュースレター登録
    ○ CloudWatch Metrics etc ...
    

    View Slide

33. message のカスタマイズ
    ● Slack message にアクションを追加
    ● 当該通知に対する主要なアクションは
    管理画面に行かずとも実施可能に
    

    View Slide

34. Slack Message Builder
    ● ブラウザで Slack メッセージを
    シミュレート可能
    ● コードを書く → 通知を試す →
    コードを書く … のループが不要に！
    

    View Slide

35. メニュー
    セキュリティ データ管理 通知
    視覚化
    大切な管理画面は
    しっかり守ろう
    DBであれ更新して！
    はなくしましょう
    定例 MTG の
    資料作成工数を 0 に
    おすすめツール：
    AWS WAF
    おすすめツール：
    RailsAdmin
    おすすめツール：
    HighCharts
    通知 as a 管理画面
    おすすめツール：
    Slack as a 管理画面
    

    View Slide

36. 優れた管理画面の高速開発が出来ます！
    適切なツールを効果的に組み合わせることで
    

    View Slide

37. Questions?
    セキュリティ データ管理 通知
    視覚化
    大切な管理画面は
    しっかり守ろう
    DBであれ更新して！
    はなくしましょう
    定例 MTG の
    資料作成工数を 0 に
    おすすめツール：
    AWS WAF
    おすすめツール：
    RailsAdmin
    おすすめツール：
    HighCharts
    通知 as a 管理画面
    おすすめツール：
    Slack as a 管理画面
    

    View Slide

38. Thank you for listening!
    

    View Slide