Open10

どうやって実装するのか皆目見当が付かない技術まとめ【随時更新】

どうやって実装するのか皆目見当が付かない技術を書き留めておいて、1年後とかに分かるようになっていたらエモいな、と思ってまとめることにした。

音声通話中に、BGMを流す

stand.fmで配信をしているときに、BGMを流すことができる。
ブラウザ同士で音声通話をさせるのはagoraとかちょっと使ってみたのでやり方は分かるんだけど、そこでやり取りしている音に対して任意のBGMを合成するやり方が分からない。

agora等の外部サービスを使っていたら任意の音を合成するのはできないのか?それともできるのか。考えてみると音声が合成されているってどういうことなのかよくわからない。

スクロール芸が激しいサイトのコーディング

https://www.pola.co.jp/wecaremore/

先日話題になったこれ。スクロールに対して要素の動きがおかしい。全体がパララックスのように遅延して動いている感じ。JS/CSS落として解読したら分かるかなぁ。

CSSのスクロールスナップを使ったらできるよ、くらいの簡単なレベルでは無いように見える

オンライン上でソースコードを実行する

TypeScriptPlayGroundみたいな。

疑問点

  • そもそもソースコードを入力としてサーバー上で実行する方法は何を採用しているか?
  • どうやってOSコマンドインジェクションあたり対策するのがベターなのか?

皆目見当がつかないってほどではなくて、docker runできて速攻捨てる環境をサーバーサイドにて用意しておき、Node上からででもexecして叩けば良さそうというのは思う。Laravelとかも予めセットアップしたDocker image用意しておいてrunすればいいだけの話とは思う。でも実際に組むと大変そうだなー


Laravelの実行環境

https://zenn.dev/mikkame/articles/4926b4b3c0c58d

OSSの実行環境

https://github.com/judge0/judge0

英語だとonline-compilerって呼ばれるみたいですね。

https://github.com/topics/online-compiler

ユーザーが各自でサブドメインを発行できる仕組み

NotionやSTUDIO、Vercelなどの、ユーザーごとにサブドメインを柔軟に設定できる仕組みの作り方がわからない。あれって例えばRoute53でレコードの管理をしていたら、AWSのSDKを毎回叩いてサブドメインを作っているってことなのかな。だとしたら思ったより簡単かもしれない。

独自ドメインを紐付けることができる仕組み

これはTXTレコードにトークンを忍ばせると認証ができて、他人のレコードと紐付けることができるよ、という仕組みがFirebaseであったと思うけど、あのへんの動作原理がわかっていない。CNAMEを使って普通に自サービスのドメインを紐付けるアプローチをやっているVercelといった事例もあるので、そもそもやり方にいくつかのオプションが有る(Firebase方式の相対的なメリットは?)のが謎

コメントありがとうございます!!!

僕の意図としては、サービス上でユーザーが登録したタイミングなどで、自動でサブドメインが発行されているのはどう実装しているのか、という意味でした。

ご指定のリンクは、サブドメインを設定後にNginxなどでトラフィックを要件に合わせてプロキシできるような設定例に見えました。想定とは違いましたが、言われてみるとユーザーがサブドメインを自由に発行できるようになると、インフラ側のハンドリングも複雑になりそうだということに気がつけて大変勉強になりました。ありがとうございます!

Miroのような、ドラッグアンドドロップなどを駆使したドローイングツール

最近ちょくちょく使っているが、本当に凄い

https://miro.com/

以下画像のように、身につけたいスキルをマインドマップのように表現することに最近ハマっている

こういうツールをWeb上で作るとなると、検証モードで見た感じCanvasでゴリゴリ書いているようだが、Canvas上でクリックやマウスホバーなどのインタラクティブなアクションをどうやって実装していくのかは全く専門外で分からない。

僕がもし同様のツールを開発しろと言われたら、divタグを生やしまくって、react-dndとか、react-cool-dimensionを使って座標やドラッグアンドドロップの管理をすることになりそう。
あと、ピンチイン・ピンチアウトの実装方法もわからない

追加で、こういったデータはバックエンドでどういう保存をしているのか。フロントエンドでのオブジェクト管理に密結合した形式で保存するわけでもないと思うが、NoSQLにしつつ腐敗防止層を入れて疎結合にしているのかなぁ

非同期通信のProgress表示

Webサービスからファイルをアップロードしたときにプログレスバーが表示される。
適当に出しているのかなと思いきや、案外正確に進捗率が表示されているようにみえる。
これはどうやって実現しているのか?フロントエンドからサーバーサイドでのファイル処理の進捗を随時取得するようなことができているのか?わざわざそのためにWebsocketを開けているのか?

ログインするとコメントできます