PWAで表示速度が2倍に！ スピード改善を妥協しない日経電子版に学ぶ、PWAのメリット＆デメリット - エンジニアHub｜Webエンジニアのキャリアを考える！
PWAで表示速度が2倍に！ スピード改善を妥協しない日経電子版に学ぶ、PWAのメリット＆デメリット ネイティブアプリに近い体験を簡単に提供できるとして注目を集めている「PWA」。実際に導入し、表示速度が2倍になったという日経新聞電子版の開発者に「PWA」のメリットとデメリットを伺いました。 PWA（Progressive Web Apps）は本当に「アリ」なのか――？ ネイティブアプリの開発にはWebとは異なる専門知識が必要であり、またAndroidやiOSなどOSごとでも異なるため、リソースが膨大にかかるという課題があります。そこで昨今は、XamarinやReact Nativeなどのクロスプラットフォーム開発ツールを使い、ネイティブアプリやWebの開発を一本化しようという動きが活発になっています。 一方で、ネイティブアプリに近い体験を簡単に提供できるとして注目を集めているのが、Goog
W3C TPAC 2019 に行ってきたメモ Part.2 - console.lealog();
最終日！ TPAC 2019: Detailed schedule このPart.2は金曜の記事で、この日はずっと「Media WG」のオブザーバーしてました。 Links アジェンダ https://www.w3.org/wiki/Media_WG/TPAC/2019 MSE, DataCue and TextTrackCue Timed Text WGとのJoint meeting スライド https://docs.google.com/presentation/d/1Oir_gRhleMSpR850KZlxnz20xnvYnJoNk-ZlsMVrbIY/edit#slide=id.p DataCue / TextTrackCue https://github.com/WICG/datacue/blob/master/explainer.md HLS/DASHなどの再生にあわせて動的
Webデザイン100トレース | Hypertext Candy
こんにちわ！最近はフロント開発も担当させていただいてます、Yamamotoです。 今回はエンジニアがデザインを学ぶべく、100のWebサイトのデザイントレースをして、学んだことをまとめてみました。 エンジニアまたは未経験だけど、Webデザインにも興味があるという方の、何かのきっかけになれば幸いです。 目次 なぜ Webデザインを学ぼうと思ったのか デザイントレースについて 100トレースして学んだこと なぜWebデザインを学ぼうと思ったのか ざっくりですが、実務を行いながら以下のように思うことがありました。 細部のデザイン指示がなく、開発の手が止まってしまう どう実装するか目線の発想・提案しか浮かばない 綺麗なコードだけではなく、視野を広げてより良いものを作りたい などなど... デザイナーとエンジニアの業務は差別化されてはいますが、互いに近接し交わる部分も多くあります。そんな中で、業務効
HTTP/2 の概要 | Articles | web.dev
HTTP/2 の概要 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 HTTP/2 は、めったにない組み合わせで、アプリケーションの速度、シンプルさ、堅牢性を高めます。これまでアプリケーション内で行っていた HTTP/1.1 の回避策の多くを元に戻し、トランスポート レイヤ自体でこれらの問題に対処できるようになります。さらに、アプリケーションを最適化してパフォーマンスを改善するまったく新しい機会も数多く生まれます。 HTTP/2 の主な目標は、リクエストとレスポンス全体の多重化を有効にしてレイテンシを短縮し、HTTP ヘッダー フィールドを効率的に圧縮することでプロトコルのオーバーヘッドを最小限に抑え、リクエストの優先順位付けとサーバー push のサポートを追加することです。これらの要件を実装するために、他のプロトコル機能強化（新しいフロー制御、エラー処
【新定番】レスポンシブデザインのブレイクポイントの正解はこれだった[2019最新版] - webのあれこれ
↓↓↓最新の2021年版を作成しましたのでこちらもご覧ください。↓↓↓ hashimotosan.hatenablog.jp PDFはこちらからどうぞ[508KB] 2019年Pixel 3aやGalaxy S10など一通り新機種が発表されたので、2019年改めてブレイクポイントについて考えてみました（3年ぶり！）。 3年経ってほとんどのサイトがレスポンシブデザインになって、ブレイクポイントを少なく効率よく設定していく方向になっているのだと思います 前回、ブレイクポイントの設定はフレイムワークも参考に考えていましたが、 改めて考えてみると、モバイルファーストの観点からも640px/1024pxではないのではないかと感じました。 以下が3年前の前回の記事です。 いくつかブレイクポイントを調べましたが、 だいたい以下のような分け方が多かったです。 640px/1024px 480px/896x
![【新定番】レスポンシブデザインのブレイクポイントの正解はこれだった[2019最新版] - webのあれこれ](https://cdn-ak-scissors.b.st-hatena.com/image/square/c569bf6868b0e2cd70822921c201208292c30537/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fh%2Fhashimotoblog%2F20190528%2F20190528165147.png)
非デザイナーエンジニアが一人でWebサービスを作るときに便利なツール32選 - Qiita
非デザイナーエンジニア(Rubyist)の私が、一人でこんなWebアプリを作ってみました。 まだβ版ですが、Pocketやfeedlyの未読コンテンツの中から、 重要度が高いものだけをリマインドしてくれるサービス「Reminderr」です。 Reminderr：http://www.reminderr.me/ 要するに、私自身のPocketとかRSSがカオスになっているので、 その中で重要なものだけ教えてほしかったので、 自分で作っちゃえ！って思って作りました。 そのときに使った便利ツールたちをまとめておいたら便利そうだったので、 今回使ったもの＋αを全てまとめてみました。 紹介するツールたちを駆使すれば、 非デザイナー＆デザインセンス0の私が、 1週間程度でこれくらいのアプリをリリースできるので、 他のエンジニアにも便利なツールがいっぱいあると思います。 Bootstrap系 Boots
Web 関連仕様 日本語訳
このページは、 Web プラットフォーム関連の様々な仕様の日本語訳の一覧と， それらの日本語訳に共通な事項についての説明です。 これらの翻訳の正確性は保証されません。 これらの仕様の公式な文書は英語版であり、 日本語訳は公式なものではありません。 誤訳が無いことは保証されません。 ［ 当の仕様の策定者たちが想定している／当の仕様に期待されている ］意味論を完全かつ正確に反映することは保証されません。 翻訳なので、 語彙レベルで原文と正確に一致する意味を表すことは決してありません。 日本語は自然言語なので、 誰がいつどこで読んでも同じ解釈になることは保証されません。 ）（ 実際に誤訳が見つかることも時折あります。 それらについては見つかり次第修正され， 加えて用語の対訳や言い回しなども時折修正されるので、 これらの翻訳が「完成」する日は永遠に来ません。 逆に原文仕様が誤っていることもあり、
クリティカル レンダリング パス | Articles | web.dev
クリティカル レンダリング パス コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 クリティカル レンダリング パスの最適化とは、現在のユーザー操作に関連するコンテンツの表示を優先することです。 高速なウェブ エクスペリエンスを提供するには、ブラウザで多くの処理を行う必要があります。こうした作業のほとんどは、ウェブ デベロッパーには見えません。Google がマークアップを記述すると、見栄えのよいページが画面に表示されます。しかし、ブラウザはどのようにして HTML、CSS、JavaScript を取り込み、画面上のピクセルをレンダリングするのでしょうか。 パフォーマンスを最適化するには、HTML、CSS、JavaScript のバイトを受け取るまでの中間ステップと、それらをレンダリングされたピクセルに変換するために必要な処理（クリティカル レンダリング パ
Navigator.share() - Web API | MDN
Promise は以下の DOMException 値のいずれかで拒否される可能性がある。 NotAllowedError DOMException web-share の権限が与えられていないか、ウィンドウが一時的な有効化されていないか、セキュリティ上の配慮からファイル共有がブロックされているかです。 TypeError 指定した共有データを検証することができません。想定される理由は以下の通りです。 data 引数が除外されているか、不明な値を持つプロパティしかない場合。ユーザーエージェントが認識できないプロパティは無視されることに注意してください。 URL の形式が正しくない場合。 ファイルが指定されているが、実装がファイル共有に対応していない場合。 指定したデータを共有すると、ユーザーエージェントから「敵対的な共有」と見なされる場合。 AbortError DOMException
Use Lighthouse for performance budgets | Articles | web.dev
Use Lighthouse for performance budgets Stay organized with collections Save and categorize content based on your preferences. Lighthouse now supports performance budgets. This feature, known as LightWallet, can be set up in under five minutes and provides feedback on performance metrics and the size and quantity of page resources. Install Lighthouse LightWallet is available in the command line ver
History - Web API | MDN
History インターフェイスで、ブラウザーのセッション履歴、つまり現在のページが読み込まれたタブまたはフレームで訪問したページを操作することができます。 history のインスタンスは 1 つしかなく（シングルトンです）、グローバルオブジェクト history を通してアクセスできます。 History インターフェイスは何もプロパティを継承していません。 length 読取専用 現在読み込まれているページを含むセッション履歴の要素数を表す Integer を返します。たとえば、新しいタブで読み込まれたページのこのプロパティは 1 を返します。 scrollRestoration ウェブアプリケーションが履歴の操作で既定のスクロール位置の復元を明示的に設定できるようにします。このプロパティは auto または manual を指定することができます。 state 読取専用 履歴スタッ
Fetch API 解説、または Web において "Fetch する" とは何か？ - Block Rockin’ Codes
Update [14/11/11]: Chromium での実装が M40 からあるそうなので、末尾に引用追記させていただきました。 [14/11/12]: この記事を書くにあたって、色々なかたにレビューや助言を頂いたのですが、謝辞などが一切抜けてました、本当にすいません。追記しました、ご協力頂いた方々本当にありがとうございました。 WHATGW Fetch Spec WHATWG のメンテナンスするドラフトに Fetch Spec が追加されました。 もうすでに日本語訳もあります、すばらしい。Fetch Standard 日本語訳 この仕様には二つのことが定義されています。 "Fetching": Fetch するとは何か? の定義 "Fetch API": fetch() の定義 後者の定義に基づく fetch() という DOM API の実装も始まっています。(詳細は後述) しかし
Feature PolicyおよびFeature unsized-mediaの導入ガイド - 銀色うつ時間
個人的に注目している Feature Policy というWeb標準の技術と、Feature Policyの中で課せられるルールのうちの1つ、 unsized-media について。 Feature-Policy Feature Policyは、ブラウザ内の機能やAPIの使用可否を開発者に提供する機能。AMPはHTMLのサブセットとして強制的にパフォーマンスの劣化を起こす機能にアクセスできないようにするプラットフォームだが、Feature Policyはそれを通常のウェブサイトで、細やかに制御ができるように設計されている。Cntent Security Policy (CSP)と構文は似ているが、CSPはセキュリティをコントロールするのに対して、Feature Policyは機能をコントロールする。開発者側で機能を明示的に制御することで、大規模サービスでの長期にわたる開発運用や、サードパー
HTML標準めぐりブラウザー業界団体とW3Cが合意--主導権は業界側に
Apple、Google、Microsoft、Mozillaのブラウザーベンダー大手4社が構成する業界団体が、ワールドワイドウェブ（WWW）の標準化団体であるWorld Wide Web Consortium（W3C）と合意し、主導権争いに勝利した。これは事実上、業界団体側がサポートしなければ、W3Cがウェブ標準を規定できないことを証明するものだ。 業界団体のWeb Hypertext Application Technology Working Group（WHATWG）は2004年に結成された。団体結成は、W3Cが現代的なHTML標準を開発するペースが遅かったことと、XMLに似た構造を持つXHTMLにHTMLを移行させるW3Cの計画を受けての動きだった。ブラウザーベンダー側は当時、XHTMLに賛成していなかった。 当時Apple、Mozilla、Operaが構成メンバーだったWHATW
W3C and WHATWG to work together to advance the open Web platform
W3C and WHATWG to work together to advance the open Web platform I am pleased to announce that W3C and the WHATWG have just signed an agreement to collaborate on the development of a single version of the HTML and DOM specifications. The Memorandum of Understanding jointly published as the WHATWG/W3C Joint Working Mode gives the specifics of this collaboration. Motivated by the belief that having
Signed HTTP Exchanges (SXG)とはなにか/SXG Explained
Signed HTTP Exchange Study https://web-study.connpass.com/event/128480/ の発表資料です。
mozaic bootcampに参加して気づいた、自分に欠けていたWeb技術の知識メモ - ninjinkun's diary
mozaic bootcampというhttps://t.co/OfP8vuZTkfリスナーのための4日間通し勉強会に参加中。2日目の今日はkeep-aliveからのちょっとHTTP2、これからCookieの話— にんじんくん (@ninjinkun) 2019年4月29日 mozaic bootcampとは？ mozaic.fmリスナー向けの勉強会。mozaic.fmはJxck氏が主催するPodcastで、Web標準やブラウザ、プロトコルなどWeb技術をターゲットにしており、自分も愛聴している。 今回行われたbootcampはゴールデンウィークの4日間を使い、「Webを正しく理解し、正しく使う」ことを目的として行われた。 参加者はざっくり言うとそこそこ経験のあるWebエンジニアが6名、主催のJxck氏、mozaic.fmでお馴染みの矢倉氏の計8名。参加にあたってはビデオ通話による選考もあっ
画像最適化戦略 Lazy Loading 編 | blog.jxck.io
Intro 長らく議論されてきた <img> や <iframe> における Lazyload について、仕様と実装が動きを見せている。 ここでは、特に画像 <img> に注目し、 Lazyloading の議論の変遷を踏まえた上で現状を解説する。 画像最適化シリーズ第 5 回目のエントリである。 画像最適化戦略 PNG/JPEG 編 画像最適化戦略 Picture 編 画像最適化戦略 WebP 編 画像最適化戦略 SVG/Font 編 > 画像最適化戦略 Lazy Loading 編 Lazyloading 画像や iframe の埋め込みは、読み込むサイズも大きく、処理が同期であるため、レンダリングのボトルネックになりやすく、それらが多いページでは初期表示の遅延の原因となることが多くあった。 特に縦に長いページでは、最初にユーザが見えている領域 (Above the Fold) では表
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新しい API
Signed HTTP Exchange subresource loading (#sxg_study)
