Tweet
Tweet

Slide 1

Slide 1 text

なぜクラウドサービスで Web コンソールを 提供するのか 2024/09/07 Web Developer Conference 2024 Hirai shuta

Slide 2

Slide 2 text

1.はじめに 2.CUI と GUI 3.大衆化するクラウド 4.Cycloud における取り組み 5.おわりに

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

はじめに

Slide 5

Slide 5 text

本資料で登場する 言葉の定義を整理します

Slide 6

Slide 6 text

did0es Hirai Shuta のハンドルネーム ・右のアバターで活動している場合の名称 ・did0es の発音は「ディドス」 由来は本人も忘れてしまった

Slide 7

Slide 7 text

クラウドサービス ネットワーク経由で利用できるITリソースを提供しているサービス ・パブリッククラウド ・プライベートクラウド 以下はクラウドサービスの例 ・Amazon Web Service ・Google Cloud ・Microsoft Azure

Slide 8

Slide 8 text

グループ IT 推進本部 IT技術を用いてサイバーエージェントグループの 課題解決や事業サポートを行う組織 ・データ、インフラ、セキュリティ、コーポレートIT等 詳細：https://it.cyberagent.group

Slide 9

Slide 9 text

CIU CyberAgent group Infrastructure Unit の略称 ・グループ IT 推進本部配下の事業部 サイバーエージェント全体のインフラを支える組織 ・プライベートクラウドの展開 ・パブリッククラウドを利用している事業部の支援 詳細：https://it.cyberagent.group/team/ciu

Slide 10

Slide 10 text

Cycloud CIU が展開しているプライベートクラウドブランド これを基盤とするマネージドサービスも提供している ・例 　・AI 活用向けの GPUaaS, ML Platform 　・KaaS としての AKE 　・IaaS としての OpenStack ・サービスは20種類以上

Slide 11

Slide 11 text

Web コンソール Web ブラウザから利用できるクラウドサービスの GUI コンソール ・サービスのユーザーが利用する ・CLI(CUI) と同等かそれ以上の操作ができる

Slide 12

Slide 12 text

CUI と GUI

Slide 13

Slide 13 text

今日お話すること

Slide 14

Slide 14 text

今日お話すること クラウドサービスに わざわざ GUI のコンソールを つける意味

Slide 15

Slide 15 text

ちなみに CUI ≠ CIU 左は Character User Interface の略称 右は CyberAgent group Infrastructure Unit の略称

Slide 16

Slide 16 text

そもそも CUI と GUI って 何がどう違うんだろう？ 🤔

Slide 17

Slide 17 text

例を2つ挙げます

Slide 18

Slide 18 text

① プログラミング（CUI） FizzBuzz を JavaScript で実装

Slide 19

Slide 19 text

① プログラミング（GUI） FizzBuzz を Scratch で実装

Slide 20

Slide 20 text

CUI の方がやりやすい かも...

Slide 21

Slide 21 text

② 動画の編集（CUI） FFmpeg でトリミングして DVD 向けに書き出し

Slide 22

Slide 22 text

② 動画の編集（GUI） Final Cut Pro でトリミングして DVD 向けに書き出し 動画: https://vimeo.com/243314781 ©beeple

Slide 23

Slide 23 text

GUI の方がやりやすい かも...

Slide 24

Slide 24 text

ユースケースを元に CUI と GUI を比較してみよう 💡

Slide 25

Slide 25 text

CUI が求められる場面 - 1 再現性を求めるとき ・一連の操作をコマンドの組み合わせでまとめられる 　・まとめて人に共有 　・対話型でない場合に限るが、コピペで再現 ・リソースが限られた環境でも操作できる 　・老朽化の進んだハードウェア 　・組み込みデバイス

Slide 26

Slide 26 text

CUI が求められる場面 - 2 自動化するとき ・同じ操作を繰り返せる 　・反復処理 　　・手動で処理するには大きなデータ向け 　・定期実行 　　・バッヂ処理やスケジューラ向け

Slide 27

Slide 27 text

GUI が求められる場面 - 1 複雑な操作をするとき ・視覚的なフィードバックを得られる 　・処理の途中経過の表示 　・数値や文字列をグラフ化 ・コマンドを簡略化できる 　・UI が複数のコマンドを1セットとして保持 　・いわゆるポチるだけ

Slide 28

Slide 28 text

GUI が求められる場面 - 2 直感的に操作したいとき ・操作を簡略化できる 　・マルチメディアの作成や編集 ・初心者でも一定の操作ができる 　・日頃 PC を使わないユーザー 　・初めての技術分野に触れるエンジニア

Slide 29

Slide 29 text

CUI→自動化しやすい・再現性高め GUI→簡略化しやすい・直感的

Slide 30

Slide 30 text

大衆化するクラウド

Slide 31

Slide 31 text

今に始まった話ではないが クラウドの需要は年々拡大している

Slide 32

Slide 32 text

市場規模の推移 出典：「令和６年版情報通信白書」（総務省）より引用 https://www.soumu.go.jp/johotsusintokei/whitepaper/ja/r06/html/nd218200.html#s182

Slide 33

Slide 33 text

なぜ需要が拡大しているのか （おそらく）以下は耳タコレベルで言われている ・脱オンプレ ・メンテナンスやセキュリティ面のコストカット ・可用性の向上 しかし、近年の需要の拡大はこれだけが理由ではない

Slide 34

Slide 34 text

AIを活用する場面の増加 🤖

Slide 35

Slide 35 text

AI の大衆化 PC さえあれば誰でも手の届くものになった ・機械学習向けのライブラリや Jupyter Notebook のような Web 実行環境の充実 ・手法や数式を実装に落とし込むまでが簡略化 LLM の登場による生成 AI の普及 ・プロンプトエンジニアリングの登場 ・非エンジニアも AI に触れるようになった

Slide 36

Slide 36 text

AIとクラウド 機械学習をクラウド上で回すためのサービスが台頭 ・（強めの）ローカルマシンが必要だったものを肩代わり 前処理やデータセット構築の簡略化 ・クラウドで前処理やデータセットの構築も行うように AI 関連サービスのホスティング ・構築したモデルを用いたサービスや API の公開

Slide 37

Slide 37 text

クラウドのユーザーの変化 これまで ・エンジニア 　・インフラ 　・バックエンド 　・フロントエンド

Slide 38

Slide 38 text

クラウドのユーザーの変化 これまで ・エンジニア 　・インフラ 　・バックエンド 　・フロントエンド 現在 ・既存のエンジニア ・ML エンジニア 　・機械学習やデータの処理に用いる ・ビジネスサイド 　・プロトタイピングに用いる

Slide 39

Slide 39 text

AI の普及とあわせて クラウドとユーザーの距離感が 近くなった

Slide 40

Slide 40 text

クラウドの提供サービスの変化 CUI ベースから GUI の拡充へ ・例：SageMaker Notebooks, Vertex AI Workbench 　・Jupyter Notebook ベースの Web UI を採用 　・ML エンジニアが慣れている形に 非エンジニア向けのクラウドサービスの提供 ・例：GTP-4(Azure OpenAI Service), Imagen(Google Cloud) 　・対話形式で利用可能 　・サービスのセットアップも GUI から可能

Slide 41

Slide 41 text

（再掲） CUI→自動化しやすい・再現性高め GUI→簡略化しやすい・直感的

Slide 42

Slide 42 text

GUI(コンソール)を提供することで 裾野を広げられる

Slide 43

Slide 43 text

Cycloud における取り組み

Slide 44

Slide 44 text

どのようにコンソールを開発し 提供しているのか Cycloud を例にお話します

Slide 45

Slide 45 text

AKE Console

Slide 46

Slide 46 text

ML Platform Console・GPUaaS

Slide 47

Slide 47 text

IAM Console

Slide 48

Slide 48 text

開発体制 初期：サービスのチームごとのエンジニアがコンソールを開発 ・Web フロントエンドエンジニア以外が作っていた ・サービスのニーズに合わせた独自の UI 実装 中期：Web フロントエンド専任のエンジニアが開発 ・あらゆるチームのコンソールをエンジニアがワンオペで開発 ・品質や UI を一定に統一

Slide 49

Slide 49 text

現在の開発体制 Web フロントエンドチームが開発 ・エンジニア2名、マネージャーで開発 　・各サービスのオーナーやチームと連携 ・カスタマーサポートチームと同じ組織で活動 　・フィードバックの収集 　・需要調査

Slide 50

Slide 50 text

現在の業務内容 初期 〜 中期に作られたコンソールのリプレイス ・フロントエンドチームで開発している SDK(後述) を用いたリプレイス 　・古い React や Vue.js が混在したプロジェクトを最新の Next.js で作り替え 　・UI の刷新 　・開発環境の改善 新規コンソール開発 ・SDK に内包されている生成ツールを用いて行う新規開発

Slide 51

Slide 51 text

UIの変遷 中期〜現在 初期

Slide 52

Slide 52 text

初期 〜 中期の課題 独自の仕様や UI の乱立 ・サービスのニーズに合わせるがゆえのばらつき ・初期に作られたものをそのまま Web フロントエンドに引き継ぐ 機能追加以外の工数の増大 ・中期に UI こそ統一されたものの... 　・定期的な依存パッケージの更新 　・不具合修正 　・↑をワンオペするがゆえに機能追加に時間を割きづらい

Slide 53

Slide 53 text

課題の解決 人員を増やす ・エンジニアを倍に！（1人→2人） ・コミュニケーションコストを減らすため、マネージャーが帯同 SDK の開発 ・不具合や脆弱性が見つかった場合の横展開を早める ・SDK のバージョンを上げるだけで更新できるように 　・コマンド1つなので、Web フロントエンドエンジニア以外でも対応可能

Slide 54

Slide 54 text

内製している SDK とその周辺の ツールやライブラリを紹介します

Slide 55

Slide 55 text

SDK(SDK Client) コンソール開発向けのライブラリをまとめた SDK ・Org 向けに GitHub Packages で公開 ・個別にインストールして使える 　・段階的な導入向け ・Create Cycloud App という CLI ツールで 　一括セットアップも可能

Slide 56

Slide 56 text

SDK の例 - 1 Cycloud UI：Cycloud のブランディング向け UI ライブラリ

Slide 57

Slide 57 text

SDK の例 - 2 Cycloud Use: サービス共通のロジックを含む React Hooks

Slide 58

Slide 58 text

SDK の例 - 3 Cycloud APIs：Proto を元に生成する API クライアントの TypeScript

Slide 59

Slide 59 text

Create Cycloud App コマンド1つでコンソールを作成できる CLI ツール ・プロトタイピングや新規開発の補助 ・選択したテンプレートを元に作成 ・認証付き 実装方法 ・Go で CLI を実装 ・CPU Arch と OS ごとのバイナリにビルド ・TypeScript でバイナリをラップして NPM Package として配布

Slide 60

Slide 60 text

コマンドにより以下が実行される ・テンプレートの clone ・依存パッケージのインストール Create Cycloud App の使用例 - 1

Slide 61

Slide 61 text

サーバーを立ち上げてブラウザからアクセス Create Cycloud App の使用例 - 2

Slide 62

Slide 62 text

ログイン後 Create Cycloud App の使用例 - 3

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

moldable の使用例 - 1 プロンプトの質問に回答

Slide 65

Slide 65 text

moldable の使用例 - 2 上と回答の内容を元に下のソースコードを生成

Slide 66

Slide 66 text

これらを組み合わせれば Web フロントエンドのベスプラを 誰でも体現できる！ かも...

Slide 67

Slide 67 text

併せて行っていること - 1 モブプロ ・毎週 2 ~ 3 時間で実施 ・非同期的なコミュニケーションを避け、開発効率の向上 ・内容 　・Figma のデザインレビュー 　・Figma のデザインを SDK に反映 　・SDK の運用改善

Slide 68

Slide 68 text

併せて行っていること - 2 SDK 勉強会 ・Web フロントエンド以外のエンジニアが、プロトタイピングできるように実施 　・所要時間 30 分 　・CIU の エンジニア対象 ・内容 　・環境構築 　・Create Cycloud App の説明 　・ローカルで認証付きのコンソール生成

Slide 69

Slide 69 text

併せて行っていること - 3 輪読会 ・CIU ~ グループIT推進本部の Web フロントエンド知識の底上げ 　・毎週 30 分で実施 ・内容 　・TypeScript 関連の技術書の輪読と問題演習 　・テスティングライブラリの Docs の輪読 　・エラーレポートサービスの Docs の輪読

Slide 70

Slide 70 text

おわりに

Slide 71

Slide 71 text

今日お話すること クラウドサービスに わざわざ GUI のコンソールを つける意味

Slide 72

Slide 72 text

今日お話すること クラウドサービスに わざわざ GUI のコンソールを つける意味 = 新たなユーザー層の獲得と定着

Slide 73

Slide 73 text

まとめ 今まではクラウド入門者向け ・GUI はいずれ CUI に移行する間の繋ぎ ・バックエンドの質がそのままサービスの質になっていた これからは ML エンジニアや非エンジニア向け ・AI ブームによる GUI を多用する層の流入 ・フロントエンドの質も重要に

Slide 74

Slide 74 text

今後の展望 よりユーザーに寄り添う ・オンプレや各社のマネージドサービスに対する理解 ・AI に対する理解 ・UI/UX 向上に向けた検証と実践 Web フロントエンドの敷居を下げる ・サービスに深くコミットしているエンジニアが Web も作れるように ・SDK の改善や勉強会の継続

Slide 75

Slide 75 text

WE ARE HIRING!! 💼

Slide 76

Slide 76 text

ありがとうございました