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部分がある図のようにモバイルアプリ
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
小さなデプロイで大きな成果！ Next.jsで実現するマイクロフロントエンド
はじめに こんにちは、令和トラベルでフロントエンドエンジニアをしているyamatsumです。 ここでは複雑なWebアプリケーションを開発・保守する場合に有効なアーキテクチャパターンとして知られているマイクロフロントエンドをNext.jsを用いて実現した時の設計とその課題について紹介したいと思います。 ※ この記事は令和トラベルのTech LT会で共有した内容を記事にしたものです。社外の方にもご参加いただけるTech LT会は connpass にて告知しています。 マイクロフロントエンドとは マイクロフロントエンドは、複雑なウェブアプリケーションを小さな独立したWebアプリやモジュールに分割するアーキテクチャパターンです。各Webアプリは異なるチームによって開発・保守することができ、一般に技術スタックやフレームワークの選択も自由です。 このWebアプリ群を組み合わせることで、以下のような利
Hono[炎]っていうイケてる名前のフレームワークを作っている
Cloudflare Workersは「CDNのエッジで動く」という特徴だけでなく「サーバーレス」の環境としても非常に優秀です。プロジェクトの作成からデプロイまで「4ステップ」で出来ます。 自動的に {project-name}.{user-name}.workers.dev といったURLを発行してくれて、すぐさま公開されます。この手軽さとスピード感はヤバい。スクリプトのサイズが1MB以内、使えるAPIが極端に限られているなど制約がありますが、それはそれで単一機能のシンプルなアプリケーションを作る気にさせてくれます。 さて、このCloudflare WokersでWebアプリを作っていたのですが、だんだんとCloudflare Workersに特化した「Webアプリを作るためのフレームワーク」を作りたくなってきました。手段の目的化です。ということで作り始めました。「Hono[炎]」という
![Hono[炎]っていうイケてる名前のフレームワークを作っている](https://cdn-ak-scissors.b.st-hatena.com/image/square/eaca1c6dcc954189f470035c2c3b14c4b1aef959/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--y8Q1KJtg--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3AHono%25255B%2525E7%252582%25258E%25255D%2525E3%252581%2525A3%2525E3%252581%2525A6%2525E3%252581%252584%2525E3%252581%252586%2525E3%252582%2525A4%2525E3%252582%2525B1%2525E3%252581%2525A6%2525E3%252582%25258B%2525E5%252590%25258D%2525E5%252589%25258D%2525E3%252581%2525AE%2525E3%252583%252595%2525E3%252583%2525AC%2525E3%252583%2525BC%2525E3%252583%2525A0%2525E3%252583%2525AF%2525E3%252583%2525BC%2525E3%252582%2525AF%2525E3%252582%252592%2525E4%2525BD%25259C%2525E3%252581%2525A3%2525E3%252581%2525A6%2525E3%252581%252584%2525E3%252582%25258B%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Ayusukebe%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2pIMWY1VlpnSFMwLUJwekhzZjRGYXN0R1ZYTlpfZFh1U2pwdWNMNGc9czI1MC1j%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
プロンプトからREST APIを作るサービス『Hanabi.REST』の技術構成
Hanabi.REST AIにHonoJSのバックエンドを書かせて遊ぶ、Hanabi.RESTというサービスを一般公開します。それに際して、この記事では、Hanabiの紹介と簡単に技術スタックを解説していきます。 皆さんは、AIがプロンプトからUIを生成する、V0というサービスをご存じですか？僕はあれを見たときに、ある妄想が膨らみました。 「V0のAPI版があれば、プロンプトからWebアプリケーションを作れるやん！！」と。 当初はハッカソン用の小プロジェクトとして始めましたが、想定以上に面白い結果が得られたため、開発を継続することにしました。技術的な制約、様々な黒魔術による不安定な挙動、LLMの劣化など、数多くの壁を乗り越えながら、約半年をかけてようやくリリースに至りました！！ 次のリンクから実際にAIが生成したTwitter風のAPIを試すことが出来ます！ また、会員登録すれば誰でもAP
社内で使う npm パッケージの作成に Deno を採用した話 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちわ。フロントエンドエキスパートチームの@nus3_です。 最近、社内用の npm パッケージを作る必要があり、そのパッケージは依存が少なく、実装もシンプルだったので、npm パッケージの作成には Deno と dnt を採用しました。 dnt とは dnt は Deno で実装したモジュールを CJS、ESM に対応した npm パッケージに変換してくれるビルドツールです。 使い方も簡単で、次のように dnt が提供するbuild関数にエントリーポイントや出力先などの必要な情報を渡すだけです。 import { build } from "https://deno.land/x/dnt@0.38.1/mod.ts"; await build({ entryPoints: ["./mod/index.ts"], // Denoで実装したモジュールのエントリーポイント outDir:
Vercel AI SDK で Ollama を使う方法
はじめに Vercel AI SDK (React 等から LLM の API をいい感じに stream で呼び出せるようにするやつ) から Ollama （OSS の LLM をローカルで動かすやつ） を呼び出す方法を調べました。 参考 課題 Vercel AI SDK の サンプルコードを、OpenAI から Ollama の langchain のモデルを使って、置き換えて動かそうとしたけど、なぜかうまくいかなかった。 解決方法 ここのディスカッションにいろんな解決方法が記載されている。その中からいくつか試した。 解決方法 1 OpenAI Compatibility API を使う OpenAI API と同じ API で呼び出す方法。呼び出せるモデルに制約がある。マルチモーダルの llava は呼び出せない。 URL 変えるくらい。シンプル。すんなり動いた。 解決方法 2 la
GatsbyJS v2 はじめの一歩 (5) GraphQLによるデータ管理 - mottox2 blog
GatsbyJS v2 はじめの一歩 (5) GraphQLによるデータ管理 2018.09.04 今までの記事 GatsbyJS v2 はじめの一歩 (1) 開発環境の立ち上げ GatsbyJS v2 はじめの一歩 (2) 実際にページを作る GatsbyJS v2 はじめの一歩 (3) ページにスタイルを当てる GatsbyJS v2 はじめの一歩 (4) gatsby buildとデプロイ Webページを構成するのに必要なのは、HTML, CSS, JSとDataです。Dataというのは stringという文字列だったり、42という数字だったり、{ pizza: true }のようなオブジェクトで表現できます。データはReact Componentの外にあるべきという考えに基づいており、マークダウンやCSVファイル、一般的なデータベース、Web APIなども含めてデータ層で持っておき
Supabase+pgvector+OpenAI API+Remixで類似度検索を実装してみる
はじめに こんにちは、健常者エミュレータ事例集の管理人をしているcontradiction29です。 「健常者エミュレータ事例集」は、「個人の属性に寄らず、誰もが暗黙知を投稿でき、閲覧でき、評価できるプラットフォームを作る」をコンセプトに開発が進められているプロジェクトです。以下のリンクからアクセスできるので、よかったら閲覧してみてください。 ユーザーはテンプレートにそって経験を整理し、知識として共有し、自由に評価し、コメントで議論ができます。GPL3.0ライセンスの元、コード自体も公開されています。詳しくは以下のレポジトリをご覧ください。 健常者エミュレータ事例集には、今読んでいる記事と関連した記事を表示する機能が実装されています。例えば、記事食事中に料理の味を悪く言うのはよくないの関連記事は以下のようになっています。 ※ 2024-04-12時点です 今回は、この関連記事の推薦機能の裏
SVG勉強した流れを残したよ - syonx
zenn.dev SVGのベジェ曲線の基礎から試しながらだんだん応用して進化していく様子をステップごとに区切って残しました。 その中身はこの Zenn の記事にまかせて、ここでは苦労ポイントみたいなのを書いておきます。 こういうのをつくりたい QuartzComposer UnrealEngine Blueprint 懐かしの QuartzComposer …。こういうのを使ってできるインタラクティブグラフィックやゲームではなく、このGUI自体をつくりたい、というお話です。 どうやるか このワイヤーというかコネクターの曲線をどう実現するかが一番悩ましかった。 とりあえず慣れてるVueでノードコンポーネントのところだけ作ってみたりしたけど、配置するにはキャンバスみたいな概念が必要そう。 いろいろ試行錯誤したりしていると、やっぱりSVGじゃね？となって久方ぶりのD3.jsも試してみたけどなんか
Service WorkerとWasmを組み合わせてサーバー処理をブラウザーでリアルに再現する
今回の話はWasmというよりもService Workerの話がメインになりますが、WasmとService Workerを組み合わせることで、ブラウザー上でサーバー処理をリアルに再現することができるので、このタイトルにしています。 まずは動画をご覧ください。 見ていただくと分かるように、ブラウザー上でPHPのコードを書くとその実行結果が右側に表示されています。 特に面白い点が、お問い合わせフォームのPOST後の処理までもブラウザー上だけで実行できているという点です。 これはWasmとService Workerを組み合わせて実現しています。 大体以下のようなプロセスで実現しています。 Wasmはブラウザー側でも実行可能ですが、あえてService Worker上で実行しているのは、URLへのリクエストに対してそのリクエストにインターセプト（介入）することで、POST後の処理などもブラウザ
ブログの脱WordPressとJamstack化 | 初歩からの無職
このブログをWordPressからJamstack構成にしました。具体的にはフロントエンドはGatsbyJS、バックエンドはContentful、GithubでビルドしてNetlifyでホスティングしているという構成です。まだ細かい部分は作れてないですが、ある程度移行は完了したので移行に関する備忘録として残しておきます。 移行のモチベーション サーバー代つらたん 移行のモチベーションの大きな部分として、放置気味のブログに対してサーバー代が割りに合わないという不満がありました。移行前はConoHa VPSにWordPressをインストールして運用していました。VPSサーバー代はサーバーサイドの勉強代として自分を納得させていましたが、Kusanagi環境に移行してからは自分で弄ることもほぼほぼなくなり、世の中も何となくサーバーレスイケイケな雰囲気を出しているので、徐々にこのまま払い続ける意味は
deno で機械学習
はじめに 最近、deno が面白くなり始めています。deno はコマンドラインバイナリを1つインストールすれば、import によりパッケージの読み込みはインターネットからダウンロードしてキャッシュされ、開発者が package.json を書く事もなく、とてもお手軽に TypeScript を書くことができます。 もし、機械学習をやりたいとして、事前準備(npm でインストールしたり、conda/pip 等で依存物をインストールしたり)が大幅に削減できるなら、とても便利だと思いませんか？ deno で機械学習 deno で機械学習と聞くと tensorflow.js を使いたくなりますが、残念ながら現在はまだ deno で tensorflow.js を扱える様にはなっていません。しかし deno 1.8 では GPU を扱う為の機能が追加されており、ジワジワではありますが目標に向かって
NuxtのSSRモードでメモリリーク？原因はaxios? - ANDPAD Tech Blog
はじめに 最近金髪から黒髪に戻して更生しました藤井（フロントエンドエンジニア）でございます。久々にテックブログに貢献させて頂きます！ 今はメインの施工管理機能の改修の傍ら、新機能開発にも携わっておりまして、フロント側はSSRモードのNuxtを採用しております。さて、そんな中SREチームから「フロントエンドがメモリリークしていませんか？」との通報が入りました。 いやいや、そんなハズは・・と思いながらもDatadogを見てみると見事にメモリ消費量が右肩上がりに増えていってます。なぜじゃ・・・。 調査開始 メモリリークになるような処理を入れた覚えはないぞ！と思いつつも調査開始です。ひとまずChromeのDevtoolでPerformanceやMemoryタブを見ながら確認しますが、これと言って原因が見つかりません。 おかしい・・。なんでだろう。 あれこれ試しましたが解決せず、ほぼ1日消化しました
Nuxt.jsとAuth0でモダンなソーシャルログインを実装してみる - SMARTCAMP Engineer Blog
エンジニアの井上です！ 今回は私が最近気になっていたAuth0とNuxt を使って簡単な認証機能を作っていきたいと思います。 認証をどのように実装するかは皆さん結構悩まれているかなと思います。 Auth0は様々な既存プロバイダと自由に連係可能かつマルチデバイス対応、多要素認証に対応しているなどのメリットがあり、かつ導入がとても簡単そうなので個人的に注目しています！ Auth0とは Nuxtとは Auth moduleとは Nuxt middlewareとは 実際にAuth0で認証作ってみる Nuxt でプロジェクト作成 Auth Moduleを追加する Auth0を設定する 認証ページを作成する ログインしてみる middlewareを使用してログインチェックする 終わりに Auth0とは Auth0 は認証基盤サービス (IDMaaS) です。マルチデバイス対応しOpenID Conne
Nuxtでビルド時にAPIを静的化して、完全にサーバーへのリクエストをなくすト - Qiita
ビルド時にAPIを静的化するジェネレータを自作しましたので、ご紹介です。（コード有りです。） Nuxtのジェネレータを自作中...。 ・Airtableでマークダウン ・Nuxtビルド時にJSON生成 ・link rel="prefetch"にjson追加 ・ルート生成 ・コンポーネントからは/_nuxt/xxx.jsonにリクエスト って感じで出来たんだけど、爆速なんだが！ pic.twitter.com/DvJL5hucGq — 新田聡一郎 (@soichiro_nitta) 2019年2月11日 最近はやりのヘッドレスCMSをやっていこうと思ったのですが、APIのリクエスト制限きびしいんですよね...。 現状だとNuxtは静的generateモードでも、ページ遷移時にリクエストが発生してしまうので、完全に静的化してしまう必要がありました。 以下のような流れになります。 Nuxtビルド
HTML5で実現できる！環境光に合わせたレスポンシブなUI
HTML5で実現できる！環境光に合わせたレスポンシブなUI Tomomi Imura（Slack） フロントエンド開発やデザインに携っている皆さんにとって、ここ数年間「レスポンシブ・ウェブ」についての話題は避けて通れないものとなっているでしょう。モバイルやタブレット上でも、ユーザー・エクスペリエンスを失うことのないウェブを表現するには、CSS3 Media-queriesが欠かせないものとなってきました。 それでは実際、レスポンシブ・ウェブとは何についての対応（レスポンシブ）なのでしょうか。 現在のところ、私たちがいうレスポンシブ・ウェブデザインとは、どんなスクリーンの幅や表示領域、デバイスの画面解像度や画面の縦横の向きにも対応したウェブデザイン、というのが事実上の定義となっているようです。 そこで今回、私はその定義を超えたレスポンシブ・ウェブのユースケースについて考えてみました。 太陽光
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
昔懐かしいインターネットの風物詩を最近の技術で作る話 - Speaker Deck
Nuxt.jsとGraphQLから見えたWeb開発の未来
