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

by koudenpa

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

本日のテーマ

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

前提として……

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

6年目に 10年を見る

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

ではなく

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Slide 13

Slide 13 text

本セッションのテーマ

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

カクヨムとはてな

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

一番いい技術

Slide 25

Slide 25 text

● 答えはない一番いい？

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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