Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
なぜクラウドサービスで Web コンソールを提供するのか
Search
did0es
September 07, 2024
Technology
4
2.1k
なぜクラウドサービスで Web コンソールを提供するのか
Web Developer Conference 2024
にて行ったセッションの資料です。
did0es
September 07, 2024
Tweet
Share
More Decks by did0es
See All by did0es
5分でわかるPreactのVDOMで作るWebエディタ
shuta13
0
96
TailwindCSSでUIライブラリを作る際のハマりどころ
shuta13
0
420
codemodとうまく付き合うには
shuta13
0
790
プライベートクラウドのコンソール画面をNext.jsのApp Routerでフルリプレイスした話
shuta13
4
840
CyberAgent Developer Conference(CADC) 2023 LP開発の舞台裏
shuta13
0
160
Turborepo Code Generationによる、サイバーエージェントグループのフロントエンド開発の効率化
shuta13
4
2.2k
CADC 2023 LPにおけるライブ配信の裏側 | Momento Meetup #3
shuta13
0
100
Technologies for developing editors / Webエディタ開発を支える技術
shuta13
1
700
天下一 静的サイトホスティング 武道会 / World Static Site Hosting Tournament
shuta13
0
310
Other Decks in Technology
See All in Technology
成果のためのコミュニケーション - 語彙を育てよう -/communication-for-good-outcome-developing-vocabulary
hassaku63
4
140
FastAPIでのasync defとdefの使い分け
takashi1029
6
1.8k
Create Inquiry via Bedrock / 生成 AI で問い合わせ品質は変わるのか?思いついてぱっと作ったものを供養してみる
kazzpapa3
1
200
Renovate ではじめる運用レスなライブラリ更新 / 令和最新版 他人に自慢したいヤバいCI/CD LT会 @ yabaibuki.dev #2
ponkio_o
PRO
1
130
山手線一周のパフォーマンス改善
suzukahr
0
110
XP matsuri 2024 - 銀河英雄伝説に学ぶ
kawaguti
PRO
3
500
C# 13 / .NET 9 の新機能 (RC 1 時点)
nenonaninu
1
1.1k
スクラム導入の舞台裏:QAエンジニアがスクラムマスターになるまで
bubo1201
0
110
【shownet.conf_】コンピューティング資源を統合した分散コンテナ基盤の進化
shownet
PRO
0
300
SQLによるオブザーバビリティの進化とClickHouseの実力
mikimatsumoto
0
150
LINEヤフー新卒採用 コーディングテスト解説 アルゴリズム問題編
lycorp_recruit_jp
0
12k
CVE alive
ennael
PRO
0
360
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
29
1.7k
The Mythical Team-Month
searls
218
43k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
A Tale of Four Properties
chriscoyier
155
22k
Code Reviewing Like a Champion
maltzj
519
39k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
23
1.7k
Thoughts on Productivity
jonyablonski
67
4.2k
A better future with KSS
kneath
235
17k
Designing the Hi-DPI Web
ddemaree
279
34k
How to Think Like a Performance Engineer
csswizardry
16
1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
48k
Why Our Code Smells
bkeepers
PRO
334
57k
Transcript
なぜクラウドサービスで Web コンソールを 提供するのか 2024/09/07 Web Developer Conference 2024 Hirai
shuta
1.はじめに 2.CUI と GUI 3.大衆化するクラウド 4.Cycloud における取り組み 5.おわりに
Hirai Shuta 株式会社サイバーエージェント 2022年入社 CyberAgent group Infrastructure Unit 所属 Web
Developer(Mainly Front-End) Organizer for Meguro.es Website: https://did0.es X: https://x.com/did0es GitHub: https://github.com/shuta13
はじめに
本資料で登場する 言葉の定義を整理します
did0es Hirai Shuta のハンドルネーム ・右のアバターで活動している場合の名称 ・did0es の発音は「ディドス」 由来は本人も忘れてしまった
クラウドサービス ネットワーク経由で利用できるITリソースを提供しているサービス ・パブリッククラウド ・プライベートクラウド 以下はクラウドサービスの例 ・Amazon Web Service ・Google Cloud
・Microsoft Azure
グループ IT 推進本部 IT技術を用いてサイバーエージェントグループの 課題解決や事業サポートを行う組織 ・データ、インフラ、セキュリティ、コーポレートIT等 詳細:https://it.cyberagent.group
CIU CyberAgent group Infrastructure Unit の略称 ・グループ IT 推進本部配下の事業部 サイバーエージェント全体のインフラを支える組織
・プライベートクラウドの展開 ・パブリッククラウドを利用している事業部の支援 詳細:https://it.cyberagent.group/team/ciu
Cycloud CIU が展開しているプライベートクラウドブランド これを基盤とするマネージドサービスも提供している ・例 ・AI 活用向けの GPUaaS, ML Platform
・KaaS としての AKE ・IaaS としての OpenStack ・サービスは20種類以上
Web コンソール Web ブラウザから利用できるクラウドサービスの GUI コンソール ・サービスのユーザーが利用する ・CLI(CUI) と同等かそれ以上の操作ができる
CUI と GUI
今日お話すること
今日お話すること クラウドサービスに わざわざ GUI のコンソールを つける意味
ちなみに CUI ≠ CIU 左は Character User Interface の略称 右は
CyberAgent group Infrastructure Unit の略称
そもそも CUI と GUI って 何がどう違うんだろう? 🤔
例を2つ挙げます
① プログラミング(CUI) FizzBuzz を JavaScript で実装
① プログラミング(GUI) FizzBuzz を Scratch で実装
CUI の方がやりやすい かも...
② 動画の編集(CUI) FFmpeg でトリミングして DVD 向けに書き出し
② 動画の編集(GUI) Final Cut Pro でトリミングして DVD 向けに書き出し 動画: https://vimeo.com/243314781
©beeple
GUI の方がやりやすい かも...
ユースケースを元に CUI と GUI を比較してみよう 💡
CUI が求められる場面 - 1 再現性を求めるとき ・一連の操作をコマンドの組み合わせでまとめられる ・まとめて人に共有 ・対話型でない場合に限るが、コピペで再現 ・リソースが限られた環境でも操作できる ・老朽化の進んだハードウェア
・組み込みデバイス
CUI が求められる場面 - 2 自動化するとき ・同じ操作を繰り返せる ・反復処理 ・手動で処理するには大きなデータ向け ・定期実行 ・バッヂ処理やスケジューラ向け
GUI が求められる場面 - 1 複雑な操作をするとき ・視覚的なフィードバックを得られる ・処理の途中経過の表示 ・数値や文字列をグラフ化 ・コマンドを簡略化できる ・UI
が複数のコマンドを1セットとして保持 ・いわゆるポチるだけ
GUI が求められる場面 - 2 直感的に操作したいとき ・操作を簡略化できる ・マルチメディアの作成や編集 ・初心者でも一定の操作ができる ・日頃 PC
を使わないユーザー ・初めての技術分野に触れるエンジニア
CUI→自動化しやすい・再現性高め GUI→簡略化しやすい・直感的
大衆化するクラウド
今に始まった話ではないが クラウドの需要は年々拡大している
市場規模の推移 出典:「令和6年版情報通信白書」(総務省)より引用 https://www.soumu.go.jp/johotsusintokei/whitepaper/ja/r06/html/nd218200.html#s182
なぜ需要が拡大しているのか (おそらく)以下は耳タコレベルで言われている ・脱オンプレ ・メンテナンスやセキュリティ面のコストカット ・可用性の向上 しかし、近年の需要の拡大はこれだけが理由ではない
AIを活用する場面の増加 🤖
AI の大衆化 PC さえあれば誰でも手の届くものになった ・機械学習向けのライブラリや Jupyter Notebook のような Web 実行環境の充実
・手法や数式を実装に落とし込むまでが簡略化 LLM の登場による生成 AI の普及 ・プロンプトエンジニアリングの登場 ・非エンジニアも AI に触れるようになった
AIとクラウド 機械学習をクラウド上で回すためのサービスが台頭 ・(強めの)ローカルマシンが必要だったものを肩代わり 前処理やデータセット構築の簡略化 ・クラウドで前処理やデータセットの構築も行うように AI 関連サービスのホスティング ・構築したモデルを用いたサービスや API の公開
クラウドのユーザーの変化 これまで ・エンジニア ・インフラ ・バックエンド ・フロントエンド
クラウドのユーザーの変化 これまで ・エンジニア ・インフラ ・バックエンド ・フロントエンド 現在 ・既存のエンジニア ・ML エンジニア
・機械学習やデータの処理に用いる ・ビジネスサイド ・プロトタイピングに用いる
AI の普及とあわせて クラウドとユーザーの距離感が 近くなった
クラウドの提供サービスの変化 CUI ベースから GUI の拡充へ ・例:SageMaker Notebooks, Vertex AI Workbench
・Jupyter Notebook ベースの Web UI を採用 ・ML エンジニアが慣れている形に 非エンジニア向けのクラウドサービスの提供 ・例:GTP-4(Azure OpenAI Service), Imagen(Google Cloud) ・対話形式で利用可能 ・サービスのセットアップも GUI から可能
(再掲) CUI→自動化しやすい・再現性高め GUI→簡略化しやすい・直感的
GUI(コンソール)を提供することで 裾野を広げられる
Cycloud における取り組み
どのようにコンソールを開発し 提供しているのか Cycloud を例にお話します
AKE Console
ML Platform Console・GPUaaS
IAM Console
開発体制 初期:サービスのチームごとのエンジニアがコンソールを開発 ・Web フロントエンドエンジニア以外が作っていた ・サービスのニーズに合わせた独自の UI 実装 中期:Web フロントエンド専任のエンジニアが開発 ・あらゆるチームのコンソールをエンジニアがワンオペで開発
・品質や UI を一定に統一
現在の開発体制 Web フロントエンドチームが開発 ・エンジニア2名、マネージャーで開発 ・各サービスのオーナーやチームと連携 ・カスタマーサポートチームと同じ組織で活動 ・フィードバックの収集 ・需要調査
現在の業務内容 初期 〜 中期に作られたコンソールのリプレイス ・フロントエンドチームで開発している SDK(後述) を用いたリプレイス ・古い React や
Vue.js が混在したプロジェクトを最新の Next.js で作り替え ・UI の刷新 ・開発環境の改善 新規コンソール開発 ・SDK に内包されている生成ツールを用いて行う新規開発
UIの変遷 中期〜現在 初期
初期 〜 中期の課題 独自の仕様や UI の乱立 ・サービスのニーズに合わせるがゆえのばらつき ・初期に作られたものをそのまま Web フロントエンドに引き継ぐ
機能追加以外の工数の増大 ・中期に UI こそ統一されたものの... ・定期的な依存パッケージの更新 ・不具合修正 ・↑をワンオペするがゆえに機能追加に時間を割きづらい
課題の解決 人員を増やす ・エンジニアを倍に!(1人→2人) ・コミュニケーションコストを減らすため、マネージャーが帯同 SDK の開発 ・不具合や脆弱性が見つかった場合の横展開を早める ・SDK のバージョンを上げるだけで更新できるように ・コマンド1つなので、Web
フロントエンドエンジニア以外でも対応可能
内製している SDK とその周辺の ツールやライブラリを紹介します
SDK(SDK Client) コンソール開発向けのライブラリをまとめた SDK ・Org 向けに GitHub Packages で公開 ・個別にインストールして使える
・段階的な導入向け ・Create Cycloud App という CLI ツールで 一括セットアップも可能
SDK の例 - 1 Cycloud UI:Cycloud のブランディング向け UI ライブラリ
SDK の例 - 2 Cycloud Use: サービス共通のロジックを含む React Hooks
SDK の例 - 3 Cycloud APIs:Proto を元に生成する API クライアントの TypeScript
Create Cycloud App コマンド1つでコンソールを作成できる CLI ツール ・プロトタイピングや新規開発の補助 ・選択したテンプレートを元に作成 ・認証付き 実装方法
・Go で CLI を実装 ・CPU Arch と OS ごとのバイナリにビルド ・TypeScript でバイナリをラップして NPM Package として配布
コマンドにより以下が実行される ・テンプレートの clone ・依存パッケージのインストール Create Cycloud App の使用例 - 1
サーバーを立ち上げてブラウザからアクセス Create Cycloud App の使用例 - 2
ログイン後 Create Cycloud App の使用例 - 3
moldable https://github.com/CyberAgent/moldable ・CIU のメンバーで開発した OSS ・Markdown ドキュメントから ソースコードを生成できる対話型ツール ・Plop.js や
Scaffdog の Go による再実装 ・実装は Create Cycloud App と同じく Go + TypeScript ・手動のソースコードのコピペを防ぐ 画像 :https://opengraph.githubassets.com/b20ab85c06bd c7820163ae1b4f504c481c1a49dc51294ca425494961 67beb4be/CyberAgent/moldable
moldable の使用例 - 1 プロンプトの質問に回答
moldable の使用例 - 2 上と回答の内容を元に下のソースコードを生成
これらを組み合わせれば Web フロントエンドのベスプラを 誰でも体現できる! かも...
併せて行っていること - 1 モブプロ ・毎週 2 ~ 3 時間で実施 ・非同期的なコミュニケーションを避け、開発効率の向上
・内容 ・Figma のデザインレビュー ・Figma のデザインを SDK に反映 ・SDK の運用改善
併せて行っていること - 2 SDK 勉強会 ・Web フロントエンド以外のエンジニアが、プロトタイピングできるように実施 ・所要時間 30 分
・CIU の エンジニア対象 ・内容 ・環境構築 ・Create Cycloud App の説明 ・ローカルで認証付きのコンソール生成
併せて行っていること - 3 輪読会 ・CIU ~ グループIT推進本部の Web フロントエンド知識の底上げ ・毎週
30 分で実施 ・内容 ・TypeScript 関連の技術書の輪読と問題演習 ・テスティングライブラリの Docs の輪読 ・エラーレポートサービスの Docs の輪読
おわりに
今日お話すること クラウドサービスに わざわざ GUI のコンソールを つける意味
今日お話すること クラウドサービスに わざわざ GUI のコンソールを つける意味 = 新たなユーザー層の獲得と定着
まとめ 今まではクラウド入門者向け ・GUI はいずれ CUI に移行する間の繋ぎ ・バックエンドの質がそのままサービスの質になっていた これからは ML エンジニアや非エンジニア向け
・AI ブームによる GUI を多用する層の流入 ・フロントエンドの質も重要に
今後の展望 よりユーザーに寄り添う ・オンプレや各社のマネージドサービスに対する理解 ・AI に対する理解 ・UI/UX 向上に向けた検証と実践 Web フロントエンドの敷居を下げる ・サービスに深くコミットしているエンジニアが
Web も作れるように ・SDK の改善や勉強会の継続
WE ARE HIRING!! 💼
ありがとうございました