音声書き起こし
1. オープニング
@potato4d
こんにちは、UIT の potato4d です。ユーザーインターフェースとテクノロジーを愛する開発者のためのポッドキャスト、UIT INSIDE、今回もやっていきたいと思います。今回はですね、ゲストに栗原さんをお招きして、社内での HTML ホスティングのサービスである Glass についてお話をお伺いしたいと思います。
@potato4d
栗原さん、よろしくお願いします。
2. ゲスト自己紹介
@yuji.kurihara
はい、こんにちは。栗原と申します。私は2020年にLINE株式会社、現LINEヤフーに新卒入社しまして、その後サービス終了してしまったんですけども、LINE LIVE および LIVEBUYというサービスのフロントエンド開発を経まして、
@yuji.kurihara
現在はLINEのショッピングタブの開発に従事しておりまして、主にバックエンドの領域を担当してます。よろしくお願いいたします。
@potato4d
はい、よろしくお願いいたします。栗原さんはまさにLINE LIVE や LIVEBUY の頃に、5年ほど前にUIT INSIDEに出演していただいて以来、かなり久々となるので、ちょっとやってることも変わってるかなとは思うんで、
@yuji.kurihara
そうですね。
@potato4d
ぜひお話をお伺いできればなと思います。
@yuji.kurihara
はい、よろしくお願いします。以前は何でしたっけ、BFFとかその辺の、フロントエンドエンジニアが Kubernetesを身につける理由みたいな話をしてるので、もし興味があれば、ちょっとトレンドも変わってきてますけども、お聞きいただければ幸いです。
@yuji.kurihara
よろしくお願いします。
@potato4d
では、よろしくお願いいたします。それでは早速本題に移っていきたいなと思いますが、今回はですね、Glassという名称が付けられている、社員用のですね、HTMLのホスティングサービスというようなところを、栗原さんの組織で開発運用されている、
3. Glass とは — AI が生成した HTML を手軽に共有
@potato4d
というようなところなので、ちょっとお聞きしたいなと思っているんですけど、まずですね、ぜひUIT INSIDEをお聞きくださっている方向けにですね、簡単にサービスの紹介をいただいてもいいでしょうか？
@yuji.kurihara
はい、Glassというサービスなんですけども、こちらのHTMLのアップロードサービスと呼ばれると、皆さん思い浮かべるのは何ですかね？S3とか、はたまたレンタルサーバーみたいな、そういうものなのかなとか、
@yuji.kurihara
ディレクトリをマウントして何か保存するみたいなところなのかみたいな、いろいろお考えかなと思いますけども、簡単に申し上げますと、現在AIを活用していく中で、AIが吐き出す成果物というのを、AIが生成する成果物のHTMLをいかに楽にホスティングするか、
@yuji.kurihara
いかに第三者に提供するか、そういったことを第一に考えて開発したのが、Glassという社内サービスになっています。
@potato4d
かなりAIのアウトプットを迅速に、HTML形式で出力されたものを迅速にシェアするために作ったツールというか、サービスみたいな感じなんですかね？
@yuji.kurihara
今まででいうと、社内にはスタティックファイルをアップロードするようなCLIだとか、あとはもちろんS3互換のようなサービスがあったわけなので、オブジェクトストレージですね、そういったものにアップロードをしていけばよかったものなんですけども、
@yuji.kurihara
そうしたサービスを使う上で、やっぱりそのAIの成果物をアップロードしたりとなった時に、例えば何かしらのアップロードクライアントが必要だったりとか、さっき申しましたけど、そういう専用のCLIが必要だとか、
@yuji.kurihara
あとは認証キーとかもどこに保存するかもありますよね。なので、そういったところをいかにライトに、MCP経由でアップロードさせるとか、そういうことを一番に考えて作っていったというのが、簡単な背景になりますね。
@potato4d
従来のオブジェクトストレージとかだと、ちょっとプリミティブすぎるというか、何でもできるように作られすぎてるんで、もっとインスタントにAIが出力した、例えばレポートであったりだとかを共有するために、手軽さみたいなところを売りに作っていたというようなところですね。
4. Glass の主な機能
@yuji.kurihara
簡単な機能の説明をしますと、まずはそのMCPでアップロードできますよねってところと、あとはですね、アップロードした内容を一覧で見ることができたりとか、上書きされないようなロック機能だったりとか、あとはそのURLのハッシュ、
@yuji.kurihara
推測が難しいようなURLを生成したりだとか、あとはそのアップロードしたHTMLをグルーピングして、横に並べるみたいな仕組みがありまして、一つのURLで複数のHTMLを俯瞰してみることができるというものなんですね。
@yuji.kurihara
そういった機能をユーザーに提供しています。それらの機能がなぜ追加されたかっていうのは、また後ほどお伝えできればなと思います。
@potato4d
ありがとうございます。そうですね、まずせっかくなんで、今ちょうどAIって話ができたかなと思うんで、開発の背景みたいなところから詳しく深掘りさせていただきたいなと思ってるんですけど、やっぱりあれですかね、ここのところ、ここ半年から1年ぐらいでよりトレンドが顕著になってきたかなと思いますけど、
5. 開発の背景 — Markdown から HTML へ
@potato4d
やっぱりAIに吐き出させるのがだんだんマークダウンみたいな表現力が低いものから、HTMLみたいなリッチなものに移り変わっていく中で、そのままSlackに貼るとかはさすがにきついよねみたいなところから、開発が始まった感じなんですかね？
6. 初代サービスと「開発者以外にも共有の手段を」
@yuji.kurihara
それもありますよね。最近はSlackもHTMLをプレビューする機能できましたけども、このGlassってサービスは2代目でして、実は2025年の12月ぐらいから1代目のサービスをやってました。それも簡易的なHTMLをアップロードしてシェアするみたいな機能だったんですね。
@yuji.kurihara
当時もまだモデルがだんだん成長してきて、HTMLに吐き出してもいいよねみたいな感じになってきた時だったんですよね。当時その我々、背景としては、開発者は最悪、
@yuji.kurihara
オブジェクトストレージにおけばシェアできたんですよ。でも我々がやりたかったのって、開発者以外の、普段オブジェクトストレージとかのアクセス権限がないような企画者だったりとか、デザイナーさんとかが、例えばGeminiとかCodexとか、
@yuji.kurihara
Claudeとかを使って、何かHTMLの成果物を作った時に、簡単にパブリッシュ、シェアする機能がなかったんですよね。なので、この簡単にHTMLをアップロードして、
@yuji.kurihara
URLをですね、生成してみんなにシェアするっていうのが最初の走りだったかなと思いますね。
@potato4d
結構生成すること自体はコモディティ化してきたけど、シェアするってなると、権限の問題であったり、やり方の問題であったりみたいなので、ハードルがあったところを一気に壊していきたいみたいなモチベーションで、開発が進んだ感じなんですね。
7. スクショではなく動く HTML で合意をとる
@yuji.kurihara
我々の会社も言えばスピード重視っていうところがありますから、今まではHTML作ったけど、スクショで見せられたりとかしてたんですよね。あとはファイルで共有とかですね。そうするとやっぱり、手軽ではあんまり見にくいじゃないですか。
@potato4d
そうですね。
@yuji.kurihara
あとはダッシュボードとか、例えばですよ、ダッシュボードのデザインを AIに作らせてみたりした時に、写真とかだと動きが見えないんですよね。なので、だんだんHTMLでリッチな形になってきた。その時に、どうシェアしていった方がいいかなってなった時に、
@yuji.kurihara
よりライトな、簡単にURLをシェアできるような仕組みを作りたいなと思って作ったのがきっかけだったかなと思いますね。
@potato4d
確かにHTMLでユーザーインターフェースみたいなところを表現していくと、UIだけじゃなく全体の手触り感というかUXまで含めて合意取りやすいですし、静止画とはかなり違う体験になりますよね。
8. 2代目で MCP・RESTful API に対応
@yuji.kurihara
違いますよね、そうなんです。なので当時はそういう流れだったんですけども、バージョン2という形でかなり利用者も出てきて、新しくこのGlassというのを作り直したわけですけども、そちらで今回のMCPだとか、
@yuji.kurihara
RESTful な APIアップロードみたいなのもサポートしたっていう形。
@potato4d
初めはもっと開発者以外も使うようなところから始まって、後からこの開発ツールフレンドリーな要素が増えてきたみたいな感じなんですね。
9. ソーシャルコマースの AI 活用とハンズオン
@yuji.kurihara
そうなんですよね。当時はコピーペーストでできるみたいな、プレイペーストすると生成されるみたいな感じだったんですけど、今はですね、私が働いているソーシャルコマースという部署では、ちょっと宣伝にはなってしまうんですけど、つい最近note を公開しまして、
@yuji.kurihara
大体ですね、何人かは言えないんですけども、すごい多くの人数の方にAIを使っていただいてます。それもみんながMCPとかも、エンジニア以外がバンバン使っていけるような仕組みを取り入れたんですね。
@yuji.kurihara
そちらは、セットアップから丸ごと面倒見る「ソーシャルコマースのAI活用を支えるエンジニアの仕事」っていう noteをですね、貼ってきますので、よかったらご覧ください。そこの、そういったツールを提供してから、部署のほとんどの人が日頃からAI使うようになりました。
@yuji.kurihara
もちろんMCPを経由した何かしらのデータのやり取りっていうのも増えたんですね。最近ではデザイナーさんも、企画とかも、企画の方とかが使って、MCPと接続してデザインや企画案を、
@yuji.kurihara
直に生成する、HTMLで生成するみたいなことも増えてきたんですね。なので、そういったMCPの機能の需要っていうのはすごく高まっていて、今回リリースしたら、エンジニアだけじゃなくて、企画やデザイナー、それ以外の職種の方もどんどん使っていただけるようになったっていうのが、
@yuji.kurihara
大きいかなと思いますね。
@potato4d
なるほど、ありがとうございます。なんかあれですね、初めにこのツールを見た時は、需要に対して適切なソリューションを運用していってるのかなっていう風なイメージで、今回栗原さんお呼びさせていただいたんですけど、話を聞いているとどちらかというと、
@potato4d
エンジニア以外の職種も含めたワークフローのAXのイネーブリングの一環として、まず道具がちゃんと揃って、揃ったのでみんながAX をガンガンやっていってくれたみたいな背景がある感じなんですね。
@yuji.kurihara
そうですね、なのでさっきの noteの話もそうなんですけど、ハンズオンを自分自らのチームにやってるんですね。AIを活用していこう、そのハンズオンの一環としてこのツールをやってみよう、MCPってどうなんだろうみたいな一部として提供したっていう側面もあるかもしれないですね。
@potato4d
なるほど。なんかめちゃくちゃ背景聞くと、また裏の面白さっていう感じがありますね。
10. 口コミで広がったユースケース — LLM 格付けクイズ
@yuji.kurihara
でも自分が思った以上にいろんな人が使ってくれて、それも使い方がそれぞれですよね。だから最初はエンジニアとかだと、最近エンジニアがよくやるのは、難しいサーバーのスペックとか、
@yuji.kurihara
今回の調査とかっていうのを HTMLで分かりやすくして、みんなにシェアしようみたいな使い方をしてる人が多かったんですよね。なんですけど最近は、Figma MCPと接続して、新たなデザインから、何かその企画立案する前の、
@yuji.kurihara
プロトタイプとして実装してみるみたいなのを、エンジニア以外の人がどんどん手を進めていく。その一端になっているのが、このGlassっていうHTMLシェアサービスだと思っています。
@potato4d
これまでは、もしそういうワークフローを実現したいという風に考えても、やっぱシェアするときに、SlackにHTMLを貼るとかだと、あんまりフローな情報になってしまって、されないし、開く側もちょっとめんどくさいし、
@potato4d
みたいなのが、気軽に動くHTMLを共有できるっていう風なところになったんで、当初の、気軽にアップロードできる環境を用意したいというところから、さらに広がってワークフローの方にまで繋がるような変化になっていったって感じなんですね。
@yuji.kurihara
おっしゃる通りですね。
@potato4d
なかなか面白いですね、その広がり方が。
@yuji.kurihara
そうですね。でもその広がり方も、どっかの口コミみたいな感じなんですよね。そうですね、口コミみたいな形で広がっていって、こういうサービスがあるんだ、自分も使ってみようみたいな形で、どんどんどんどん広がっていったんですよね。
@potato4d
ありがとうございます。面白いですね、もともとはちょっとしたイネーブリング活動の一環として生まれたものが、浸透していくだけじゃなくて、ユーザーが新しい使い方とかをいろいろして広がっていくのがいいですね。
@yuji.kurihara
そうなんですよ。なので中にはですね、面白いことをした方がいらっしゃって、AIのLLMが生成した内容をクイズにして、このHTMLで社内でシェアした人がいるんですよね。
@yuji.kurihara
LLMが生成した文章がどれがどのLLMなのかっていうの、モデルなのかみたいなのをクイズをした人がいて、それをやってみんなが格付けチェックみたいな形ですよね。そしてみんなが盛り上がったっていうのもありました。
@yuji.kurihara
その時に使われたともこのシェアサービスで、かなりカジュアルに使ってる方もいらっしゃいますね。だからもう、使い方は本当に千差万別だなと思いました。
@potato4d
私も見ましたね。初めに見て、なんなら今回Glassを知ったのがその投稿からで、あれバズりましたよね、みたいなのもあって。やっぱりあれですね、物が自由度の高い上に、使い方があってが、
@potato4d
イージーな物っていうのが提供されると、ユーザー側での広がりが大きいのが、やっぱりワークフローの変化にも関わってますし、こうやって開発した自組織以外に伝播していくみたいなのもつながってるんで、面白いですね。
11. 1000本ノックの知見を Glass に
@yuji.kurihara
そうですね、なので以前potato4d さんと一緒に登壇したAIミートアップがLINEヤフーで行われたと思うんですけども、その時に実は私登壇してて、その時に1000本ノックみたいなのっていうのをやりましたっていうのをシェアしたんですね。
@yuji.kurihara
ちょっと多分スライドをどっかに、もしかしたら貼り付けていただけるかなと思うんですけども。で、実はこのGlassサービスにもその1000本ノックで使った時の仕組みみたいなのが載っていて、さっき、URLを一つでまとめてHTMLがプレビューできる、俯瞰できるみたいな仕組みがあるってちょっとお伝えしたと思うんですね。
@yuji.kurihara
実はそのAI開発で役に立った知見がGlassに持ち込まれていて、複数のHTMLを俯瞰してみることによって、例えばAI開発でHTMLを1000本ノックとは言わないですけど、
@yuji.kurihara
1ページ10本とかをAIに書かせて、比較みたいなこともできるんですね。そういう機能も、使ってる人がどれくらいいるかというのはちょっとまだ懐疑的なんですけども、機能としても取り入れさせていただきました。
@potato4d
なるほど。ぜひスライドも今回ショーノートに貼っておこうかなと思うんで、皆さん見ていただければと思います。
@yuji.kurihara
はい、宣伝ばかりです。
@potato4d
多分なんかそちらのスライドも見ていただけると、イメージつきやすいかなと思うんですけど、少し前に、3月ぐらいですかね、バズっていたいわしさんのあるソフトウェアエンジニアの一日っていう記事があるんですけど、まさにそこで載っていたような、いろんなプロトタイプを俯瞰して比較して、
@potato4d
ほぼ作っていくみたいなワークフローについて登壇されている内容となりますので、ぜひぜひ皆さん見ていただければと思います。
@yuji.kurihara
よろしくお願いします。
12. 利用が伸びたきっかけは MCP
@potato4d
結構ちょっといろいろユースケースについて聞いてきたんですけど、なんかもう一点、利用像みたいなところでお伺いしたいなというところで言うと、2代目になって今も改修が続けられているかなとは思うんですけど、こういう提供方法とかこういう機能を提供するようになってから、
@potato4d
ぐっと利用が伸びたみたいなタイミングであったりしますかね？
@yuji.kurihara
やっぱMCPですかね。
@potato4d
やっぱそうなんですね。
@yuji.kurihara
そうですね、MCPかな。
@potato4d
やっぱりそれは、生成した成果物が自動的にそのまま上がるみたいな機会が増えて、バーンと広がったみたいな？
@yuji.kurihara
そう思います。だってめちゃめちゃ簡単ですもんね。AIにスキルもあるんで、スキルもあるんですよ。なので、スキルプラスMCPをつなげることによって、HTMLのこれ作りたいんだけど、
@yuji.kurihara
つったら上げてくれるわけですよね。なので、難しい操作も必要ないわけですよね。ただ単にMCPサーバーのセットアップをするだけで、認証とかもストリーミングAPIでやってくれますし、トークンをつけたりとかすることもなく、
@yuji.kurihara
あとはSSOが走ってログインされてアップロードみたいな感じです。なので、多分それが大きなターニングポイントだったんじゃないかなと思いますけどね。
@potato4d
確かにMCPで接続されていると、エージェントがこれはアップロードした方がいいみたいなのをなんとなくこう汲み取って、うまく反映してくれるのもあるんで、ユーザーが意識せずとも、どんどん使う機会が増えていくんでいいですよね。
@yuji.kurihara
なので、そのMCPのやっぱりできるものみたいな、ツールっていうのはかなり工夫というか、充実させてます。例えばですけど、アップロードの一覧を取得できたりとか、タグを書き換える、タグも付けられるんですよ、この分別ファイルに入る。
@yuji.kurihara
あとはHTMLの普遍ですね。HTMLのハッシュを変えずにHTMLを差し替えしたりとか、あとはアップロード、そのHTMLが勝手に差し替えられないように、ロック、アンロックができるとか、あとはグルーピング、さっき申しましたけど、
@yuji.kurihara
グルーピングの作成とかも、至るものがMCPでできるっていうのを確立してあげたっていうのが、ちょっと工夫かなと思ってますね。
@potato4d
なるほど。
@yuji.kurihara
よくあるじゃないですか、一部だけMCP提供ですね。
@potato4d
そうですね。
@yuji.kurihara
ウェブでできることは、MCPでも同等にできる方がいいよねっていう思想で作りました。
@potato4d
すごい良いですね。ここまで結構いろんな話聞いてきちゃったんですけど、1点話をしているのができなった部分があるので、もう1点だけお伺いできればなと思うんですけど、開発者目線でこれが生まれてから、
13. 開発現場での便利さ — 動くプロトタイプで解像度が上がる
@potato4d
めっちゃ便利になったなみたいなことってあったりしますか？エンジニア以外の職種にとっての嬉しさみたいなのがすごい多かったかなと思うんですけど、開発現場での便利さみたいなのがあれば、ちょっとお伺いしたいなと。
@yuji.kurihara
それもちょっと企画みたいになっちゃいますけど、やっぱりその企画立案みたいな、企画者が案件持ってくるときに、URL持ってくるんですよ。そうすると開発が、これ作ればいいんだって、めちゃめちゃ解像度が上がります。
@potato4d
あー、なるほど。
@yuji.kurihara
ペライチとか、昔だったら画像を切り張りしてみたいな、昔ってそうだったじゃないですか、スペック域みたいな。それが動くものになって、こういうものを作りたいんだみたいなのが分かるのは、非常に大きいかもしれない。
@yuji.kurihara
私、今ネイティブアプリの方のサーバーのバックエンドもやってますけど、ネイティブアプリのUIも HTMLで再現して持ってきます。
@potato4d
そうなんすね。
@yuji.kurihara
なのでこの時は取る爪だよねとか、この時このボタン押したらこうなるよねみたいな、実現して持ってくるのがみんなすごいなって、開発者目線だとそれありがたいなと思ってますね。
@potato4d
確かにそのあたりはあれですよね、そのHTML吐き出しやすくなってから変わりましたよね、現場が。
@yuji.kurihara
変わったと思います。
@potato4d
何でしょう、従来のこのワイヤーフレームだったところが、プロトタイプになってるんですよね、今も。
@yuji.kurihara
そうです。もちろんね、ちゃんとしたスペックにはワイヤーフレームみたいな必要ですけど、でも走り出し、その頭出しの部分では、これってすごくスピード速いと思いませんって思います。
@potato4d
そうですね、感じますね、そこは。確かにそういうふうな仕事をするときに、結構ボトルネックになりがちだったのが HTMLの共有の部分だったんで、そこがGlassで解決されてるのはすごいいい気がしますね。
@yuji.kurihara
そうですね。あとはGlassの画面では、アップロードの一覧で、日付ごとにとかタグごとに絞り込みができるので、前のやつだとアップロードしたら、そのURLがその時だけで吐き出されて、Slackに貼り付けたらどっか行っちゃったりとかしたことが、
@potato4d
よくありますよね。
@yuji.kurihara
ありますよね。なので、それがないようにいつでもダッシュボードを見たら、いついつアップロードして作れたなみたいなのが分かるように、ということで、開発者もそうだけど、みんな使いやすいようにはしてます。
@potato4d
ありがとうございます。結果的に予想以上に広まったし、開発者もそうですし、開発者以外の人もハッピーになって、かなり総合いい感じだなっていうのが、
@yuji.kurihara
ちょっとね、自分が開発者なのに言うのがちょっとあれですけど、おこがましいかもしれないですけど、ハッピーになったらいいなと思ってますね。
@potato4d
ありがとうございます。最後にもう一点だけお聞きしたいんですけど、現在ですね、結構社内で少しずつ同じような HTMLのホスティングツールとかを、全体向けじゃなくてもチーム用にホスティングしてるみたいなのも、少しずつ見えてきてるかなとは思ってますと、
14. 今後の展望 — 仕様書の HTML 化とバージョニング
@potato4d
そこも踏まえて、こういう今後需要がより増えるであろう HTMLのインスタントな共有みたいな体験に対して、どうなっていくといいみたいなのって今あったりしますかね？
@yuji.kurihara
難しいですね、難しいです。この開発の専門家ではないんだけど、でもこうなってほしいなと思ってるのはちょっとあって、例えば今ってデザイナーさんが作ったとか、企画者が今案件のモックみたいに作ってくることがすごく多いんですよ。
@yuji.kurihara
なんですけど、これからもしかしたら、スペックとか議事録とか、そういったものもどんどんHTML化していく可能性もあるのかなと思うんです。つまり仕様書みたいなのも、今ってConfluenceとかで書いてたりしますよね。
@yuji.kurihara
でもそういうのも、もうちょっとリッチなコンテンツになったらいいなとか思ったりすることがあるんですよね。その時に、Glassで今って上書きとか新規に追加することはできるんだけど、バージョンできてないんですよ。なので例えばだけど、URL で一つの URL 固定で吐き出されるんだけど、どんどんどんどん HTML 更新していったらバージョニングたどれるとかね、元に戻って見れるとか、
@yuji.kurihara
diff 見れるとか、なんかそういうそのまあ、新たな使い方っていうのも考えられるのかなと思っています。確かに、ただあの、無法地帯になってはいけないので、つまりHTMLをとりあえずアップロードすれば ok みたいになることは良くないんですけども、
@yuji.kurihara
どちらかというと、仕様書とかがどんどんリッチになってて、使いやすいようになっていくのを助けていけたらなっていうのも、ちょっと最近考えてはいますね。できるかわからないけど。
@potato4d
今あれですよね、リポジトリでGit管理してるHTMLみたいな感じで、開発以外のHTMLも管理できるようになっていくと嬉しいよねっていう風な感じですね。そうなんですよね。
15. 複数ファイルのホスティングへ
@yuji.kurihara
そういうことも含めやっていきたいなと思ってますし、ゆくゆくはですけど、今ってHTMLホスティングって正直スタティックHTMLじゃないですか。シングルファイルHTMLなんですよね、正直なアップロードの部分は。
@yuji.kurihara
なので、それが複数ディレクトリをまたがるような、いわゆるあれですよね、リアクトで言うとdistみたいな、ジェネレーティブなデータを、もうちょっとホスティングできるような仕組みを、近日中といったら嘘になるので、
@yuji.kurihara
早めに提供する予定ではありますね。
@potato4d
ありがとうございます。ちょっとこれからまた変わりゆく部分もたくさんあるかなと思って。
@yuji.kurihara
その辺は需要があるというのをお聞きしているので、私の空いた時間でやりたいなと思って。
@potato4d
楽しみにしております。
@yuji.kurihara
ありがとうございます。
16. クロージング
@potato4d
というわけで今回はですね、栗原さんとともにGlassについて話していきました。LINEヤフーのフロントエンド組織では、このようなフロントエンドに関する議論や情報交換を日々行っております。過去にポッドキャストで公開した内容の中にはですね、社内での勉強会等々から始まったものもたくさんありますので、
@potato4d
今後も情報を発信していければと考えております。また、本ポッドキャストに関するご意見、ご感想につきましては、ハッシュタグ #UIT_INSIDEにてポストいただけますと、担当者の方で確認させていただきますので、気軽に投稿いただければと思います。
@potato4d
というわけで、今回は栗原さんとともにGlassについて話していきました。栗原さん、ありがとうございました。
@yuji.kurihara
ありがとうございました。
