どうやって実装するのか皆目見当が付かない技術まとめ【随時更新】
meijinどうやって実装するのか皆目見当が付かない技術を書き留めておいて、1年後とかに分かるようになっていたらエモいな、と思ってまとめることにした。
meijin音声通話中に、BGMを流す
stand.fmで配信をしているときに、BGMを流すことができる。
ブラウザ同士で音声通話をさせるのはagoraとかちょっと使ってみたのでやり方は分かるんだけど、そこでやり取りしている音に対して任意のBGMを合成するやり方が分からない。
agora等の外部サービスを使っていたら任意の音を合成するのはできないのか？それともできるのか。考えてみると音声が合成されているってどういうことなのかよくわからない。
meijinスクロール芸が激しいサイトのコーディング
先日話題になったこれ。スクロールに対して要素の動きがおかしい。全体がパララックスのように遅延して動いている感じ。JS/CSS落として解読したら分かるかなぁ。
CSSのスクロールスナップを使ったらできるよ、くらいの簡単なレベルでは無いように見える
meijinオンライン上でソースコードを実行する
TypeScriptPlayGroundみたいな。
疑問点
- そもそもソースコードを入力としてサーバー上で実行する方法は何を採用しているか？
- どうやってOSコマンドインジェクションあたり対策するのがベターなのか？
皆目見当がつかないってほどではなくて、docker runできて速攻捨てる環境をサーバーサイドにて用意しておき、Node上からででもexecして叩けば良さそうというのは思う。Laravelとかも予めセットアップしたDocker image用意しておいてrunすればいいだけの話とは思う。でも実際に組むと大変そうだなー
Laravelの実行環境
OSSの実行環境
英語だとonline-compilerって呼ばれるみたいですね。
meijinユーザーが各自でサブドメインを発行できる仕組み
NotionやSTUDIO、Vercelなどの、ユーザーごとにサブドメインを柔軟に設定できる仕組みの作り方がわからない。あれって例えばRoute53でレコードの管理をしていたら、AWSのSDKを毎回叩いてサブドメインを作っているってことなのかな。だとしたら思ったより簡単かもしれない。
独自ドメインを紐付けることができる仕組み
これはTXTレコードにトークンを忍ばせると認証ができて、他人のレコードと紐付けることができるよ、という仕組みがFirebaseであったと思うけど、あのへんの動作原理がわかっていない。CNAMEを使って普通に自サービスのドメインを紐付けるアプローチをやっているVercelといった事例もあるので、そもそもやり方にいくつかのオプションが有る（Firebase方式の相対的なメリットは？）のが謎
nabeyangはじめまして。どの程度関係のある話か自信ありませんが、動的にサブドメインを取り扱っているスライドがあったのでリンクを貼り付けておきます。
meijinコメントありがとうございます！！！
僕の意図としては、サービス上でユーザーが登録したタイミングなどで、自動でサブドメインが発行されているのはどう実装しているのか、という意味でした。
ご指定のリンクは、サブドメインを設定後にNginxなどでトラフィックを要件に合わせてプロキシできるような設定例に見えました。想定とは違いましたが、言われてみるとユーザーがサブドメインを自由に発行できるようになると、インフラ側のハンドリングも複雑になりそうだということに気がつけて大変勉強になりました。ありがとうございます！
meijinMiroのような、ドラッグアンドドロップなどを駆使したドローイングツール
最近ちょくちょく使っているが、本当に凄い
以下画像のように、身につけたいスキルをマインドマップのように表現することに最近ハマっている
こういうツールをWeb上で作るとなると、検証モードで見た感じCanvasでゴリゴリ書いているようだが、Canvas上でクリックやマウスホバーなどのインタラクティブなアクションをどうやって実装していくのかは全く専門外で分からない。
僕がもし同様のツールを開発しろと言われたら、divタグを生やしまくって、react-dndとか、react-cool-dimensionを使って座標やドラッグアンドドロップの管理をすることになりそう。
あと、ピンチイン・ピンチアウトの実装方法もわからない
meijin追加で、こういったデータはバックエンドでどういう保存をしているのか。フロントエンドでのオブジェクト管理に密結合した形式で保存するわけでもないと思うが、NoSQLにしつつ腐敗防止層を入れて疎結合にしているのかなぁ
meijin非同期通信のProgress表示
Webサービスからファイルをアップロードしたときにプログレスバーが表示される。
適当に出しているのかなと思いきや、案外正確に進捗率が表示されているようにみえる。
これはどうやって実現しているのか？フロントエンドからサーバーサイドでのファイル処理の進捗を随時取得するようなことができているのか？わざわざそのためにWebsocketを開けているのか？
Miroミロ・ジャパンの鈴木と申します。突然のコメント大変失礼致します。
Miroをお取り上げて頂き、大変嬉しく思います。どうもありがとうございます。
日本語化をスタートしてまだ2年も経っておらず、使いにくいところもたくさんあるかと存じます。もし機能改善のご要望などございましたら、お知らせくださいませ。
せっかく取り上げて頂きましたので、一つご相談させて頂きたくご連絡いたしました。
オンラインホワイトボードの印象が強いMiroですが、真っさらなボードから使い始めるのは少し抵抗がある方が多くいらっしゃいます。
そのため、ご存知の通り、Miroではご存知のように様々なテンプレートを用意しております。
その中でも特に使用頻度の高いテンプレートが、「マインドマップ」のテンプレートとなります。
もしよろしければ、見ていただいた方がすぐテンプレートにアクセスして使用するイメージが湧くように、
本文中の「マインドマップ」という文言に、下記テンプレートアクセスリンクを付与頂くことは可能でしょうか。
キーワード：マインドマップ
リンク先：https://miro.com/ja/mind-map/
お忙しいところ大変お手数をおかけいたしますが、ご検討いただけますと幸いです。
何卒よろしくお願い申し上げます。