【PoC編】XSSへの耐性においてブラウザのメモリ空間方式はLocal Storage方式より安全か？ - GMO Flatt Security Blog
はじめに こんにちは。 セキュリティエンジニアの@okazu-dm です。 この記事は、Auth0のアクセストークンの保存方法について解説した前回の記事の補足となる記事です。前回の記事の要旨をざっくりまとめると以下のようなものでした。 Auth0はデフォルトではアクセストークンをブラウザのメモリ空間上にのみ保存するin-memory方式であり、XSSへの耐性のなさ等の理由でlocalStorageで保存することを推奨していない しかし、XSSでアクセストークンを奪取できるのはin-memory方式でも同じのはず(検証は行いませんでした)。localStorage方式を過度に忌避する必要はないのではないか なお、Flatt Securityの提供するセキュリティ診断はAuth0に限らずFirebase AuthenticationやAmazon CognitoなどのIDaaSのセキュアな利用
【大バズリ】NotebookLMスライドをパワポやGIF画像に即変換するCanvas。ん…Canvas！？【コード無料配布】｜まじん
【大バズリ】NotebookLMスライドをパワポやGIF画像に即変換するCanvas。ん…Canvas！？【コード無料配布】 いや……投稿から1日経ってないのに まじん式v4 のいいね/インプの半数超えてるんだが…。 しかもこれ、 Geminiと30分くらいお喋りしてたら完成しました。 今回は、このアプリのソースコードを無料公開したいと思います！ また、どのようにGeminiと対話したのか？ そのバイブコーディングのテクニックについては、 メンバーシップ限定エリアに記載しますね、さすがに。 【無料公開】自分のGeminiで再現しよう！Gemini（思考モード）でCanvasをオンにして、 以下のプロンプトを送信してみてください。無料GeminiでもOK。 以下のコードをCanvasにそのままプレビューしてください。 --- [ソースコード] ソースコード（Xで公開したこちら）import
はじめに 以前から話題になっていたMCP（Model Context Protocol）ですが、Anthropicの独自規格の範囲に留まらず、OpenAIが公式に採用を発表した事で一気に火がつき、最近は至るところでMCPという単語が躍るようになりました。 今回はMCPを利用したデータベースとの対話+資料化までのデモを1つのユースケースとして残しておきたいと思います。 ■構成 クライアント：Claude Desktop データベース：BigQuery データベースとの対話+資料化デモ BigQueryのMCPサーバーについては以下2つが公開されています。 機能的にはほぼ一緒なのですが、後者はデータセット名までパラメータで渡せるので、こちらを使っていきます。 Claude Desktopの構成で以下の設定をするだけで、すぐに使えます。 "mcpServers": { "bigquery": {
TypeScript SDK を使用して MCP UI を実装する MCP UI では TypeScript と Ruby の SDK が提供されています。ここでは TypeScript SDK を使用します。サーバー向けの SDK とブラウザ向けの SDK がそれぞれ提供されています。 @mcp-ui/server - npm: MCP の Resource を実装するためのヘルパー関数を提供する @mcp-ui/client - npm: インタラクティブな UI コンポーネントを提供する. React コンポーネントと Web コンポーネントの両方が提供される。 まずはサーバー側の実装から始めましょう。MCP サーバーの実装として Cloudflare が提供する agents パッケージを使用します。agents パッケージは Streamable HTTP を使用したリモート M
【忙しい人のための】Next.js公式チュートリアルを完走してきたので記事１本で振り返る【ギュッと凝縮】 | DevelopersIO
本記事はNext.jsのチュートリアルが大きく変わったためリンク切れを起こしています。 技術メモのため記事としては残しますが、リンク切れにご留意ください。 また機会があれば新チュートリアルで記事を書こうと思いますm(_ _)m こんちには。 データアナリティクス事業本部 インテグレーション部 機械学習チームの中村です。 今回は以下のNext.jsのチュートリアルをほぼ一通り（SEOのところ以外）実施しましたので、ポイントを記事化しました。 https://nextjs.org/learn/foundations/about-nextjs" チュートリアル自体は、以下のような内容が分かるものとなっています。 CRA（create-react-app）のみ使用しているとイメージしづらい、素のHTML + JavaScriptとReactの関係のイメージが分かる Reactがフレームワークではな
無料プロキシツール「mitmproxy」を使ってみよう - セットアップ方法とセキュリティエンジニアおすすめの設定 - GMO Flatt Security Blog
※本記事は筆者styprが英語で執筆した記事を株式会社Flatt Security社内で日本語に翻訳したものになります。 はじめに こんにちは、Flatt Securityのstypr(@stereotype32)です。今回はセキュリティ診断などで使われるローカルプロキシツールについて紹介します。 ちなみに、開発者の皆さんが脆弱性の検証を行うにはこれらのツールだけでなくセキュリティ知識が必要ですが、そのためにはFlatt Securityが提供する「KENRO」がおすすめです。Web アプリケーションの代表的な脆弱性10個に関して、脆弱なソースコードを修正するなどのハンズオンを通して学ぶことができます。 ぜひバナーより無料・無期限のトライアルをご利用ください。 さて、セキュリティエンジニアの多くは、WebやモバイルアプリケーションのHTTP/HTTPSトラフィックを確認するするためにBur
パフォーマンスチューニングで、ソースコードに触らず非破壊でネットワークリクエストを書き換えて、LCPがどれだけ改善するかの実験ツールが欲しかったんですが、この目的で良いプロキシツールがないです。 世のローカルプロキシツールは DNS の設定を要求してきます。これは潜在的に意図しない状況を引き起こすので、使いたくありませんでした。 tl;dr puppeteer の page.setRequestInterception(true) でリクエストを覗いて、書き換えた ブラウザからリクエスト内容を奪う方法 テスト用HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <script type="module"> const x = await fetch('https://jsonp
この記事について 先日、@catnoseさんがカメラ映像の代わりに絵文字(Emoji)を配信するためのサービスを公開されました。凄く完成度が高くて良いサービスだと思ったので、さっそく使ってみたのですが、仮想カメラとして使用するためには OBS Studio が必要でした。[1] サービスを使うには全然申し分無いのですが、「 もっと簡単にできたらなぁ～ 」と思ってしまうのが私の悪い所で、すぐさまブラウザのみでどうにかできないかと調べてみると、色々な制約はありますが、Chrome 拡張を使うことで OBS Studio を使わずとも仮想カメラを使用できることが分かりました。 実装も簡単にできるので、 今回は Google Meet で、画面キャプチャを仮想カメラとして表示する Chrome 拡張を作って行こうと思います 💪 今回作るモノについて 今回この記事で作る Chrome 拡張は、上記
年イチでちょっとしたブラウザゲームを作ってます（→ 去年）。今年はそこそこ遊べる可愛いアクションゲームを4KB以内で作ってみました。 🎉宣伝させてください！ 🐱今年も無事、猫の日ゲームができました！https://t.co/XnDD8AXx4k 今年は可愛さはそのまま、限界までコードを削って4KBにおさめました。PCの方はソース表示して見てみてね pic.twitter.com/j0QqH6iSSn — ゆき (@yuneco) February 20, 2022 作ったもの：ブラウザで動く4KBのゆるかわアクション URL： https://yuneco.github.io/mezashi-4kb/ ソース： https://github.com/yuneco/mezashi-4kb つまりどういう...コト？ index.htmlという名前のファイルを作って下のコードをコピペする
前回の続き。Vite/CRXJS/Vueで作るときの備忘録(*´ω｀*) www.memory-lovers.blog 使ったサンプルはこちらで公開中(*´ω｀*) github.com 環境構築 プロジェクトの作成 # viteでプロジェクトを作成 $ pnpm create vite chrome-extension-sample --template vue-ts $ cd chrome-extension-sample # .npmrcを設定 $ echo "auto-install-peers=true" > .npmrc # @crxjs/vite-pluginの追加。vite3はbeta版 $ pnpm add @crxjs/vite-plugin@beta -D manifest.jsonの設定 manifest.jsonが必要だけど、CRXJSでは.tsにも対応してる。
モバイルアプリ上の WebAssembly 製ライブゲームで発生した例外を捕捉して計測する - Mirrativ Tech Blog
こんにちは、エンジニアのちぎら(@_naru_jpn)です。ミラティブでは、配信中のゲームに視聴者が介入できるゲームとライブ配信が融合した次世代のゲーム体験を提供しており、この体験を ライブゲーミング と呼んでいます。 ライブゲーミングは、Unity から WebGL 向けにビルドされた WebAssembly 製のゲームを、アプリに配置したウェブブラウザ上で動作させることによって実現しています。*1 今回は UnityでモバイルWebGLゲーム開発を頑張る話 の「メモリリークによって発生するクラッシュ」にも書かれているような、捕捉は難しいがユーザー影響があるような例外の発生を捕捉して、計測をするための仕組み作りについて解説をします。 ライブゲームが動作する仕組み 例外を捕捉することを考える前に、ライブゲームがどのように動作しているのかを知る必要があります。 Unity の WebGL 向
はじめに Ruby 3.2よりWASIベースのWebAssemblyサポートされました。 これによってRubyをブラウザ上で実行できるようになるわけですが、実はWASMはブラウザの外での動作も可能になっており、OSに依存しないライブラリを作ったり、Edge Computingで実行させたり、シングルバイナリの実行可能ファイルにしたりと色々な事が出来るようになります。 今回はRubyのWASM対応でどんなことが出来るようになったかをまとめたいと思います。 WebAssemblyとは？ WASMに関して少しおさらいをしておきましょう。 WebAssemblyは仮想命令セットアーキテクチャです。WASMとも言います。RustやCをはじめとした多くの言語からコンパイルする事が出来、Webブラウザの中で高速にそしてセキュアに処理を実行するための仕組みとして登場しました。 元々ブラウザ向けに登場した仕
あ、ユーザーが日本語で挨拶してきた。 なんか良いですねw 生成し直してみても お、朝から日本語で挨拶が来た。ユーザーは多分日本の会社や学校関係かも？ という調子なので、フランクな感じな味付けなんですね。 javascriptプログラミング 出力が長いこともあり具体的な内容は省略します。 テトリスを作成するには、以下のステップを考えます。 ゲームボードの作成: 通常は10列×20行ですが、テキストベースで表示するのではなく、HTML/CSSを使ってブロックを配置します。 テトロミノの種類と形状: 7つのテトロミノ（I, J, L, O, S, T, Z）とその回転形を定義します。 ゲームの制御: ユーザーがブロックを操作して落下させ、満タンした行を消去し、新しいブロックが床に当たるまで続ける仕組みです。 スコアリングとゲームオーバーの判定。 thinkタグ内は日本語で生成は14秒ほどと簡潔な
How modern browsers work
Note: For those eager to dive deep into how browsers work, an excellent resource is Browser Engineering by Pavel Panchekha and Chris Harrelson (available at browser.engineering). Please do check it out. This article is an overview of how browsers work. Web developers often treat the browser as a black box that magically transforms HTML, CSS, and JavaScript into interactive web applications. In tru
Web Design System: Migrating Web Components To React | Mercari Engineering
This post is for Day 8 of Mercari Advent Calendar 2022, brought to you by Williams Kwan from Mercari Core team and Faisal Rahman from the Mercari Architect team. Intro Mercari internal design systems power the UI in Mercari web apps. It allows Frontend engineers to implement UI changes quickly by providing UI building blocks. The design system is currently built using Web Components but we are in
はじめに X のタイムラインに、以下の「GitHub Copilot coding agent が Proプランでも使えるようになった」という情報が流れてきたので、さっそく試してみました。 今回試した内容のレベル感は、 「動作確認くらいの内容で、一通りの手順を体験してみた」 というものになります。 ちなみに Pro+プランなどだと、以下の 5月のタイミングから利用可能になっていたものです。 それと、Proプランで GitHub Copilot coding agent を使えるようになったタイミングは、自分が冒頭のポストを見たタイミングよりもさらに前からだったようです。 やってみたこと 作ってもらったもの 最初に、GitHub Copilot coding agent に作ってもらったものを掲載してみます。 内容は p5.js を使った Canvas への描画（ブラウザで動作するもの）です
メディアドゥでは、エンジニア有志によって執筆された【Tech Do Book】という合同誌を発行しています。 本日はその中から、Tech Do Book vol.1 【1章 EPUB Generator をつくろう】を紹介します。 はじめに EPUB生成ツールの作り方を通じて、EPUBフォーマットの理解について深めましょう。 スコープ シンプルなテキストベースのEPUBファイル生成ツールの作り方をまとめます。対象とするEPUBのバージョンは3.0です。 なお、コミックのような画像コンテンツを含むEPUBファイルの生成はここでは取り扱いません。 でき上がるもの 書籍ID、出版社、タイトルや目次内容、本文などをPOSTすると、EPUBファイルとしてダウンロードできるようになります。 図：フォームイメージ 必要な知識 HTML基礎 XML基礎 Spring Bootの簡単な使い方 EPUBフォー
概要 □ スライドパズルのゲームを作る □ 基本に立ち返りHTMLとCSSとピュアなJavaScriptだけで作成する ・パズルの実装はシンプルで簡単。 ・考え方さえ理解すれば早いため、実装の前にイメージで説明する。 □ パズルを試したい人は https://jd253t.csb.app (codesandboxのpreview)から試せる ※下の埋め込み表示ではJavascriptが想定通り動作しないので上記のURLから試してください ※パズルはPCからの操作のみ対応 ※codesandboxのpreviewが安定しないことがあります。もし表示が崩れていたらソースコードを貼っているのでローカルで試してください イメージ.パズルを作る方法 □ 1.canvas要素(390×390で)を作成する □ 2.写真を390×390でcanvas内に描画する □ 3.スライドパズル画像を作る定義を作
オープンな地図アプリづくり。オープンストリートマップと地理院地図から国連ベクトルタイル(UNVT)への変換環境が整ったので、ちょっと寄り道して、地図ライブラリを自作してみることにしました。 3DライブラリThree.jsはうれしいことに、ESモジュール対応が進んでいたので、ベクトルタイルを読み込み、WebGLで表示させてぐるぐる回すサンプル完成！ 「mapthree-es demo1」(src on GitHub) JavaScriptが主に書かれた82行のHTMLが1ファイルのみ。ローカルで開いても動きます。apikeyも何か別にインストール必要も一切ない、クリーンなJavaScriptです。（vector-tile、point-geometryをforkしてESモジュール化して使用しています） zxyのディレクトリ毎に分割された地図、あとは大きさとオフセットが設定して、拡大率毎に順次読
自分のポートフォリオページが数年前からぶっ壊れていてそのままにしていたのだけど、今週、ふとそのあたりをちゃんとするか、という気持ちになった。今までいろんな方法でそれを作ってみては放置して、を繰り返してきてしまっていたのだけど、今回はそれをはてなブログで作ってみたところ、ぱっと見でブログっぽくはない、それっぽいページを作ることができた気がしている。 about.a-know.me 以下に、また似たようなことをやりたくなったときのための備忘も兼ねて、手を入れたポイントをまとめておく。 テーマ 以下のテーマを使わせていただいた。 blog.hatena.ne.jp はてなブログのテーマストアに登録されているもののうちのひとつなんだけど、テーマストアは見てるだけで楽しいというか謎のインスピレーションが湧いてくるので、自分は不定期的にチェックするようにしている。オススメです。（ストア、といいつつ、有
超巨大フロントエンドを分割する基盤を作ろうとしたものの紹介します。 この記事の前提 巨大フロントエンドを分割統治したい SSR は考えない モダンブラウザのみ対応する(IE11 非対応) この記事では single-spa とマイクロフロントエンドの紹介はしません。こちらの記事を読んでください。 マイクロフロントエンド入門 single-spa でマイクロフロントエンドを検証する - mizdev single-spa はアプリケーションのライフサイクルに簡単な規約を導入するもので、おそらく一番使われてるものです。これを基本的に vite と組み合わせて各アプリケーションを構成しますが、 webpack でも同様のことは可能です。 動いてるもの デモ ここで実現したこと 共通ヘッダ 異なる環境でビルドされたコンテンツをルーティングごとに切り替える react-router のアプリと vu
WebKit Features in Safari 17.0
Sep 18, 2023 by Jen Simmons and the Safari / WebKit Team Today’s the day for Safari 17.0. It’s now available for iOS 17 and iPadOS 17. [Update September 26th] And now, Safari 17.0 is available for macOS Ventura, and macOS Monterey, and macOS Sonoma. Safari 17.0 is also available in the vision OS Simulator, where you can test your website by downloading the latest beta of Xcode 15, which supports t
「Gemini 2.0」の「3D Spatial Understanding」を試したのでまとめました。 ・Pointing and 3D Spatial Understanding with Gemini 2.0 (Experimental) 1. 3D Spatial Understanding「3D Spatial Understanding」(3次元空間認識) は、2D画像や動画から、現実世界の3次元空間を理解する能力や技術のことです。 【注意】3Dバウンディングボックスは実験段階です。精度を高めるには 2Dバウンディングボックスを使用してください。 2. Gemini API の準備「Google Colab」で Gemini API を準備する手順は、次のとおりです。 (1) パッケージのインストール。 # パッケージのインストール !pip install -U -q goo
TL;DR Chrome Extension経由で独自に学習したMLモデルを社内配布できるようにしました モデルはユーザのブラウザ上で実行するので余計な通信も発生せずクラウド代も不要です 背景 こんにちは。CADDi AI Lab MLOpsチームの中村遵介です。普段は機械学習エンジニアチームの作るモデルをVertex Endpointsを使用してAPIとして提供したり、パイプラインに組み込んで推論結果をデータ提供したりするお仕事をしています。モデルは様々な種類がありますが、一番多いのは図面画像から特定の値を推論したり、何らかのクラスに分類するようなモデルです。 そのような中で「API提供するとサーバ代かかるし、ユーザにAPI使ってもらうのもちょっと手間があるしなぁ」と考えることがあり、ふと「Chrome extensionでMLモデルを提供しちゃえば、ユーザはextensionを入れるだ
筆者の勤務先ではScrapboxというWiki的なツールが導入されていて、何でもそこに書いている。 そして筆者は以前からPlantUMLなどで作図するのが気に入っているが、最近は同様の目的を持ったMermaidがよく使われている様子がある。2021年12月にはNotionが、そして2022年2月にGitHubがそれぞれMermaidの機能を発表している。 🎁 Create CHARTS & DIAGRAMS with Mermaid, right inside a code block! pic.twitter.com/uFobTpFvmI— Notion (@NotionHQ) 2021年12月28日 You can now embed diagrams directly into your Markdown files, Issues and PR comments using Me
How MDN’s autocomplete search works – Mozilla Hacks - the Web developer blog
Last month, Gregor Weber and I added an autocomplete search to MDN Web Docs, that allows you to quickly jump straight to the document you’re looking for by typing parts of the document title. This is the story about how that’s implemented. If you stick around to the end, I’ll share an “easter egg” feature that, once you’ve learned it, will make you look really cool at dinner parties. Or, perhaps y
How to Bypass Cloudflare in 2023: The 8 Best Methods - ZenRows
About 1/5 of websites you need to scrape use Cloudflare, a hardcore anti-bot protection system that gets you blocked easily. So what can you do? 😥 We spent a million dollars figuring out how to bypass Cloudflare in 2023 so that you don't have to and wrote the most complete guide (you're reading it!). These are some of the techniques you'll get home today: Method 1: Get around Cloudflare CDN. Meth
はじめにこんちには。万葉でエンジニアをしている koheitakahashi です。 この記事では、既存のサービスに Hotwire を部分的に導入した際に得られた知見として、どのような問題に直面したかということと、その対応策をご紹介します。 Hotwire の導入を検討している方にとって、この記事が導入の判断材料になれば幸いです。 導入したサービスの概要今回は、弊社が参画しているローカルワークス様のリフォマ というサービスに Hotwire を導入しました。 リフォマは、住まいの「困った！」を解決するマッチングサービスです。2016年から稼働しています。詳しくは、ローカルワークス様の以下の記事を御覧ください。 建設業界の「信頼性」を可視化する！ リフォームのマッチングプラットフォーム「リフォマ」についてご紹介 主な技術スタックは以下の通りです（2022年11月現在）。 Ruby 3.1.
「フロントエンドカンファレンス北海道2025」で実施したクイズの中身を大公開！ - Techtouch Developers Blog
2025年9月6日（土）に北海道札幌市で開催された 「フロントエンドカンファレンス北海道2025」に、テックタッチはゴールドスポンサーとして協賛しました。 当日はスポンサーブースを出展し、来場者を対象にフロントエンド技術に関するクイズを実施しました。技術系イベントでのブース出展は、テックタッチとして初の試みです🌟 本記事では、ブース企画を担当した tsune、aki、shoko から、クイズの内容や結果をレポートします。 当日のブースの様子（左：フロントエンドエンジニアの tsune、右：プロダクトオーナーの kuni） ブース企画：テックタッチフロントエンドクイズ クイズ成績サマリー 問題と解説 Q1. document.elementsFromPoint() の結果に含まれる要素は次のうちどれ？ Q2. delete Date.prototype.toJSON した後に JSON.s
ChatGPT／Bing Chat Enterprise で AWS CDK v2 のコードを作成する - Taste of Tech Topics
先週1週間、リフレッシュ休暇（当社の年次休暇）を頂き、宮古島旅行に行ってきました。 天気にも恵まれ、海もとてもキレイだったので、テンションが上がりっぱなしだった菅野です。 最近、AWSのリソースを作成する際に、CDKを利用することが増えてきました。 AWSのリソース定義としては、CloudFormationがありますが、CDKは、以下のようなメリットがあります。 TypeScriptやPython等、慣れたプログラミング言語でAWSのリソースを定義できる。 CloudFormationと比べると、大幅に記述量が減り、分かりやすくなる。 今回はAWS CDKに不慣れな私が生成AIを利用してどこまで簡単に作成できるか試してみます。 最初に、ChatGPTを利用して、CDKのコード出力を行おうとしたのですが、CDKの最新バージョン（v2）は2021年12月にリリースされており、2021年9月まで
Use JSX without ReactNakedJSX is a command-line tool for generating HTML files from JSX. The output is pure HTML and CSS - unless you choose to add your own JavaScript. This is an overview. Please refer to the documentation for a detailed look at each feature. This page was built using NakedJSX. You can look at its source. At a GlanceGenerate static HTML files from JSX by running an npx command. S
1. 毎回Wi-Fiパスワードを共有するの、面倒じゃないですか？ 家に友人が来たとき、ほぼ毎回こうなります。 「WiFiパスワード教えて〜」 「いいよ〜！これパスワード！」 「ありがとう！（入力…）あれ、つながらない、、、」 「えっ、ここ一文字間違えてるかも」 いつもちょっと面倒だなと思ってました。 口頭で伝えるのもそれはそれで面倒なので、いっそのことちょっと変な共有の仕方にしたいと思い、WifiパスワードをQRコードで共有することにしました。 2. できたものがこちらです！ どう考えても家には必要ありませんが、おしゃれにできたのではないかと思います。 3. 実装 3.1. 全体コード コード全体はこちらです <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" conten
はじめに Ruby on Rails 7.0 より、標準では webpack や rollup といった JavaScript bundler を使わず、代わりに Import maps を使うようになりました。 業務の現場では依然として jsbundling-rails などを用いて JavaScript bundler を使った開発が主だと思いますが、この記事では Import maps とは何なのか？ そして Rails ではどう扱かっているのか？ についてまとめてみます。 Import maps について Import mapsは JavaScript (ES6) の import 文や import() 式で取得するモジュール(ESModules)の URL を制御することができるWeb標準です。 現状では Chrome系ブラウザでのみサポートされているのみですが、他のブラウザで
本連載では分散型マイクロブログ用ソフトウェアMisskeyの開発に関する紹介と、関連するWeb技術について解説を行っています。 今回は、MisskeyでUIフレームワークとして採用している、Vueの実験的な脱仮想DOM実装であるVaporモードの開発状況を紹介します。 仮想DOMとは 今日、一般的なWebのUIフレームワークでは仮想DOM（Virtual DOM, VDOM）と呼ばれる技術を採用していることが多いです。 Webでは、JavaScriptからHTMLを操作するためのインターフェイスとしてDOMが用意されていますが、仮想DOMを採用するフレームワークではこのDOMを直接操作するのではなく、一旦独自に仮となるDOM（V-tree）をメモリ上に構築し、操作する必要のあるHTML要素を特定して効率的にDOMを変更（patch）します。 しかし、UIが複雑になってくると仮想DOMも大き
When a single-page application needs to fetch data from a remote source, it needs to do so while remaining responsive and providing feedback to the user during an often slow query. Five patterns help with this. Asynchronous State Handler wraps these queries with meta-queries for the state of the query. Parallel Data Fetching minimizes wait time. Fallback Markup specifies fallback displays in marku
虎の穴ラボおっくんです。暑い夏、いかがお過ごしでしょうか？ この記事は、虎の穴ラボ 夏のアドベントカレンダーの14日目の記事です。 今回のアドベントカレンダーも引き続き「見た目でわかるビジュアルネタ5連発」の第4弾となります。 13日目は、A.M.さんによる「【Go言語】アスキーアートでダンジョンから脱出するゲームを作ってみた」が投稿されました。 15日目は、Mさんによるビジュアルネタ「🔴サーバーにエラーが起きた時にVSCodeを真っ赤にしよう🔴」が公開されますこちらも御覧ください。 発端 去る 2022 年 5 月 11 日 Google I/O で、Geospatial API という位置情報を使用した AR に利用する API が公開されました。 しかしながら ARcore 向けの API なので Chrome で扱えるものではないわけです。 悔しい実に悔しいので、ブラウザででき
Amazon ECS Express Mode を利用して WebSocket アプリをALBで公開してみた | DevelopersIO
2025年11月21日、Amazon ECS Express Mode がリリースされました。 本番環境ですぐに使えるコンテナアプリケーションを、数クリック、または1つのコマンドで構築できるというこの機能を、早速試す機会がありましたので紹介します。 事前準備 コンテナイメージ作成、登録 ECS Express Mode にデプロイする コンテナイメージを用意しました。 今回、WebSocketエコーサーバを含む、Nginxイメージを作成。 ECRにPushしました。 Nginxテストイメージの作成、登録スクリプト #!/bin/bash set -e REGION="ap-northeast-1" ACCOUNT_ID="********" REPO_NAME="websocket-nginx" IMAGE_URI="${ACCOUNT_ID}.dkr.ecr.${REGION}.amaz
KARTE Blocks(以下Blocks)では、Blocksを利用するサイトに1行の<script>タグを埋め込むことでサイト書き換えや効果計測をします。 Blocksでは、この<script>タグで埋め込むスクリプトファイルをbuilder.jsと呼んでいます。 この記事では、Blocksが扱うbuilder.jsというサードパーティスクリプトの仕組みについて紹介します。 builder.jsというセカンドパーティコンテンツをもつサードパーティスクリプトについて知る builder.jsでは安全にサードパーティスクリプトを開発して、配布、読み込みしているのかを知る サードパーティスクリプトの開発、テスト、デバッグ方法について知る この記事は「KARTE Blocksリリースの裏側」の3日目の記事です。全10回の予定です。 これから毎日記事を更新していくため、更新をチェックしたい方は@K
2023最新！【はてなブログ】最終更新日を追加する方法（短くて簡単！コピペでOK）CSSとJavascript利用 - バンビの初心者ブログ教室
最終更新日を追加するコードはこちら↓ コードに関してのお願い 簡単にコード解説 CSS JavaScript このブログについて ↓↓ はてなブログに標準の機能としてこちらが搭載されました！ （2023-08-01より） はてなブログに最終更新日を追加する機能がないので、以前からjQueryやJavaScriptを使ったやり方をいろ〜んな方が色々と説明してくださっています。 ↓↓これね。 様々なコードがあり、私のブログではこれまでは、 →はてなブログの記事の最終更新日を取得 - はしくれエンジニアもどきのメモ こちらの方のコードをアレンジしたものを利用していました。 sitemap.xml から最終更新日を取得してくるというコード。 （↑↓この辺、わからない人は読み飛ばしてOK） ところが、最近自分の「はてなブログ」のソースを見ていて気づいたのですが、AMP対応していなくても <head>
bloggerには目次を自動挿入できるテーマは少ないです。もしかすると、既にあなたもお悩みなのかもしれません。 そこで、今回の記事です。この記事では、bloggerのテーマに目次を自動で入れられる方法をお伝えします。作業はコピペだけの簡単作業です。 あなたがこの記事を読むことで、bloggerに目次を自動で入れられます。是非、最後まで読んでくださいね。 bloggerのテーマに目次の機能がない bloggerのデフォルトのテーマ（テンプレート）に、目次の機能が備わっているのがありませんでした。日本のブログだと、目次が入るのが当たり前になりつつあるのですが、bloggerにはありませんでした。 でも、安心してください。bloggerのカスタム機能を使えば、自動で入る目次は簡単につくれました。次項で目次を設置するやり方について解説しますね。 bloggerに目次を入れる方法 ①管理画面にアクセ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
MCPでのデータベースとの対話+資料化 - Qiita
AI エージェントがインタラクティブな UI を返すことを可能にする MCP UI
puppeteer をローカルプロキシとしてリクエストを監視＆モックする
画面キャプチャを仮想カメラとして扱えるようにするChrome拡張を作ってみる
4KBのJavaScriptだけで動く可愛いアクションゲームを作ったのでソースと解説 - Qiita
Vite/VueでChrome拡張機能を作ってみる | 4. 環境構築/開発編 - くらげになりたい。
WebAssembly対応でRubyは何が出来るようになったのか？
新しいR1で蒸留されたDeepSeek-R1-0528-Qwen3-8Bを試す
Proプランでも使えるようになった「GitHub Copilot coding agent」を試してみた - Qiita
EPUB Generatorをつくろう - Tech Do | メディアドゥの技術ブログ
HTML&CSSとピュアなJavaScriptだけでパズルゲームを作る方法
クリーンなJavaScriptのESモジュールで地図ライブラリを再構築するプロジェクト「mapthree-es」
自分のポートフォリオページをはてなブログで作ってみた - えいのうにっき
vite と single-spa で作るマイクロフロントエンド基盤
Gemini 2.0 の 3D Spatial Understanding を試す｜npaka
Chrome Extension で作るクラウドいらずのMLモデル提供 - CADDi Tech Blog
ScrapboxでMermaidを使う - cockscomblog?
既存サービスに Hotwire を部分導入して得られた知見｜万葉
NakedJSX - Use JSX without React
家に来た人に毎回Wi-Fiパスワード聞かれるのが面倒なので、QR化したら謎の歓迎ページが爆誕した - Qiita
Rails 7.0 で標準になった importmap-rails とは何なのか？
Vue Vaporモード近況 | gihyo.jp
Data Fetching Patterns in Single-Page Applications
位置情報 AR にスマホのブラウザだけでチャレンジ - 虎の穴ラボ技術ブログ
セカンドパーティコンテンツをもつサードパーティスクリプトの作り方
bloggerのテーマに目次を入れる方法-裏☆ブログ武器