00:09
Yosuke Asai
Kenさん、今日もよろしくお願いします。
ken
Yosuke Asaiさん、よろしくお願いします。
Yosuke Asai
今日はWebpageの開発秘話ということで、
London Tech TalkのWebpageが2023年の年末にリリースされまして、
そのコアコントリビューターというか、最初から一緒に開発してくれた
Junpei & Teppeiさんをお呼びしています。よろしくお願いします。
よろしくお願いします。
Yosuke Asai
はい、ということで、Junpeiさんが今回初登場ということで、
Ihara Junpeiの自己紹介
Yosuke Asai
簡単に自己紹介をお願いしてもよろしいでしょうか。
はい、Ihara Junpeiと申します。
東京でソフトウェアエンジニアとして働いています。
仕事では主にフロントエンドを担当していて、
インフラやバックエンドもたまに触ります。
London Tech TalkにはDDIA本の輪読会の参加をきっかけに、
このコミュニティに参加して、今回Webpageのプロジェクトに参加しました。
よろしくお願いします。
Yosuke Asai
ありがとうございます。
確かTwitterとかを見て輪読会に参加してくださったと思うんですけど、
そこから今回Webpage開発の方に来てくださって、ありがとうございます。
Junpeiさんも簡単に自己紹介をお願いします。
Teppei Iwaoka
岩岡てっぺいと申します。よろしくお願いします。
Londonに本社のあるテッケイの企業でソフトウェアエンジニアとして働いています。
そうですね、輪読会とか、大学院の話とか、
いろいろこれまでお話しさせていただいた感じですね。
Yosuke Asai
今日はよろしくお願いします。
ありがとうございます。
ということで、けんさん、Webpageがついにリリースされましたね。
ken
ついにリリースされましたね。めちゃくちゃ嬉しいですね。
友人とかポッドキャスト仲間に自慢ばっかりしますよ、これ。
Yosuke Asai
そうですね、僕も家族とかについ見せちゃってましたね。
ken
話が上がったのはさ、結構前だよね。
Yosuke Asai
そうですね、もう1年くらい前だと思います。
ken
やりたいね、やりたいねって言って、よし、やるぞって
アサヒさんの腰が上がったのが3ヶ月前くらい。
Yosuke Asai
そうですね、はい。
今年の年末中にやるぞっていうのを、確か50回目の記念収録の時に話をして、
なんとか始められたという感じですかね。
ken
そうだよね、そっからの巻き込み力とかさすがだなと思って、
一気に立ち上がってさ、一気にプロジェクト化して作ってったから、
Webpageの開発の経緯
ken
なんかその時系列順に、そもそもね、
ウェブサイト開発するのにリスナーのこと、
あれなんで2人ゲストがいるのみたいなのは多分思っていると思うんで、
開発の経緯というか、最初の立ち上がりのところからちょっと簡単に
説明してもらってもいいですか。
Yosuke Asai
はい、ちょっとじゃあ自分から説明しますけど、
このウェブサイトを作りたいなと思ったのが、
やっぱりこの、例えばTwitterとかで収録の公開しましたっていう時も、
リンクを上げるのがSpotifyのページだけだったりとか、
収録の過去の収録のゲストが誰かとか、
そういうのが結構わかりにくいなと思ったりとかしたので、
このゲストの魅力とかがもっとわかるようなウェブサイトとかが
作りたいなと思ったり、
あとはその聞いてくださるリスナーの方々との関係というか、
がより深まったり、関係の基点になるようなものが欲しいなと
ちょっと思ってたりしていて、
ウェブサイトを作りたいなと思ってましたというのが
多分最初にあって、
で、他のPodcastとか見るとやっぱりウェブサイト結構あったりするんで、
そういうのもいいなと思ってたのもありますね。
っていうので作ろうというのを、
僕結構一人でやってて、なかなかうまくいかなかったことが、
うまくいかなかったので、
今回林道区会とかの盛り上がりを見て、
ぜひこの他の人とやってみたら楽しいんじゃないかなと思って、
ご要求させていただきました。
まずは鉄平さんが、
確か簡単にDiscordのチャンネルで共有したときに鉄平さんが
やりたいって言ってくれて、
これ結構嬉しいなと思って、
鉄平さんに声をかけて、
その後順平さんがフロントエンジニアですごいできるっていうのをしてたので、
監督じゃないですけど、
レビュー的な感じで見てもらえたらなと思って声をかけました。
ということで僕聞きたいのは、
2人が最初に話を持ちかけられて、
どう思ったかっていうか、
最初どんな感じのモチベーションで入ってくれたのか聞きたいんですけど、
鉄平さんから聞いてもいいですか。
Teppei Iwaoka
そうですね。
自分もともと洋介さんと過去に一緒に開発をしたりしたこともあって、
そういう経験から結構みんなでワイワイとものを作っていくのが好きなところがあって、
今回もみんなでワイワイ新しいものが作れたらいいなっていうところで
参加させていただいたっていうのが一番大きな動機ですね。
あと今バックエンドを主に開発していることが多いので、
フロントエンドの技術とかってあんまり終えてない部分もあるので、
それをキャッチアップするいい機会かなっていうのも思って参加させていただきました。
Yosuke Asai
ありがとうございます。
確かに以前からいろいろ一緒にやろうって言ってくれてて、
なかなかそれが実現できなかったんで、
今回実現できてよかったですね、個人的にも。
Teppei Iwaoka
そうですね。楽しかったです。
ken
昔の収録でも聞いたけど浅井さんと鉄平さんで、
ハッカソンかなんかも出てたりしてたよね、確か。
Teppei Iwaoka
そうですね、はい、そうなんですよ。
Yosuke Asai
今回はそのノリを生かして進めてきました。
ken
とりあえず最初にやりますって言ってくれる鉄平さんの
ファーストペンギンのいいところですね。
Yosuke Asai
本当にありがたいですね。
Teppei Iwaoka
よかったです。
Yosuke Asai
純平さんも簡単に聞いてもいいですか。
はい、確か浅井さんからそのDiscordのDMとかで
そういうウェブページのプロジェクトがあるっていうのを連絡もらって、
最初はそのフロントエンドのアドバイザーのような形っていうので
お誘いいただいたんですけど、
もともとその仕事以外で個人開発、
昔少しやってたんですけど、ここ数年やらなくなっちゃって、
なんかちょっと自分の技術で何か作りたいなっていう気持ちはあったので、
ちょうどいいタイミングだなというのと、
あと普段仕事でフロントエンドを結構触ってるので、
それ以外のバックエンドであったり、
インフラ周りとか、
ウェブサービス公開するにあたって関わるような
そういったフロント以外のところを触れたらいいなっていうので参加しました。
Yosuke Asai
ありがとうございます。
はい、ということで純平さんには最初は
おっしゃる通りアドバイザーみたいな感じで参加してもらったと思うと、
結果的にはかなりガッツリ開発に入ってもらって、
ken
そうだよね。
Yosuke Asai
ものすごい量のコミットをしていただいたんですけど。
ken
この後多分細かく話すと思うけど、
純平さん今回無双してましたからね。
Yosuke Asai
そうですね、簡易でしたね。
ken
僕もめちゃくちゃ勉強になったもん。
てっぺさんも言ってたけど、モダンなフロント技術も学べたらと思って。
僕もフロントを触ってたのが4,5年前だからさ、現場で。
本当に勉強になって。
だから巻き込んだアサヒさんもすごいし、
入ってくれた2人。
あと今日は収録には来てないけど、
途中からトモヒサさんもコミットしてくれたりしたので、
本当にサイドプロジェクトだけど、
会社じゃない人たちとこうやって技術を寄せ集めて、
何か成果物を出したっていう意味での成功体験でも僕はあったので、
Yosuke Asai
すごい良かったなと思いますね。
いやまさに本当にすごい楽しいプロジェクトでしたね。
ということで開発の様子というか、
どういう風に進めていったのかっていうのを見ていきたいんですけれども、
結構最初はやっぱりどういうデザインにするかみたいなところで苦労したかなと思ってて、
この辺、てっぺいさんと僕が主にデザインというか、
どういうウェブサイトにしようかみたいなところを相談しながらやってたんですけど、
結構大変だったよね。
大変というかやり方が分かんないところが結構多かったっていうか。
Teppei Iwaoka
そうですね、全然やったことがないっていう、
ちょろっと触ったことがあるとかっていうツールがあったりしたんですけど、
ほぼほぼこういうことをする際に王道は何なのかみたいなところを全然知らずに、
手探りで進めていくっていう感じだったので、
そうですね、難しかったですね。
Yosuke Asai
結局そのデザインとかどうするかっていうのがあんまり分からないから、
FigmaとかBubbleとか色々使ってやってみようとかいう相談をしたんだけど、
結局そのBubbleは共同編集ができないみたいな。
Teppei Iwaoka
そうですね、共同編集が無料プランではできないっていうところがあったので、
そこはやめて、
FigmaとWixっていうのを使ってみてどっちにしようかなっていうので考えたんですけど、
Wixの方は結構テンプレートが充実してて、
そこをベースに作業が進めやすそうだったので、
最終的にはそちらを最初のデザインとしては使わせてもらいましたね。
Yosuke Asai
確かにWixのデザインが結構これだっていう、
こういうふうにやっていけばいいかなってイメージが湧くようになったので、
それはすごい良かったなと思います。
Teppei Iwaoka
Generative AIみたいな機能も確かに入ってて、
どういう雰囲気にしたいかみたいなことを伝えながら、
ある程度テンプレートを提案してくれるみたいなことがあったので、
結構そこは驚きでしたね。やりやすかったですね。
Yosuke Asai
そうですね。最終的にはてっぺいさんのデザインとかを元にしつつ、
じゅんぺいさんが見つけてきたテンプレートを使うっていうことになりました。
これが実際には作ったデザインとあんまり大きく離れてなかったっていうのもあって、
これを採用していこうということになりましたね。
じゅんぺいさんはこれどうやって見つけたんですか?
そうですね。何を使おうか。
デザインと並行してフロントの技術を何を使おうかっていうので、
最初はアサイさんとDMで話してたときは、
RemixかもしくはNext.jsか、
リアクトのフレームワークでメジャーなやつどっちかかっていうので、
私がNext.jsに興味があったので、
昔ちょっと触ってたっていうのもあって、
Next.jsで使えるテンプレート、
テイルウィンドウを使ってるやつで、
Googleで検索していろいろ見ていった結果、
何個か候補があって、一番良さそうなやつを今使っているやつですね。
テイルウィンドウNext.jsスターターブログって、
そのまんまの名前ですけど、
結構GitHubでもスターが7000ぐらい付いてて、
Yosuke Asai
結構メジャーな使われてるようなやつですね。
いろんなブログとかから参照されてるようなやつを、
今回ブログ目的じゃなくて、
Podcast目的に応用するっていうのもちょっと面白かったなと思うんですけども、
かなりよく使いやすくて、
構造とかも分かりやすくて、
すごい良かったなと個人的には思います。
本当にこのテンプレートがあってありがたかったですね。
ken
そうですね。
個人的にここのデザインのフェーズは、
アサヒさんとかテッペさんとか順平さんで主導してくれてたけど、
だから見ててすごいなと思ったのは、
全然会社外のサイドプロジェクトなのに、
やっぱ技術選定のディスカッションのクオリティとかレベルとかがすごい高くて、
すごい外からいろんな選択肢とか持ってきたし、
そのテンプレ一つ利用するにしても、
ライセンスのこととか技術的付際のこととかカスタマイズのしやすさとか、
そういうのを自然と議論に持ち込んでやってたんで、
それ見てて楽しかったし、
すごい良いメンバーだなと思いながら見てたし、
別にデザイナーみたいなところは僕も観点がないので、
テンプレートの活用とコミュニティコントリビューション
ken
デザイン観点ではそんなに突っ込みはできなかったんだけど、
本当に立ち上げのところからやってくれそうな感じでしたよね。
Yosuke Asai
本当にいいスピード感で進んでいきましたね。
じゃあこのまま技術スタックの話をしてみますか。
どんなの使ったよっていうので、
さっきじゅんぺいさんがおっしゃったようにNext.jsを使ったんですけど、
最初はやっぱりデプロイしやすい、
一番デプロイしやすいバーセルを使ってましたね。
その後バーセルをやめようってなって、
クラウドフレアページズに移行してたんですけど、
この辺の背景というか、
なんでこうしたっていうところをじゅんぺいさん説明いただいてもいいでしょうか。
最初バーセルを使ってたのは、
チームプランでも無料期間2週間ちょっとでしたっけ、
それぐらいはチーム開発、
バーセルのダッシュボードにチームメンバーがアクセスできて、
いろいろできるだったんですけど、
無料期間過ぎてしまうと、
有料プランじゃないとチームでは開発が現実的じゃないっていうのがあって、
いろいろ調べた結果、
クラウドフレアページズは無料プランでもメンバーを追加とかできて、
開発ができそうだとなって、
クラウドフレアページズでもNext.jsが動かせる、
クラウドフレアが出してるライブラリがあって、
Next.onPagesっていう、
それを使えばいけるんじゃないかとなって、
エラーがいくつか出たりして、
デプロイでエラー解決が数日くらいかかったんですかね、
何とかなったので、
それで今も進めてるっていう、
流れ的にはそんな感じですね。
Yosuke Asai
このクラウドフレアページズに移すっていうのは結構やっぱり、
今おっしゃったように難しかったところがあって、
ランタイムが違うんです。
エッジランタイムっていうのが結構独特で、
そこで動かせないモジュールがあったっていう認識なんですけど、
この辺もう少し覚えていれば教えていただいてもいいですか。
そうですね。
エラーが何個かあって、
覚えてる範囲で順を追って説明すると、
最初そのまま移そうとしたら、
RSSのパーサーのライブラリが、
そのままネクストンページで動かそうとしたら、
エッジランタイムを指定してくださいと出て、
エラーに確かそう書いてあって、
それを追加したら、
そのRSSパーサーはNode.js依存だと、
Node.jsのAPIを使ってるので、
エッジランタイムでは動かせないと出て、
RSSパーサーを使って処理とかが一部書かれてたので、
別のパーサーを探すという手もあったんですけど、
一旦今回はそのままライブラリを扱って、
ネクストンページの特定の問題だと思うので、
いろいろ調査をして、
結局そのネクストンページのGitHubの注意書きとか、
コードの一部参照みたいな、
レポジトリを追っていったら、
こうやれば解決できるよという解決策とかが、
一周に書かれてたのかな、
かなんかで対応したという。
最初の打ったところはそういう問題があって、
また別のゲストページ、エピソードページの個別ページ、
同的にページを作るというような、
そこでまた別の問題が出て、
それはまたちょっと時間がかかったけど、
それを解決したというふうな、
そういうのがありましたね。
Yosuke Asai
いくつか問題。
ken
僕の理解だと、
クラウドフレアページって結構、
本当にランタイム環境というか、
すごいセキュリティーを意識して、
いろんな制約があって、
僕も別のプロジェクトで、
とあるデータベースのクライアントを使おうとしたら、
それが途中のバージョンデッドで、
Ivalを使うようになったんですけど、
それってEdgeランタイムで動かせないから、
結局モジュールアップデートできなくて、
フリーバージョンを使わなきゃいけない、
みたいなことで、
一回ハマったことがあって、
そういうの結構、
GitHubのイシューとかにたまに書いてたりするし、
そこに書いてないとき、
クラウドフレアの開発者用のディスコードがあるんですよね。
そこに行って聞いて初めて分かる、
みたいなところもあって、
割とクラウドフレア自体も、
Edgeでガリガリ開発している、
まだまだ若いようなところもあるから、
割と難しかったんじゃないかなと思って、
聞いてましたね、今の話。
Yosuke Asai
確かに。
この全部通った後の達成感みたいなの、
すごいありましたね。
やっとデプロイできたみたいなときの感動があって、
ついにバーセルを外せるぞみたいな、
嬉しかったですよね。
ということで、
インフラというか、
スタック的にはそんな感じで、
開発の初期というか、
初期段階ではまず、
てっぺいさんと僕で結構頑張って、
実装してましたね。
ルートページの部分とか、
あとゲストのページを、
これまでのテンプレートを活用して、
実装してましたけど、
なんかここら辺通して、
面白かったなっていうところ、
てっぺいさんありますか。
Teppei Iwaoka
そうですね。
Next.jsを使って開発してたんですけど、
そのテンプレートを使うことになったので、
あんまり慣れていない、
そのフレームワークだったんですけど、
テンプレートのおかげで、
どこを修正したらいいかっていうのは、
結構分かりやすくて、
Yosuke Asai
それはすごいありがたかったです。
はい、確かに。
そのままいい感じに変えられて、
初心者でも分かりやすいなっていうのがあって、
かつ構造も分かりやすかったですね。
Teppei Iwaoka
新しい技術を新しいメンバーでやるとなると、
もうちょっとトンザするかなっていうところがあるんですけど、
そういうときにテンプレートを使うっていうのは、
結構いい手だったのかなって、
改めて振り返ると思いますね。
Yosuke Asai
確かに。
かつなんかじゅんぺいさん、
この辺もたまに見てくれて、
ちょっとおかしいんじゃないみたいなの直してくれたりとか、
指摘してくれたりしてくださったと思うんですけど、
その辺も結構嬉しかったですね。
Teppei Iwaoka
そうですね、安心感がすごかったですね。
見守ってくれている安心感がありましたね。
Yosuke Asai
ということで、ここら辺が大体12月の15日くらいで、
そこからさらにじゅんぺいさんが入ってきてくれて、
どんどん開発が進んでいくという感じですね。
ちょっとじゃあ、こだわりポイントというか、
ここまで実装してきて、
こだわりポイントみたいなところに移っていきたいんですけども、
まず自分からこだわりポイントみたいなところを話すと、
このテンプレートの機能として、
マークダウンで記事が投稿できるというのがもともとあったんですけど、
それを活用してゲストの情報、
ゲストページがあるんですけど、
このゲストページの各個人のゲストの情報を、
皆さんにコントリビュートしてもらうというか、
皆さんにGitHubでコミットしてもらうみたいなことができて、
それがすごい僕は良かったなと思ってて、
皆さんの手を借りる必要があったんですけども、
皆さんの写真を選んでもらって、
自分でコミットするみたいなことがしてもらえたのは、
ken
それはすごい嬉しかったなというふうに思ってます。
そうですね、みんなでワイワイ作っている感じが出てきたよね。
Yosuke Asai
本当に。
このちっちゃいプロジェクトでコントリビューターが20人くらいいて、
結構面白いですよね。
ken
ただゲスト情報を入れるだけだったら、
もちろん僕らが聞いて、
僕らがやるっていうのが圧倒的に早いんだけど、
そこをあえて皆さんにコントリビュートしてもらうように、
わざわざメールも聞いて招待もして、
やり方もちゃんと教えて、
コミュニケーションコスト払ってまででもやるっていうところに、
思いというか意図とかが流行ってて、
すごい良いなと。
プールフォームでも書いてもらって、
もしくはこっちから適当に取りに行って終わるじゃない。
そこの雰囲気作りとかカルチャー作りみたいなところも、
アサヒさんの思いが入っててすごい良いなと思いました。
これは良かったよね。
Yosuke Asai
プール陸が上がるたびに来た来たみたいな感じで、
Teppei Iwaoka
喜んでアップロードしたりしてたもんね。
あの辺りからプロジェクト自体も盛り上がっていった雰囲気がありましたね。
動的な生成とリンクの実装
Teppei Iwaoka
皆さんのコントリビュートが見えだした辺りから。
Yosuke Asai
自分も見ていて楽しかったですね。
確かに。
楽しかったね。
あともう一つ自分、自分じゃないですけど、
自分がこれやりたいなと思ってたのがゲストの順番ランダムってやつで、
ゲストページ見るとスマホで見たときに特に一番上に、
大体1人か2人分しか見れないっていうかアイコン出てこないんですけども、
これだと何か仮定されちゃうなと思って、
いろんな人の方が出てきたら面白いなと思って、
順番ランダム実装したいなと思ってたんですけど、
自分は実装できなかったんで、
これはじゅんぺさんが拾ってくれて、
やってくれてすごいいい機能だったなと思いますけど、
この辺なんかじゅんぺさん実装してみてどうでしたかとかありますか?
実装自体はそんなに難しくないんですけど、
12月の後半ぐらいですかね、
後半ぐらい開発を一気に進めたのは、
ちょうど時間があったので、
タスク、
アサヒさんが一周化してくれて、
いくつか取れる人が取っていくみたいな形で、
開発を進めていったので、
順番に実装していったっていうので、
すごくタスク管理の点で、
アサヒさんが仕切ってくれたのはありがたかったです。
タスクをどんどん拾ってきて、
ken
じゅんぺさんもすごかったし、
意外とアサヒさんってSREだけど、
プロバネ的なことも向いてるんじゃないかなって、
見てて思ったけどね。
Yosuke Asai
意外と向いてるのかもしれないですね。
楽しかったです、僕は。
この機能、僕はすごい好きなんで、
実装してくれてありがとうございます。
毎回リロードするたびに変わるっていうのが楽しいですね。
じゅんぺさんからもこだわりポイント聞いてもいいですか?
そうですね。
さっきちょっと話したゲストページとエピソードページの
動的な生成っていうので、
今の実装はビルド時に生成するようになってて、
そこをリンクさせたいっていう、
アサヒさんがイシューを作ってくれて、
結構多分一番ずっと残ってたイシューだと思うんですけど、
どうやって実装しようかみたいなのをやって、
もともと今回のプロジェクトでは、
今の時点ではデータベースを使ってなくて、
全部ゲスト情報はMDXのファイルで、
コード内にあるものを参照してる。
エピソードはRSSから取ってくるっていうような形になってたので、
RSSのほうでゲストの情報をタグ付けできれば、
実装できるなっていうのだったんですけど、
今回のプロジェクトではデータベースを使ってなくて、
全部ゲスト情報はMDXのファイルでコード内にあるものを参照してる。
実装できるなっていうのだったんですけど、
RSSのほうがあんまり特定のパラメータを付与するとかができないので、
HTMLをディスクリプションタグに埋め込められるっていう、
そういう機能がもともとあったので、
そこにヒドゥンタグを入れて、
そこから情報を取って、
ビルド時にリンクさせるみたいな実装をしたんですけど、
ちょっと時間はかかったんですけど、
結構いい機能だと。
技術ブログを書く
もともと一瞬の時点で一番これやりたいって朝井さんが書いてたので、
時間はかかったけど、いいものができたなと思います。
ken
これめっちゃすごい。
これ僕なりの一押しポイントが2つあるんですけど、
言っていいですか。
機能の一押しというか、
実装の裏側の的な話なんだけど、
まず一つ目が、
エラーハンドリングがもうかっちりしてるんですよ、
じゅんぺいさんの。
例えばヒドゥンタグがないときに、
ちゃんとデフォルトのアイコンみたいなのを出すようにしたりとか、
そこら辺のエッジケースもちゃんと洗い出されて実装されてたから、
すごいなと思ったし、
あとなぜヒドゥンタグを利用したかみたいな、
これは僕の勝手な想像ですけど、
今って入口って、
Spotifyの元々Anchorと呼ばれてた、
今はSpotify for Podcasterかな、
っていう入口画面から入口されてましたと。
実装方法だけだったら、
多分いろいろ選択肢があったと思うんですよ。
例えばGitHubでYAMLで管理してもいいし、
このタイミングでデータベース入れるでもいいし、
何でもいいんだけど、
データの流れるフローみたいな感じで言うと、
入口する元Anchorの入口画面が、
唯一のデータの信頼源というか、
そこの入口フローも意識して、
そこに入口するタイミングでそれだけ考えればいいから、
データの流れとか、
どこにデータを寄せるかみたいなひも付け、
データフローのアーキテクチャレベルでも、
すごいメイクセンスだった提案だったので、
これのプリクは見ててワクワクしたし、
結果としてすごい使いやすかったし、
これは本当にありがとうございますという感じですね、
Yosuke Asai
僕らは。
本当にありがとうございます。
順平さんがこのPodcastersっていう入口するページも、
かなり興味を持ってくださって、
その辺も権限を足していろいろ見てくださったんで、
本当にこちらからしても感謝しかないですね、まさに。
ken
ネット録材作業もやってくれてたしね。
Yosuke Asai
そうですね。
一つ一つ登録していくっていうのもやってくださって感謝してます。
ありがとうございます。
こちらとしてもPodcastの裏側というか、
こういうふうに作業とかフローがなってるんだっていうのを、
Yosuke Asai
知らないところを知れたのでとても楽しかったです。
よかったです。ありがとうございます。
他にもありますか?
多分いっぱいあると思うんですけど、
あえてCって言うならみたいなところ。
そうですね。
もう一個、自分がこれ結構やりたくてやったみたいなところなんですけど、
Kバーっていう検索UIみたいなのがあって、
今回利用したテンプレートにKバーが元々利用できる状態、
ちょっといじればなんですけど、なっていて、
Kバーとか似たようなライブラリいくつかあるんですけど、
それのUIとか、
実際にどういうふうに組み込みができるのかっていうのを、
ちょっと興味があったので、
このテンプレートがまさにたまたまKバーを使ってたので、
そこの実装部分。
やっぱりカスタマイズは結構ちょっと必要で、
その辺ちょっといじったりはしたんですけど、
結構ある程度簡単に、
ある程度何というか便利なUIが実装できたので、
Yosuke Asai
この検索機能は良かったんじゃないかなと思ってます。
ken
これめっちゃ便利だよね。
入稿するときとか、
例えばテペさんが入ってくれたときのエピソード入稿するときに、
ヒドゥンタグなんだっけなみたいなのやるときに、
わざわざGitHubのソースコード見なくても、
とりあえずlearnnotech.comコマンド系でテペさんのID見つけて、
パッと入れたりするし、
あと友達に昔参加してくれたビザ周りのエピソードがあって、
共有しようと思ったときに、
Apple Podcasterのアプリをスクロールするんじゃなくて、
とりあえずここにコマンド系でポッとやると、
パッと出てくるから、
すごい雑な説明だったけど、
とりあえずめっちゃ便利なんですよね。
Yosuke Asai
本当に過去のミッドワークになったときに、
本当スクロールが大変なんで、
Spotifyとかも、
それがしなくていいっていうのは楽ですよね。
ken
やっぱり過去に参加してくれたゲストのエピソードで、
めちゃくちゃいいやつっていっぱいあるから、
でもSpotifyとかApple Podcasterのアプリだと、
スクロールしなきゃいけないじゃん。
検索もないし、あるけど、
スクロールするから、
昔出てくれたゲストの方のいいエピソードが埋もれてっちゃうのが寂しいなと思ってたんですけど、
これによって、
もっと昔のいいものを掘り起こして、
他の人に共有したりとか、
訪れた人が探してくれるみたいに繋がっていく感じがして、
これはすごいいいなと思いました。
Yosuke Asai
本当にゲストの詳細ページの総合リンクと合わせて、
過去のエピソードが掘り出せやすくなったような感じがありますね。
エラーハンドリングとヒドゥンタグ
Yosuke Asai
てっぺいさんからもこだわりポイントがあれば教えてください。
Teppei Iwaoka
自分は、
ヨスケさんもさっきおっしゃってたんですけど、
ゲストのページの情報を皆さんにコントリビュートしてもらえるような形にできてたのが一番良かったなと個人的には思ってます。
ベストな方法かわかんないんですけど、
MDXって比較的データを追加していきやすい、
コントリビュートする方の負担がそこまで大きくないやり方かなと思ってて、
そこをヨスケさんと最初にどういう風に実装していくかというところで相談して、
そこを想定した上で決めれたので、
そこはすごい良かったなと思ってます。
あと、全然自分実装してないんですけど、
やっぱりその相互リンクのところはすごいいいなと思って、
過去のゲストの方がどういう話をされてたのかなって、
たまに気になるときあるんですけど、
やっぱりSpotifyとかだとスクロールしながら見つけていくという作業がどうしても必要なんですけど、
あのページがあることで、
このページに、この回にも出ていた方と一緒かみたいなところがすごい気持ち気安くなって、
自分は作ってないところなんですけど、すごい大好きな機能ですね。
ken
なんかみんな大好きっぽいね。
楽しい収録。
Yosuke Asai
逆にちょっと高校難しかったなっていうところも話していきたいんですけれども、
今回は期間がだいたい1ヶ月みたいなところで、
かなりうまくやったのかなと思うんですけども、
逆に僕個人としてやっぱり難しかったなと思うのは、
俗人化というか、今回やっぱり後半のじゅんぺいさんの追い上げがすごすぎて、
逆にじゅんぺいさん依存してしまったので、
ここはなんていうか、もっと自分も参加できればよかったなと思うところではありまして、
じゅんぺいさんといえばそういうところは思うところはあります?
特にないですか?
ないんですけど、ちょうど年末で休みが取れてたので、
年内にリリースしたいねっていうので、
結局リリース年も大晦日とか、
1日前とかだったと思うんですけど、
目標が決めてそこに最低限のリクワイアメントを設定して、
リリースに向かうっていうのは、
やってて楽しかったですし、
パブリックに出せるものがみんなで作れたっていうのはすごくよかったです。
Yosuke Asai
これ僕も思うところがあってコメントしていいですか?
ken
お願いします。
俗人化をせぐってよく言われるんですけど、
どのプロジェクトもそうじゃないかなと思ってて、
有名な話で言うとパレートの法則だっけかな、
80対20の法則みたいなのがあって、
例えばAmazonとかだと、
とりあえず80%の利益を出す商品はトップ20だみたいなのとか、
とりあえずすごい経験則的なもので、
エビデンスにとったものじゃないんだけど、
例えばプロジェクト成功させるためのコードの80%は、
20%の人が書いてくれたみたいなのとか、
そういうのはあったりするんだけど、
全ての人が同じタイミングで全くイーブンなコントリビューションっていうのは、
そこを目指すこと全然ゴールじゃないし、
何だろう、
例えば今言ってくれたけど、
Jupyterがスキルだけじゃなくてタイミング的なところもあって、
コードを書くというところでコミットしてくれたけど、
例えばTeppeiさんだったら、
ちゃんとFirstPenguinとしてやりますみたいなところとか、
ファンデーションを作るみたいなところで、
80のコントリビューションしてくれたし、
Asaiさんだったらプロジェクトをマネジメントするみたいなところで、
80%のコントリビュートしてくれたじゃない、
プロジェクト成功させるっていろんなトピックがあって、
例えばコードを書くとか、
ファンデーション作るとか、
プロジェクトをドライブするみたいなところで、
とドライブするみたいなところで それぞれの人が80パーセントぐらい
のガッとコントリビュートしてくれて いい感じにプロジェクトが成功
するっていうのが 会社でも見てて そうだなと思うんですよね めちゃ
くちゃコード書ける人はコード 書くけど その人が作った技術的
塞は他の人がちゃんとカバーする とか なんで 確かに属人化という
観点もあるけど みんなが25パーセント イーブンにコードをコントリビュート
するっていうのも それは別に 目指す方向ではなくていいんじゃない
かなとは思ったんですよね もちろん 終わった段階で コードをすごい
書いてくれたのがじゅんぺいさん だから そこ直すときにキャッチ
アップしなきゃいけないけど それを逆に考えると キャッチアップ
しなきゃいけないソースコード があるから そこで学べたりとか
するし 逆にリファクタリングが 得意な人とかもいるから これはいつも
思うんだけど やれる人がどんどん やれるときにやるでいいのでは
みたいな思ってるんで 確かに 難しかったところではあるんだけど
Yosuke Asai
めちゃくちゃいいですね 今の話は すごい安心したというか このやり方
でよかったんだなという感じで 僕はきっと嬉しくなりましたけど
Teppei Iwaoka
そうですね 最後のほうはやっぱり じゅんぺいさんが突破してくださった
ので 若干そこに追いつけてない ところで後ろめたさもあったところ
もあったんですけど そういうふうに 言っていただけたことで 自分のできる
ところで最大限パフォーマンスを 発揮できるように そこに集中する
っていうのはすごい大事だなって 改めて感じましたね
本当同じく たまたま今回時間が 取れたので 私が後半コードを結構
書いたんですけど 本当タイミング の問題だと思うので それは プラス
今後もこのウェブページ やりたい ことはまだあるので 今後どうやって
いくかっていうので またいろいろ やっていけたらなと思います
Yosuke Asai
ありがとうございます ちょっと じゃあ 全体的な感想というか これまで
やってみての 全体を通しての感想 みたいなところいきたいと思うん
ですけど 個人的にはチームで 開発できたっていう醍醐味 やっぱり
これまでも話してましたけど それぞれの参加者から学びがある
っていうのはやっぱり良かった ですし 最初の3人とかこの4人の
メンバー以外で友人さんとかが 実装に繋がってくださったり つい
今日もしゅんさんって方がゲスト のページを追加するのに 新たに
ソーシャルリンクを貼ってくれた りして そういうふうに徐々に参加
してくれる方が増えていくっていう のは嬉しかったですね
ken
最高ですね
Yosuke Asai
気づいたところを直してみたいな 自分で直すみたいな感じで進めて
チーム開発の成功体験
Yosuke Asai
いけているのがいいなという気が します 鉄平さんからも全体的に
見て感想はありますか
Teppei Iwaoka
そうですね 最初は結構これどうな ってくんだろうなみたいなところ
がふんわりしてて 不安な気持ちも 結構あったんですよ 正直 Spotify
とかもあるし そこで情報を見たら 良かったりもしちゃわないかな
これっていうところも 最初不安な 気持ちがあったんですけど 徐々に
ゲストページとかができていって さっき言ったようなSpotifyでは
見れないようなところも見れたり するようになっていって どんどん
すごい良いものになっていってる っていうところを見れたときに
すごい感動があって やっぱり今ない ものを自分たちで作り出すっていう
体験で やっぱり楽しいなっていう のを改めて感じれたなっていう
ところがありますね
Yosuke Asai
確かに そもそも最初に手を動かして 自分たちで実装する必要があるんだっけ
みたいなところは2人でも何か 悩んでいたりするところはあった
よね
そうですね
自分たちで作ってみると全然違うな みたいな
Teppei Iwaoka
そうですね
Yosuke Asai
いろんな工夫ができて面白いですよ ね
ken
なんか最初にふわっとしてたぐらい のものが どういう技術的難易度
っていうのも良かったなと思って 例えばじゃあアサヒさんとテッペ
さんが1日頑張ればできるみたいな すっごいイージーなやつだった
なんかモチベーションも湧かない と思うんですよね これどうなるん
だろうみたいな その不安 不安があった上で それが最終的に
成果物になったっていうのがやっぱり 経験としても個人的にもすごい
面白い経験をもらったなと思いました かといってなんか1、2年ぐらい
復業じゃない 週末の時間使わない と終わらない壮大な話ですみたいな
そこまでの難しさでもないし 2、3ヶ月一回回ってコミットしたら
できるみたいな 流度も良かったなと思って スコープの切り方とかも
上手かったなと思いましたね 結構 昨日とかも最初にいろいろ
提案してくれたけど ばっさり切る ものは切ってたから
Yosuke Asai
このなんかモメンタムみたいのは すごい大事にしたいなと思って
たので この年内の1ヶ月でザクッと できるとこだけやるっていうのは
意識してましたね
Teppei Iwaoka
そうですね さっきふわっとしてて っていうところあったんですけど
陽輔さんが結構そこ 第一フェーズ ではここまで出します 将来的に
やっていきたいところはここです っていうのを明確にやってくれた
ので そこがあったからこそ取り 組みやすかったっていうのは絶対
あったと思うので それはすごい 感謝ですね
Yosuke Asai
ありがとうございます
リーダーシップありますよ
本当ですか
素晴らしいですね
ken
普通にすごいなって思って プロマネー力
Teppei Iwaoka
PFに転職します
Yosuke Asai
SREをやりながらそのスキルがある っていうのがいいじゃない
ken
分かんないけど
そうですね それを掛け合わせる
そうですね
Yosuke Asai
じゅんぺいさんからもし何か あればまとめて
そうですね ってぺいさんもさっき 言ってたんですけど 最初デザインドック
Googleドキュメントに浅井さんが まとめてくれて やりたいことは
結構あるけど 今回の第一フェーズ ではここまでっていうふうなスコープ
をざっくり切ってくれたのは すごく ここまではやれるよねっていう
リュードの聞き方がすごい良かった なと思いました
あと 私もてっぺいさんが言って た もともとSpotifyのページとかから
聞けるし このページで提供する 価値って何なんだろうみたいなのは
ちょっと気になってたので その辺り をデザインドックとかGitHubのイシュー
とかで陽介さんがコメントしたり とか 実際 12月は週1ぐらいで確か
ミーティングしてたと思うんですけど ミーティングの中でこうやって
いこうみたいなのをメンバーで 話し合えたのはすごい良かった
なと 方向性が固まっていったと 思うので それがすごく楽しかった
です
Yosuke Asai
おだしょー ありがとうございます ケンさんからもありますか
ken
ケン 楽しかったですね 1つだけ すごい どうしてもコメントしたい
ことは このプロジェクトの一番の 成果物って LondonTechTalk.comでは実
はなくて このメンバーでやった 経験だなと思ってるんですよ 個人
的には 社会資本というか このメンバー でやり切ったみたいな これ なんか
このPodcastでも 他の呼ばれたPodcast 何回か喋ってるんだけど 滝本先生
っていう人が お亡くなりになった 昔の人が書いた君に友達はいらない
っていうチーム開発の本があるん ですけど そこで理想とされてる
プロジェクトそのものだったかな と思って 黒澤明のシーンの侍みたいな
ものなんだけど 例えば ウェブサイト を作るっていう目的があり そこに
なんか全然関係ない もともとお互い 知らなかった人たちが集まって
短期で成果を出して 終わったら 離散していくみたいな プロジェクト
ベースのものなんですよね それが 終わった後で何が残るかっていう
と もちろん成果物は残るんだけど それ以上に あいつとこれ作った
みたいな この人はこれがめちゃ くちゃできるみたいな強烈な体験
が残るんですよね じゃあそれが 何になるかというと 例えば2 3
年後に誰かとこういうPodcastの 起業しようとか サイドプロジェクト
の声がかかったというときに これ あの人はできるから あの人紹介
しようとか この人絶対メンバー に加えたいってなるんですよ それ
ってやっぱりコーヒー行っただけ じゃ分かんないじゃん 一緒にコーヒー
飲んだりビール飲んだだけじゃ その人がめちゃくちゃできるって
分かんないんだけど 一緒に働いて 初めて 鉄平さんってこんなコミット
力あるんだとか 順平さんって何でも 取ってやってきるよねとか あと
友人さんとかもプリクラしてくれた けど 細かいところ拾ってやって
くれるんだとか それってやっぱり 一緒に働かないと分かんない 一緒
に働かないという分かんないという 体験を会社でするのは簡単だよね
同僚とするのは もう同僚じゃない 人とイニシアティブをつくって
出せたっていうところがめちゃ くちゃでかいなと思っていて こういう
サイドプロジェクトみたいなのを 今後もいろいろやっていけたら
いいなと思ったんですよね だから その意味でウェブサイト作る
という意味でもすごい成功だった けど チーム開発という意味で大
成功したプロジェクトだったな と思ってるんで 本当に良かった
です 小波感ですけど良かった
Teppei Iwaoka
めちゃくちゃ今の話 ちょっと感動 しましたね おっしゃる通りで 別に
金銭的にモチベーションがあって みんな集まってるわけでもない
中で こんだけ そうですね 陽輔さんの 仕切り力とか 順平さんのフロントエンド
での前に進めていく力とか あと 友人さんも別に言われてもない
のに参加して貢献してくださって 本当にその人自身の良さが見える
というか 仕事でやってたらそれは 評価にもつながるし お金貰える
ことにもつながるからやるっていう ところもあると思うんですけど
そうじゃないところでこれだけ 貢献し合えるっていうのは本当に
素晴らしいなと思って ちょっと その観点がなかったので すごく
ken
感動しました 今 この話を聞いて
信頼貯金ですよね 金銭的にモチベーション もあってもいいと思うんだけど それって
後からくると思うんですよ 最初に 例えば僕らが資金調達か 自分たち
の小銭で人を契約してやるっていう のは一つなんだけど まずここで
信頼貯金があるから 例えば今後 すごい利益率の良さそうなめちゃ
くちゃマネタイズという意味でも いいプロジェクトが上がったとき
にまず呼ぶのは お互い信頼貯金 溜まってる人じゃないですか そこで
足りない人をコントラクトで呼ぶ みたいな感じだから やっぱり本当に
今回この2、3ヶ月これできて 毎日 プルリック見るのもワクワクした
し みんなコメント言ってくれる というか 楽しかったんですよ 楽しかった
本当に 俺が仕事以外でできた っていうのが大きい 本当に
Yosuke Asai
本当に今聞いてて胸が熱くなり ましたけれども あとは加えると
このゲストの情報をコミットして くださったゲストの皆さんにも
本当に感謝したりですね 個人的には
本当にありがとうございます
特に本当に 結構このデポジトリ をプルしてきて コミットして中身
見てみたいな地味にめんどくさい と思うんで こうやって作業を かなり
の人がやってくださって すごい 嬉しいですね
ken
めんどくさいからね ギットプル とか何でやんなきゃいけないの
とか思ってたと思う でもそれでも やってくれたっていうのはやっぱり
僕らにとってはもうそれ一つ いつか恩返ししなきゃみたいな
感じだからさ
Yosuke Asai
本当に そうですね ということで 先ほどフェーズ1とかそういう話
がありましたけども まだまだ実装 していきたいものがあって 最後に
この今後開発していきたい点っていう ところを話していきたいと思います
インタラクティブなコミュニケーション
Yosuke Asai
っていうところで じゃあ順番に 行ってきましょうかね
僕個人としては まだ実装できて いないページがあって 当初から
予定あったんですけど 一つはリスナー とかとインタラクティブなコミュニケーション
ができるページが欲しいなと思 ってて そのコミュニティページ
みたいなのを作りたいなと思って て 例えばQ&Aとか 既にやるんですけど
Q&Aセクションがあったりとか もしくはもう少しインタラクティブ
にコミュニケーションができる ようなページがあればいいなっていう
のは思ってて すごい分野にと思 ってますと あとは最近林道区会
みたいなの 武家クラブ始めた ので そのイベントとか今後増えて
いくかもしれないんで そういう イベントを掲載するページ作り
たいなみたいなのは個人的には 思ってます もう一個あった もう
一個はリポジトリをパブリック にしたいなっていうのはあって
これはいろいろ気をつけることが あるんですけど イビテーション
とか今してるんで そういうのしなくて よくなるし リスナーの人とかに
見てもらえるんで そうしたらもっと 面白いなと思っています この辺
何かじゅんぺいさんからコメント ありますか
そうですね パブリック化にする メリットももちろんいっぱいあって
けど さっき言ってた ちょっと 気をつけなきゃいけないこととか
もあるので 今後そういった点を クリアできたらパブリック化も
やっていきたいなと思います
Yosuke Asai
はい やっぱりセキュリティ的に いろいろ問題があったりします
よね 多分 今書いてくれてました けど コードをプッシュするごとに
ビルドされまくってしまって無料 役潰されちゃうとか そういうアタック
みたいな攻撃みたいなのがあり得る ということですね じゃあてっぺ
いさんからは何かありますか こういう のできたらいいなとか
Teppei Iwaoka
検索のところで 今も既にKバーの 検索があると思うんですけど 実装
方法として一つ上がっていたもの の中に LLMを使って検索をできる
ようにするみたいなところも一つ あったかなと思ってて 既にあるん
ですけど そういうところも技術的な チャレンジというか 練習という
か 技術的なチャレンジとして ちょっとやってみるみたいなことも
この場を借りてできたらすごい ありがたいなとか思ったりしてます
ken
ね 三々暴れてもらって いくらでも
Yosuke Asai
ハックしてください それこそトランスクリプション
っていうか何ですかね 文字起こし したテキストとかだと相性がいい
気がするんで LLMとそういうところ と組み合わせてやったら楽しそう
ですよね っていう
ken
例えば会社でそういうプロジェクト に今できてないけど そういう経験
積みたいみたいな人がこれを ブレイカブルトイだと思ってやって
ネットコミュニティと技術ブログのマーケティング
ken
くれて そこで もう世に出てるサービス だからさ で こういうの作りました
みたいな ボートフォリムになる じゃないですか そういう使い方
を僕もしていきたいし 皆さん もしてくださいっていうところ
ですよね
本当 このプロジェクトの最初の 目的のところで 普段の業務では
得られない経験やスキルを得る 試すとか チャレンジするみたいな
ところが目的として挙げてるので 今後はそういうやりたい人がやり
たいものをやれるような ホスト の人たちと方向性が合ってる必要
はあると思うんですけど そこさえ 合ってれば どんどんやりたいこと
をやっていければいいなと思います
Yosuke Asai
ありがとうございます
ken
浅井さんのほうで方向性とかって あるんですか ちなみに
Yosuke Asai
方向性
ken
これをもっと興味を持ってくれた 人がいたとしては
Yosuke Asai
僕はここまでできてて 本当にすごい なと思ってて だいぶ満足してきて
るんですけど 純平さんとかもそう ですけど 自分がこれいいなと思った
ところをやっていただけたら それは僕は嬉しいので 本当にすごい
ずれてなければ それでどんどん 変わっていったら楽しいなと思いました
ちょっと広告に書いたんですけど あと 実装 陽介さんとかと話して
ken
ListenStyleっていうポッドキャスト のプラットフォームが今年リリース
されたのかな 結構無料でいろいろ 使えるやつで 最近もアップデート
があって アップルポッドキャスト が文字起こしに次回のiOSのバージョン
から対応する 日本語はまだみたい なんですけど そういうのもあって
ListenのRSS このロンドンテックトーク でも登録してるんですけどに 文字
起こしのVTTファイルが含まれてる 本当 先週とかに実装されて それ
を使えば自分で文字起こししなくても そこに文字起こしのデータがある
ので それを使っていろいろできる Listenのプラットフォーム上だと
サマリーとかチャプター 見出し の生成とかやってるんですけど
新しいツールとサービスの活用
ListenのページによるとOpenAIを 使っていろいろやってるっていうこと
なので 見本となるものがある ので 実際にOpenAIの制度で 元データ
は同じはずなので 文字起こしの 実際 どの程度の制度でサマリー
とかチャプターとかできるのか っていうのが試せたら どれぐらい
実用的 実際今Listenのでかなり 便利なんですけど サンドボックス
としてOpenAIのAPIを使ってみるっていう のはすごい楽しそうだなと思いました
ken
ありですよね ここら辺もすごい カッティングエッジな議論できてる
みたいな印象ありますよね 例えば ListenStyleさんみたいな日本のスタートアップ
で このPodcastとか音声メディア みたいなところで頑張ってらっしゃる
ところとか あとAppleからの新しい ニュースとかを見たり RSSのフィード
が変わったみたいなところを見ながら Podcastのビジネスのトレンド
ってこうなのかなとか 今 こういう フィーチャーが来てるんだなみたいな
そこら辺の議論の場にもなってて 楽しいなと思いましたね 結構
Yosuke Asai
変わってく業界だからね ここら辺も 今めちゃくちゃ思いつきなんですけど
このPodcastのスマートウェブサイト を作って これを他のPodcastとか
にも展開できたら面白いなって ちょっと思いましたね そういう
のも楽しそうだなって このテンプレート みたいなこと抜き出してきて 他の
人にも提供するみたいなOSS的に めっちゃ楽しそうですね ってちょっと
ken
思いました 時間かかりそうです けど
やりましょう じゃあ
やりましょうか これは今年の目標 ということで またあと1年あるんで
何かある
メモ書きに帰ったのは クラウド フレアの 今 Next.js使ってて ビルド
時にRSSの読み込みとか 実際の 基本的にはRSSですね 新規情報
やってるので Podcast Anchorのほう で入稿しても ビルドしないと
更新されないので RSSが更新された ときに 今は手動だったり ちょっと
軽いノーコードの自動化ツール みたいな 私が勝手に入れてやったり
とかしてるんですけど そこを せっかく クラウドフレア使ってるんで
ワーカーズで監視ツール 簡単なの 作って それを自動化したいなっていう
これは そんなに難しくないと思 うんで 近いうちにやりたいなと思います
関連してクラウドフレア 実際 今回 結構触ったんですけど 無料枠が
すごく大きくて 無料でいろんな ことができるので まだ全然使ってない
クラウドフレアのサービスある ので いろいろ触って もうちょっと
触ってみたいなっていうのは すごく 思いました
ken
クラウドフレア すごいよね 楽しい よね いろんな無料枠があるから
さ しかも どんどん出してくる から ちょっとプロダクションレベル
で使うには SLAとかが低いところ もあるけど ベータ版の機能とか
こういうサイドプロジェクトとか で すごい使いやすいんで
Yosuke Asai
けんさんも提案してくださいました けど OpenAIのWisperみたいなやつの
ワーカーで動くやつとか すごい 使ってみたいですね
ken
いいですね そういったツールとか フレームワークとかのライブラリー
群をパブリックにしてオープン ソースに出しちゃえば それもそれで
ポートフォルニーもなるだろう し 使ってくれる人もいるかもしれない
しね
Yosuke Asai
面白いですね
ken
ところかな あと メンションしてない 今後 引き続き開発していきたい
点ってあります 言い切ったかな
Yosuke Asai
そうですね こんなところですかね ということで 最後にもし 宣伝した
こととかはないですよね 今回は ということで じゃあ 今日はロンドン
テックトークのウェブページの 開発費用について 順平さんと
てっぺいさんをお呼びしてお話し しました ありがとうございました
Teppei Iwaoka
ありがとうございました
Yosuke Asai
ありがとうございました
ken
ありがとうございました
