Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

alea12
October 02, 2018

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

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

alea12

October 02, 2018
Tweet

Other Decks in Technology

Transcript

  1. 管理画面の高速開発を支えるツール4選
    限られた開発リソースで運用コストを最小化する
    管理画面チラ見せ♥ナイト #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. 管理画面の高速開発を支えるツール4選
    限られた開発リソースで運用コストを最小化する
    管理画面チラ見せ♥ナイト #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