表示速度を飛躍的に向上させるHTML/CSS最新仕様「content-visibility」「Lazy loading」「contain」をコード付き簡単解説
これまではJavaScriptを用いて実装するしかありませんでしたが、ついにimgやiframe要素であればloading="lazy"を付与するだけで、簡単に実装できます。 <!-- 画像に適用する場合 --> <img src="pic.png" alt="画像の詳細" loading="lazy"> <!-- iframeに適用する場合 --> <iframe src="external.html" loading="lazy"></iframe>画面外では読み込みが発生しないので、必要になった時（画面内に要素が入りそうになった時）に読み込みが発生するのでパフォーマンスが向上します。 また画像についてはsrcsetを用いたレスポンシブな画像に対しても指定できますし、picture要素を用いてfallback形式でも記述できます。 <img src="normal.png" srcse
どうしてHTML5が廃止されたのか | フューチャー技術ブログ
フロントエンド連載の5記事目です。 HTML5が2021年の1月に廃止されました。 Webエンジニアとしてバリバリ活躍されてる方やエグゼクティブテックリードのような肩書きを持つ方にとっては「何をいまさら」という話題かと思います。 しかしながら、今年も新人さん入ってきてくださったので、プログラミングを学習中にHTML5という文字列に悩まされないように、そもそもHTML5とは何かや、廃止された経緯をまとめてみます。 HTML5とはWebサイトを作るときに必ず書くことになるHTML。Webサイトのコンテンツ、つまり中身や構造を作るために使うマークアップ言語です。 そして、その最近版として10年ほど前に登場したHTML5。当時は Webニュースなどで盛んに特集が組まれていましたが、このHTML5がついこないだ、2021年1月28日に廃止されました。 広義のHTML5 / 狭義のHTML5HTML5
W3Cのは『欠陥フォーク』！？ HTMLスナップショット2016 ── HTML5 Conference 2016セッションレポート
XMLこそがウェブの未来であるという見方が支配的だったために、2004年のOperaとMozillaの共同提案は却下され、W3CでHTMLを改良する道が閉ざされました。そこでブラウザーベンダーが集まってW3Cとは別の組織でHTMLやHTMLに関連する仕様の改良を行う、というのがWHATWGのはじまりです。 以来今日に至るまでずっと、WHATWGはHTMLの開発を（ある期間はW3Cと共同で、ある時期からはW3Cとは別に）し続けています。「WHATWG HTMLこそが実装者とウェブ開発者によって参照されるべき最新の仕様であり、欠陥フォーク（W3C HTMLのこと）は答えではない」というのはWHATWG HTMLのエディターであるAnne van Kesterenの言葉の通り、WHATWG HTMLを第一に参照すべきでしょう。 HTML5勧告以降のW3Cの動向 さて、W3Cに話を戻します。HTM
【エキスパートガチトーク】Web技術の未来を「Extensible Web」から探る！（後編）─技術の進化は必要か？
【エキスパートガチトーク】Web技術の未来を「Extensible Web」から探る！（後編）─技術の進化は必要か？ 白石 俊平（HTML5 Experts.jp編集長） 本対談記事は、Extensible Webが誕生してから2年で何が変わったのか、そしてこれからWebはどうなっていくのかを、有識者の方々にそれぞれの立場から語っていただこうという企画です。 後編である今回は、Extensible Webの現在、そしてWeb技術の未来にフォーカスしたお話になります。Extensible Webの概要や、Extensible Web以前からあるWebの問題点について知りたい方は、前編をご覧ください。 HTML5は（ついに）モジュール化される 白石 では、Extensible Webの考え方が提唱されてから2年が過ぎたわけですが、どのような変化が起きつつありますか？まずは皆さん、思いついたもの
【エキスパートガチトーク】Web技術の未来を「Extensible Web」から探る！ (前編)─HTML5は問題だらけ？
【エキスパートガチトーク】Web技術の未来を「Extensible Web」から探る！ (前編)─HTML5は問題だらけ？ 白石 俊平（HTML5 Experts.jp編集長） 読者の皆様は、「Extensible Web」というキーワードについてご存知でしょうか。 Extensible Webは、現在のWebが抱える大きな問題点を解決しようとする考え方であり、ムーブメントです。 その問題点とは、誤解を恐れず言うなら、「HTML5の流れで生み出された様々なAPIが実際にはあまり使われておらず、役に立っていない」という点に尽きると思います。 Extensible Webはそうした問題を解決するために、「開発者によって拡張可能なWebを目指そう」と呼びかけます。そのために必要なのは、特定のユースケースを想定した粒度の粗いAPIではなく、粒度が細かく、より基本的な機能を提供する低レベルなAPIを
Tips for CSS3 Browser Support & Fallback Methods
CSS Tips for CSS3 Browser Support & Fallback Methods Jake RocheleauAugust 7, 20150 Comment02.5k Although modern browsers have been improving rapidly there’s still a need for backwards compatibility. Web standards have reached a turning point where most devices are capable of supporting CSS3 features. However it’s crucial to understand your audience and learn how to manage visitors who are not at t
いまさら聞けないHTML5概要
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜Masakazu Muraoka
【Web Audio API + Web MIDI API】ブラウザで電子楽器を作ってみよう！
【Web Audio API + Web MIDI API】ブラウザで電子楽器を作ってみよう！ 河合良哉 ブラウザ上で音を扱うというと、直接音を加工できるWeb Audio API、ブラウザから直接MIDIデバイスと接続できるWeb MIDI APIの2つがここ数年の間に利用可能になり、実際のWebサイトでも使われるようになりました。 今回は「ハンズオンだともっとよかった」というお声をいただきましたHTML5 Conference 2015での講演内容を元に、2つのAPIの説明と、実際にブラウザ上に電子楽器の1つであるシンセサイザーを作ってしまうという記事です。 記事中のサンプルはGitHubに公開していますので、そちらも合わせてご参照ください。 利用するAPIの説明
悩める組み込み機器向けWebコンテンツのパフォーマンス
近年、ブラウザやブラウザランタイムは、PCやスマートフォンのみならず、テレビ、コンソールゲーム機などの組み込み機器にも導入されるようになりました。また、Raspberry Piに代表されるシングルボードコンピュータも流行り出し、ロースペックな環境で動作しなければならないWebアプリケーション開発の需要が高まろうとしています。 多くの組み込み機器に搭載されたブラウザは、近年よく使われるAPIやCSSをサポートしています。しかし、そのパフォーマンスはスマートフォンと比べて非常に貧弱です。スマートフォンでは当たり前のパフォーマンスが得られることはありません。 本記事では、組込機器のブラウザ事情を紹介し、その上で動作するWebアプリケーションの開発の課題、私の経験での苦労話、そして、それに立ち向かうためのTipsを紹介します。 組込機器とブラウザ 組込機器でWebアプリケーションを開発すると言われ
さらばPointer Events！まだまだ落ち着かない、入力デバイスのWeb標準事情 - ふろしき Blog
人々にとってのコンピュータとはデスクトップのみを指す言葉ではなくなり、モバイルやペンといった様々なデバイスが人々の暮らしに関わるようになりました。こうした事情を鑑みて、Microsoftは「Pointer Events」というWeb標準の策定に力を入れていました。彼らは、どんな入力デバイスが備わっていても、共通の手段でそれを扱えることが、Web開発者の望みだと考えていたのです。 IE10ではベンダプレフィクス付き、IE11からはベンダプレフィクス無しで実装されました。そのことを受け、私も一年以上も前に「よし、そろそろだぜ」とブログでPointer Eventsを取り上げました。 ただ、今になってからそれを取り消します。Pointer Eventsは現時点では、あまりオススメできません。どうしても使いたいなら、クロスプラットフォーム面に細心の注意を払ってご利用下さい。 何が起きたのか？ Mi
HTML5 FileSystem APIを使って上書き処理をする方法
HTML5 FileSystem APIを使うと、ユーザのローカルファイルシステムにファイルを書いたりすることができます。もちろん自由にファイルを読み込めるわけではなく、Chrome Webブラウザが持っているサンドボックス内に通常は限定されます（Chromeアプリの場合はその限りではないですが）。オフライン対応アプリケーションを開発する場合には、非常に魅力的なAPIです。 僕の場合はChromeアプリ内でFileSystem APIを使っていたのですが、「既存ファイルの上書き処理」をする際に困ったことと解決策を、本エントリで紹介してみたいと思います。FileSystem API自体の説明は、「 FileSystem API について知る」をご覧ください。 まず、普通にファイルに何か書き込みを行いたい場合、以下のようにコーディングすると思います。 function onInitFs(fs)
web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
NTT HOME > NTT持株会社ニュースリリース > 世界に先駆けて様々なHTML5ブラウザ上で高精度な音声認識を利用可能とする技術の開発ならびに、クラウド型音声認識サービス“SpeechRec for Browser”の販売開始について
NTT HOME>NTT持株会社ニュースリリース>2014年>世界に先駆けて様々なHTML5ブラウザ上で高精度な音声認識を利用可能とする技術の開発ならびに、クラウド型音声認識サービス“SpeechRec for Browser”の販売開始について 2014年9月11日 日本電信電話株式会社 エヌ・ティ・ティ アイティ株式会社 世界に先駆けて様々なHTML5ブラウザ上で高精度な音声認識を利用可能とする技術の開発 ならびに、クラウド型音声認識サービス“SpeechRec for Browser”の販売開始について ～ソフトウェアのインストールなしで、様々なブラウザ上で音声認識が可能な Webアプリケーションの開発を支援～ 日本電信電話株式会社（以下NTT、本社：東京都千代田区、代表取締役社長：鵜浦 博夫）は、世界に先駆けて様々なHTML5（※注1）ブラウザ上で事前のソフトウェアのインストールが
アドビ―Dreamweaverデベロッパーセンター
Enhance and extend DreamweaverDreamweaver provides its own API as well as the Common Extensibility Platform (CEP), and offers you the flexibility of using C++, HTML, CSS, and JS to build extensions for Dreamweaver. You can extend the Dreamweaver UI, add powerful features for building web apps and automate entire cross-application workflows. Build custom web development toolsImport database data in
ユーザーの体感速度を高めるためのJavaScriptチューニング（後編）
連載「Webサイト・アプリ高速化テクニック徹底解説」の第3回は、前回の「ユーザーの体感速度を高めるためのJavaScriptチューニング（前編）」の続きです。この後編では、「ユーザーの操作を阻害しない」方法についてJavaScriptのシングルスレッドやイベントループを交えて解説し、HTML5のWeb Workersについても紹介していきます。 前回は、ユーザーの体感速度を向上させるための方法として、3つのうち「ページを素早く表示する」と「ユーザーに素早くインタラクションを返す」を解説しました。今回は、最後の「ユーザーの操作を阻害しない」について詳しく解説していきます。 ユーザーの操作を阻害しない JavaScriptによる処理が重くなると、いつまでも画面が更新されなかったり、ユーザーの操作が止まってしまったりということがあります。止まっている時間が長すぎると、ブラウザから応答がないという
ユーザーの体感速度を高めるためのJavaScriptチューニング（前編）
連載「Webサイト・アプリ高速化テクニック徹底解説」第2回は、JavaScriptの高速化について、まずは前編、後編に渡ってユーザーの体感速度を向上させるための方法を紹介します。JavaScriptの同期・非同期の仕組みやscript要素のasync属性、defer属性について詳しく解説します。 今回から複数回に分けて、JavaScriptの高速化をテーマに解説していきます。まずは、ユーザーの体感速度を高めるためのJavaScriptチューニングということで、単純なJavaScriptの構文によるスピードを比較するようなものではなく、主にユーザー視点からの高速化を主眼に解説します。その中で、同期・非同期といったJavaScriptの仕組みやscript要素のasync属性、defer属性などについても触れていきます。 ユーザーの体感速度を向上させる 一概にJavaScriptの高速化といっ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TechCrunch | Startup and Technology News
＆M[and M] | 朝日新聞デジタルマガジン＆[and]![＆M[and M] | 朝日新聞デジタルマガジン＆[and]](https://cdn-ak-scissors.b.st-hatena.com/image/square/9b14d5976a07936b14c25b0544f6ff4324963f50/height=288;version=1;width=512/https%3A%2F%2Fwww.asahicom.jp%2Fand%2Fwp-content%2Fthemes%2Fand%2Fassets%2Fimg%2Fogp%2Fogp_m.png)
DevDocs
W3 Watch Reference
