はじめに 2023年3月末にiOS 16.4がリリースされたことで、ついにすべてのモダンブラウザユーザーに対してWeb Pushを送れるようになりました。 本記事は、筆者が個人開発しているWebサービスでWeb Push機能を実装したときに調べたことや行ったことをメモとして残すものです。Web Push機能の実装を検討されている方の参考になりましたら幸いです。 なお、筆者は外部サービスへの依存をなるべく減らしたかったため、FCMなどのプッシュ通知機能を提供してくれるものはなるべく使わずに実装したのですが、大変だったので基本的には素直にSaaS等を使った方がよいと思います。 注意事項として、筆者はバックエンドに専門性がありません。そのため、何か間違った記述があるかもしれません。特に暗号化周りは理解が甘い点があると思います。もし誤りを発見された場合は優しめに教えていただけると助かります。よろし

フロントエンド用語を100秒で解説するチャンネルを作りました！ よかったらチェックしてみてください！ はじめに 以前書いた記事「Webページがブラウザに表示されるまでに何が起こるのか？」で ブラウザレンダリングについて詳細に知りたいという意見をいただいたので、調べてまとめてみました。 全体図 レンダリングの大まかな流れです。 HTMLのダウンロード サーバから送られてきたHTMLをダウンロードします。 HTMLの解析 サーバから送られてきたHTMLファイルは、「0」と「1」でできたデータになっています。 ブラウザは、サーバから受け取ったデータをそのままHTMLとして解釈することはできないので、自分で扱うことができる形、つまりDOMに変換する必要があります。この作業を 解析 ( Parse ) と言います。 HTMLをダウンロードしたら、すぐにこの解析作業に入ります。作業は以下のようなステッ

ウェブページを表示するためのアプリケーションであるウェブブラウザは、今や多くの人が毎日のように利用する生活に欠かせないツールとなっています。そのブラウザがどのような仕組みで成り立っているのかについての解説がGitHubで公開されています。 GitHub - vasanthk/how-web-works: What happens behind the scenes when we type www.google.com in a browser? https://github.com/vasanthk/how-web-works この解説では例として「アドレスバーにgoogle.comと入力してからGoogleのホームページが表示されるまで」の流れが取り上げられています。 ・目次 ◆google.comの「g」を入力した時 ◆エンターキーを押した時 ◆URLを解読 ◆HSTSリストを確認

ども、@kimihom です。 先日リリースされた iOS で、ついに WebRTC の VP8 コーデックのサポートがされるようになった。本記事では iOS の VP8 コーデックサポートでどう変わっていくかについて記そう。 WebRTC コーデック問題 WebRTC で複数デバイスへの配信を実現しようってなった時に、iOS が大きな問題として残り続けていた。iOS のブラウザでは、従来 WebRTC自体をサポートしていなかったので、そもそも iOS で配信・視聴ができなかったのだ。この問題については以前の記事で紹介している。 www.bokukoko.info iOS ブラウザはこの WebRTC サポート問題があったため、iOS で配信を実現したいってなったら、唯一サポートされていた方法であるネイティブアプリで実装する必要があった。ユーザーはそのiOSアプリをインストールすることで、

Mozillaは2017年、ウェブアドレスを相手と共有することによって最大1Gバイトのファイルを転送できるサービス「Firefox Send」を実験的に提供した。この度、Firefox Sendはテスト期間を終え、「Firefox」アカウントにログインすればファイルサイズの上限が2.5Gバイトまで拡大されるようになった。 Firefox Sendは、電子メールに添付するには大きすぎる動画、オーディオ、写真ファイルを共有する必要がある場合に便利だ。 「Dropbox」「Box」「Google Drive」「Microsoft OneDrive」「WeTransfer」など、類似サービスは既に存在する。しかしそれらのサービスは、登録済みでないユーザーには手続きが面倒かもしれない。Firefox Sendでは、少なくとも1Gバイト以下のファイルについては、そうした問題が解消されている（ファイルサ

印刷する メールで送る テキスト HTML 電子書籍 PDF ダウンロード テキスト 電子書籍 PDF クリップした記事をMyページから読むことができます ユーザーが感染したウェブページを閉じたり、そこから離れたりした後でも、ユーザーのブラウザ内で悪意あるコードを実行できる新しいブラウザベースの攻撃がギリシャの学者らによって考え出された。 「MarioNet」と呼ばれるこの新しい攻撃は、ユーザーのブラウザから巨大なボットネットを構築するための扉を開く。研究者によると、これらのボットネットは、ブラウザ内での不正な仮想通貨マイニング（クリプトジャッキング）、DDoS攻撃、悪意あるファイルのホスティング／共有、分散型のパスワードクラッキング、プロキシネットワークでの不正リレー、クリック詐欺の宣伝、トラフィック統計のかさ増しに使用できる。 MarioNet攻撃は、ブラウザベースのボットネットを作成

Microsoft is officially giving up on an independent shared platform for the internet. By adopting Chromium, Microsoft hands over control of even more of online life to Google. This may sound melodramatic, but it’s not. The “browser engines” — Chromium from Google and Gecko Quantum from Mozilla — are “inside baseball” pieces of software that actually determine a great deal of what each of us can do

Microsoftがデスクトップ版Webブラウザ「Edge」をオープンソースのChromiumベースにシフトすると発表した。一般ユーザーが何かする必要はない。開発者向けプレビューを2019年初頭にリリースする計画だ。 米Microsoftは12月6日（現地時間）、「Windows 10」のデフォルトWebブラウザ「Microsoft Edge」をオープンソースのChromiumベースに切り替えると発表した。開発者向けのプレビュービルドが2019年初頭に登場する見込みだ。 Windows担当副社長のジョー・ベルフィオーレ氏は公式ブログで、この移行は「ユーザーにとってより良いWeb互換性を作り、すべてのWeb開発者にとってWebのフラグメンテーションを少なくする」ためであり、「新しいARMベースのWindows端末でのWebブラウジング」に向けてChromiumプロジェクトに貢献していくと語っ

GoogleとUbisoftは10月1日、Googleが開発中のストリーミング技術Project Streamのテスト運用として、『アサシン クリード オデッセイ』をGoogle Chrome上でプレイするユーザーテストを実施する旨を発表した。米国内かつ人数限定で、17歳以上・25mbps以上という条件下でテスト参加希望者を募っている。以下の映像では、操作環境は不明ながら1080p/60fpsを保った状態で『アサシン クリード オデッセイ』をプレイする様子が確認できる。 Ubisoftは公式ブログにて「ビデオゲームは、アートとテクノロジーの接合点として、新しい表現方法が技術的革新を牽引する場所として、常に存在してきました。そして新しい跳躍のたびに技術的ブレイクスルーが生まれ、業界内外をかき乱します」と語っている。 こうした考えを踏まえ、帯域幅、コンピューティング・パワー、ストレージなどの進

Chrome拡張を長年造ってきたなかで 手法や自作ライブラリが充実してきたのでこの辺で公開します。 Chrome拡張は本当に効果的に改善できて、すばらしい仕組みです。 これで皆さんが簡単に現場改善が進んだら嬉しい限りです。 (なお、これは 2017-08-05 Builderscon Tokyo 2017 でのトーク用に作成した資料です) わりと ウケた 改善 どんなことができるのか、ざっと見てみましょう。 サンプルページ ※各項目ごと、「拡張を有効化」をクリックすることで拡張が入った状態を見ることができます。 Chrome拡張を作るのに必要な 環境 必要な環境はシンプルです。 Google Chrome Text Editor or IDE(UTF-8 が扱えるなら何でもいい) （公開するなら）Zip 圧縮ができるソフトウェア （公開するなら）クレジットカード これだけ。 あとは、ソース

Hey, folks, welcome to Week in Review (WiR), TechCrunch’s regular newsletter covering the past week in happenings around the tech sphere. Winter’s finally arrived, judging by the NYC weath

前回の記事で解説したように、Payment Request API によってウェブでの支払いにおけるユーザーエクスペリエンスは大きく変わる可能性があります。しかし、これが本当にメインストリームになるのか、将来的に自分のサイトを対応させる必要性は出てくるのか？そんな疑問を持つ方は少なくないと思います。 僕はかなり高い確率で、今後ウェブ上でのほとんどの支払いが Web Payments を経由したものに変わっていくと予想しています。この記事では、その理由を説明していきます。 クレジットカードのセキュリティ問題 # あなたはクレジットカードを紛失して再発行した経験はありますか？ クレジットカードは紛失や盗難で番号が漏れて他人に知られてしまった可能性がある場合、カード番号を変更しなければなりません。番号が変わるということは、設定してある自動引落などが全てやり直しになってしまいます。その手続きの大変

ページをどのくらいスクロールし、どこをクリックするのか、マウスやキーボードをどのように操作し、コンテンツを見るのか、ブラウザで行った操作を記録し、さらに完全再生もできるChromeの機能拡張を紹介します。 ユーザビリティテストに利用するだけでなく、操作を編集・再生することもできるので、プレゼンなどでページの操作を再現することも可能です。 Wildfire Wildfireの特徴 Wildfireのインストール Wildfireの使い方 Wildfireの特徴 Wildfireはユーザーがページをどのように操作するのか、どのように見るのか、手軽にユーザビリティテストができるChromeの機能拡張です。また、アクションをシミュレーションし、新しいデザインの確認にも利用できます。 ブラウザで表示したページのアクションを記録します。 記録したアクションは、すべて再生可能。 アクションを編集し、シミ

こんにちは！ほけきよです。 ウェブブラウザ、みなさんは何を使っていますか？ IE, Opera, Firefox, そしてGoogle Chrome … いろいろなブラウザがありますね。 今回は、そんな中でも、まだ馴染みがない、 けれど超絶使いやすく、超絶便利なブラウザ、その名も 『VIVALDI』 を紹介します！！ VIVALDIとは インストールしてみる VIVALDIのここが凄い！！ まずはチュートリアルを見よう 煩雑なtabから開放！tabstack ブラウザ内でページ分割！tiling お気に入りにノートにパネル！多彩なブックマーク ノート webパネルの追加 自分色に染めろ！VIVALDIの本質は個人設定にあり。 クイックコマンドで大体何でもできる おわりに VIVALDIとは Vivaldiは自由で、思う存分カスタマイズができるWEBブラウザです。豊かでパワフル、安全性もあり