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

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

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

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