老舗企業が開発組織カルチャーの刷新を行い SaaS 戦略に切り替えた話

© Morisawa Inc.
老舗企業が開発組織カルチャーの刷新を行い
SaaS 戦略に切り替えた話
株式会社モリサワ
システム開発部門小室貴史
D E V D AY
2023.7.6 SA-2-1

View Slide

© Morisawa Inc.
アジェンダ
2
• 自己紹介
• 株式会社モリサワの紹介
• 開発組織のカルチャー刷新について
• SaaS 戦略 Frontend 開発
• SaaS 戦略 Backend 開発とデータ基盤開発
• さいごに

View Slide

© Morisawa Inc.
自己紹介
名前：小室貴史
所属：株式会社モリサワ
システム開発部門シニアテックマネージャー
仕事：テックリード、インフラエンジニア
好きな Amazon Web Services サービス：
CloudFormation
趣味：バイク
3
サーキットで YZF-R1 に跨る本人

View Slide

© Morisawa Inc.
4

View Slide

© Morisawa Inc.
株式会社モリサワ
創業のルーツである写真植字機発明から
もうすぐ100周年を迎える老舗企業
5
1924年写真の原理で文字を現して組む方法を
世界に先駆けて発明し「邦文写真植字機」を特許申請

View Slide

© Morisawa Inc.
3度の大きな変革
機械から電子、そしてフォントへ
6
1980年
電算写真植字機
「ライノトロン202ET」
1942年
写真植字機
「A型」
1989年
ポストスクリプト
フォント

View Slide

© Morisawa Inc.
フォント販売方法も変革
物理媒体からクラウドへ
7
2005年
MORISAWA PASSPORT
パッケージ
サブスクリプション
2002年
OpenTypeフォント
パッケージ売り切り
2022年
Morisawa Fonts
クラウド

View Slide

© Morisawa Inc.
8 © Morisawa Inc.
SaaS 戦略に至るまで
協力会社時代のお話

View Slide

© Morisawa Inc.
9
2005年
MORISAWA PASSPORT
パッケージ
2002年
2022年
Morisawa Fonts
クラウド

View Slide

© Morisawa Inc.
MORISAWA PASSPORT
• フォントの売り切り販売からサブスクリプションへ
• フォント単体ではなく全フォント利用可能に
• Web によるアクティベーション
• 認証用のサーバーの構築が必要
• Web 開発のノウハウが無い状態
• 外部の協力会社の助けが必須
• 業務委託による開発
10
新しい販売方法へのチャレンジ

View Slide

© Morisawa Inc.
なぜ SaaS 戦略に至ったのか？
• 開発内容が固定化されて業務開始
• ウォーターフォールな開発
• 新サービスロンチでは大きな問題ではない
• その後 MVP なリリースができない
• 実績のあるレガシーな環境になりがち
• 委託先の方針や実力次第だが、チャレンジが難しい
• 社内の技術の空洞化
• 提案された内容の善し悪しが判断できなくなる
11
委託開発の問題（発注側視点）

View Slide

© Morisawa Inc.
12 © Morisawa Inc.
これらを踏まえて内製化に切り替え
SaaS 戦略を成功させるために

View Slide

© Morisawa Inc.
13 © Morisawa Inc.
VPoEを迎えて組織改革
開発組織のカルチャー刷新

View Slide

© Morisawa Inc.
改革できるリーダーのもとで一貫性のある施策
• MISSION 存在意義
• [Everywhere x WorldWide]
• 文字を通じて世界中の人々の生活の中に存在し続ける
• VISON 目指す姿
• [Expert x Sustainability]
• モノづくりと技術を楽しめる[持続可能]な[エキスパート集団]へ進化
• VALUE 組織の価値
• [共創の精神] 相互理解とリスペクト、クロスボーダー
• [データドリブン] データと合理的な行動判断に価値基準をおく
• [楽活] 楽ちんx 安らかx 楽しいを追求する開発活動に価値をおく
14
MISSION VISON VALUE の制定

View Slide

© Morisawa Inc.
15
2005年
MORISAWA PASSPORT
パッケージ
2002年
2022年
Morisawa Fonts
クラウド

View Slide

© Morisawa Inc.
組織改革して Morisawa Fonts 内製化開発スタート
• マイクロサービスアーキテクチャ
• Frontend、Backend、インフラチームが独立して動く
• クリーンアーキテクチャで設計しモダンアプリケーションとする
• SaaS を積極的に利用
• AWS のマネージドサービスの組み合わせでシステムを構築する
• 必要に応じて外部の SaaS も利用しコアコンピタンスに集中する
• DevOps を心がける
• 自動化を常に考慮する
• CI/CD を整備する
16
開発方針

View Slide

© Morisawa Inc.
デジタル社会推進標準ガイドライン
3.5 5)クラウド上で稼働するアプリケーションについて
〜中略〜
• モダンアプリケーションとする
マネージドサービスの組合せだけでシステムを構成する、自らサーバを構築せずシステムを
構成するなど、クラウドならではの考え方とする。マイクロサービスアーキテクチャの採用や
継続的な改善（開発）もモダンアプリケーションでは一般的である。
〜中略〜
• オンプレミス時代の人海戦術的な方式を踏襲せず自動化する
インフラ環境構築の自動化（IaC）とCI/CDパイプライン化、インフラテストの自動化、
システム監視や運用の自動化、セキュリティ監視の自動化をクラウドの機能を活用して行う。
17
政府情報システムにおけるクラウドサービスの適切な利用に係る基本方針（案）
https://www.digital.go.jp/assets/contents/node/basic_page/5eld_ref_resources/fb619f03-5fbd-4dd7-8bb1-114c6f63f0ba/c5871775/20220930_meeting_executive_01.pdf より引用

View Slide

© Morisawa Inc.
独立してデプロイ可能なチームに分解
18
各チーム間は疎結合にしコラボレーションして動く
UI/UX ●
Frontend ● ● ●
Backend ● ● ●
Infrastructure ● ●
Analytics ●

View Slide

© Morisawa Inc.
SaaS 戦略
• 基盤には AWS を採用
• 原則マネージドサービスのみ利用
• パッチ適用などの運用コストを極力下げる
• Backend には Go 言語を採用
• スクリプト言語はアップデートが辛いので Backend では避ける
• Frontend や CDK などはナレッジが多い TypeScript を採用
• AWS 以外の SaaS も選択肢にいれる
• 効率よく開発できそうならお金で解決する
• API や IaC での開発に対応しているサービスを利用
19
コアコンピタンスに集中するために SaaS を積極利用

View Slide

© Morisawa Inc.
20 © Morisawa Inc.
SaaS 戦略
Frontend 開発

View Slide

© Morisawa Inc.
Frontend 開発
21
Vue.js + Nuxt.js を採用し SPA で作成
AWS Cloud
外部 SaaS
ユーザー
開発者
※主要なサービスのみ記載しております
Amazon CloudWatch Amazon CloudWatch
Synthetics
RUM
AWS WAF
Amazon Route 53 Amazon CloudFront
Functions
Lambda@Edge
Amazon S3 AWS CodeBuild AWS CodePipeline AWS Chatbot
SSO Okta CIC Stripe Analytics GitHub Slack

View Slide

© Morisawa Inc.
Frontend 開発
22
Amazon CloudFront と Amazon S3 の静的サイト構成
AWS Cloud
外部 SaaS
ユーザー
開発者
Synthetics
RUM
AWS WAF
Functions
Lambda@Edge
Amazon S3 AWS CodePipeline AWS Chatbot
プラットフォームのメンテナンスは
できるだけ減らす構成とする。
AWS CodeBuild

View Slide

© Morisawa Inc.
Frontend 開発
23
必要に応じて外部 SaaS も活用
23
AWS Cloud
外部 SaaS
ユーザー
開発者
Synthetics
RUM
AWS WAF
Functions
Lambda@Edge
専門的なサービスや機能を持つ
外部 SaaS を利用することで
効率化や革新を図る。
AWS CodeBuild

View Slide

© Morisawa Inc.
Frontend 開発
24
SPA に伴う index.html 補完対応
AWS Cloud
外部 SaaS
ユーザー
開発者
Synthetics
RUM
AWS WAF
Functions
Lambda@Edge
本番環境では Amazon CloudFront
Functions を利用している。
サイトメンテナンス時のメンテナンス画面への
リダイレクトにも利用している。
AWS CodeBuild

View Slide

© Morisawa Inc.
Frontend 開発
25
SSO を利用した開発環境へのアクセス制限
AWS Cloud
外部 SaaS
ユーザー
開発者
Synthetics
RUM
AWS WAF
Functions
Lambda@Edge
Lambda@Edge と Okta CIC(旧 Auth0) を利用し、SSO を
実現して開発環境へのアクセス制限を実施。
開発環境と本番環境で同じ AWS アカウントを使っているため、
Amazon CloudFront Functions から切り替える実装とした。
AWS CodeBuild

View Slide

© Morisawa Inc.
Frontend 開発
26
SSO を利用した開発環境へのアクセス制限
AWS Cloud
外部 SaaS
ユーザー
開発者
Synthetics
RUM
AWS WAF
Functions
Lambda@Edge
IP 制限が必要な場合は、AWS WAF の機能で
制御を行う。
AWS CodeBuild

View Slide

© Morisawa Inc.
Frontend 開発
27
IDaaS の活用と認証認可プロセスの外部委託
27
AWS Cloud
外部 SaaS
ユーザー
開発者
Synthetics
RUM
AWS WAF
Functions
Lambda@Edge
Okta CIC (旧Auth0) で ID 管理を行う。
会員サイトへのアクセス制限を実施。
今後、外部の IdP を増やしたいため、Okta
CIC を選択。
AWS CodeBuild

View Slide

© Morisawa Inc.
Frontend 開発
28
セキュアな外部決済 SaaS の活用
AWS Cloud
外部 SaaS
ユーザー
開発者
Synthetics
RUM
AWS WAF
Functions
Lambda@Edge
決済処理は透過的に Stripe を利用し、
カード情報などの機密情報を AWS では
管理しない。
AWS CodeBuild

View Slide

© Morisawa Inc.
Frontend 開発
29
データドリブンな組織文化の構築
AWS Cloud
外部 SaaS
ユーザー
開発者
Synthetics
RUM
AWS WAF
Functions
Lambda@Edge
Analytics ツールの組み込みと
データレイクへ情報の連携（後述）。
Amazon CloudWatch RUM で
の分析。
AWS CodeBuild

View Slide

© Morisawa Inc.
Frontend 開発
30
効果的な DevOps と CI/CD の実践
30
AWS Cloud
外部 SaaS
ユーザー
開発者
Synthetics
RUM
AWS WAF
Functions
Lambda@Edge
GitHub と連携した CI/CD パイプラインの構築。
ビルドの状況や結果は、AWS Chatbot を通じて
Slack へ通知。
AWS CodeBuild

View Slide

© Morisawa Inc.
Frontend 開発
効果的な DevOps と CI/CD の実践
31
AWS Cloud
外部 SaaS
ユーザー
開発者
Synthetics
RUM
AWS WAF
Functions
Lambda@Edge
Amazon CloudWatch Synthetics を
利用した CI 環境を実験的に構築中。
AWS CodeBuild

View Slide

© Morisawa Inc.
Frontend 開発
• Amazon CloudFront と Amazon S3 の静的サイト構成
• マネージドサービスを活用しメンテナンスフリーを目指す
• 必要に応じて外部 SaaS も選択肢に入れる
• 専門的なサービスや機能を活用することで効率化や革新を図る
• 認証認可や決済などセキュアにすべきところは外部 SaaS も活用する
• データドリブンな意思決定を行えるように準備する
• Amazon CloudWatch RUM や Analytics ツールなどで情報を取得する
• DevOps を常に心がける
• CI/CD パイプラインは必ず準備する
32
Frontend 開発のまとめ

View Slide

© Morisawa Inc.
Frontend 開発
• Amazon CloudFront と Amazon S3 の静的サイト構成
• アプリケーションはバージョンアップ計画が必要
• Vue.js + Nuxt.js のメジャーバージョンアップは大きな課題
• 必要に応じて外部 SaaS も選択肢に入れる
• 採用にいたるまでの調査や運用後のコストが高い
• データドリブンな意思決定を行えるように準備する
• 実際にデータを活用するためにデータサイエンティストが必須
• DevOps を常に心がける
• ビルド時間の肥大化への改善対応
33
Frontend 開発の課題

View Slide

© Morisawa Inc.
34 © Morisawa Inc.
SaaS 戦略
Backend 開発とデータ基盤開発

View Slide

© Morisawa Inc.
Backend 開発
35
AWS Fargate で GraphQL サーバーを稼働
AWS Cloud
外部 SaaS
ユーザー
開発者
Amazon Route 53 Elastic Load
Balancing
AWS WAF Amazon Aurora Amazon DynamoDB
Amazon CloudWatch
Alarm
Logs Amazon Simple Noti5cation
Service (Amazon SNS)
AWS Chatbot
AWS CodeBuild AWS CodePipeline
Amazon Elastic
Container Registry
(Amazon ECR)
AWS Fargate
Okta CIC Stripe GitHub Slack
SendGrid

View Slide

© Morisawa Inc.
Backend 開発
36
AWS Fargate で GraphQL サーバーを稼働
AWS Cloud
外部 SaaS
ユーザー
開発者
Balancing
Amazon Aurora Amazon DynamoDB
Amazon CloudWatch
Alarm
AWS Chatbot
Amazon Elastic
Container Registry
(Amazon ECR)
AWS Fargate
SendGrid
Go 言語を利用したコンテナを採用して
AWS Fargte で稼働。
GraphQL を採用することで、Backend チーム
と Frontend チームが独立して動きやすい環境
とした。
AWS WAF

View Slide

© Morisawa Inc.
Backend 開発
37
サーバーレス構成での実装
AWS Cloud
外部 SaaS
ユーザー
開発者
Balancing
Amazon CloudWatch
Alarm
AWS Chatbot
Amazon Elastic
Container Registry
(Amazon ECR)
AWS Fargate
SendGrid
トランザクションデータはすべて
Amazon DynamoDB に保存。
Amazon Aurora はマスターデータ
のみとし、参照だけを行う。
AWS WAF

View Slide

© Morisawa Inc.
Backend 開発
38
サーバーレス構成での実装
AWS Cloud
外部 SaaS
ユーザー
開発者
Balancing
Amazon CloudWatch
Alarm
AWS Chatbot
Amazon Elastic
Container Registry
(Amazon ECR)
AWS Fargate
SendGrid
Amazon Aurora にトランザクションデータ
があると、無停止でのサービス提供が難しい。
メンテナンスによるアプリケーションの停止を
極力減らすため、参照のみの利用とした。
AWS WAF

View Slide

© Morisawa Inc.
Backend 開発
39
メール送信機能は外部 SaaS 利用
AWS Cloud
外部 SaaS
ユーザー
開発者
Balancing
Amazon CloudWatch
Alarm
AWS Chatbot
Amazon Elastic
Container Registry
(Amazon ECR)
AWS Fargate
SendGrid
当初は Amazon SES を採用していた。
Amazon SES はリージョンごとに１つのサービスのみ
起動が可能。
開発環境と本番環境で同じ AWS アカウントを使って
いるため、複数の環境から同じ Amazon SES を利用
する実装となってしまった。
開発環境での事故が、本番環境に影響する問題が発生
したため、SendGrid を採用して分離を行った。
AWS WAF

View Slide

© Morisawa Inc.
Backend 開発
DevOps を成功に導くための IaC 対応
40
AWS Cloud
外部 SaaS
ユーザー
開発者
Balancing
Amazon CloudWatch
Alarm
AWS Chatbot
Amazon Elastic
Container Registry
(Amazon ECR)
AWS Fargate
SendGrid
更新頻度が少なく、永続的に利用するリソースは、
過去に作成した AWS CloudFormation 資産を
再利用し小さなスタックで作成を行う。
データストアに当たるものが対象。
AWS WAF

View Slide

© Morisawa Inc.
Backend 開発
DevOps を成功に導くための IaC 対応
41
AWS Cloud
外部 SaaS
ユーザー
開発者
Balancing
Amazon CloudWatch
Alarm
AWS Chatbot
Amazon Elastic
Container Registry
(Amazon ECR)
AWS Fargate
SendGrid
複数リソースにまたがり動作するリソースは、
アプリケーション思考でスタックをまとめ、
CDK にて実装を行った。
CDK の言語はサンプルが豊富な
TypeScript を採用した。
AWS WAF

View Slide

© Morisawa Inc.
Backend 開発
42
データドリブンな組織文化の構築に向けた対応
AWS Cloud
外部 SaaS
ユーザー
開発者
Balancing
Amazon CloudWatch
Alarm
AWS Chatbot
Amazon Elastic
Container Registry
(Amazon ECR)
AWS Fargate
SendGrid
Amazon DynamoDB は柔軟な検索に弱いという
問題がある。
そのため、Point-in-time recovery 機能を利用し、
データ基盤と連携を行う。
Elastic Load Balancing のログも WAF を通じて、
データ基盤と連携を行う。
AWS WAF

View Slide

© Morisawa Inc.
Backend 開発
• Backend は Go 言語で GraphQL
• スクリプト言語はアップデートへの追従が負荷になるため
• GraphQL は Backend チームを独立させやすくするため
• サーバーレス構成で運用負荷を軽減
• AWS Fargate と Amazon DynamoDB を利用
• Amazon Aurora はマスターデータのみ
• メール送信は Amazon SES から SendGrid に移行
• マネージドサービス利用ゆえに差し替えが容易
• SendGrid へ移行することにより環境分離を行う
43
Backend 開発のまとめ

View Slide

© Morisawa Inc.
Backend 開発
• Backend は Go 言語で GraphQL
• POST のため CDN でキャッシュできない
• アプリケーションでキャッシュするがコンテナウォームアップ時の対応が課題
• サーバーレス構成で運用負荷を軽減
• オブザーバビリティを考える必要あり
• AWS X-Ray 導入へ
• メール送信は Amazon SES から SendGrid に移行
• 開発環境と本番環境を同じ AWS で作っていたため問題が発生
• ベストプラクティスに AWS 則り環境を分けるべき
44
Backend 開発の課題

View Slide

© Morisawa Inc.
データ基盤開発
45
データ基盤は専用の AWS 環境で構築
AWS Cloud (Product)
外部 SaaS
AWS Cloud (データ基盤)
AWS Step Functions workflow
Amazon DynamoDB Amazon Kinesis
Data Firehose
AWS Lambda AWS Lambda
Amazon Simple Storage
Service (Amazon S3)
AWS Glue Amazon Athena Amazon QuickSight
Analytics
AWS WAF Elastic Load
Balancing
SSO

View Slide

© Morisawa Inc.
Amazon DynamoDB
46
ETL 作業を順に行っていく
AWS Cloud (Product)
外部 SaaS
Amazon Kinesis
Data Firehose
Service (Amazon S3)
Analytics
Balancing
SSO
データ基盤専用の AWS にて、Amazon S3 を
データレイクとして準備。
データレイクに対して、抽出(Extract)を行う。

View Slide

© Morisawa Inc.
Amazon DynamoDB
47
SRE のための SLI/SLO の取得と利用
AWS Cloud (Product)
外部 SaaS
Amazon Kinesis
Data Firehose
Service (Amazon S3)
Analytics
Balancing
SSO
Elastic Load Balancing のデータは、 WAF から
Amazon Kinesis Data Firehose を通じて
データレイクの Amazon S3 に保存。
SLI/SLO のデータを作成する。

View Slide

© Morisawa Inc.
Amazon DynamoDB
48
Amazon DynamoDB のデータをデータレイクへ保存
AWS Cloud (Product)
外部 SaaS
Amazon Kinesis
Data Firehose
Service (Amazon S3)
Analytics
Balancing
SSO
前述の通り、Amazon DynamoDB のデータは、
Point-in-time recovery 機能を利用して出力。
AWS Lambda で Apache Hive 形式に
パーティションを切ってデータレイクに保存する。

View Slide

© Morisawa Inc.
Amazon DynamoDB
49
サイトの PV データもデータレイクに貯める
AWS Cloud (Product)
外部 SaaS
Amazon Kinesis
Data Firehose
Service (Amazon S3)
Analytics
Balancing
SSO
Analytics ツールのデータは、AWS Lambda
から API を利用して、Amazon S3 に日時で保存。
Amazon AppFlow 経由の場合、増分更新を設定
すると、過去データが重複して取れてしまう仕様ため、
AWS Lambda を採用して API 経由で取得する方式
を取った。

View Slide

© Morisawa Inc.
Amazon DynamoDB
50
データレイクのデータを変換
AWS Cloud (Product)
外部 SaaS
Amazon Kinesis
Data Firehose
Service (Amazon S3)
Analytics
Balancing
SSO
データレイクへ抽出したデータから AWS Glue Data
Catalog を作成し、集計と変換処理(Transform)を行う。
一連の流れを AWS Step Functions を利用して制御し、
AWS Lambda で AWS Glue のワークフローの
パラメータを切り換えて呼び出す。

View Slide

© Morisawa Inc.
51
Amazon QuickSight に定期的に読み込み
AWS Cloud (Product)
外部 SaaS
Amazon Kinesis
Data Firehose
Service (Amazon S3)
Analytics
Balancing
SSO
Amazon QuickSight
QuickSight には SPICE(Super-fast,
Parallel, In-memory Calculation Engine)
というインメモリエンジンが準備されている。
定期的にデータを読み込む設定を行い、
ダッシュボード表示時の時間とコストを節約する。
Amazon DynamoDB

View Slide

© Morisawa Inc.
Amazon DynamoDB
52
Active Directory を利用した SSO 対応
AWS Cloud (Product)
外部 SaaS
Amazon Kinesis
Data Firehose
Service (Amazon S3)
Analytics
Balancing
SSO
Amazon QuickSight や Amazon Athena は
SSO の対応を行う。
開発者以外も簡単にアクセスをできるようにし、
日々のダッシュボードの確認や、必要に応じて
アドホックなクエリをかけるように準備。

View Slide

© Morisawa Inc.
• データ基盤はプロダクトとは別のAWSとして構築
• Extract : データレイクを Amazon S3 で作成
• Amazon DynamoDB のデータ PiTR で Amazon S3 へ出力
• AWS WAF から Amazon Kinesis Data Firehose を使い Amazon S3 へ連携
• AWS Lambda を利用して Analytics のデータ取り込み
• Transform : AWS Glue のワークフローを用いて集計、変換処理
• Load : Amazon QuickSight の SPICE へ定期的に取り込み
• Amazon QuickSight でダッシュボード化
• 利用促進のため Active Directory を使った SSO 対応
• アドホックなクエリを呼べるように Amazon Athena も開放
53
データ基盤開発のまとめ

View Slide

© Morisawa Inc.
• Extract : データレイクを Amazon S3 で作成
• 外部サービスが停止しているときなど、処理失敗時の復旧対応
• Transform : AWS Glue のワークフローを用いて集計、変換処理
• 作成データの依存関係による AWS Step Functions の複雑化
• Load : Amazon QuickSight の SPICE へ定期的に取り込み
• SPICE 容量逼迫の対策
• SPICE 利用と Amazon Athena 参照の切り分け
• Amazon QuickSight でダッシュボード化
• 計算量増大によるタイムアウト対策
• 事前に計算処理をしたデータセットの作成
54
データ基盤開発の課題

View Slide

© Morisawa Inc.
さいごに
• 上層部と協力して組織の改革を行いカルチャーの刷新から始めた
• リーダーとなる人材を迎えて組織改革
• 改革のための MVV を言語化して発信
• 現メンバーのスキルチェンジを無理のない範囲で計画
• SaaS を積極的に利用する方針とし内製化に切り換え
• AWS のマネージドサービスを原則利用
• 開発や運用が楽になる場合は外部 SaaS も利用
• ビルディングブロック思想で構築し問題があれば SaaS を変更
• DevOps は常に考え自動化や運用を見据えて構築
• CI/CD は必ず整備して結果を通知
56
SaaS 戦略にはカルチャーの刷新が必要

View Slide

老舗企業が開発組織カルチャーの刷新を行い SaaS 戦略に切り替えた話

老舗企業が開発組織カルチャーの刷新を行い SaaS 戦略に切り替えた話

Takafumi Omuro

More Decks by Takafumi Omuro

Other Decks in Technology

Featured

Transcript