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

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

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

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

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

A7f648f6c3151fd5fe0b5e855ea45c62?s=128

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

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

    目次
  3. 本日のテーマ

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

  5. 前提として……

  6. • https://kakuyomu.jp/ • Web小説サイト • 小説を「書く」 • 小説を「読む」 • 面白いを伝える

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

  8. 6年目に 10年を見る

  9. • 2015年 プレオープン • 2016年 正式オープン・スマホアプリリリース • 2018年 縦組み・スマホアプリリニューアル •

    2019年 カクヨムロイヤルティプログラム • 2022年 カクヨムサポーターズパスポート • …… • 2026年 10年目 カクヨムの歴史
  10. ではなく

  11. • 2015年 IaaS・Perl・テンプレートエンジン・jQuery • 2016年 ネイティブアプリ・REST API • 2018年 React

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

    Native・GraphQL API • 2021年 マネージド化・コンテナ化・React・Next.js • …… • 2026年 10年目 カクヨムの10年を見据えた『技術』
  13. 本セッションのテーマ

  14. • インフラ ◦ AWSアカウントとIaaSの段階的移行 • チーム ◦ グルーミングしながら進めるプロダクト開発 • アプリケーション

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

    ◦ プロトタイプ編 ◦ フロントエンド編 ◦ デザイン編 • ↑これらをやるに至るまでの背景 この後のセッションに至る背景
  16. カクヨムとはてな

  17. • 共同開発 ◦ 株式会社KADOKAWA ◦ 株式会社はてな • はてなの仕事 ◦ 機能開発

    ◦ システム運用 カクヨムとはてな
  18. • 文字通りの機能開発 ◦ 新機能 ◦ 既存機能改修 カクヨムの開発

  19. • 戦略的な追加機能 ◦ カクヨムロイヤルティプログラム ◦ カクヨムサポーターズパスポート • 継続的なカイゼン ◦ 中小規模の追加機能・改修

    ◦ 運営用機能 • 変わり種 ◦ おねだり企画 ◦ https://kakuyomu.jp/special/entry/4th_anniversary#menu5 開発の種類
  20. • アーキテクチャ • プログラミング言語 • フレームワーク • etc…… 開発『技術』

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

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

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

  24. 一番いい技術

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

  26. • 時代 ◦ 進んでいく • 開発・運用対象 ◦ 典型的なWebアプリケーション ◦ 成長中

    • 担当者 ◦ はてなの担当者 • プロダクトの状況 ◦ 変化する 今はこれがいい
  27. • オンプレミス->クラウド ◦ IaaS活用 • はてなのインフラ ◦ 単一ネットワーク上の開発運用支援環境・ツール ◦ Chefレシピ

    ◦ 社内PaaS的な運用の工夫 • はてなのエンジニア ◦ Perl+テンプレートエンジン ◦ はてなのインフラに乗る • プロダクトの状況 ◦ 先行する競合サービスを追う後発サービス カクヨム開発着手時
  28. • クラウドネイティブ ◦ マネージドサービス • コンテナ活用 ◦ 開発と運用のしやすさ • 適切な責務分担

    ◦ バックエンドとフロントエンド • プロダクトの状況 ◦ 多くの読者・作者が利用 ◦ アニメ化作品を含むヒット作が生まれ続けている ◦ 作者にとっては直接的な収益源 今
  29. • 分からない ◦ ある程度の予測はできるが…… • 対応は必要 ◦ サービスは成長中なので • プロダクトの状況・カクヨムの今後

    ◦ 乞うご期待 未来
  30. • 変化しやすくする ◦ 今に適応 ◦ 未来への適応準備 未来を見据える

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

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

    一番いい技術
  33. • エンジニアのみで集まってブレスト ◦ どうなっていたいか? ◦ 無責任に話す • 無責任だと大小色々出てくる ◦ ちょっとこれやってみたい

    ◦ この部分気に入らない ◦ 小さいことから話題が広がる • 実にブレスト ネタの収集
  34. • 小さいもの ◦ タスクにして気が向いたら処理 • 大きいもの ◦ 整理してチームの会議体にもっていく • 漏れたもの

    ◦ 忘れる ◦ 大事ならまた話題になる ▪ 整理の重圧が下がる 収集後
  35. • 定期的にエンジニアリング観点の話をする場を設けている • 整理したネタを持ち込む ◦ ドラフト版エンジニアリングロードマップ • 期の節目でチームのロードマップにする チームの会議体

  36. • 目的 ◦ 継続的な開発運用 • 手段 ◦ インフラの更新 ◦ フロントエンドとバックエンドの分離

    ▪ その後言語や要素技術更新 エンジニア観点
  37. • 目的 ◦ 変化の多い業界で成長を続ける • 手段 ◦ 未来を見据えた機能追加や状況に応じた改善を止めない プロダクト観点

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

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

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

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

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

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