なぜMozillaはXULアドオンを廃止したのか？（翻訳） - Qiita
（原著：David Teller, 2020年8月20日、CC BY-NC 4.0で公開されている内容の全訳。自サイトとのクロスポストです。） 要約：Firefoxはかつて、XULとXPCOMに基づく偉大な拡張機能の仕組みを持っていました。この仕組みは長い間私達によく尽くしてくれました。しかし、Firefox開発者と拡張機能開発者の両方にとって、メンテナンスコストは増大し続けるばかりでした。ある面では、増大していくコストは、Firefoxをセキュアにしたり、高速化したり、新しい事を試したりするための努力を、少しずつ破壊していきました。また別の面では、増大していくコストはアドオン開発者のコミュニティを少しずつ破壊していきました。最終的に、古いアドオンの仕組みを守ろうとして数年を過ごした後、Mozillaは、この拡張機能の仕組みを廃止し、それより拡張性は劣るもののメンテナンスしやすいWebEx
WebSocketの次の技術！？WebTransportについての解説とチュートリアル - Qiita
概要 こんにちは。NTTコミュニケーションズのyuki uchidaです。普段はSkyWayというWebRTCプラットフォームの開発やWebRTCリサーチャー(見習い)をしています。 この記事は NTTコミュニケーションズ Advent Calendar 2020 の3日目の記事です。 昨日はMasaki Shimuraさんの記事、 「Threat Intelligenceの活用を促進するMISPの紹介」でした。 この記事は、WebSocketの次の技術ではないかと噂される、WebTransportの概要や双方向通信の歴史をまとめつつ、WebTransportのdatagram形式でデータを送信してみるチュートリアル記事です。 対象読者 WebTransportっていう技術を初めて聞いた人 WebSocketを使ったことがあり、不満がある人 双方向通信・リアルタイム通信について興味がある人
モダンブラウザにおけるキー入力のキャンセル - Qiita
追記・修正 2020/1/28: ご指摘を受け、Firefoxの綴りを正式なものに修正しました（恥ずかしながら知りませんでした）。 また、旧Edgeという表記をしていますが、現時点ではEdge Legacyというのが正しい表現かもしれません。もっと正確にはEdgeHTMLエンジンのEdgeを指します。新Edge(Chromium)は体感的にChromeと同様の動きをします。 モチベーション Markdownエディタを作っていたが、Macの動作がWindowsやLinuxとは微妙に異なり、仕様変更が余儀なくされた。 一方で、Firefoxは異なるOS間でも一貫性をもっており、素晴らしい。 ChromeはIME入力時のKeyDownイベントでevent.keyの値が非IME時と異なってくれれば制御しやすかった。、特に開始時には非IMEでの入力と区別ができないので困った。 新Edge(Chrom
Apple Silicon 動作確認記 (随時更新) - Qiita
Apple M1チップ搭載13インチMacBook Proを購入したので、各アプリケーションの対応状況を確認していきますー。 ソフトウェアエンジニアなので、その周りのアプリケーションを中心に。 対応状況は、あくまでその時点までの確認です。 使っていたら、別の状況が見えてくるかもしれませんね！ では、書いていきます。 Chrome 動く。 今この記事を書いているのも、M1 + Chrome。問題なく動作しています。 最初にRosettaをインストールしますか？って聞かれますが、すぐにインストールされました。 Google日本語入力 個人的に大好きなのでインストール。問題なく動作しています。 iTerm2 動く 問題なし。 Node.js (v14.15.1) Hello Worldは問題ない。 ito@itoutakeshinoMacBook-Pro ddd % cat index.js c
Slackのチャンネルをprefixでまとめてくれる拡張を作りました！
チャンネルが増えすぎて目が辛いので、いい感じにまとめてくれる拡張を作りました！ これが こうなります インストールはこちら Chrome: Slack Channels Grouping - Chrome ウェブストア Firefox: Slack Channels Grouping – 🦊 Firefox (ja) 向け拡張機能を入手 Opera: Slack Channels Grouping extension - Opera add-ons Edge: Slack Channels Grouping – Microsoft Edge Addons 特徴 ハイフンやアンダースコアで区切られたものをまとめます。 chat-犬 chat_猫 DOMの更新を監視しているので、チャンネル作成や名前変更などにも対応しています。 タブが非アクティブな場合はDOMの監視は止めています。 経緯 チ
WebGLデバッグに最強な「RenderDoc」 - Qiita
set RENDERDOC_HOOK_EGL=0 "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-gpu-sandbox --gpu-startup-dialog RENDERDOC_HOOK_EGL=0はChromeのWebGLが、DirectXでOpenGL ESをシミュレートするANGLEで動いているためで、OpenGLESの呼び出しを無視するために設定するようです。 詳細 --disable-gpu-sandboxはGPUのサンドボックス化を無効化します --gpu-startup-dialogはChromeの起動時に、GPUのプロセスIDを表示してくれます。 バッチファイルをクリックしてChromeを起動すると以下のようなウィンドウが表示されます。 表示させたままで次のステップへ進みま
WPTをChromeで実行してHTML5 APIを理解する - Qiita
WPTとは WPT (web-platform-tests)という、ブラウザを作っている人のためのテストスイートがある。これは、ブラウザがどう動くべきかを定義している様々なWeb標準を、各ブラウザが満たしていてるかを確認するためのテストなのだが、Webサイトを作っているWebデベロッパーが新しいWebのAPIをどう使ったらいいかを調べるときにも役立つと思う。 という話を、電車で横に座っていたとある人に話したら「じゃあ、やり方を(日本語で)紹介してくださいよ。」と言われたので、簡単に紹介したい。 手軽に試す 手軽に試したければ、https://w3c-test.org 以下にある目的のテストファイルを開くといい。 例えば、Service Worker Navigation Preloadのテストであれば https://w3c-test.org/service-workers/service
Androidでchromeからアプリを開くか、なければPlayストアを開く方法 - Qiita
Androidにおいて、ブラウザからアプリを開くが、もし、アプリがインストールされていなかったらgoogle playを開きたい、という動作は下の方法で対応していた。 アプリがインストールされてなかったらApp Storeへ誘導する しかし、chromeでは、セキュリティ対策のため、iframeを使った方法では動作しなくなったようだ。 対応策はここ JavaScript使ってややこしいことをする必要がなく、下のようなタグを作れば良い。
新Edgeブラウザ登場に伴うIEサポート終了についてチームのコンセンサスを得るためのシンプルなテンプレ - Qiita
ポエムです。コードは一行もでてきません。 Chromiumベースの新Edgeブラウザもベータに突入し、いよいよ IE のサポートを切れるタイミングが見えてきました。 とはいえ、私が関わっている現場のように、既にリリースしているサービスの場合は IE のサポートを突然切るわけにも行かず… そのような場合は、まずはチーム内への根回しやコンセンサスからになるでしょうか。 かれこれ2年前(2017年)。 今のサービスがまだ設計段階だったころに、 「2年後の2019年にはIEシェア1%とかなんだから、あらかじめ IE 対応だけは切らせてくれぇぇ」 と訴えていたのですが、 ちょうどサービスのグロースや顧客層を最大化して考える時期(風呂敷を大きめに広げている時期)というタイミングの悪さもあり、 「今の段階でIE切るとか、事業というか、ビジネス的にありえないでしょ!!」 という、 なかなか強烈な拒否反応が
2019年のWebGLデバッグツール状況 - Qiita
これはThree.js Advent Calendar 2019の14日目の記事です。 3年前に以下の記事を読んでWebGL Inspectorを使い、デバッグ処理でWebGL Inspectorに凄くお世話になりました。 WebGLの開発やデバッグに便利なブラウザ拡張機能をつかってみよう 「Three.jsにBaylon.jsみたいなDebug modeある？」という議論を見つけて気になったので、現状のWebGLデバッグツール状況を調べてみました。 Three.jsフォーラム - Does three.js has some “scene debug mode” or plugin? (like babylon.js DebugLayer) 消失したデバッグツール WebGL Inspector 最終更新日（github）：2017/02/22 去年はまだChromeウェブストアにあった
2019年のWebAssembly事情 - Qiita
2年前に、「(Learn the Hard Way)nodejs-8でのWebAssembly自体を調べてみた」として、WebAssemblyについて記事にしました。 この記事は、2年前から変わった、2019年6月現在でのWebAssemblyの状況についてまとめたものです。 WAT: WebAssembly Text Format 2年前は、WebAssemblyのテキスト表現といえば、S式形式であり、フォーマット名は「WAST」と呼ばれていました。そして、ツールbinaryenの、wasm-as/wasm-disコマンドでバイナリ形式の.wasmファイルとテキスト形式の.wastファイルの変換を行いました。 2019年現在、WebAssemblyのテキスト表現は、「WebAssembly Text Format」通称WATとなっています。 http://webassembly.gith
Shape Detection APIでQRコード検出を試しました - Qiita
はじめに 初めまして、ｋ．ｓ．ロジャースの西谷です。 直近でPCカメラからQRコードの読込を行いたい話がありました。 利用者の環境が未定であったことから、ブラウザ上で動作するQRコードリーダがあれば良い話があり、調査しておりました。 こちらの記事を紹介頂き、非常に参考になりました。 しかし、Shape Detection APIが全てのブラウザで非対応は「何かあるのでは？」と考え調査と検証を行いました。 間違い・助言等があればコメントにてお知らせいただけたらと思います。 Shape Detection APIとは 顔検出、ORコード読込、テキスト認識の3つのAPIを提供します。 これらはハードウェアアクセラレーションに対応しており、既存のWebライブラリに比べて低い負荷で実行することができます。 また、本APIは2019/05時点では草案で、試験的な機能となります。 本来上記３つの機能があ
Chromeのストレージ永続化仕様を詳しく追ってみた - Qiita
1. はじめに ChromeやFirefoxで使えるストレージ永続化機能はご存知でしょうか。 https://developers.google.com/web/updates/2016/06/persistent-storage に Persistent Storage という題で詳しく触れられていますが、通常 LRU で消去されてしまう IndexedDB や CacheStorage の内容を永続化してくれる機能だと理解しています。 CacheStorage と Persistent Storage の組み合わせは強力で、理論上大容量のアセットを永続化できるようになることから、PWAでのオフライン戦略や通信量削減戦略に対して強力な武器になると考えています。 しかし残念ながら、例によって Safari はサポートしていません。そのため、WebKit の利用を強制される iOS では、例
WebWorkerをenjoyableにするComlinkとは何者か - Qiita
先日、Chrome Tech Talk Night #11に参加してきました。 その際にGoogleのWeb Developer Relations LeadであるPaul Kinlanが IPC on the web with Comlink という発表をされていたのですが、Comlinkやその前提知識となるWebWorkerについて知識がなかったので発表の内容がほとんど理解できませんでした（発表の英語がかなり早口だったのも原因だったと思うけど）。これではせっかく来日されたPaulに申し訳ない気がします。というわけで、この記事ではComlinkやその基盤技術であるWebWorkerについてまとめてみました。
Shape Detection API + PWAでブラウザからそのまま使えるバーコードリーダーアプリを作ってみる - Qiita
ラクス Advent Calendar 2018 繋ぎの3番バッターです。 今回はChrome 70から実験的に使えるようになっているShape Detection APIについてまとめてみます。使ってみると意外と実用的だったのでPWA化してブラウザだけでスマホアプリ相当のことが実現できそうなことも検証してみました。 Shape Detection APIとは Webの新しい技術の普及を推進する団体の WICG が仕様策定を進めているJavaScriptのAPIです。 Accelerated Shape Detection in Images まだEditor's Draft（草案レベル）ですが以下の3つの事ができます。 Face Detection（顔検出） Barcode Detection（バーコードスキャン） Text Detection（テキスト認識） Shape Detecti
GitHub上でSwaggerをプレビューできるChrome拡張機能を作った - Qiita
概要 GitHub 上で、Swagger の yaml | yml | json を Swagger-UI に変換できる Chrome 拡張機能を作った。 その紹介。 「Swagger とは？」という話は、下記等を参照のこと。 Swaggerの概要をまとめてみた。 - Qiita Demo クリックするだけ。簡単に変換できる。 全展開・全折り畳みができて便利。 インストール Chrome Web Store からインストールできる。 swagger-viewer - Chrome ウェブストア 特徴 簡単 1クリックで変換できる 依存なし この拡張機能のみで動作する Web の Swagger Editor を開いたり、ドキュメント生成サーバーを起動する必要なし セキュア（たぶん） 外部ネットワークへの送受信はないため、業務でも使用できる ※自己責任でお願いします たぶん Chrome の
サーバーサイドレンダリングの代替としてPrerenderを試してみた - Qiita
9月から入社したフューチャーアーキテクトのアドベントカレンダーのエントリーです。技術的にはウェブフロントエンドとGolangあたりです。 シングルページアプリケーションを数年前に試してみて、やりたい表現はこれで十分できるし、過去大変だったことも大分解消されましたのを感じました。一方でSEOとかOGPとかいくつかそのまま実現できないものがあります。とはいえ、それの解消のためにサーバーサイドレンダリングをするのは実装の手間が大変です。そこで、設計時に考えなきゃいけないことが増えます。ウェブアプリケーション側でその手の考慮＆実装をいっさいせずに、今時のウェブアプリケーションでやった方がいいことを実現できる方法について考えました ・・・と思って準備しておいたのですが、@R548さんがDMM.comさんのアドベントカレンダーに書かれてしまった内容と一部かぶります。合わせてお読みいただくと、理解が深ま
pͪoͣnͬpͣoͥnͭpͣa͡inͥを支える技術 - Qiita
pͪoͣnͬpͣoͥnͭpͣa͡inͥの作り方 ぽんぽんぺいんを簡単に作るサイトを作ったのでよかったら使ってみてください。 【ここをクリック】 ponponpain(haraita-i)とは 画像でいうとこんなやつのこと。 今回参考にさせていただきましたが、以下のサイトによくまとまっていると思います。 不思議な文字 pͪoͣnͬpͣoͥnͭpͣa͡inͥ | bison's brain at postachio ぽんぽんぺいん ‐ 通信用語の基礎知識 まあ要するに、不思議な上付き文字を組み合わせて、文字に副題（ルビ）をふろうって感じの遊びのことで、昔流行ったみたいです。 今回はクリックだけで上付き文字を加えられるサイトを作ったのでぜひみんなに遊んでほしいなと思っています。 投稿について UbuntuのChromeだと綺麗に表示されないのですが、Twitterだといい感じになるみたいです。
【2019年4月版】JavaScriptのconsoleがすごいことになってた。 - Qiita
JavaScript の console がすごいことになっているらしい。 本日、以下の記事を見つけました。 Getting creative with the Console API! この記事で紹介されている console のメソッド全然知らなかったのでビックリしましたが、実際にどう表示されるのか載っていなかったのでChromeのコンソールでスクショを取ってみました。 console.log() 本文によるとlogメソッド内のテキストリテラルは以下の書式で値のフォーマットと置換ができるそうです。 %o / %O - for objects; %d / %i - for integers; %s - for strings; %f - for floating-point numbers; マジすか・・・ そんなわけで以下のコード console.log("Object value:
お前らのReactは遅い - Qiita
煽りタイトルですみません。 最近、Reactのプロジェクトのページを動かしていて、 もっさりしてる（レンダリングの負荷が高いな）と思ったので どうやったら無駄なレンダリングを減らせるか思考錯誤したことをまとめました。 preactとか別ライブラリの話はしません。 よかったらこちらもどうぞ ReactJSで作る今時のSPA入門（基本編） 2019年07月06日追記： ブラウザのレンダリングの仕組みに関して良記事があったので先に一読しておくことをおすすめします。 良記事１：実際のところ「ブラウザを立ち上げてページが表示されるまで」には何が起きるのか 良記事２：ブラウザレンダリング入門〜知ることで見える世界〜 １ピクセルがブラウザに表示されるまで：Life of a Pixel 2018 この記事に関してはReactのDOMツリー（レイアウト）レンダリングに関する最適化戦略です。 2020年02
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
