なぜクラウドサービスで Web コンソールを提供するのか

Web Developer Conference 2024 にて行ったセッションの資料です。

Transcript

1. なぜクラウドサービスで Web コンソールを 提供するのか 2024/09/07 Web Developer Conference 2024 Hirai shuta
2. 1.はじめに 2.CUI と GUI 3.大衆化するクラウド 4.Cycloud における取り組み 5.おわりに
3. 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
4. はじめに
5. 本資料で登場する 言葉の定義を整理します
6. did0es Hirai Shuta のハンドルネーム ・右のアバターで活動している場合の名称 ・did0es の発音は「ディドス」 由来は本人も忘れてしまった
7. クラウドサービス ネットワーク経由で利用できるITリソースを提供しているサービス ・パブリッククラウド ・プライベートクラウド 以下はクラウドサービスの例 ・Amazon Web Service ・Google Cloud ・Microsoft Azure
8. グループ IT 推進本部 IT技術を用いてサイバーエージェントグループの 課題解決や事業サポートを行う組織 ・データ、インフラ、セキュリティ、コーポレートIT等 詳細：https://it.cyberagent.group
9. CIU CyberAgent group Infrastructure Unit の略称 ・グループ IT 推進本部配下の事業部 サイバーエージェント全体のインフラを支える組織 ・プライベートクラウドの展開 ・パブリッククラウドを利用している事業部の支援 詳細：https://it.cyberagent.group/team/ciu
10. Cycloud CIU が展開しているプライベートクラウドブランド これを基盤とするマネージドサービスも提供している ・例 　・AI 活用向けの GPUaaS, ML Platform 　・KaaS としての AKE 　・IaaS としての OpenStack ・サービスは20種類以上
11. Web コンソール Web ブラウザから利用できるクラウドサービスの GUI コンソール ・サービスのユーザーが利用する ・CLI(CUI) と同等かそれ以上の操作ができる
12. CUI と GUI
13. 今日お話すること
14. 今日お話すること クラウドサービスに わざわざ GUI のコンソールを つける意味
15. ちなみに CUI ≠ CIU 左は Character User Interface の略称 右は CyberAgent group Infrastructure Unit の略称
16. そもそも CUI と GUI って 何がどう違うんだろう？ 🤔
17. 例を2つ挙げます
18. ① プログラミング（CUI） FizzBuzz を JavaScript で実装
19. ① プログラミング（GUI） FizzBuzz を Scratch で実装
20. CUI の方がやりやすい かも...
21. ② 動画の編集（CUI） FFmpeg でトリミングして DVD 向けに書き出し
22. ② 動画の編集（GUI） Final Cut Pro でトリミングして DVD 向けに書き出し 動画: https://vimeo.com/243314781 ©beeple
23. GUI の方がやりやすい かも...
24. ユースケースを元に CUI と GUI を比較してみよう 💡
25. CUI が求められる場面 - 1 再現性を求めるとき ・一連の操作をコマンドの組み合わせでまとめられる 　・まとめて人に共有 　・対話型でない場合に限るが、コピペで再現 ・リソースが限られた環境でも操作できる 　・老朽化の進んだハードウェア 　・組み込みデバイス
26. CUI が求められる場面 - 2 自動化するとき ・同じ操作を繰り返せる 　・反復処理 　　・手動で処理するには大きなデータ向け 　・定期実行 　　・バッヂ処理やスケジューラ向け
27. GUI が求められる場面 - 1 複雑な操作をするとき ・視覚的なフィードバックを得られる 　・処理の途中経過の表示 　・数値や文字列をグラフ化 ・コマンドを簡略化できる 　・UI が複数のコマンドを1セットとして保持 　・いわゆるポチるだけ
28. GUI が求められる場面 - 2 直感的に操作したいとき ・操作を簡略化できる 　・マルチメディアの作成や編集 ・初心者でも一定の操作ができる 　・日頃 PC を使わないユーザー 　・初めての技術分野に触れるエンジニア
29. CUI→自動化しやすい・再現性高め GUI→簡略化しやすい・直感的
30. 大衆化するクラウド
31. 今に始まった話ではないが クラウドの需要は年々拡大している
32. 市場規模の推移 出典：「令和６年版情報通信白書」（総務省）より引用 https://www.soumu.go.jp/johotsusintokei/whitepaper/ja/r06/html/nd218200.html#s182
33. なぜ需要が拡大しているのか （おそらく）以下は耳タコレベルで言われている ・脱オンプレ ・メンテナンスやセキュリティ面のコストカット ・可用性の向上 しかし、近年の需要の拡大はこれだけが理由ではない
34. AIを活用する場面の増加 🤖
35. AI の大衆化 PC さえあれば誰でも手の届くものになった ・機械学習向けのライブラリや Jupyter Notebook のような Web 実行環境の充実 ・手法や数式を実装に落とし込むまでが簡略化 LLM の登場による生成 AI の普及 ・プロンプトエンジニアリングの登場 ・非エンジニアも AI に触れるようになった
36. AIとクラウド 機械学習をクラウド上で回すためのサービスが台頭 ・（強めの）ローカルマシンが必要だったものを肩代わり 前処理やデータセット構築の簡略化 ・クラウドで前処理やデータセットの構築も行うように AI 関連サービスのホスティング ・構築したモデルを用いたサービスや API の公開
37. クラウドのユーザーの変化 これまで ・エンジニア 　・インフラ 　・バックエンド 　・フロントエンド
38. クラウドのユーザーの変化 これまで ・エンジニア 　・インフラ 　・バックエンド 　・フロントエンド 現在 ・既存のエンジニア ・ML エンジニア 　・機械学習やデータの処理に用いる ・ビジネスサイド 　・プロトタイピングに用いる
39. AI の普及とあわせて クラウドとユーザーの距離感が 近くなった
40. クラウドの提供サービスの変化 CUI ベースから GUI の拡充へ ・例：SageMaker Notebooks, Vertex AI Workbench 　・Jupyter Notebook ベースの Web UI を採用 　・ML エンジニアが慣れている形に 非エンジニア向けのクラウドサービスの提供 ・例：GTP-4(Azure OpenAI Service), Imagen(Google Cloud) 　・対話形式で利用可能 　・サービスのセットアップも GUI から可能
41. （再掲） CUI→自動化しやすい・再現性高め GUI→簡略化しやすい・直感的
42. GUI(コンソール)を提供することで 裾野を広げられる
43. Cycloud における取り組み
44. どのようにコンソールを開発し 提供しているのか Cycloud を例にお話します
45. AKE Console
46. ML Platform Console・GPUaaS
47. IAM Console
48. 開発体制 初期：サービスのチームごとのエンジニアがコンソールを開発 ・Web フロントエンドエンジニア以外が作っていた ・サービスのニーズに合わせた独自の UI 実装 中期：Web フロントエンド専任のエンジニアが開発 ・あらゆるチームのコンソールをエンジニアがワンオペで開発 ・品質や UI を一定に統一
49. 現在の開発体制 Web フロントエンドチームが開発 ・エンジニア2名、マネージャーで開発 　・各サービスのオーナーやチームと連携 ・カスタマーサポートチームと同じ組織で活動 　・フィードバックの収集 　・需要調査
50. 現在の業務内容 初期 〜 中期に作られたコンソールのリプレイス ・フロントエンドチームで開発している SDK(後述) を用いたリプレイス 　・古い React や Vue.js が混在したプロジェクトを最新の Next.js で作り替え 　・UI の刷新 　・開発環境の改善 新規コンソール開発 ・SDK に内包されている生成ツールを用いて行う新規開発
51. UIの変遷 中期〜現在 初期
52. 初期 〜 中期の課題 独自の仕様や UI の乱立 ・サービスのニーズに合わせるがゆえのばらつき ・初期に作られたものをそのまま Web フロントエンドに引き継ぐ 機能追加以外の工数の増大 ・中期に UI こそ統一されたものの... 　・定期的な依存パッケージの更新 　・不具合修正 　・↑をワンオペするがゆえに機能追加に時間を割きづらい
53. 課題の解決 人員を増やす ・エンジニアを倍に！（1人→2人） ・コミュニケーションコストを減らすため、マネージャーが帯同 SDK の開発 ・不具合や脆弱性が見つかった場合の横展開を早める ・SDK のバージョンを上げるだけで更新できるように 　・コマンド1つなので、Web フロントエンドエンジニア以外でも対応可能
54. 内製している SDK とその周辺の ツールやライブラリを紹介します
55. SDK(SDK Client) コンソール開発向けのライブラリをまとめた SDK ・Org 向けに GitHub Packages で公開 ・個別にインストールして使える 　・段階的な導入向け ・Create Cycloud App という CLI ツールで 　一括セットアップも可能
56. SDK の例 - 1 Cycloud UI：Cycloud のブランディング向け UI ライブラリ
57. SDK の例 - 2 Cycloud Use: サービス共通のロジックを含む React Hooks
58. SDK の例 - 3 Cycloud APIs：Proto を元に生成する API クライアントの TypeScript
59. Create Cycloud App コマンド1つでコンソールを作成できる CLI ツール ・プロトタイピングや新規開発の補助 ・選択したテンプレートを元に作成 ・認証付き 実装方法 ・Go で CLI を実装 ・CPU Arch と OS ごとのバイナリにビルド ・TypeScript でバイナリをラップして NPM Package として配布
60. コマンドにより以下が実行される ・テンプレートの clone ・依存パッケージのインストール Create Cycloud App の使用例 - 1
61. サーバーを立ち上げてブラウザからアクセス Create Cycloud App の使用例 - 2
62. ログイン後 Create Cycloud App の使用例 - 3
63. 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
64. moldable の使用例 - 1 プロンプトの質問に回答
65. moldable の使用例 - 2 上と回答の内容を元に下のソースコードを生成
66. これらを組み合わせれば Web フロントエンドのベスプラを 誰でも体現できる！ かも...
67. 併せて行っていること - 1 モブプロ ・毎週 2 ~ 3 時間で実施 ・非同期的なコミュニケーションを避け、開発効率の向上 ・内容 　・Figma のデザインレビュー 　・Figma のデザインを SDK に反映 　・SDK の運用改善
68. 併せて行っていること - 2 SDK 勉強会 ・Web フロントエンド以外のエンジニアが、プロトタイピングできるように実施 　・所要時間 30 分 　・CIU の エンジニア対象 ・内容 　・環境構築 　・Create Cycloud App の説明 　・ローカルで認証付きのコンソール生成
69. 併せて行っていること - 3 輪読会 ・CIU ~ グループIT推進本部の Web フロントエンド知識の底上げ 　・毎週 30 分で実施 ・内容 　・TypeScript 関連の技術書の輪読と問題演習 　・テスティングライブラリの Docs の輪読 　・エラーレポートサービスの Docs の輪読
70. おわりに
71. 今日お話すること クラウドサービスに わざわざ GUI のコンソールを つける意味
72. 今日お話すること クラウドサービスに わざわざ GUI のコンソールを つける意味 = 新たなユーザー層の獲得と定着
73. まとめ 今まではクラウド入門者向け ・GUI はいずれ CUI に移行する間の繋ぎ ・バックエンドの質がそのままサービスの質になっていた これからは ML エンジニアや非エンジニア向け ・AI ブームによる GUI を多用する層の流入 ・フロントエンドの質も重要に
74. 今後の展望 よりユーザーに寄り添う ・オンプレや各社のマネージドサービスに対する理解 ・AI に対する理解 ・UI/UX 向上に向けた検証と実践 Web フロントエンドの敷居を下げる ・サービスに深くコミットしているエンジニアが Web も作れるように ・SDK の改善や勉強会の継続
75. WE ARE HIRING!! 💼
76. ありがとうございました