UnityのWebビルドで作るブラウザ版REALITY｜REALITY株式会社
REALITYでUnityエンジニアをしている若旦那です。 REALITYでは 2025/4/1 に、エイプリルフールの企画として「ブラウザ版REALITY」をリリースしました。 企画の内容については以下のリンクをご確認ください！ https://reality.app/notice/page/c89yfbda2qaa 今回はこの 「ブラウザ版REALITY」の技術的な側面を話していきます。 REALITYアプリのアーキテクチャとWebへ移植した場合の構成REALITYのスマートフォンアプリまずは iOS / Android 版REALITYアプリのアーキテクチャについて簡単に説明し、そこからどのような形でWebへ移植していくかを本節で話していきたいと思います。 iOSアプリは、Swiftで実装されているネイティブ部分とUntiyで実装された3D View部分がある図のようにモバイルアプリ
サンプルで理解するWebGL 2.0 - Transform Feedbackによるパーティクル表現 - ICS MEDIA
ブラウザからハードウェアアクセラレーションを使用してリッチな表現を実現できるWebGL。その新たなバージョンであるWebGL 2.0はChromeとFirefoxで標準で利用でき、次世代のウェブ3D表現技術として注目されています。 前回の記事では一度のドローコール（描画命令）で複数のテクスチャーに別々の情報を同時に描画（出力）できるMultiple Render Targets（マルチプル・レンダー・ターゲッツ）について紹介しました。連載の最後となる本記事では同じくWebGL 2.0で追加された代表的な機能であるTransform Feedback（トランスフォーム・フィードバック）についてデモを交えて紹介します。 Transform Feedbackによるパーティクル表現 Transform Feedbackを使うと下記のデモのような表現が可能です。 デモを別ウインドウで再生する ソース
Vitestでドキュメンテーションテストする
ドキュメンテーションテストをご存知でしょうか。 ドキュメンテーションテストとは、ドキュメントに記載されたコードを実行し、その結果が期待通りであるかを検証するテストのことです。 これにより、ドキュメントの内容が常に最新の状態であることを保証することができます。 Rustでは公式がrustdocというツールを提供しており、これを使うことでドキュメンテーションテストを行うことができます。 この記事では、TypeScript/JavaScriptでドキュメンテーションテストを行うVitest向けのプラグインを紹介します。 vite-plugin-doctest vite-plugin-doctestは、Vitestのエコシステムを利用してドキュメンテーションテストを行うためのプラグインです。 Vitestとは おそらく、この記事を読んでいる方はほとんど知っていると思いますが、VitestとはVit
テキストでタイムラインアニメーションを作れるライブラリを作った - No Regrets in Bathing
0----1----2--- みたいな形式のテキストでタイムラインアニメーションを作れるライブラリを作りました。 しゅうまいさんと「Webでタイムラインアニメーションを作るのがだるい」的な話をしていて、 AAみたいな発想で楽をできないかなと思ったのが発端になっています。 まずは下記のデモを見てください。 See the Pen TimelineDown Example by hashrock (@hashrock) on CodePen. 下記の文字列を渡すことで、４つの絵文字がそれぞれ個別のアニメーションをします。 const p1 = "--------0----1--2-------"; const p2 = "---------0----1--2------"; const p3 = "----------0----1--2-----"; const p4 = "---------
WebGPUでシェーダーアートをやってみる（Vite、TypeScript）
はじめに 下記の素晴らしいGLSLを使ったシェーダーアートのチュートリアル動画の内容をWebGPUでやってみたのでその覚書です。WebGLは以前少しだけ齧ったことがありましたがWebGPUについては完全に知識ゼロなので入門のお題としてやってみた感じです。チュートリアル動画ではShadertoyを使っておりフラグメントシェーダーに記述する部分のみの解説なので、そもそもフラグメントシェーダーを使ってブラウザで描画させるまでの工程も含めてWebGPUで再現してみるという感じです。自分も完全に理解できているわけではないのでおかしい部分があるかもしれませんがご容赦ください。またWebGPUはまだWorking Draft（草案）段階なので今後いろいろと変更される可能性があることにも注意が必要です。 実際に作ったもの リポジトリ codesandbox 実装について ざっくりとした全体の作りとしては四
Denoが大好きな話、またはDenoへのラブレター｜comamoca
※このエントリはDenoの技術的なメリデメというよりかは、どうして僕がDenoが好きなのかをただただ語るだけの記事になっております。技術的な話はこちらの記事が参考になります。 僕はDenoが好きです。どのくらい好きかと言われたら「エディタに組み込んじゃうくらい」好きです。 プログラムを書く人にとってエディタとはテキスト編集をする際の手足となるもので、これにDenoを組み込むという事は苦楽を共にし、プログラミングのお供もとい相棒にしていくという覚悟があると言えるのではないでしょうか。 この記事ではそんなDenoについての愛を綴っていきます。 「エディタに組み込んじゃうくらい」とは余談です。あんまり興味ない方は読み飛ばしちゃってください。 僕はメインエディタとしてNeovimを使っています。これはVimから派生した比較的新しいVimなのですが、今では本家と結構違った仕様をしてたりします。 なの
Reactで画像やテキストにWebGLエフェクトをかけるライブラリ作った - マルシテイア
amagiです。先日React用コンポーネントライブラリのREACT-VFXをリリースしました。 REACT-VFXを使うと、画像や動画、テキストにWebGLでエフェクトをかけることが出来ます。 ⚡𝙍𝙀𝘼𝘾𝙏-𝙑𝙁𝙓 released！⚡ I created React components to add WebGL effects to images, videos and plain texts in your app. It also supports animated GIFs...😎 Visit website for details:https://t.co/mlnmExpUVZ#REACTVFX #WebGL #React #Threejs #GLSL pic.twitter.com/uDUQ8MKNcK— 𝘼𝙈𝘼𝙂𝙄 (@amagitakayos
AWS CDK コンストラクトライブラリ開発に関する5つのTips - maybe daily dev notes
AWS CDK TIpsシリーズの記事。 最近 deploy-time-build というCDK コンストラクトをリリースできたので、その過程で得られた知見を共有する。 github.com Tips プロジェクトの初期化はprojenで一発 プロジェクト生成ツールのprojenを使うことで、コマンド一発でリポジトリのベースを生成できる。詳しくはここを参照。コマンドはこんな感じ。 mkdir cool-construct cd cool-construct npx projen new awscdk-construct これに共通で必要なもの (package.jsonやeslintrc.json、GitHub Actionsの構成などまで！) はすべて入っているので、開発者は文字通りコンストラクトを定義するコードだけ書けば、自作コンストラクトを良い感じにリリースできる。 この開発体験はか
jsエンジンはソースコードをどう実行しているのか〜バイトコード、JITコンパイル〜
js実行環境であるnodeはV8を使っている jsエンジンはソースコードをどうやって実行しているのか ここからが本題です。jsエンジンの裏側をのぞいてみましょう👀 全体像 下記が基本的な流れ V8って書いてあるけど、下記の基本的な流れはエンジンによらずほとんど同じはず もちろんそれぞれのフェーズで実装の違いは在る。“Optimize & Compile it”の具体的な実装などはエンジンにより異なる Benedikt Meurer; “An Introduction to Speculative Optimization in V8”; jsの面白いところは、ASTから直接コンパイルして実行されるわけでもなく、単純なインタプリタのようにコンパイルを挟まずに実行しているわけでもないところ。それに、なんだか見慣れない”Get feedback”というフェーズさえある……！ここがJIT com
React 19でお手軽にCSS-in-JSを自作する
Nihonbashi.js #9 https://nihonbashi-js.connpass.com/event/332328/
Hono と Cloudflare Images で Next.js の画像リサイズを再現する
Hono Advent Calendar 2024 4 日目の記事です。遅れてすみません！！！！！！！！！！！！！！！！！！！！！ 去年はかけなかったけど今年は書けたのでよかったです.......... TL;DR Cloudflare Images を使えば、Next.js の next/image による画像最適化を再現できます。さらに、Cloudflare Images の「blur」オプションを利用することで、base64 プレースホルダー画像をサーバー側で生成する必要がなくなり、処理が効率化されます。コスト面でも、Vercel の画像最適化機能（$5/1000 枚[1]）に比べ、Cloudflare Images は大幅に安価（$0.5/1000 枚[2]）です。 デモ はじめに この記事は @cloudflare/next-on-pages や @opennextjs/clou
Next.jsのコンパイラから知るServer Actionsの完全解析 ~セキュリティ上の注意点も含めて~ - カミナシ エンジニアブログ
はじめに StatHackカンパニーの渡邉です。 私の普段の取り組みをこちらで紹介しているのでこちらもどうぞ。 note.kaminashi.jp 私たちKaminashiでは、さまざまなプロダクトにNext.jsを採用し始めています。 今回のブログではNext.jsの最も特徴的な機能の一つであるServer Actionsに関してフォーカスし、それがどういう仕組みで動いているのかコンパイラのソースコードを確認しながら解説し、 最後に実装上の注意点について述べます。 特にServer Actionsの具体的な中身の解説に関してはヘビーなので、実装上の注意点だけ見てもらうだけでも良いかもしれないです。 それではやっていきましょう。 Server Actionsとは？ Server ActionsとはNext.js v14から正式にリリースされた機能で、従来フロントエンドのために記述していたR
TypeSpec を使い倒してる #kyotojs 22 / Use up TypeSpec
Kyoto.js 22 https://kyotojs.connpass.com/event/321343/ Lightning Talk
TypeScriptのための新しいパッケージレジストリ「JSR」の素晴らしさ - Qiita
概要 この記事ではDenoからリリースされた新しいパッケージレジストリであるJSRについて紹介します。JSRはTypeScriptとES Modulesで実装されたパッケージのためのレジストリです。 JSRを利用することで以下のようなメリットを享受しながらパッケージを利用した開発を行うことができます。 ソースコードをもとにした充実したドキュメント ライブラリの実装をエディタ上で直接確認 JSRの仕組み JSRにはTypeScriptとES Modulesで実装されたパッケージのソースコードを直接アップロードします。JSRのWebサイト上でこのソースコードやコメントから自動生成されたドキュメントを読むことができるようになっています。例えばWebサーバライブラリのoakのページを見てみましょう。 パッケージ内のモジュールやクラスなどが階層化されたページになっています。 それらのページで型情報や
GitHub Packagesでプライベートnpmパッケージを公開する - くらげになりたい。
Nuxt.jsを使って開発してるけど、 よく使う処理やUIコンポーネントをライブラリ化したい。。 とはいえ、公開できるレベルまで作り込む感じでもないので、 npmjs.comに公開するのは気が引ける。。 GitHub Packagesを使えば、非公開パッケージを用意できるっぽいので、 試してみたときの備忘録(*´ω｀*) github.co.jp パッケージを公開する package.jsonの設定 { "name": "@<OWNER>/<REPO>", "version": "0.0.1", "description": "private npm package sample", "main": "dist/index.js", "types": "dist/index.d.js", "publishConfig": { "access": "restricted", "registr
小さなデプロイで大きな成果！ Next.jsで実現するマイクロフロントエンド
はじめに こんにちは、令和トラベルでフロントエンドエンジニアをしているyamatsumです。 ここでは複雑なWebアプリケーションを開発・保守する場合に有効なアーキテクチャパターンとして知られているマイクロフロントエンドをNext.jsを用いて実現した時の設計とその課題について紹介したいと思います。 ※ この記事は令和トラベルのTech LT会で共有した内容を記事にしたものです。社外の方にもご参加いただけるTech LT会は connpass にて告知しています。 マイクロフロントエンドとは マイクロフロントエンドは、複雑なウェブアプリケーションを小さな独立したWebアプリやモジュールに分割するアーキテクチャパターンです。各Webアプリは異なるチームによって開発・保守することができ、一般に技術スタックやフレームワークの選択も自由です。 このWebアプリ群を組み合わせることで、以下のような利
JavaScriptを大きく変えうる Dataflow Proposals の概要と論点(Call-this, Pipe Operator)
Dataflow Proposals とは 以下の5つのプロポーザルをまとめて Dataflow Proposals と呼んでいる。 Stage 2: Pipe operator Stage 1: Call-this operator Stage 1: Partial application(PFA) Stage 1: Extensions Stage 0: Function.pipe and flow 例えば Pipe operator, Call-this operator, Partial application を組み合わせると、以下のように書けるようになる。（提案段階なので変わる可能性アリ） import { getAuth, getIdToken } from "firebase/auth"; function isPublic(article) { return articl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
状態管理ライブラリZustandの導入から運用まで
衛星の軌道をWeb地図上に表示する
Vue.jsを用いて数万の農地データ情報を数秒で表示させるまでのカイゼンの軌跡
