Dear Great Hackers

  1. イベント
  1. タイアップ

すべては最高の顧客体験のために。人気eスポーツテーマパーク「RED゜TOKYO TOWER」CTOと語り合う「アプリケーション開発の攻めと守り」

「【Qiita×Okta Developer Meetup】アプリケーション開発の攻めと守り」イベントレポート

「ただひたすらに、開発者のために」。Oktaが提供する認証システム「Okta Customer Identity Cloud(以下、Okta CIC)」は、多くの企業に導入されてきました。
2023年4月にオープンし注目を浴びている日本最大規模のeスポーツのテーマパーク「RED゜TOKYO TOWER(レッド トーキョータワー)」を運営するTEG株式会社(以下、TEG)も、Okta CIC導入企業のひとつです。

OktaとQiitaは、TEGのCTOである小林 学氏をゲストにお招きし、2023年4月26日(水)に開発者向けイベント「アプリケーション開発の攻めと守り」を共同開催しました。

TEGはなぜOkta CICを選んだのか、導入によってどのような効果や反響があったのか。Oktaのソリューションエンジニアリングマネージャーである岩崎 輝之氏、Qiitaのプロダクトマネージャーである清野 隼史との3名による対談の中で、伺いました。

登壇者プロフィール

小林 学(こばやし まなぶ)
TEG株式会社 CTO
富士通、リンクアンドモチベーション、アスクルなどで情報システム開発を行い、情報戦略テクノロジー創業、取締役就任。自動車関連SaaSのブロードリーフで常務執行役員開発本部長を務め、クラウドプラットフォーム、新プロダクトの開発を推進。

 

岩崎 輝之(いわさき てるゆき)
Okta Japan株式会社 ソリューションエンジニアリングマネージャー
20年以上にわたりWebシステムのエンジニアリングに携わり、大企業・スタートアップ・日系企業・外資系企業など様々な形態の組織でプリセールスから要件定義、プロジェクトマネージメント、設計開発、テスト、デプロイ、運用まで、システム開発に関わる各業務を経験。

 

清野 隼史(きよの としふみ)
Qiita株式会社 プロダクト開発部 Qiita開発グループ マネージャー
アルバイトを経て、2019年4月にIncrements(現 Qiita株式会社)へ新卒入社。入社後はQiita、Qiita Jobsのプロダクト開発や機能改善等を担当。2020年1月からQiitaのプロダクトマネジメントとメンバーのマネジメントを行う。

プロジェクションマッピングのボルダリングなど。ユニークなアトラクションが集まるRED° TOKYO TOWER

清野 隼史(以下、清野):TEGは今年3月にリニューアルオープンした日本最大規模のeスポーツテーマパーク「RED゜TOKYO TOWER」を運営しています。はじめにRED° TOKYO TOWERの概要をお教えいただけますか。

小林 学氏(以下、小林):RED° TOKYO TOWERはeスポーツのアトラクションを提供するテーマパークです。床にグラフィックが投影される新感覚のスポーツゲームや、プロジェクションマッピングを使ったボルダリング、ARやVRを使用したeスポーツなど、30種類ほどのアトラクションがあります。昨今ではインバウンド需要も戻ってきており、1日あたり1,000〜3,000人ほどのお客さまにご来場いただいています。

RED° TOKYO TOWERのシステムは、お客様情報、認証、マーケティング、BI(Business Intelligence)といった「共通」部分、チケットや施設といった「リアル」、そしてECやトークン、コンテンツ、メタバースといった「バーチャル」の3要素からなります。コロナ以降に作った会社ということもあり、当初からリアルだけではなくバーチャルも含めたサービス設計を行いました。同時にめざしているのは、グローバルなサービス展開です。東京タワーという場所を選んだのも、海外からいらっしゃるお客様に認知していただくためでした。RED° TOKYO TOWERで楽しんだ日をきっかけに、国境を越えてバーチャルでも長くつながっていける。そんな広がりをイメージしています。

清野:TEGが手がけているのは、どのようなシステムでしょうか。

小林:RED゜TOKYO TOWERの上で説明している、チケット販売システムや各施設の管理システムのほか、左下の写真にあるRED゜E-SAUNAのサウナに関連するシステムなどもあります。腕時計のようなバンドをつけてサウナに入ると心拍などが表情され、「ととのった」瞬間がわかるというものです。

また、RED° TOKYO TOWERはトークンを発行して資金調達をしていることから、トークンのウォレットもあります。ほかにもアニメやゲームとのコラボレーションに使うコンテンツ管理システムや、来場後にも楽しめるメタバースのシステムなど、様々なシステムを提供したり、企画したりしています。

いずれのシステムもOkta Customer Identity Cloud(以下、Okta CIC)を認証のコアとし、Okta CICを経由してサービスをお使いいただくという形になっています。認証についてはOkta CICを導入すると当初から決めていました。オープンまでの時間が限られていたということもあり、限られたリソースをスクラッチ開発の作業に注力したかったからです。

清野:多種多様なサービスがあるのですね。一般的なWebサービスとは作りが違うように感じましたが、特有の事情やこだわりはありますか。

小林:人気のイベントがあると、最大で秒間2000くらいのトランザクションがあります。こうした一瞬の高い負荷に対応できるかどうかは、当初から配慮していました。同時に「自分たちで作らない部分」をシビアに選別してパッケージやSaaSを積極的に取り入れることで、コア部分以外にかける作業工数を減らすことにも注力しました。

「守りの開発」でサービス品質を保つことの難しさ

清野:ありがとうございます。ここからはTEGでの開発について詳しく伺っていきます。イベントのテーマにもありますが、TEGにおける「攻めの開発」と「守りの開発」とは、どのようなものでしょうか。

小林:「攻めの開発」は「顧客体験に関わる開発」です。テーマパークは、日常から離れて非日常を体験できる場所だと思います。特に海外からのお客さまにとっては、本当にその1回きりかもしれないという非日常。ですから、とにかく特別な体験を持って帰っていただきたいという思いでサービスを開発しています。

一方で「守りの開発」は、やはりインフラの部分です。認証やBIなどがそれにあたります。重要だけれども顧客体験とは関連が薄い部分なので、既存サービスを有効活用して作っていくという方針です。しかし「守り」であっても最低限担保しなければならないラインはあるし、スポンサー企業の事情などで高品質のサービス開発を求められることもあるものです。

ですので、Okta CICのような外部サービスを導入しながら、サービスごとに主担当のエンジニアを決め、作業量を見ながら柔軟にチーム編成を行っています。この仕組みによってエンジニアが担当外のサービスについてのナレッジも身に付けられるようになり、組織全体がうまく回り始めてきたのを感じています。

清野:TEGではそのようにOkta CICを活用されているのですね。これは岩崎さんに伺いたいのですが、Okta CICの導入を検討している企業はどのような課題を持っているのでしょうか。

岩崎 輝之氏(以下、岩崎):TEGのような「作りたいものに対して時間が足りない」という課題は他企業にもあります。

しかしエンジニアを雇うことには限界がありますし、ましてや認証はセキュリティにも関わる重要な部分で、それなりのスキルをもつ人材にしか任せられません。そして自社のそういう人材には、できればコア部分の開発を担当してもらいたい。そういうジレンマに陥っている企業が多い印象です。

そこで外部に任せられるところは任せようという、考えに至るわけです。TEGは早い段階で導入してくださいましたが、ある程度の期間サービスを運営してから導入されるパターンもあります。肌感では半々くらいの割合でしょうか。

小林:初期からOkta CICを導入したおかげで開発コストや時間を削減できて、本当によかったです。私からも岩崎さんにお聞きしたいのですが、Oktaとして特にどのような課題の解決を意識しているのでしょうか。

岩崎:ID管理のソリューションとひと口に言っても、その領域は広範にわたります。
その中でOkta CICは、実際に組み込んだり運用したりしたときに、開発者がストレスなく使えるサービスを提供するという考え方が根底にある開発者のためのプラットフォームです。

認証部分の開発はコア業務でないにも関わらず、すごく大変だと思うんです。一度開発すれば終わりというわけではなく、サービスごとに設定を変えなければいけない部分も多くあります。それでいてユーザーが求めるレベルも高く、認証まわりがしっかりしていないと「危ないサービスだ」という烙印を押されかねません。この難題をいとも簡単に解決するOkta CICは、非常に価値あるサービスだと思っています。

清野:前回のイベントでユーヘニオさんが「しんどいところをなくしていくことが自分たちのミッションだ」ということをおっしゃっていたのですが、まさにそのミッションを実現しようとしているのだと感じました。ここで改めてTEGの「守りの開発」について伺います。Okta CICの効果を感じたエピソードがあれば教えてください。

小林:人気YouTuberとのコラボレーションイベントを開催したとき、前売り券の販売を始めるとすぐに秒間1000アクセスを記録し、サーバーが負荷に耐えきれずにスローダウンしてしまい障害対応を迫られました。経験がある人ならおわかりいただけると思いますが、障害対応は対象が増えれば増えるほど大変になります。

その点Okta CICを入れていたおかげで、サービス部分を切り分けて効率よく障害対応できました。このような点も意識して設計されたのですか。

岩崎:そうですね。開発者の不安を少しでも減らすという観点から、負荷のスケーラビリティオプションをいくつか提供しています。

標準的なオプションは秒間100リクエストです。秒間100リクエストは「B2Bのサービスにおけるログインそのものの処理は問題なく行える」状態をイメージしていただければと思います。その上で6,000リクエストまで認証処理できるようになっているので、これならどれだけ大量のアクセスがあっても、安心していられますよね。どんなユースケースでも、開発者が安心できる。それがOkta CICが提供する価値だと考えています。

Okta CICにおいて私たちが特に意識しているのは、セキュリティとユーザー体験の両立です。セキュリティを強化するとユーザーが使いにくくなり、離れていってしまうケースは多々あります。セキュリティを高めつつ、いかにユーザビリティも維持するか。それが課題になるでしょう。

「攻め」はアート、「守り」はサイエンス。両立が難しいからこそOkta CICが必要

清野:ここまで主に「守り」について伺ってきましたが、今度は「攻め」についても伺いたいです。Okta CICは「攻めの開発」もエンパワーメントしてくれているのでしょうか。

小林:「攻めの開発」はアート、「守りの開発」はサイエンス。そんな側面があると、私は思っています。

それぞれがまったく別の才能なので、攻めと守りの両方を1人でこなせる人はそうそういません。Okta CICを取り入れたことでサイエンスの部分を任せ、開発者がアートの力を磨くことに注力できました。結果として、リソースの多くを「攻め」に割けたと思っています。また、Okta CICを入れたことで再認証が必要なくなりました。ここは顧客体験に大きく関わる部分なので、うれしいですね。

岩崎:Okta CICはシングルサインオンですので、一度ログインすれば関連アプリケーション内での再認証は必要ありません。モバイルアプリからWebに移るときにまたログインが必要だと全然使いやすくないと思うんですよ。そのためOkta CICは、リリース当初からシングルサインオンを採用していました。

また1つの会社でも複数のサービスがある場合に、開発チームごとに異なる言語で開発しているケースはよくあります。これを統合するのは結構大変なんですよね。Okta CICなら、そういったケースでも問題なくシングルサインオンを実現できます。

清野:会社内で別の組織もプロダクトを作っている場合、その上にもう1つ統合された組織がないと認証周りもバラバラになってしまいがちです。外部のサービスを使うことでそれらを統合していくというのは、1つのアプローチとしてアリなのかなと感じました。Oktaが今後めざしている認証基盤としての形は、どのようなものですか。

岩崎:プロダクトチームでは「パスワードをなくすこと」をめざしています。もともとOkta CICは「アイデンティティをユーザーのものにする」を掲げて開発を進めてきました。セキュリティのためにはサービスごとにパスワードを変えるのが一番ですが、なかなかそうもいかない現状があります。Okta CICをお使いいただくことで、その壁を越えられるようにしたいと思っています。

清野:ITリテラシーの高い人は、パスワードジェネレーターなどを使って個々のサービスのパスワードを管理していますよね。でも、結局パスワードを一度は入力しなければならないという手間はある。Okta CICがめざすのはパスワードジェネレーターすらいらない世界ということで、お話しを聞いていてすごく面白そうだなと感じました。

岩崎:より多くの人々の問題を解決し、ユーザー体験をよくしていきたい。それが我々のビジョンです。ITリテラシーの高い人だけでなく、スマホを使うのも苦労するという人も守りたいんです。Okta CICを通じて、世界の大半の人たちがWebサービスを安全に使える世界を実現できたらいいなと思っています。

清野:TEGとして、今後顧客管理において作っていきたい体験はどのようなものですか。

小林:マイページ統合を実現したいですね。現状ではチケットの購入履歴とECを完全に統合できていないですし、将来的にはトークンを購入してご入場いただいたり、eスポーツの大会の賞金をトークンでもらって、メタバース内でそのトークンを使ってもらったりというようにユーザー体験の幅を広げていきたいと思っています。先ほど岩崎さんがおっしゃったようにパスワードがなくなれば、遊んだアトラクションのスコアが顔認証でマイページに反映されたり、そこで出会った別の国の人とメタバース上でつながれたりという未来もあるかもしれませんよね。

Okta開発者が教える「Okta CICデモンストレーション」

対談を聞く中で、Okta CICを試してみたいと思った方もいることでしょう。より開発のイメージをしやすくなるよう、実際の画面を見ながらのデモンストレーションもイベントで行われました。ここではそのエッセンスをまとめましたので、トライアルの際などにご活用ください。

登壇者プロフィール

岩崎 輝之(いわさき てるゆき)
Okta Japan株式会社 ソリューションエンジニアリングマネージャー
20年以上にわたりWebシステムのエンジニアリングに携わり、大企業・スタートアップ・日系企業・外資系企業など様々な形態の組織でプリセールスから要件定義、プロジェクトマネージメント、設計開発、テスト、デプロイ、運用まで、システム開発に関わる各業務を経験。

外部アプリケーションの構築

本日行うのは、Okta CICの新しい環境テナントにカスタムアプリケーションを連携させていく場面のデモンストレーションです。まずGlitch(グリッチ)というサービスで設定を行います。

早速auth.rocksというWebアプリケーションを立ち上げて、設定を進めていきましょう。このときあとで自由に使えるように、メモアプリなどに設定値を保存しておくと便利です。

次はSPAの連携です。Glitch上にアプリケーションを作る必要があるので、元になるテンプレートからリミックスしていきましょう。Glitchのサインアップが完了したらhttps://glitch.com/~authrocks-cic-ui-templateへアクセスし、「Remix your own」をクリックします。リミックスが終わったら、わかりやすいプロジェクト名を付けておきましょう。

次はプレビューです。画面下の「TOOLS」→「Preview in a new window」をクリックし、この画面のURLをコピーしてメモアプリなどに保存しておきましょう。

Okta CICアプリケーションの設定

続いてOkta CICのアプリケーションの設定です。CICの管理者画面で「Applications」→「Applications」→「+ Create Application」の順にクリックします。こちらにもわかりやすい名前をつけ、「Single Page Web Applications」を選択して「Create」をクリックしていきます。このとき「Settings」タブで表示された「Domain」と「Client ID」をコピーして、メモアプリなどに一時保存しておいてください。

そのままスクロールダウンして、「Allowed Callback URLs」と「Allowed Logout URLs」に、glitchで生成したWebアプリケーションのURLを入力しておきましょう。その後さらにスクロールダウンして「Allowed Callback URLs」と「Allowed Logout URLs」にGlitchで生成したWebアプリケーションのURLを入力しておきます。

さらにスクロールダウンして、「Advanced Settings」の下の「Grants」で「Implicit」と「Refresh Token」のチェックを外し、「Save Changes」をクリックします。ここまでが、Glitchで作ったアプリケーションと接続するための設定です。

外部アプリケーションの設定とカスタムAPIの設定

次はGlitchにデプロイしたWebアプリケーション側の設定を変更していきます。変更するのは「auth_config.json」というファイルです。Okta CIC管理画面「Applications」→「Applications」→「AuthRocks」で表示された「Settings」タブの値をコピーすると、変更は自動保存されます。これでOkta CICとGlitchにデプロイしたWebアプリケーションとの連携が完了しました。

Okta CICと外部アプリケーションとの連携を確認してみましょう。ここでは、このアプリケーションに初めてサインアップするユーザーを想定します。まず外部アプリケーションにアクセスし、「Log in」→「Sign Up」をクリック。任意のメールアドレスとパスワード(任意)を入力して、「Continue」をクリックします。外部アプリケーションにサインアップできたら、Okta CICの管理画面の「Monitoring」→「Logs」で連携の詳細を確認できます。

次はカスタムAPIの設定です。まず管理画面の「Create API」をクリックし、新しいAPIの名前を設定しましょう。「Create」をクリックすると、詳細の設定画面に移ります。「Settings」のタブで「Enable RBAC」を有効にして保存します。これでカスタムAPIの設定は一旦終了です。

APIアプリケーションの設定とUI・APIの連携

今度はGlitchのAPIアプリケーションという、先ほどとは違うアプリケーションを設定していきたいと思います。まずわかりやすいアプリケーション名をつけ、先ほどと同様にプレビューから新しいウィンドウで表示します。このURLをコピーして、メモアプリなどに一時保存しておきましょう。保存されたら、次はGlitchのAPIアプリケーションを操作します。

編集に使うのは「domain」「audience」「permission」という3つの場所で、CICのドメインです。それぞれの情報をコピーして保存したら、GlitchのAPIアプリケーションの設定は終了です。

次はUIとAPIをつないでいきます。APIアプリケーションからUIアプリケーションに移りましょう。「index.html」というファイル内の「Base API URL」にGlitchで生成したWebアプリケーションのURLをコピーし、設定を完了します。設定が完了したらメールアドレスとパスワードを入力してログインをし、連携を確認しましょう。

ここまでの作業でUIとAPIがつながったため、「Public API」を呼ぶと問題なく帰ってきています。「Public API」とは別に「Private API」というものもあり、Access APIをさらに設定していくと呼び分けができるようになっていきます。

管理画面ではほかにも画面全体の色合いやボタンの形といった細かいカスタマイズや、多要素認証生体認証をはじめとするセキュリティ設定も行えます。このように様々な機能を管理画面から設定でき、外部アプリケーションとの連携も簡単にできるというのが、Okta CICの特徴です。

auth.rocksの公式HPページを見る

編集後記

単に開発作業を効率化するというだけでなく、ユーザー体験の改善や複数サービスの統合、組織のスムーズな連携といった様々な新しい価値を創出するOkta CIC。導入企業であるTEG・小林氏のコメントは、ビジネスシーンにおけるその可能性をあらためて感じさせるものでした。Okta CICを認証基盤にコア業務に打ち込むTEG、そしてRED゜TOKYO TOWERの今後にもますます期待が膨らみます。

取材/文:株式会社Tokyo Edit

関連記事