こんにちは。sumirenです。 イントロダクション 先日、Next.js 15 RCが出ました。App RouterでPartial Prerenderingが広く使われ始める日も近いのではないでしょうか。 Partial Prerenderingは、特にStreamingと一緒に利用し、Vercelにデプロイした場合、強力に最適化が行われます。最適化は非常に高度で、部分的な静的レンダリングといったアプリレイヤから、エッジとオリジンの使い分けといったインフラの構成まで絡む複雑な設計です。最終的にVercelにデプロイされた後の全体の動作イメージが頭に入っている方は少ないのではないでしょうか。 この記事ではPartial PrerenderingとStreamingについて、Vercelデプロイ後の動作イメージがついている状態を目指します。静的ルートやサーバーサイドフェッチなど単純な例から
CDNやDDoS防御サービスなどを展開するCloudflareは、平均で毎秒6000万件を超える大量のHTTPリクエストを処理しています。そうしたHTTPリクエストの処理において、「処理を見直すことでCPU使用率を1％以上削減できた」と公式ブログに投稿しました。 A good day to trie-hard: saving compute 1% at a time https://blog.cloudflare.com/pingora-saving-compute-1-percent-at-a-time/ Cloudflareのサービスで使用されているPingoraフレームワークにおいて、ユーザーのリクエストを実際の宛先サーバーである「origin」に送信する際にはCloudflareの内部だけで使用されるヘッダーを削除する必要があります。 ヘッダーを削除するため、Cloudflareは
by Alpha Photo ブラジルの最高裁判所がイーロン・マスク氏が所有するXとStarlinkに対し、司法命令違反の疑いで、1日につき500万ブラジルレアル(約1億3000万円)の罰金を科すと2024年9月19日に決定しました。仮にXが罰金を支払わなかった場合、Starlinkにも共同責任が課され、SpaceXにも罰金の支払い義務が生じます。 STF aplica multa diária de R$ 5 milhões ao X por descumprimento de decisão judicial｜Supremo Tribunal Federal https://noticias.stf.jus.br/postsnoticias/stf-aplica-multa-diaria-de-r-5-milhoes-a-x-por-descumprimento-de-decisao-
CDNやDDoS防御などのサービスを提供するCloudflareが、AIのトレーニング用にウェブサイトをスクレイピングするボットの分析・制御ツール「AI Audit」を発表しました。 Cloudflare Helps Content Creators Regain Control of their Content from AI Bots | Cloudflare https://www.cloudflare.com/press-releases/2024/cloudflare-helps-content-creators-regain-control-of-content-from-ai/ AIを開発する企業はトレーニング用のデータを収集するため、営利企業のメディアやニュースから個人の小規模なサイトまであらゆるサイトのコンテンツをスキャンしています。こうしたスキャンについて、これまでウェ
＜PR＞ 最新のおすすめ副業7選：将来性と収益性を兼ね備えたビジネスアイディアで脱サラを目指そう | イッサP | Brain クラウドワークスの徹底解説：登録方法から稼ぎ方まで完全ガイド | イッサP | Brain 普通を超えて圧倒に結果を出す人たちは、なにを持っているのか？ | イッサP | Brain 目次 SEOとは？ 基本を押さえる SEOの重要性 検索エンジンの仕組み オンページSEOとオフページSEO キーワードリサーチ: 最初のステップ キーワードリサーチとは？ 初心者向けキーワードリサーチの手順 1. 自分のブログテーマに関連する基本キーワードを考える 2. 検索意図を考慮する 3. キーワードツールを使う 4. ロングテールキーワードを狙う 5. 競合分析を行う コンテンツの最適化: 記事の書き方と構成 SEOに強いコンテンツの重要性 タイトルの重要性 タイトル作成の
ブラジル最高裁判所の命令により同国内からアクセスできなくなっていたX(旧Twitter)が、再び利用できるようになったと、地元メディアが報じました。ただし、当局がブロックを解除したわけではないため、ブラジルのユーザーがいつまでXを使い続けられるかは不透明です。 Is X available again in Brazil https://brazilian.report/liveblog/politics-insider/2024/09/18/is-x-available-again-in-brazil/ Elon Musk’s X Finds Way Around Brazil Ban and Goes Live Again for Many Users - The New York Times https://www.nytimes.com/2024/09/18/world/ameri
Instant Purge: invalidating cached content in under 150ms
Instant Purge: invalidating cached content in under 150ms2024-09-24 (part 3 of the Coreless Purge series) Over the past 14 years, Cloudflare has evolved far beyond a Content Delivery Network (CDN), expanding its offerings to include a comprehensive Zero Trust security portfolio, network security & performance services, application security & performance optimizations, and a powerful developer plat
A good day to trie-hard: saving compute 1% at a time2024-09-10 Cloudflare’s global network handles a lot of HTTP requests – over 60 million per second on average. That in and of itself is not news, but it is the starting point to an adventure that started a few months ago and ends with the announcement of a new open-source Rust crate that we are using to reduce our CPU utilization, enabling our CD
CloudflareではCDNやWAFを使っていない外部のウェブサイトであっても、（勿論CloudflareのCDN/WAF経由のウェブサイトであっても）Health Check を行うことが可能です。 やってみる 環境構築 まずはいつも通り以下の手順に従ってnginxでWebサイトを起動します。 Health Check の設定 マネージメントコンソール左ペインでtraffic→Health Checksをクリックします。 Createをクリックします。 適当な名前を入力し監視対象のURLもしくはIPアドレスを入力します。CloudflareのCDNを使っているウェブサイトの場合、Cloudflare側で管理しているドメインのURLではなくオリジンのURLかIPアドレスです。 監視対象のプロトコルとメソッドを設定します。 HTTP(s)の場合GETとHEADのみをサポートしています。期待
Last week, I posted a short update on LinkedIn about CrUX’s new RTT data. Go and give it a quick read—the context will help. Chrome have recently begun adding Round-Trip-Time (RTT) data to the Chrome User Experience Report (CrUX). This gives fascinating insights into the network topography of our visitors, and how much we might be impacted by high latency regions. What is RTT? Round-trip-time (RTT
CDNのReduxを利用してkintone UI Componentを状態管理する(Redux@3.6.0) - Qiita
いつもreact-reduxとredux-toolkitを利用して開発しています。 しかし、とある案件でwebpackなどでのトランスパイル禁止という縛りを受けた上で、kintone UI Component利用した複雑なUI構築の必要が出ました。 せっかくなので知見をここでまとめてみようという試みです。 kintone UI Componet (=KUC) kintone UI ComponentはkintoneライクなUIがつかえちゃう素敵なライブラリです。略してKUC。 ソースを見るとLitで作られているようですね。 コンポーネント内部では状態を管理していますが、複合したコンポーネントを統合管理する方法はなさそうです。（あるかも。教えてください！） Redux 状態管理はいろんな方法がありますが、Reduxは一番使われるフレームワークだと思います。React開発では絶対使いますね。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3D空間に人物画像を描画</title> <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script> <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/body-pix"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></scrip
シンプルでありながら強力な方法。Three.js使用によるカスタムシェーダーの実装。 - Qiita
Three.jsは、WebGLを簡単に扱うためのJavaScriptライブラリであり、シェーダーを用いた視覚効果を簡潔に実装することが可能です。本システムでは、シンプルなカスタムシェーダーを用いて、球体の表面にリアルタイムで変化するテクスチャを適用します。 Three.jsを使用した動的パーリンノイズシェーダーの実装 概要 本稿では、Three.jsを使用して動的に変化するパーリンノイズシェーダーを実装する方法について説明します。Three.jsは、WebGLの抽象化ライブラリであり、視覚的なエフェクトを簡単に実装できるため、シェーダーのカスタマイズも容易です。本実装では、球体の表面にリアルタイムで変化するテクスチャを適用し、視覚的に興味深い効果を得ることを目的としています。 頂点シェーダー（Vertex Shader） 頂点シェーダーは、各頂点の位置をクリップ空間に変換し、フラグメントシ
On June 25, 2024, the Sansec security research and malware team announced that a popular JavaScript polyfill project had been taken over by a foreign actor identified as a Chinese-originated company, embedding malicious code in JavaScript assets fetched from their CDN source at: cdn.polyfill.io. Sansec claims more than 100,000 websites were impacted due to this polyfill attack, including publicly
奥儀。小さなGPUでの算法術。3Dテンソル算法のパフォーマンス。画像テンソルの内積算法術。 - Qiita
ショートストーリー：「未来を紡ぐコード」 東京のプログラマ、加藤拓也は、夜の東京の喧騒から少し離れた静かな部屋で、一心不乱にキーボードを叩いていた。彼は次世代の動画生成AIモデルの研究に取り組んでおり、その最前線で活躍するプログラマだ。今日の彼の目標は、彼の開発した新しいアルゴリズムを使って、数学的な美しさを視覚化するアニメーションを作り上げることだった。 拓也の最新のプロジェクトは、3次元テンソルの計算を利用して、視覚的に魅力的なヒートマップを生成することだった。彼のコードは、正弦波と余弦波の複雑なパターンを組み合わせたもので、それぞれが異なるテンソルとして表現される。このテンソルたちは、未来の動画生成AIにおける「可能性の断片」だ。 ある晩、拓也は深夜のコード作成に没頭していた。彼のコンピュータの画面には、青い光が反射するテンソルデータが表示されている。テンソルAとテンソルB、それぞれ
サムネイル付きのslickスライダーを実装したい。 サムネイルを連動させることはできたが、サムネイルをスライダーではなく固定にし、2列2段以上で表示したい。 本記事ではCSSを使ってこのような悩みを解決します。 ※jQueryとslickのプラグインを使うのであらかじめCDNなどご準備ください。 参考CDN <!-- slick_CSS --> <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet" /> <!-- jQuery --
CMSに訪れる異次元の進化 UIも働き方もすべてが変わる | Web Designing Web
およそ1年半ぶりのCMS特集、今回のテーマは「高速化」です。制作、運用、表示、そしてPDCAと高速化すべき点はいろいろとありますが、特集序盤の本イントロページにおいては、近未来に向けた話を取りあげてみたいと思います。今回はヘッドレスCMSである「Kuroco」を開発する（株）ディバータの代表である加藤健太さんに、エンジニア目線で注目すべき動きはないかと、お話を伺いました。バックエンドの動向は必ずフロントエンドに、そしてWeb制作全体に影響を与えることになるからです。そこで出てきたのは、実に興味深い、「2つのキーワード」でした。 教えてくれたのは… 加藤健太さん株式会社ディバータ 代表取締役／早稲田大学在学中、一休.comの創業メンバーとして参画。卒業後はソフトバンクグループでカー用品販売サイトや転職アドバイザーマッチングサイトの立ち上げ・戦略・企画・システム設計・開発運営に携わる。2005
前回、Fastlyを使うとCloud Runに独自ドメインを割り当ててHTTPSで使うのが楽ちんだという話をしました。 今回は実践Fastly設定RTAをやってみたいと思います。 前提 ドメインは任意のDNSで管理してて良い（今回はムームーDNS） Cloud Runをデプロイ済みで xxxx-a.run.app ドメインで動作済み ではいってみましょう 1.Fastlyに会員登録 No Credit Card requiredです。クレカなしでメアドだけあれば始めることができます。FastlyのWebサイトにアクセスして、右上のボタンを押します。人間のexpertとTalkするのは気持ちの準備が必要ですが今回は不要です。 サインアップフォームを埋めます。名、姓、会社名（個人ならIndivisualとかでもいいのかな？）RoleはDeveloperとかでいいと思います。メール、パスワードを
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ウォータースライザーゲーム</title> <style> body { margin: 0; overflow: hidden; } canvas { display: block; } </style> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/three@0.
Theme 第 159 回のテーマは 2024 年 8 月の Monthly Platform です。 Show Note Chrome 動向 Stable: 128 Updates New in Chrome 128 https://developer.chrome.com/blog/new-in-chrome-128 Line breakable <ruby> Promise.try PointerEvent.deviceProperties for multi-pen inking What's new in DevTools, Chrome 128 https://developer.chrome.com/blog/new-in-devtools-128 What's New in WebGPU (Chrome 128) https://developer.chrome.com/b
GPT-2: ショートストーリー: 「数値からaiへ」数値のaiは、aiが人間に与える影響を数値で表し、数値がaiに与えている影響の量と、人間のaiの数値との差をaiによって表します。 数値はaiが行う数値計算のアルゴリズムによって、人間が計算した数値を、人間が行う計算方法によって計算しますが、この数値を計算するアルゴリズムは「数値」と「ai」の2種類があります。 「aiによる数値処理」は、「数値による計算」に比べて、精度が格段に向上しています。 例えば、ある数値にaiが行った数値の結果を「計算結果」として表示しますと、「計算結果は、計算式によって数値として表されます。」というように GPT-4: ショートストーリー: 「数値からAIへ」 東京の夜が深まるころ、都会の喧騒から少し離れた小さなアパートメントの一室で、田中健一はパソコンの前に集中していた。彼は熱心なプログラマーで、物理シミュレ
4次元サイン関数をアニメーションさせ、各グリッドの値を色で表現してます。このコードでは、TensorFlow.jsを使用して並列化された計算を行い、Three.jsで3Dのヒートマップを表示します。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3D Heatmap Animation with TensorFlow.js</title> <style> body { margin: 0; } canvas { display: block; } </style> </head> <body> <!-- three.jsとTensorFlow.jsのCDNを
明るいカラフルな チョコボールがバウンドする ゲームです。 スペースキーを押すとチョコボールが出ます。 コードをメモ帳などのテキストエディタに貼り付け、ファイルを「index.html」などの拡張子が.htmlのファイルとして保存します。その後、保存したファイルをブラウザで開けば、コードが実行されます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>明るいカラフルなバウンドボール</title> <style> body { margin: 0; } canvas { display: block; } </style> </head> <body> <!-
Vercel Vercel は、Webアプリケーション向けのサーバーレスホスティングプラットフォームです。 彼らはGitベースのデプロイをサポートし、各ブランチやプルリクエストに対するデプロイプレビュー、さらに上に構築されたいくつかの素敵なコラボレーションツールも提供しています。 Vercelでは、ページごとにNodeランタイムまたはV8 Edgeランタイムを使用するかどうかを指定できるため、一部のページにはNode関数を使用し、他のページにはV8関数を使用できます。デフォルトではエッジ関数を使用し、必要に応じてNode関数を使用することをお勧めします。 Vercelは各エンドポイントを独自の関数に分割するため、各関数バンドルの50MB制限を超えるのは非常に困難です。 VercelはWebsocketsをサポートしておらず、ストリーミングをサポートしているものの、接続は30秒間しか開かれな
Cloudflare で RAG の使いところを体感
はじめに 前に RAG の素振りはしましたが、このスケベ記事を読んだんで、自作ツールに使ってみます。 背景 上場企業の Web サイトの配信場所を調べるツールに Workers と D1 使ってます。 たとえば AS いれると D1 から抜いてきます。 追加でこの辺を知りたいと思ってます。 企業の売上高と配信場所の関係 AS を持たない CMS や WAF 事業者から配信している企業 方針 思いつくのは DB への情報追加やクエリーの追加です。 企業の売上情報 CNAME に事業者名がでてくることが多いので、事業者特有の文字列で検索するクエリー 結果も予想がつきます。超正確に答えてくれるでしょう。 でも、追加情報を調べるのが、面倒。 一方、 DB の情報からテキストを作ってベクトルしておけば、RAG LLM の力でイイ感じの回答をくれるんじゃないか、と期待。でも、正確さはどうなんだろ、と不
エッジサーバーとは（徹底解説）
「サーバー」という概念については、おそらく多くの方がご存知でしょう。サーバーとは、デバイスを使ってアクセスするウェブサイトやファイル、サービスをホストするコンピュータです。エッジサーバーも基本的には同じ仕組みですが、ネットワーク内の異なるポイントからアクセスするのが特徴です。 最近のネットワークでは、サーバーを1箇所に置くのではなく、ネットワークの両端、つまり「エッジ」にある複数の分散した場所にサーバーを配置する、分散型のアプローチが主流です。エッジサーバーは、ユーザーからのリクエストに迅速に応え、ネットワークのセキュリティを強化します。 今回はエッジサーバーの仕組みに迫ります。エッジサーバーアプリケーションや、他のネットワークモデルとの違いなども見ていきましょう。 集中型ネットワークでは、クライアントデバイスを1箇所にあるサーバーに接続します（または複数のマシン）。サーバーはクライアント
Cloudflareがウェブページの読み込みを最大45％高速化するサービス「Speed Brain」開発 | Web担当者Forum
ユーザーが次に訪問するページを予測、移動する前にブラウザのキャッシュにダウンロード クラウドサービス事業の米国Cloudflare(クラウドフレア)は、ウェブページの読み込みを最大45％高速化するサービス「Speed Brain」を開発した、と9月25日発表した。日本法人のクラウドフレアジャパンが9月26日公表した。ユーザーが次に訪問するページを予測し、ユーザーが移動する前にブラウザのキャッシュにページをダウンロードする仕組み。 CloudflareのCDN(コンテンツデリバリーネットワーク)「Cloudflare」を利用するウェブサイトの読み込みが早くなり、ほぼ瞬時に完了する。「Google Chrome」「Microsoft Edge」などのブラウザで可能。Cloudflare全プランで無料使用できる。HTMLファイルや画像のダウンロードの遅延が高速な読み込み時間実現の障害になっている
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.jsのPPR + StreamingがVercelで実行されるときの全体像を掴む
Cloudflareがコードの最適化を行うことで毎秒3500万回動作する処理のCPU使用率を1％削減できたと発表
イーロン・マスクのXとStarlinkがブラジルでの停止命令違反の容疑で1日当たり1億円超の罰金を科される
CloudflareがAI用にウェブサイトのスクレイピングを許可する権利を取引できるプラットフォームを立ち上げへ
SEO完全攻略！ブログ初心者でも上位表示を狙うための秘密テクニック - イッサPのつぶやき
イーロン・マスクがブラジルでのX(旧Twitter)禁止を回避する方法を発見
A good day to trie-hard: saving compute 1% at a time
Cloudflare の Health Check
Optimising for High Latency Environments – CSS Wizardry
3D空間からの脱出ゲーム。 - Qiita
Polyfill supply chain attack embeds malware in JavaScript CDN assets | Snyk
【簡単】slickスライダーでサムネイルを連動・固定2列2段以上で表示させる方法｜kasumiblog
FastlyでCloud Runに独自ドメインとHTTPSを無料セットアップする 2/2
プールは楽しいな。スーパーウオータスライダーゲーム。 - Qiita
ep159 Monthly Platform 202408 | mozaic.fm
小さなGPUでのエンジニアリング。数値シミュレーションからAIへ。 - Qiita
4次元サイン関数のアニメーション。 - Qiita
明るいカラフルな チョコボールがバウンドする ゲームです。 - Qiita
2024年、Remixアプリはどこでホスティングされる？ - React Japan