この記事は NTTコミュニケーションズ Advent Calendar 2018 の11日目です。 普段はWebRTCプラットフォーム SkyWayの中の人をやっています。ですので、本日はWebRTCに関連したネタを投稿します。 WebRTCでは、コーデックの相性問題や端末・通信への影響が大きいため、映像（Video）がフォーカスされやすくネットにも情報が豊富です。反面、オーディオについてはそんなに情報がない気がします（特に日本語の情報は）。普段必要とされいないというのもあるかもしれませんが、WebRTCを使ってアプリ開発を行う上で、知っておいたほうが良いこともあるため、今回はまとめてみることにします。 お断り: この記事は以前私が勉強会で発表した資料をベースに、加筆しQiita記事として書き起こしたものです WebRTCで用いられるオーディオコーデック WebRTCで一般的に用いられてい

開発環境にChromeを選ぶなら知っておきたい12のテクニック Photo by Morning Brew on Unsplash さて、何らかの理由で、開発ブラウザとしてChromeを選んだとします。次は、デベロッパーツールを開き、コードのデバッグを開始します。 Consoleパネルを開いてプログラムの出力を確認したり、Elementsパネルを開いてDOM要素のCSSコードを確認したりします。 でも、Chromeデベロッパーツールを本当に理解していますか？実は、パワフルだけど知られていない機能がたくさん用意されていて、開発効率を大幅に改善できるのです。 ここでは、最も便利な機能を紹介します。お役に立てたら嬉しいです。 ChromeのCommandメニューから始めましょう。ChromeのCommandメニューは、LinuxのShellのようなものです。コマンドを入力してChromeを操作で

ts-node でも型チェックを外すオプションがあることをコメントで教えてもらいました。型チェックをかけない esbuild と同様の条件としたほうが、より平等な計測結果になりますので、計測し直しました。 参考 https://github.com/TypeStrong/ts-node#typechecking Node.js で TypeScript をトランスパイルしながら実行できる、 esbuild-register というパッケージがあります。 非常に速い esbuild を使いながら雑に TypeScript が実行できちゃう頼もしいパッケージです。 今までのメインプレイヤーであった ts-node よりも速いです。次の小さなスクリプトでも 1.5 倍程度の速度が出ています。 function wait(duration: number) { return new Promise

Next.jsからSlackのチャンネルに通知を送る方法 **Next.jsとはVercelが作成しているReactのフレームワークです。**面倒な設定を書かなくてもすぐに使えるZero Configを標榜しており、実際にwebpackやTypeScriptと一緒にReactを書く際にも特別な準備は不要です。SSRにも対応しており、Reactで開発するならNext.jsかFacebook製のCreate React Appを使うのがスタンダードになっています。 関連記事: Google Apps ScriptからSlackとLINEを連携するbotを作る手順を紹介します また、**Slackとは、主にIT企業で導入されている非同期コミュニケーションが可能なチャットツールです。**様々なツールと連携できるところに特徴があり、サーバーの監視ログやあらゆる通知をSlackのチャンネルに集約できま

zenn 初投稿になります、kimihiro_n です。 先日リリースした個人開発のアプリケーションのはなしをしたいと思います。 作ったもの 最初に宣伝かねて作ったものの紹介を。 イラスト投下閲覧用に Twitter を使っているのですが、公式 Twitter だとイラスト以外の投稿もたくさん混ざって追いづらかったり、最適化の影響で見逃してしまうツイートがあったりと不便さを感じていました。 Twitter API を使ってこの辺いい感じにフィルタリングしたら快適になるんじゃないかと思い Web アプリケーションとして作ってみることにしました。 自分のタイムラインやリストをフィルタリングして表示するだけのアプリケーションですが Twitter で絵師さんを追いたいみたいな用途だと便利に使えると思うので是非試してみていただければと。 後述しますが PWA(Progressive web app

この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 新しいクイックスタートガイドでは最新の React がライブサンプル付きで学べます。 このページは React のドキュメント、および関連する資料の概要となります。 React はユーザインターフェースを作成する為の JavaScript のライブラリです。ここのホームページ、またはこのチュートリアルから React がどういうものかを学びましょう。 React を試す React を学ぶ 最新の情報を追いたい人へ バージョン管理されたドキュメント 足りないものがある？ React を試す React は当初より、既存のプロジェクトに徐々に追加していけるようなデザインとなっています。たくさん React を使うのでも、少しだけ使うのでも構いません。触りだ

「Next.js 10.1」では、既存のコードを変更することなく、従来バージョンと比較して3倍高速な高速リフレッシュを実現したほか、依存関係グラフの最適化によって、インストール時間と依存関係のサイズを削減している。 また、next/imageにおいては、Apple M1チップ（いわゆるApple Silicon）のサポートや、フィードバックに基づく新たなレイアウトを追加するとともに、画像最適化機能において組み込みイメージローダを拡張し、カスタムローダの追加を可能にした。 ほかにも、Next.js Commerce Shopifyが統合され、エラーページに独自のロゴとブランドを追加する機能、大規模なTypeScriptアプリによる拡張可能な構成を実現するためのtsconfig.jsonにおけるextendsのサポート、プレビューモードが有効になっているかを検出できる機能、ルータメソッドでの先

<canvas> 要素はウェブページ上でグラフィックを描画するための平面を提供します。これは強力で、動画の処理にも有用です。 一般的なテクニックは次のようになります。 <video> 要素からのフレームを中間の <canvas> 要素に描画します。 中間の <canvas> 要素からデータを取得し、それを加工します。 加工したデータを「画面」の <canvas> を通じて描画します。 一時停止し、繰り返します。 例えば、動画を処理してグレースケールで表示する場合を考えてみましょう。この場合、ソース動画と出力のグレースケールのフレームの両方を表示します。通常、「動画をグレースケールで再生」機能を実装する場合、 display: none を <video> 要素のスタイルに追加して、ソース動画が画面に描画されず、変更されたフレームのみが表示されるキャンバスが表示されるようにします。 HTML

Jamstack is a popular approach for building web apps. But it can be challenging to use the Jamstack in highly interactive apps. Learn more about how to solve those challenges with Prisma and Next.js. Contents Rendering and data storage in web applications The server-client spectrum What is the Jamstack? Jamstack with Next.js and Prisma Jamstack best practices Conclusion Rendering and data storage

ホストした動画をストリーミング配信する簡単な方法はないか…と探して行きついたのが、HLS（とライブラリであるhls.js）です。 すごい、HLS(HTTP Live Streaming)の実装ってhls.js使えば、むっちゃ簡単に実装できる。あとはWebサーバがあればよし。これでプレイヤーの形ができれば動画ホスティング簡単にできちゃう。 — yuki (@yuki_h3_) June 13, 2020 なぜ調べていたかと言うと、長編動画を配信するのにクラウド上にファイルを配置したり社内で共有したりする方法だと、どうしてもダウンロードの動作になり、動画が数百MBや数GBだと待ち時間が相当長くなります。 他い良い方法はないか…と探したのがきっかけです。 YouTubeは便利ですが、誰でも見られる場所に置きたくない場合は恐らく使えません。 ですが、hls.jsを使うとWebサーバーさえあれば動画

はじめに ここ最近、Denoのフロントエンド向けのエコシステムについて、色々試してみたり、調査などをしていました。 そこで、この記事では、2021年現在のDenoのフロントエンド開発の状況であったり、所感などについてまとめます。 フレームワークについて Node.jsにおけるフロントエンド開発では、以下のフレームワーク[1]が使われることが多いと思います。 React Vue.js Preact これらのフレームワークは、すでにDenoでも動作します。 またこれらをベースにしたフレームワークがいくつか開発されています。 Aleph.js Aleph.jsはNext.jsに影響を受けたReactベースのフレームワークです。 以下のような機能が提供されています: HMRをサポートするdevサーバを提供 ファイルシステムベースのルーティング SSR/SSGをサポート CSS Modules 開発

Meguro.es #4 @wantedlyでのトーク内容です

自分 & 会社のプロジェクトでリッチな機能を持つテキストエディターを使いたい。 色々調べてたらDraft.jsが出てきたので、見てみました。 2020/08/07 追記 本記事に draft-js-plugins-editor を言及しておりますが、現在 draft-js-plugins-editor はメンテナンスされてません。Reactのバージョンによっては色んなエラーを出してくるので、使わない方が良いと思います。draft-js 自体はメンテナンスされ続けているので大丈夫です。 Draft.js Isaac Salier-Hellendag's React.js Conf 2016 talk, "Rich Text Editing with React" is live! Watch it here: https://t.co/yBUkyqCPnx @hellendag — Reac

株式会社LITALICOでWebエンジニア（Rails）を担当しています、@YudaiTsukamotoです。 この記事は『LITALICO Advent Calendar 2017』1日目の記事です。 記念すべき1記事目は、Facebook謹製のリッチテキストエディタフレームワークのDraft.jsについて書こうと思います。 はじめに 弊社では、conobie, LITALICO(りたりこ)発達ナビ, U2Plusを始めとするメディアを中心としたWebサービスを複数運営しております。様々な歴史的な経緯で、記事編集画面をスクラッチで実装しているのですが、以下のような辛さを抱えています。 記事UIパーツの修正・追加をする事が結構しんどい 書いた見た目と表示される見た目が異なるので、いちいちプレビューを見ないといけない Undo/Redoなどの履歴管理が辛い コンテンツの順序を変更することが辛

概要 Blenderで作成した3Dモデルを、Three.jsの中に取り込み、ブラウザで表示できるようになるまでの手順を示します。 Blenderは、3Dモデルを作成するのに適したソフトウェアです。 また、Three.jsは、ブラウザ上で動作する3Dモデルを作成するのに適した、JavaScriptのライブラリです。 なお、本記事では、どのようなフローでBlenderからThree.jsに3Dモデルを移行できるかを中心に記述します。そのため、Blenderでモデル作成、Three.jsの書き方についてはほとんど触れません。 手順 以下のような手順を実施していきます。 Blenderでモデルを作成する 作成したモデルをglTF形式のファイルにエクスポートする Three.jsにて、エクスポートしたglTFファイルをロードする Blenderでモデルを作成する 本記事ではモデルの作成方法の詳細では

人生初アドベントカレンダーです。よろしくおねがいします。 概要 Three.jsユーザーの皆さん、「Blender」、使っていますでしょうか？ BlenderはThree.jsと同じくオープンソースで開発されている統合型3DCGツールです。モデリングからコンポジットまで、CG作りはこれ一本で事足ります！ 今年の夏頃v2.8の大型アップデートがリリースされ、glTFのインポート/エクスポートがデフォルトでできるようになったりと、Web業界でも非常に熱いツールになってきたのではないかと思います。 ただ、Blender、統合型ツールということもあり、機能がいっぱいでこれから始める方には少しとっつきにくいところもあると思います。 というわけで今回はThree.jsユーザー目線でBlenderのおおまかな使い方を紹介したいと思います。 最低限の操作ができる、 モデルを配置することができる モデルのイ