$30 off During Our Annual Pro Sale. View Details »

カクヨムの10年を見据えた技術 Hatena Engineer Seminar #19

koudenpa
March 30, 2022

カクヨムの10年を見据えた技術 Hatena Engineer Seminar #19

Hatena Engineer Seminar #19 カクヨム編 の資料です。
https://hatena.connpass.com/event/241412/

今回のセミナー内容の背景にあるカクヨムの開発運用の状況や各施策をとるに至った流れ、今後の展望などをお話します。

koudenpa

March 30, 2022
Tweet

More Decks by koudenpa

Other Decks in Programming

Transcript

  1. Hatena Engineer Seminar #19
    id:
    カクヨムの10年を
    見据えた技術
    2022.03.30
    koudenpa

    View Slide

  2. ● 本日のテーマ
    ● 本セッションのテーマ
    ● カクヨムとはてな
    ● 一番いい技術
    ● エンジニアリングロードマップ
    目次

    View Slide

  3. 本日のテーマ

    View Slide

  4. ● 本日はカクヨム編
    カクヨムの10年を見据えた技術

    View Slide

  5. 前提として……

    View Slide

  6. ● https://kakuyomu.jp/
    ● Web小説サイト
    ● 小説を「書く」
    ● 小説を「読む」
    ● 面白いを伝える
    カクヨムとは?

    View Slide

  7. カクヨムは成長中
    ● 2021年のアクセス数
    ○ Mackerelで収集
    ○ https://mackerel.io/
    ● 増加傾向

    View Slide

  8. 6年目に
    10年を見る

    View Slide

  9. ● 2015年 プレオープン
    ● 2016年 正式オープン・スマホアプリリリース
    ● 2018年 縦組み・スマホアプリリニューアル
    ● 2019年 カクヨムロイヤルティプログラム
    ● 2022年 カクヨムサポーターズパスポート
    ● ……
    ● 2026年 10年目
    カクヨムの歴史

    View Slide

  10. ではなく

    View Slide

  11. ● 2015年 IaaS・Perl・テンプレートエンジン・jQuery
    ● 2016年 ネイティブアプリ・REST API
    ● 2018年 React Native・GraphQL API
    ● 2021年 マネージド化・コンテナ化・React・Next.js
    ● ……
    ● 2026年 10年目
    カクヨムの10年を見据えた『技術』

    View Slide

  12. ● 2015年 IaaS・Perl・テンプレートエンジン・jQuery
    ● 2016年 ネイティブアプリ・REST API
    ● 2018年 React Native・GraphQL API
    ● 2021年 マネージド化・コンテナ化・React・Next.js
    ● ……
    ● 2026年 10年目
    カクヨムの10年を見据えた『技術』

    View Slide

  13. 本セッションのテーマ

    View Slide

  14. ● インフラ
    ○ AWSアカウントとIaaSの段階的移行
    ● チーム
    ○ グルーミングしながら進めるプロダクト開発
    ● アプリケーション
    ○ プロトタイプ編
    ○ フロントエンド編
    ○ デザイン編
    この後のセッション

    View Slide

  15. ● インフラ
    ○ AWSアカウントとIaaSの段階的移行
    ● チーム
    ○ グルーミングしながら進めるプロダクト開発
    ● アプリケーション
    ○ プロトタイプ編
    ○ フロントエンド編
    ○ デザイン編
    ● ↑これらをやるに至るまでの背景
    この後のセッションに至る背景

    View Slide

  16. カクヨムとはてな

    View Slide

  17. ● 共同開発
    ○ 株式会社KADOKAWA
    ○ 株式会社はてな
    ● はてなの仕事
    ○ 機能開発
    ○ システム運用
    カクヨムとはてな

    View Slide

  18. ● 文字通りの機能開発
    ○ 新機能
    ○ 既存機能改修
    カクヨムの開発

    View Slide

  19. ● 戦略的な追加機能
    ○ カクヨムロイヤルティプログラム
    ○ カクヨムサポーターズパスポート
    ● 継続的なカイゼン
    ○ 中小規模の追加機能・改修
    ○ 運営用機能
    ● 変わり種
    ○ おねだり企画
    ○ https://kakuyomu.jp/special/entry/4th_anniversary#menu5
    開発の種類

    View Slide

  20. ● アーキテクチャ
    ● プログラミング言語
    ● フレームワーク
    ● etc……
    開発『技術』

    View Slide

  21. ● 開発した機能の反映
    ● 安定したサービス提供
    カクヨムの運用

    View Slide

  22. ● ホスティングプロバイダ
    ● ホスティング環境
    ● デリバリー手法
    ● etc……
    運用『技術』

    View Slide

  23. ● 開発・運用それぞれ
    ● 一番いい形態で
    仕事の形態

    View Slide

  24. 一番いい技術

    View Slide

  25. ● 答えはない
    一番いい?

    View Slide

  26. ● 時代
    ○ 進んでいく
    ● 開発・運用対象
    ○ 典型的なWebアプリケーション
    ○ 成長中
    ● 担当者
    ○ はてなの担当者
    ● プロダクトの状況
    ○ 変化する
    今はこれがいい

    View Slide

  27. ● オンプレミス->クラウド
    ○ IaaS活用
    ● はてなのインフラ
    ○ 単一ネットワーク上の開発運用支援環境・ツール
    ○ Chefレシピ
    ○ 社内PaaS的な運用の工夫
    ● はてなのエンジニア
    ○ Perl+テンプレートエンジン
    ○ はてなのインフラに乗る
    ● プロダクトの状況
    ○ 先行する競合サービスを追う後発サービス
    カクヨム開発着手時

    View Slide

  28. ● クラウドネイティブ
    ○ マネージドサービス
    ● コンテナ活用
    ○ 開発と運用のしやすさ
    ● 適切な責務分担
    ○ バックエンドとフロントエンド
    ● プロダクトの状況
    ○ 多くの読者・作者が利用
    ○ アニメ化作品を含むヒット作が生まれ続けている
    ○ 作者にとっては直接的な収益源

    View Slide

  29. ● 分からない
    ○ ある程度の予測はできるが……
    ● 対応は必要
    ○ サービスは成長中なので
    ● プロダクトの状況・カクヨムの今後
    ○ 乞うご期待
    未来

    View Slide

  30. ● 変化しやすくする
    ○ 今に適応
    ○ 未来への適応準備
    未来を見据える

    View Slide

  31. エンジニアリング
    ロードマップ

    View Slide

  32. ● 話した内容
    ○ 結論
    ○ 取り組んでいること
    ● どのようにそうなったか
    ● ロードマップを引いたか
    一番いい技術

    View Slide

  33. ● エンジニアのみで集まってブレスト
    ○ どうなっていたいか?
    ○ 無責任に話す
    ● 無責任だと大小色々出てくる
    ○ ちょっとこれやってみたい
    ○ この部分気に入らない
    ○ 小さいことから話題が広がる
    ● 実にブレスト
    ネタの収集

    View Slide

  34. ● 小さいもの
    ○ タスクにして気が向いたら処理
    ● 大きいもの
    ○ 整理してチームの会議体にもっていく
    ● 漏れたもの
    ○ 忘れる
    ○ 大事ならまた話題になる
    ■ 整理の重圧が下がる
    収集後

    View Slide

  35. ● 定期的にエンジニアリング観点の話をする場を設けている
    ● 整理したネタを持ち込む
    ○ ドラフト版エンジニアリングロードマップ
    ● 期の節目でチームのロードマップにする
    チームの会議体

    View Slide

  36. ● 目的
    ○ 継続的な開発運用
    ● 手段
    ○ インフラの更新
    ○ フロントエンドとバックエンドの分離
    ■ その後言語や要素技術更新
    エンジニア観点

    View Slide

  37. ● 目的
    ○ 変化の多い業界で成長を続ける
    ● 手段
    ○ 未来を見据えた機能追加や状況に応じた改善を止めない
    プロダクト観点

    View Slide

  38. 観点を統合
    エンジニア
    観点
    プロダクト
    観点

    View Slide

  39. エンジニアリングロードマップ
    ※タイムスケールなどは掲載の便宜上デフォルメされています

    View Slide

  40. 並行して進めた
    ※タイムスケールなどは掲載の便宜上デフォルメされています

    View Slide

  41. 今ここまで歩んだ
    ※タイムスケールなどは掲載の便宜上デフォルメされています

    View Slide

  42. 俺たちの戦いはこれからだ
    ※タイムスケールなどは掲載の便宜上デフォルメされています

    View Slide

  43. ──完──
    この後のセッションに
    ご期待ください

    View Slide