プライベートでMac使うのやめた
最近、自分のプライベートの開発環境を大きく変えたので紹介する。 先にまとめ プライベートではMacを使わなくなった 家にUbuntuが入ったミニPCを置いた 外からはThinkPad X1 CarbonからTailscale経由のSSHで家のミニPCに接続 購入まで まず、自分にとって最も大きな変化はプライベートでMacを使わなくなったことだ。2013年くらいにプログラミングを始めてからずっとメインのOSはMacだったので、約10年ぶり、ほぼ初めての非Mac環境である。 自分の普段の開発のユースケースは、Webアプリケーション開発とNode.js上で動くソフトウェアの開発、WebKitへのコントリビューション、たまにRustやGoやC/C++で自分専用ツールの開発、くらいなので別にMacで困っているわけではなかった。Web開発やNode.js上のソフトウェアの開発はまあ普通にMacで困らな
個人的なJavaScriptの情報収集の方法についてまとめてみます。 JSer.infoなどをやっているので、JavaScriptの情報については色々な情報源を見るようにしています。 JSer.infoの範囲の中での情報源については、次の記事でまとめています。 JSer.info 13周年: JavaScriptの情報源を整理する - JSer.info この記事では、少しスコープを広げてJavaScriptの情報収集についてまとめてみます。 かなりスコープが広がってしまうので、万人向けの方法ではなく、個人的な情報収集方法としてまとめています。 この記事では、膨大な情報の中から見つけるというアプローチをとっているので、人によって向き不向きがあると思います。 情報収集の方法 情報の元となる情報源はさまざまなサイトや人になると思います。 しかし、そのサイトや人ごとに見ていくというのはかなり大変
序文 WebKit と Gecko の内部オペレーションに関するこの包括的な入門情報は、イスラエルのデベロッパー Tali Garsiel 氏による多くの研究の成果です。数年にわたり、ブラウザ内部に関するすべての公開データを確認し、ウェブブラウザのソースコードを読むことに多くの時間を費やしました。彼女は次のように書いています。 ウェブ デベロッパーは、ブラウザ操作の内部構造を学ぶことで、より的確な意思決定を行い、開発のベスト プラクティスの背後にある理由を知ることができます。これはかなり長いドキュメントですが、時間をかけてじっくり読むことをおすすめします。やったら嬉しいよ。 Chrome デベロッパー リレーションズ、Paul Irish はじめに ウェブブラウザは、最も広く使用されているソフトウェアです。この入門編では その仕組みを解説しますアドレスバーに「google.com」と入力し
マイクロソフト、Webアプリテストの自動化サービス「Microsoft Playwright Testing」プレビューを開始
マイクロソフト、Webアプリテストの自動化サービス「Microsoft Playwright Testing」プレビューを開始 マイクロソフトは、Webアプリケーションのテスト自動化フレームワーク「Playwright」を用いた、Microsoft Azure上のテスト自動化サービス「Microsoft Playwright Testing」のプライベートプレビューを開始すると発表しました。 テスト自動化フレームワーク「Playwright」 Playwrightは、マイクロソフトが中心となって開発しているオープンソースのWebアプリケーション向けテスト自動化フレームワークです。 実行環境、対象ブラウザ、対応言語が幅広く、テスト実行時にはWebブラウザの動作を自動的に待つ機能を備えるなど、柔軟で精度の高いテスト自動化が実現できる点を特長としています。 具体的には、デスクトップ向けのWebア
Intro 以前から騒がれていた Apple によるサイドローディング周りの緩和について、正式な情報公開があった。 Apple announces changes to iOS, Safari, and the App Store in the European Union - Apple https://www.apple.com/newsroom/2024/01/apple-announces-changes-to-ios-safari-and-the-app-store-in-the-european-union/ ストアやペイメントの緩和もあるが、ここでは WebKit に関する部分だけを抜粋し、どのような条件があるのかをまとめておく。 筆者が公開情報を読んで解釈したものなので、内容は保証しない。 前提 iOS/iPadOS に入れられるブラウザには、 WebKit を用いる必要が
これをどう作ったかの解説。 PWA まず、上のスクリーンショットのアイコンはSafariの「ホーム画面に追加」で作られたものである。タップするとフレームなしのブラウザが立ち上がって、xsystem4（ゲームエンジン）のWebAssembly版が起動する。xsystem4のWebAssembly移植についてはこちらの記事に書いた。 この種のWebアプリはプログレッシブウェブアプリ (PWA)と呼ばれる。最近さっくり廃止されかかったりして、いつまで使えるかは少し心配でもあるが…。 iOS / iPadOS SafariにおけるPWA SafariのPWA対応は他プラットフォームのChromium系ブラウザと大きく違っている点が一つあって、SafariとインストールされたPWAはストレージを共有しない。つまり、例えばSafariでログインしたユーザーがホーム画面にサイトをインストールしてそちらを
古いリセットCSSからはもう卒業！ モダンブラウザに最適化された新しいリセットCSS -A (more) Modern CSS Reset
モダンブラウザをターゲットにしたWeb制作では、リセットCSS自体が必要ないかもしれません。とは言っても、設定しておきたいスタイルや一部のブラウザ用に設定しておきたいスタイルがあります。 現在のWeb制作に合わせて制作されたリセットCSSを紹介します。なぜそうするのか、なぜそれを使用しないのか、CSSの知見やテクニックも満載です！ A (more) Modern CSS Reset by Andy Bell 他のリセットCSSが気になる人は、こちらも注目です。 A (more) Modern CSS Resetの前のバージョンも解説しています。 2023年、現在の環境に適したリセットCSSのまとめ 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに モダンブラウザに適切なデフォルトのリセットCSS 各リセットCSSの解説
Cookie2 とは何か | blog.jxck.io
Intro タイトルを見て「Cookie の新しい仕様か、キャッチアップしよう」と思って開いたのなら、以降を読む必要はない。 Cookie History 2000 年に発行された Cookie の仕様である RFC 2965 では、仕様中に Set-Cookie2/Cookie2 (以下 Cookie2) という 2 つのヘッダが定義されている。しかし 2011 年に改定された現行の RFC 6265 ではそれらヘッダは deprecate されており、実際の Web でこれらのヘッダが交換される場面を、少なくとも筆者は見たことがない。存在すら知らない開発者も多いだろう。 筆者はずっと、この仕様がどのように出てきて、どうして消えていったのかが気になっていた。 Web 上にも情報が少なく、「歴史上の理由で」とか分かったようなことを言ってる人がたまにいるくらいだ。四半世紀前のことなので経緯を
Appleは長年にわたり、ウェブサイトをiPhoneのホーム画面に追加することでウェブアプリとして使用できる「プログレッシブウェブアプリ」(PWA)と呼ばれる機能を導入していました。しかし、iOS 17.4のベータ版において、PWAのサポートが削除されていることが報告されています。 Did Apple just break Web Apps in iOS 17.4 Beta (EU)? - Open Web Advocacy https://open-web-advocacy.org/blog/did-apple-just-break-web-apps-in-ios17.4-beta-eu/ iOS 17.4 seems to remove web app support in the EU https://9to5mac.com/2024/02/08/ios-17-4-web-app-e
普段なにげなく使っているフォントですが、文字の太さを表すフォントウェイトには注意したいポイントがあります。とくにどの環境でも同じフォントにするためのウェブフォントでも、CSSの設定やOSの違いによって見え方が変わってしまうことがあります。ほかにもCSSの設定によっては意図しないウェイトが適用されてしまうこともあります。 この記事ではフォントウェイトのまつわる落とし穴と、それを回避するための方法を紹介します。エンジニアだけでなく、デザイナーの方にも役立つ内容です。 Noto Sans JPを例にフォントのウェイトの設定を変えながら見え方を確認できるデモページを用意しました。ぜひ試してみてください。 サンプルを別ウインドウで開く コードを確認する アンチエイリアス まず、アンチエイリアスについて簡単に説明します。アンチエイリアスとは、画面上で表示される輪郭を色の濃淡などを用いて滑らかにする処理
ウェブ制作においてボタン風の見た目はよく作成するものの、ネットには新旧さまざまな記法で紹介されているため、参照しづらいケースもあると課題を感じていました。 そこで、2023年において「シンプルで手軽に使いやすいボタン」というテーマで、11種類のHTML・CSSのボタンデザインを紹介します。 この記事で紹介するボタン aタグやbuttonタグのどちらでも利用可能 JavaScriptを用いずHTMLとCSSだけで作成 コピペしやすい 各ボタン設計時に心掛けたポイントを終盤にコラムとしてまとめています。この記事のデモはオリジナルで、GitHubにてMITライセンスとして公開しています。ぜひご活用ください。 ※デモのホバー演出は、ホバーが有効なデバイスでのみ確認可能です。詳しくはコラムで紹介します。 アウトラインのボタン（枠線をグラデーションで再現する） サンプルを別ウインドウで開く ソースコー
jQuery 4.0.0 has been in the works for a long time, but it is now ready for a beta release! There’s a lot to cover, and the team is excited to see it released. We’ve got bug fixes, performance improvements, and some breaking changes. We removed support for IE<11 after all! Still, we expect disruption to be minimal. Many of the breaking changes are ones the team has wanted to make for years, but co
前回の記事では、JavaScript の実行エンジン V8 の JIT 出力コードを読んでみました。記事は M1 Mac 上で動かした結果でしたので、ARM アーキテクチャのアセンブラを読むことになりました。 さてそんな ARM アーキテクチャですが、最近の ARM には FJCVTZS という JavaScript 専用の機械語命令があるのをご存知でしょうか？CPU に、特定の言語（それもコンパイラを持たない JavaScript）専用の命令があると知ったとき、私は大いに驚きました（過去にも Jazelle みたいなものはありましたが） 今回は、この FJCVTZS 命令について、実際にどれだけ効果があるのか、V8 をビルドしながら調べてみましょう。 FJCVTZS 命令とは？ FJCVTZS 命令は、Arm v8.3 から導入された JSCVT 命令の一つで、JavaScript の言
This December, if there’s one tech New Year’s resolution I’d encourage you to have, it’s switching to the only remaining ethical web browser, Firefox. According to recent posts on social media, Firefox’s market share is slipping. We should not let that happen. There are two main reasons why switching is important. “Red Panda” by Mathias Appel is marked with CC0 1.0. 1. Privacy Firefox is the only
Secrets from the Algorithm: Google Search’s Internal Engineering Documentation Has Leaked
Google, if you’re reading this, it’s too late. Ok. Cracks knuckles. Let’s get right to it. Internal documentation for Google Search’s Content Warehouse API has leaked. Google’s internal microservices appear to mirror what Google Cloud Platform offers and the internal version of documentation for the deprecated Document AI Warehouse was accidentally published publicly to a code repository for the c
VisionOSのSDKが公開されたので出先でダウンロードして早速試してみた。エミュレータはそれだけで楽しい。VisionOSでどんなことができるか想像しやすい。どんなイメージビデオよりも説得力があり、肌触りがある。 VisonOSのSDKはMacとApple IDがあれば誰でも無料でダウンロードできる。たぶん。僕は何年も個人アカウントのApple Developer Promgramへの支払いをしてない。 UnityでVisionOSを触る前にSwiftでVisionOSを触ってみる。 触ってみてわかったのは、全く絶望的なくらい、「空間大のiPad」でしかないということ。 プログラミングモデル的にはこれまでiOSアプリを作ってきた人にとってはかなりとっつきやすいだろう。例えば平面的なアプリなら、ほとんどそのまま動きそうである。 反面、例えばお絵描きアプリみたいなのが標準で入っているが、お
はじめに こんにちは。ソーシャル経済メディア「NewsPicks」の QA/SET チームの海老澤です。 先日 弊社で E2E テスト実行するために Playwright を導入したため紹介させてください。 E2Eテストとは E2Eテスト（エンドツーエンドテスト）とは、ソフトウェア開発におけるテスト手法の一つで、アプリケーションが実際の運用環境と同様の条件下で正しく動作することを確認するためのテストです。 システムの開始点から終了点までを通じて、ユーザーの視点でアプリケーションのフローを追い、機能全体が連携して期待通りに動くかを検証します。具体的には、ユーザーが行うであろう一連の操作をシミュレートして、データがシステムを通じて適切に流れるかや、最終的なアウトプットが正しいかどうかを確認します。E2Eテストにより、部分的な単体テストや統合テストでは見逃されがちな問題を発見することができます。
2023年9月7日 CSS CSS小技集シリーズの第5弾！「【第4弾】少しのコードで実装可能な10のCSS小技集」から約2年。またまた便利でサクッと使えるコードが続々登場しています！初心者さんからベテランさんまで要チェック！ ↑私が10年以上利用している会計ソフト！ 目次 ネストで親子セレクターを管理 チェックボックスやラジオボタンの色を変更 アスペクト比を指定する 新しいメディアクエリーの範囲指定方法 背面の要素をぼかす 要素を画面のど真ん中に固定表示 空の要素にスタイルをあてる 条件に合致しないセレクターにスタイルをあてる スムーススクロールのジャンプ位置 動いているCSSアニメーションを止める HTML・CSSの全コードは各サンプルの「HTML」や「CSS」タブを、別タブでのサンプル表示は右上の「EDIT ON CODEPEN」をクリックしてご覧ください！ 1. ネストで親子セレクタ
Rust製ブラウザエンジンの「Servo」、アプリに組み込み可能なクロスプラットフォーム対応WebView化を目指す。Electron代替を目指す「Tauri」への組み込み実現へ
Rust製ブラウザエンジンの「Servo」、アプリに組み込み可能なクロスプラットフォーム対応WebView化を目指す。Electron代替を目指す「Tauri」への組み込み実現へ Rust製のWebブラウザエンジンとして開発が進められている「Servo」は、Servoをアプリケーションに組み込み可能なクロスプラットフォーム対応WebVeiwとする方向で開発を進め、それをアプリケーションフレームワークのTauriと協力してTauriがサポートする予定であることを発表しました。 TauriはElectronの代替を目指す、Web技術を用いてアプリケーションを開発するためのフレームワークです。 参考：Electron代替を目指すRust製フレームワーク「Tauri」がバージョン1.0に到達、Windows/Mac/Linuxに対応 現在のTauriは、UIのレンダリングエンジンとして、Windo
2024年2月の頭頃から、AppleがiOS 17.4のベータ版で「プログレッシブウェブアプリ(PWA)」のサポートを廃止していることが明らかになっています。AppleはPWAのサポート廃止について、欧州連合(EU)のデジタル市場法に準拠するためと説明していたのですが、多くの批判にさらされた末、サポート廃止を撤回すると発表するに至りました。 iOS 17.4 won't remove Home Screen web apps in the EU after all - 9to5Mac https://9to5mac.com/2024/03/01/apple-home-screen-web-apps-ios-17-eu/ iPhoneは長らくPWAをサポートしており、これによりモバイルアプリと同じようにウェブ上のアプリをホーム画面に追加して利用することができるようになっています。iOSでのP
AppleがiOS 17.4でWebkit以外のブラウザエンジンを許可し、ChromeやFirefox、OperaなどSafari以外のブラウザを完全に動作させることを可能にしたことが明らかになりました。これはEUのデジタル市場法(DMA)施行を受けての対応で、EU圏のユーザーにのみ適用されます。 Apple announces changes to iOS, Safari, and the App Store in the European Union - Apple https://www.apple.com/newsroom/2024/01/apple-announces-changes-to-ios-safari-and-the-app-store-in-the-european-union/ Update on apps distributed in the European U
「Operaは変わり果てたのでもう使うな」と有識者が語る
ノルウェー発のウェブブラウザのOperaは、「Opera最強伝説」で知られるなど、ニッチながら根強い人気に支持されているブラウザです。テクノロジージャーナリストのコービン・ダベンポート氏が、「素晴らしいウェブブラウザだったが見る影もなくなった」としてOperaや派生ブラウザのOpera GXを使うのをやめることを宣言し、その理由をブログを説明しました。 Stop using Opera Browser and Opera GX https://www.spacebar.news/stop-using-opera-browser/ ◆これまでのOperaの足取り Operaは1995年にリリースされたウェブブラウザで、当初は有料ソフトウェアだったということもあり、当時主流だったInternet ExplorerやNetscape Navigatorに比べてユーザーは少なく、全盛期でさえニッチ
Web アプリケーション開発での VRT 導入は、ちゃんと運用するとなると以下のような多くの検討事項を伴います。 Storybook のストーリーベースで比較するか？それとも実アプリケーションの URL ベースで比較するか？ CI 上でアプリケーションをビルドして dev server を立ち上げるか、それともデプロイ先のアプリケーションにアクセスするか？ スクリーンショットの比較はどのように行うか？比較時の閾値はどのように設定するか？ 比較元のスクリーンショットはどのように用意するか？例えば Amazon S3 などのストレージ や GitHub Actions の actions/cache を使用する場合など コミットハッシュを用いて比較元のスクリーンショットを特定する場合、マージ先のコミットハッシュに紐づくスクリーンショットが存在しない時の対応は？ VRT の結果で差分が出たが、そ
Bun is an all-in-one toolkitWe love JavaScript. It's mature, it moves fast, and its developer community is vibrant and passionate. It's awesome. However, since Node.js debuted 14 years ago, layers and layers of tooling have accumulated on top of each other. And like any system that grows and evolves without centralized planning, JavaScript tooling has become slow and complex. Why Bun existsBun's g
はじめに Reproで開発を担当しているEdward Fox (edwardkenfox) です。2021年頃から Repro Booster というプロダクトの立ち上げに携わっており、開発を通して得た知見を共有できればと思い立ち筆を取るに至りました。4年ぶりのテックブログ執筆で少しばかり緊張していますが（？）、張り切ってやっていこうと思います。 Repro Boosterとは 2022年11月に正式リリースした、ウェブサイトの表示速度向上を実現するサービスです。「タグを入れたその日から、Webサイトが速くなる」というタグラインのもと、タグ（JavaScript）の設置だけでウェブサイトの表示速度が簡単に実現できるということで、リリース以来多くのお客様・サイトでご利用いただいています。 Repro BoosterではServiceWorkerと呼ばれる技術を最大限活用して多くの機能が実現さ
input type=“date” の沼から、ライブラリを導入する意義を考える - Mirrativ Tech Blog
はじめまして！2023年7月からミラティブでフロントエンドインターンをしております、かずえもんと申します😺 今回は、インターンでの作業中にハマってしまった Safari のバグについて調査していたら、なんと10年モノの issue だったことが判明し、ライブラリを導入する意義について考える機会となった話を書いてみたいと思います。 Safari の日付入力欄に無効な日付を入れると起こるバグ onChange が正しく呼ばれないのは Safari が原因？ Safari 17 以降で再現しないので原因は Safari で間違いなさそう Safari 17 以前での解決方法として DatePicker を使ってみる まとめ: ネイティブを補う存在としてのライブラリ We're Hiring!! Safari の日付入力欄に無効な日付を入れると起こるバグ 2023年8月、私はミラティブの管理シス
はじめに こんにちは。スペースマーケットでWebエンジニアしてます、新卒のdumbled0reです。 4月に入社してから早2ヶ月経って、入社式が昨日のように感じています。時の流れは早い。 日頃、ブラウザ操作する時はPythonのライブラリであるSeleniumを使用していましたが、vscodeにあるPlaywrightの拡張機能を使用すれば非エンジニアの方でも簡単にブラウザ操作用のコードを書けたので紹介します。 Playwrightとは PlaywrightとはMicrosoftが開発したオープンソースのE2Eテスト自動化フレームワークです。 Chromium、Firefox、WebKitなどの主要なブラウザで対応しており、1つのコードで複数のブラウザ上で動作確認も行えます。 環境 node 20.9.0 playwright 1.44.0 拡張機能のインストール 今回使用するVScode
![[Playwright]VScodeの拡張機能でらくらくブラウザ操作](https://cdn-ak-scissors.b.st-hatena.com/image/square/aeab1ee552bc8ea8fc414d63e3cd992eb142f720/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--V4XD7bFE--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BPlaywright%25255DVScode%2525E3%252581%2525AE%2525E6%25258B%2525A1%2525E5%2525BC%2525B5%2525E6%2525A9%25259F%2525E8%252583%2525BD%2525E3%252581%2525A7%2525E3%252582%252589%2525E3%252581%25258F%2525E3%252582%252589%2525E3%252581%25258F%2525E3%252583%252596%2525E3%252583%2525A9%2525E3%252582%2525A6%2525E3%252582%2525B6%2525E6%252593%25258D%2525E4%2525BD%25259C%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3Adumbled0re%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzc1NTA1NzM5OGYuanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3A%2525E3%252582%2525B9%2525E3%252583%25259A%2525E3%252583%2525BC%2525E3%252582%2525B9%2525E3%252583%25259E%2525E3%252583%2525BC%2525E3%252582%2525B1%2525E3%252583%252583%2525E3%252583%252588%252520Engineer%252520Blog%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzQ1MTY4OGExZGEuanBlZw%3D%3D%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
Appleが「iOS・iPadOS・macOS用に3つの異なるウェブブラウザが偶然『Safari』という名前で提供されている」というトンデモ主張でEUの規制を回避しようとしていた
AppleがEUのデジタル市場法による規制を逃れるために、「SafariのiOS版・iPadOS版・macOS版は、名前が同じだけで中身は異なるウェブブラウザであり、使用目的も違う」と主張したことが明らかとなりました。 CASES DMA.100013 Apple – online intermediation services – app stores, DMA.100025 Apple – operating systems and DMA.100027 Apple – web browsers (PDFファイル)https://ec.europa.eu/competition/digital_markets_act/cases/202344/DMA_100027_197.pdf To avoid regulation, Apple said it had three Safari b
Apple・Google・Microsoftが自社ブラウザよりもFirefoxを冷遇するために設けている技術的問題点をまとめたページ「Platform Tilt」をMozillaが公開
MicrosoftはWindows、AppleはiOSやmacOS、GoogleはAndroidやChromeOSといったPC・スマートフォン向けのOSを開発しており、Windows搭載PCではEdge、iPhoneやMacではSafari、Android端末やChromebookではChromeといった自社製ブラウザがプリインストールされています。こういったメーカーはサードパーティー製ブラウザよりも自社ブラウザを推奨するケースがあるのですが、それだけではなく技術的な問題を残しておくことで競合ブラウザを蹴落とそうとしているとFirefoxの開発元であるMozillaが指摘しており、関連情報をまとめた「Platform Tilt」というページを公開しています。 Platform Tilt - Mozilla https://mozilla.github.io/platform-tilt/ 記
以下の文章は、コリイ・ドクトロウの「The antitrust case against Apple」という記事を翻訳したものである。 Pluralistic 「Macカルト（Cult of Mac）」の基本的な教義は、時価総額3兆ドル企業から製品を購入すると迫害されたマイノリティの一員になれるということであり、したがってその企業へのあらゆる批判は民族的中傷ということになるらしい。 https://pluralistic.net/2024/01/12/youre-holding-it-wrong/#if-dishwashers-were-iphones これを「Apple例外主義」と呼ぼう。ビッグテック企業の中でAppleだけが善良であり、したがってその行動は善意のレンズを通して解釈されるべきだという考え方である。この美徳の源泉は都合よく曖昧なので、Appleの罪が明らかになったとて、Ma
![メタクソ化するアップル――Macカルトと“アップル例外主義” | p2ptk[.]org](https://cdn-ak-scissors.b.st-hatena.com/image/square/1104bd774ee83cd14eeb72bb1d28cf0ca3935fc2/height=288;version=1;width=512/https%3A%2F%2Fp2ptk.org%2Fwp-content%2Fuploads%2F2024%2F05%2Fapple-antitrust-doj.jpg)
モバイルアプリ上の WebAssembly 製ライブゲームで発生した例外を捕捉して計測する - Mirrativ Tech Blog
こんにちは、エンジニアのちぎら(@_naru_jpn)です。ミラティブでは、配信中のゲームに視聴者が介入できるゲームとライブ配信が融合した次世代のゲーム体験を提供しており、この体験を ライブゲーミング と呼んでいます。 ライブゲーミングは、Unity から WebGL 向けにビルドされた WebAssembly 製のゲームを、アプリに配置したウェブブラウザ上で動作させることによって実現しています。*1 今回は UnityでモバイルWebGLゲーム開発を頑張る話 の「メモリリークによって発生するクラッシュ」にも書かれているような、捕捉は難しいがユーザー影響があるような例外の発生を捕捉して、計測をするための仕組み作りについて解説をします。 ライブゲームが動作する仕組み 例外を捕捉することを考える前に、ライブゲームがどのように動作しているのかを知る必要があります。 Unity の WebGL 向
Intro Chrome 126 で筆者が実装した URL.parse が Ship された。 Chromium にコントリビュートしたことは何回かあったが、単体機能を Ship したのは初めてだった。 invalid URL の処理 new URL() によって、文字列の URL をパースすることができるようになって久しいが、この API は invalid な場合に例外を投げる。 例外処理をするよりも、先に URL としてパース可能かどうかを知るための URL.canParse() が提案され、先に実装が進んだ。 URL.canParse(str) // boolean しかし、これでは二回パースが必要になるため無駄が多い。 if (URL.canParse(str)) { // 1 回目のパース return new URL(str) // 2 回目のパース } そこで、失敗したら
はじめに 2023年にZennチームにJoinしたdyoshikawaです。 このたびZennのE2Eテスト基盤をリプレイスしました。このような下回りの改善はユーザへの価値提供との距離が近い機能開発と比べてどうしても後回しになりがちな中、Publication Proという大きなリリースを迎えて少し開発が落ち着いたタイミングであり、E2Eテストを拡充できる土台を整えることで今後より安心して機能を追加していけるようにするために必要だということで実施しました。 各テストを独立実行可能にすることによる開発体験向上、CI（GitHub Actions）の実行時間短縮、そして将来を見据えてのCypressからPlaywrightへの移行を行いました。 本記事ではリプレイス前に抱えていた課題、それに対して打ち出した解決方針、そして具体的にどんなことをやったのかを紹介します。 抱えていた課題 前提として
開発の流れとして、デザイン決定後にデザイン（Figma）が開発部隊に渡ってくることは多いと思います。 開発着手前にデザインについて確認しておいた方が良いことの備忘です。 サンプル画像はWebで作っていますが、内容としてはWebに限らず、iOS/Android Nativeなアプリも対象としています。 また、記載順をどうしようか迷ったのですが、特に体系だった説明もできないので思いついた順で書いています。 アイコン/画像について 画像の形式を確認しましょう 画像の形式はベクター画像（SVG）なのか、ラスター画像（PNGなど）か確認します。 アイコン系は基本的にベクターだと思いますので、SVGでExportできない場合はデザイン提供元に確認しましょう。 ラスター画像は要件上こだわりがなければ、開発側でWebP/JPEG/PNGなどの特性や稼働環境を鑑みて決定するで問題ないと思います。 スマホでは
こんにちは。福岡オフィスエンジニアの @petamoriken です。趣味でFloat16Arrayのponyfill1を公開しECMAScriptに入れてもらうように活動していたところ、喜ばしいことに2023年5月のTC39会議にてStage 3となりました。折角なのでその経緯を書いていこうと思います。 ECMAScript excitement 😉@TC39 advanced these proposals this week 🎉 4️⃣ Atomics.waitAsync 4️⃣ RegExp v flag 4️⃣ Well-Formed Unicode Strings 3️⃣ Decorator Metadata 3️⃣ Float16Array 2️⃣ Base64 for Uint8Array 2️⃣ Promise.withResolvers 2️⃣ TimeZone C
クッキーに代わる技術まとめシリーズ第1回「3rd-party cookieのない2年後のアドテックに向けた動きまとめ」からすでに３年経っていますが、3rd-party cookie廃止まではあと１年です。 廃止に向けてPrivacy Sandboxの名前で知られている代替技術は一般公開が進められています。Chromeを利用されている皆様はすでにユーザへの広告機能有効化の告知をご覧になり、「理解した」ボタンを押されたかと思いますが、ここで有効化したものを含めて、主要ブラウザの各種代替APIについて説明したいと思います。 Chromeのターゲティングや計測API有効化承諾画面ちなみにEUでは「理解した」と「設定」ではなく、「Turn it on」と「No Thanks」の選択になっています（しかもボタンの色が同じ）。 それでは2021年のシリーズ第2回の投稿から約2年ぶりとなる今回は、前回ご紹
こんにちは。ミラティブUnityエンジニアの菅谷(tetsujp84)です。 ミラティブのライブゲームはUnityで開発し、MirrativアプリのWebGLで動いています。 ライブゲームを支える仕組みと実際のライブゲーム開発で使用した技術については過去の記事で紹介しています。 tech.mirrativ.stream tech.mirrativ.stream UnityはWebGL向けにもビルドでき、モバイルのWebGLであってもUnity製プロダクトが動くようになっています。一方で、Unityは正式にはモバイルWebGL対応をサポートしておらず、ネイティブのモバイル開発と比べると開発の難易度は高いです。その難易度の高さは具体的にどこにあったのか、実際にモバイルWebGL向けのゲームを開発した経験を元に知見を共有します。 パフォーマンス編 モバイルWebGLの開発は常にパフォーマンスの意
別にみんなそうするべきとは全く思わないのだけど、僕は最近GitHub Copilotを意図的に無効にすることがあるので、そのへんについて雑に書いておく。 あらかじめ言っておくが、僕はGitHub Copilotを有効にすることもある。この記事もGitHub Copilotおよびそのユーザーを批判する意図は全くない。 GitHub Copilot が便利な場面 僕がGitHub Copilotを使い始めて少なくとも一年以上は経ってる。自分が書こうと思っているコードに近いものが簡単に生成されていくことに最初は感動したし、便利な場面がはたくさんある。 具体的に便利な場面を思い返してみる。 僕は仕事ではNext.jsでフロントエンドを書いたり、NestJSでバックエンドを書いたりしているのだが、その用途では便利だった。僕は自分が関わっているプロジェクトのReactやNode.jsの書き方はある程度
iOSでは「プログレッシブウェブアプリ」(PWA)と呼ばれる技術を用いることでウェブサイトをiPhoneのホーム画面に追加したり通知を受信したりできます。ところが、2024年3月に正式展開される予定のiOS 17.4のベータ版では、EU圏のユーザーを対象にPWAが削除されていることが判明しています。これについてAppleが、EUのデジタル市場法(DMA)に準拠するためPWAを削除したと公式に認めました。 Apple confirms iOS 17.4 removes Home Screen web apps in the EU, here’s why - 9to5Mac https://9to5mac.com/2024/02/15/ios-17-4-web-apps-european-union/ Apple confirms it’s breaking iPhone web apps i
この資料は Meguro.css#9 のLT資料です。 メニューのドキュメントアイコンより「Start presentation」クリックでプレゼンテーションが始まります 自己紹介 yamanoku.icon @ yamanoku 大山奥人, おおやまみちのく a.k.a やまのく X（旧Twitter） GitHub 株式会社クラウドワークスにてフロントエンドにまつわる仕事をやっています 得意領域 マークアップ・フロントエンド・UIデザイン・アクセシビリティ 既婚で1児の父と猫🐈🐈🐈と犬🐶の飼い主 Meguro.css復活！！！！！ 株式会社オロ様、Nakayaさんありがとうございます（感謝） Meguro.css#4がエンジニアとしての初登壇イベントでした 今回のテーマ「2020年から2023年までに登場したCSSの変遷を振り返る」 前回のMeguro.cssが2020年1月開
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
私のJavaScriptの情報収集法 2024年版
ブラウザの仕組み | Articles | web.dev
Apple によるブラウザエンジン規制の緩和 | blog.jxck.io
iPadに18禁ゲームをインストールする（ためのWebアプリを作る）
AppleがiOS 17.4のベータ版でPWAのサポートを削除していることが明らかに
意外と奥深いCSSのfont-weightの話 - ICS MEDIA
シンプルで使いやすいHTML・CSSボタンデザイン集11選 - ICS MEDIA
jQuery 4.0.0 BETA! | Official jQuery Blog
ARM に存在する JavaScript 専用命令「FJCVTZS」を追う（ついでに V8 をビルドする）
In 2024, please switch to Firefox
VisionOSでプログラミングをほんのちょっとだけ触ってみて思ったこと｜shi3z
Playwrightを使ったE2Eテストを導入した話 - Uzabase for Engineers
【第5弾】少しのコードで実装可能な10のCSS小技集
Appleが「iOS 17.4でのPWA廃止」を撤回すると発表
AppleがついにChromeとFirefoxのフルバージョンをiPhone上で動かすことを許可
GitHub Actions のみで、actions/cache も使わない最軽量の VRT
Bun 1.0 | Bun Blog
ServiceWorkerの落とし穴8選 - Repro Tech Blog
[Playwright]VScodeの拡張機能でらくらくブラウザ操作
メタクソ化するアップル――Macカルトと“アップル例外主義” | p2ptk[.]org
URL.parse を Chromium で Ship するまで | blog.jxck.io
ZennのE2Eテスト基盤をリプレイスしました（開発体験向上、CI時間の短縮、Playwright移行）
エンジニアがデザインについて確認した方が良いこと - Qiita
6年を経てFloat16ArrayをStage 3にしてもらった - pixiv inside
3rd-party cookieの引退とブラウザのアドテック進出｜AD EBiS マーテック研究会
UnityでモバイルWebGLゲーム開発を頑張る話 - Mirrativ Tech Blog
最近は意図的にGitHub Copilotを無効にすることがある
AppleがiOSからPWAのサポートを削除したことを認める、デジタル市場法への対応で影響はEU圏のユーザーに限定
2020年から2023年までのCSSの変遷を振り返る - yamaScrapbox