こんにちは。強いUIはボタンを捨てるをスローガンにScrapboxを開発しています。shokaiですshokai.icon

この記事は？ それぞれが専門にしている領域に関わらず、Webエンジニアリングの基礎知識として知っておきたいと思う事を対話形式でまとめていく。知識はインプットだけではなく、技術面接や現場では、専門用語の正しい理解をもとにした使用が必要なので、専門がなんであれ理解できるようなシンプルな回答を目指したものになっています。解答の正しさはこれまでの実務と各分野の専門書をベースに確認してはいますが、著者は各技術の全領域の専門家ではなく100%の正しさを保証して提供しているものではないので、そこはご認識いただき、出てきたキーワードの理解が怪しい場合各自でも調べ直すくらいの温度感を期待しています。なお、本記事で書いている私の回答が間違っている箇所があったりした場合、気軽にコメント欄などで指摘いただけるとありがたいです。 Webエンジニアリングの基礎 この記事でカバーしている領域は、以下のような領域です。W

「SQLite3 WASM/JS」パブリックベータ公開。SQLite 3.40でサポート開始、WebブラウザなどでSQLiteが実行可能に SQLiteの最新版となるバージョン3.40がリリースされました。本バージョンからSQLiteのソースコードがWebAssembly版の「SQLite3 WASM/JS」へのコンパイルをサポートし、配布される公式のバイナリにLinux版、Windows版、Mac OS X版、Android版などと共に「SQLite3 WASM/JS」が含まれるようになりました。 SQLiteはオープンソースの代表的なリレーショナルデータベースの1つ。軽量かつコンパクトな実装で、クライアント／サーバ形式ではなくアプリケーションに組み込んで利用できる点が最大の特徴です。 先月（2022年10月）に予告なくSQLite3 WASM/JSのページが公式Webサイトで公開され、

Cloudflare、ヘッドレスブラウザ＋Puppeteerがすぐ使える「Workers Browser Rendering API」発表 Cloudflareは、同社が提供するCloudflare Workersの新機能として、ヘッドレスブラウザとそれをコントロールするPupeteerを呼び出せる「Workers Browser Rendering API」（以下、Browser Rendering API）のクローズドベータを発表しました。 We’re excited to announce a private beta of the Workers Browser Rendering API. With browser automation, you can programmatically do anything that a user can do when interactin

発端 きっかけは調べ物でこちらのブログを閲覧したときです。ぜひアクセスしてみてください。9 割以上の方は何も気づかないでしょう。 Chrome でのスクリーンショット なぜなら Firefox 以外のブラウザでは表示されないからです。 Firefox でのスクリーンショット Firefox でアクセスすると、“Woah! What's this?” と書いてある右側のミニマップに気づくはずです。 Firefox でのスクリーンショット これの驚くところは、なんと要素の状態がリアルタイムでミニマップにも反映されます。上記スクリーンショットはテキストを選択した状態ですが、ミニマップにもテキストが選択された状態で表示されていることが確認できます。 実装 どのように実装されているかというと、なんと CSS の element() 関数のみの 1 行で実装できます。そして、Firefox は ele

プログラミング言語Rubyの国内最大級のカンファレンス「RubyKaigi」。「RubyKaigi 2022」のKeynoteで登壇したのは、齋藤優太氏。「Ruby meets WebAssembly」のテーマで、WebAssembly上でRubyが動くようになった経緯、テクニック、ユースケースについて発表しました。全2回。前半は、なぜWebAssembly対応をするのか、そのモチベーションと経緯について。 登壇者の自己紹介とアジェンダ紹介齋藤優太氏（以下、齋藤）：いやぁ～、緊張しますね（笑）。みなさんおはようございます。 会場：おはようございます。 齋藤：「Ruby meets WebAssembly」ということで、今日は最近少し話題になっているRubyとWebAssemblyの話をしようと思います。よろしくお願いします。 （会場拍手） RubyがWebAssembly上で動くようになっ

リファクタリングはできていますか？手塚悠太氏：それでは、「レガシーな実装を丁寧にリファクタしてモダンな実装にする技術」について、手塚悠太が発表いたします。 自己紹介です。2019年にDeNAに中途入社し、当時はMOV、現在の名前はGOですね、こちらのタクシーアプリの乗務員さん向けアプリケーションを開発していました。またタクシーフードデリバリーサービス「GO Dine」のアプリケーション開発も担当をしていました。こちらのGO Dineは、Flutterを用いています。 その後、2021年8月から『グランブルーファンタジー』推奨ブラウザである「SkyLeap for Android」の開発に携わっています。 さてみなさん、リファクタリングはできていますか？　「機能開発や不具合修正がずっと続いてそんな暇がない」「プロダクトオーナーの理解が得られない」「リファクタリングで新たに不具合を出すのが怖い

Webブラウザ向けの低レベルAPI「WebGPU」について、WebGLと比較しながらそのメリットを紹介します。 本記事は、TechFeed Experts Night#5 〜 Web3D,WebXRを語るのセッション書き起こし記事になります。 イベントページのタイムテーブルから、その他のセッションに関する記事もお読み頂けますので、一度アクセスしてみてください。 本セッションの登壇者 セッション動画 みなさん、こんにちは。@emadurandalと申します。今回は「WebGLと比較して学ぶWebGPU」と題して発表させていただきます。 私自身の紹介についてですが、私は2015年ごろにWebGLにはじめて触れて、それ以来3Dライブラリ開発をずっとやっています。Rhodoniteというライブラリを開発して、長らくWeb3Dの情報を発信しています。現在は株式会社HIKKYで、WebGLベースのメタ

CSSの比較関数が主要ブラウザすべてにサポートされてから早2年が経ちました。これらの比較関数は、今まではJavaScriptを使用しないとできなかったこと、メディアクエリで複雑に実装していたことをシンプルなCSSで実装できます。 最近のWebサイトで使用されている、CSSの比較関数 min(), max(), clamp() の便利な使い方を紹介します。 Use cases for CSS comparison functions by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 比較関数の使用例: 流動的なサイジングとポジショニング 比較関数の使用例: 装飾要素 比較関数の使用例: 流体ヒーローの高さ 比較関数の使用例: ローディングのバー 比較関数の使用例: コンテンツの区切り線 比

diff-notebooks Notebookの差分をArtifactとして生成するdiff-notebooksをGithub Actionsとして公開しました。 github.com 想定する使い方はpull_requestをトリガーとするGithub Actionsへの組み込みです。 実行すると画面のようにNotebookの差分結果がArtifactとして保存されます。 中身はhtmlになっておりブラウザ上で開くとこのように差分を確認できるので、プルリクを受け取ったときのNotebookの差分チェックがGithub上の操作で完結します。 nbdiff-notebooksの中身 このGithub Actionsの中では、nbdiff-webで生成した差分のhtmlをファイルとして出力する自作ツールnbdiff-web-exporterを実行しています。 github.com nbdiff

JavaScriptのゲームライブラリcrisp-game-libで量産したミニゲームを、PCやスマホだけでなくて、何か小さなデバイスでも遊んでみたい。そう思って、移植性の高いC言語でライブラリを再実装してみている。 画面とボタンが付いていて入手が容易な小さなデバイスとして、まずはM5StickC PLUSで動かすことを目指してみた。いまのところ、まだ機能は限定的だが、いくつかのゲームが動くようになってきた。 SURVIVOR PIN CLIMB 小さなデバイス向けと言いながら、ブラウザでも遊べるようにしてある。C言語で書かれたゲーム本体やライブラリを、EmscriptenでビルドしてWebAssemblyファイルを生成し、JavaScriptのラッパを通じて動かしている。 デバイス依存で実装しなければいけない関数は、machineDependent.hに定義してある。M5StickC P

こんにちは。虎の穴ラボのはっとりです。 ブラウザ用漫画ビューアーライブラリ 「 ToraViewer 」 を公開したので紹介したいと思います。 www.npmjs.com github.com はじめに この記事では、ToraViewerの利用方法とToraViewerが利用している技術についてを紹介していきます。 ToraViewerで何ができるのか ToraViewerは漫画や写真集などの画像一覧を電子書籍のような形式で閲覧できるライブラリです。 デモページから実際の動作を確認することができます。 Tora Viewer デモ ToraViewerデモ 画面サイズにより自動的に1ページ表示と見開き表示が切り替わります。 また、利用ユーザーが歯車ボタンから任意のスタイルに変更できます。 ToraViewerの使い方 まずはインストールします。 npm i @toralab/tora-vi

PostgreSQLをWebブラウザ上で動かす「Postgres-WASM」、オープンソースで公開。Webブラウザ上のx86仮想マシンで実行、レプリケーションも可能 WebAssemblyを用いてWebブラウザにx86の仮想マシンを構成することで、PostgreSQLをWebブラウザ上で実行可能にした「Postgres-WASM」がオープンソースで公開されました。 Today we're open sourcing postgres-wasm with our friends at @_snaplet Discover how we built it, and the extra features we've added: https://t.co/6kmfXBBhCS#postgres #wasm #opensource — Supabase (@supabase) October 3,

「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン AdobeのFigma買収とAdobe XDのこれから 9月の大きなニュースは、やはりAdobeによるFigma買収だと思います。このブログでも記事にしています。 関連: Adobe、Figmaを約2.9兆円で買収へ　デザインコラボツール大手 フォトショップの作業が楽になる、覚えておきたい小技テクニック18選 とても有益ですが、レイヤーの複製はoption+ドラッグではなくcommand+Jの方が速いと思います。 ちょうどいいWebデザインギャラリー そのWebサイトのいいところが言語化されているギャラリーサイトです。 Screen Sizes iPhone・iPadなどのスクリーンサイズま

AIスタートアップのAdeptが、デジタルツールを使用するように訓練された大規模なTransformerモデル「ACT-1」を発表しました。ACT-1はブラウザで何が起こっているかを監視し、クリック・入力・スクロールなどの特定アクションを実行できるChrome拡張機能に接続されており、操作を自動化できます。 ACT-1: Transformer for Actions https://www.adept.ai/act ACT-1は、ユーザーの高度な要求を受け止め、それを実行することができます。ユーザーはテキストボックスにコマンドを入力するだけで、あとはACT-1が実行します。 ACT-1への指示は、ブラウザ上に表示されるポップアップに英語で入力して行います。例えば「ヒューストンで4人家族が住む家を探してほしい、予算は60万ドル(約8400万円)」と入力します。 すると、物件の検索サイトでヒ

Ruby 3.2プレビュー2がリリース。WebAssembly版Ruby、ARM64版YJITなど対応 Ruby 3.2ではWebAssembly版Rubyの登場が予定されており、これまでリリースされてきたLinux版やWindows版、Mac版などのRubyに加えて、WebブラウザなどWebAssemblyの実行環境でRubyランタイムを実行し、そこでRubyのプログラムを実行可能になることが期待されています。 参考：RubyのWebAssembly/WASIへの移植が実現、プレリリース版のバイナリ公開。RubyGemsにも対応 WebAssembly版のRubyでは、ファイルI/OなどOSごとに異なるAPIを抽象化する業界標準仕様であるWASI（WebAssembly System Interface）に対応しているため、WebブラウザだけでなくWasmtimeやWasmerといったス

［速習］ Puppeteer ～ヘッドレスChromeでテスト＆スクレイピング 第2章ブラウザ操作自動化の基本 ～非同期処理を扱うasync/await関数、自動化の鍵を握るPuppeteerコンポーネント 第2章では、実際にヘッドレスChromeを自動化するうえで必要となる、最新のJavaScriptの構文やPuppeteerのAPIについて解説します。 進化し続けるJavaScript PuppeteerのAPIを解説する前に、第1章の冒頭で掲載したサンプルコードを見返してみましょう。もしかすると、中にはまったく見慣れない構文が見つかったかもしれません。 const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch(); const page = await b

CSSの:has()疑似クラスが主要ブラウザでサポートされ、喜んでいる人も多いと思います。今まではJavaScriptを使用しなければできなかったことが、:has()疑似クラスを使用するとさまざまなセレクタを条件式のように記述できます。 たとえば、子に画像がある場合とない場合、子の数が奇数の場合と偶数の場合、セレクタを追加したり変更することなく指定できます。また、コンテンツやフォームなどにも便利な使い方がたくさんあります。 :has(): the family selector by Jhey Tompkins 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 先日リリースされたChrome 105, Edge 105で:has()疑似クラスはサポートされ、コンテナクエリ（@containe