どうしてHTML5が廃止されたのか | フューチャー技術ブログ
フロントエンド連載の5記事目です。 HTML5が2021年の1月に廃止されました。 Webエンジニアとしてバリバリ活躍されてる方やエグゼクティブテックリードのような肩書きを持つ方にとっては「何をいまさら」という話題かと思います。 しかしながら、今年も新人さん入ってきてくださったので、プログラミングを学習中にHTML5という文字列に悩まされないように、そもそもHTML5とは何かや、廃止された経緯をまとめてみます。 HTML5とはWebサイトを作るときに必ず書くことになるHTML。Webサイトのコンテンツ、つまり中身や構造を作るために使うマークアップ言語です。 そして、その最近版として10年ほど前に登場したHTML5。当時は Webニュースなどで盛んに特集が組まれていましたが、このHTML5がついこないだ、2021年1月28日に廃止されました。 広義のHTML5 / 狭義のHTML5HTML5
あなたがまだ使っていないかもしれないHTML5の便利機能10選 - Qiita
こんにちは、たかとーです🧑🎤 こちらは、10 useful HTML5 features, you may not be usingの翻訳記事になります。 当記事は、Tapasさんの許可を得て翻訳しています。Tweet 10 useful HTML5 features, you may not be using HTML5は新しいものではありません。最初のリリース（2008年1月）以来いくつかの機能を使用してきました。100DaysOfCodeの取り組みの一環として、HTML5の機能リストをもう一度よく見てみました。何か見つけたかな？私は今のところあまり使っていません。 この記事では、過去にあまり使ったことがなかったが、今では便利になったHTML5の機能を10個挙げています。また、Netlifyでホストされている、実際に動作する例を作成しました。参考になることを願っています。 htt
[HTML5] Indexed DBで検索結果をキャッシュする #2 | DevelopersIO
Indexed DBで検索結果をキャッシュする #1 の続きです。 実装 データ構造 テストデータはタブ改行区切りとし、以下のオブジェクトに変換してオブジェクトストアに格納します。 ｛ id:連番, name:"氏名", nameKana:"氏名カナ", sex:"性別", bloodtype:"血液型", birthday:"誕生日", zipcode:"郵便番号", address:"住所", addressKana:"住所カナ" } 画面 ソート項目・ページ数を選択するプルダウンと、一覧のテーブル、詳細表示で構成された画面を用意します。 <select id="sort"> <option value="">id</option> <option value="byNameKana">氏名カナ</option> <option value="byZipcode">郵便番号</opti
![[HTML5] Indexed DBで検索結果をキャッシュする #2 | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/a18d742778bb675192c3331b71122e80fc5dc1fa/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2013%2F11%2Fhtml5.png)
[HTML5] Indexed DBで検索結果をキャッシュする #3 | DevelopersIO
Indexed DBで検索結果をキャッシュする #2 の続きです。 実装（続き） リストの描画 オブジェクトストアからデータを読み込み、画面に表示します。 //1ページに表示する件数 var RECORDS_IN_PAGE = 20; //トランザクション開始 readonlyモード var tx = db.transaction(STORE_NAME, 'readonly'); //トランザクションを介してオブジェクトストアを参照 var store = tx.objectStore(STORE_NAME); //ソートに使用するインデックス名を画面から取得 var indexName = $('#sort').val(); //ページの位置を画面から取得 var fromNum = $('#page').val() * RECORDS_IN_PAGE; //ソート項目に応じたカーソルを
[HTML5] Indexed DBで検索結果をキャッシュする #1 | DevelopersIO
ベンダープレフィクス抜きで動作するバージョンです。現状では、モバイル端末におけるサポート状況が弱いようです。Safari が非対応なのが厳しいですね。 Web Storage との違い ローカルにデータを保持する仕組みとしては、Indexed DB 以外にも Cookie と Web Storage があります。Cookie と Web Storage の違いについては Web Storage を解説している記事に譲るとして、ここでは Indexed DB と Web Storage の違いについて軽く触れておきます。 複数のオブジェクトストアを使用できる Web Storage と Indexed DB は、どちらも key-value ストア型の容れ物である点については同じです。Web Storage では、ドメイン＋ポート番号を合わせた一つのオリジンごとに一つのオブジェクトストアを使
[HTML5] Drag & Drop API おさらい | DevelopersIO
こんにちは。クラスメソッドの稲毛です。 2014 年の正式勧告へ向けて策定が進められている HTML5 ですが、既に Web 開発では定番となっています。今回は、HTML5 で追加された API の内のひとつである Drag & Drop API について、正式勧告前におさらいをして内容をまとめてみたいと思います。 概要 開発者が Web アプリケーションへ Drag & Drop 機能を実装する際に必要な事柄は下記の通りです。 Drag Target を指定する。 Drag & Drop 関連イベントを適切に処理する。 この二点さえ押さえれば Drag & Drop を実現することができます。しかし 2 番目の「イベントを適切に処理」という点が意外に複雑なので注意が必要です。（この点については詳細記事にて触れます。） 二種類の Drag & Drop Web アプリケーションでの Dra
[HTML5] Drag & Drop API おさらい 「ファイルの DnD」 | DevelopersIO
<p><div id="target"></div></p> JavaScript var target = document.getElementById('target'); function dragOverHandler(event) { event.preventDefault(); event.dataTransfer.dropEffect = 'copy'; } function dropHandler(event) { event.stopPropagation(); event.preventDefault(); var files = event.dataTransfer.files; Array.prototype.forEach.call(files, function (file) { var reader = new FileReader(); reader.a
[HTML5] Drag & Drop API おさらい 「DOM 要素の DnD」 | DevelopersIO
このイベントの中でとりあえず処理が必要なものは、Drag 対象要素の「 dragstart 」と Drop 対象要素の「 dragover 」「 drop 」となります。 var dragElement = null, items = document.getElementById('list').getElementsByClassName('item'); function dragStartHandler(event) { dragElement = event.target; event.dataTransfer.setData('dragItem', dragElement.innerHTML); } function dragOverHandler(event) { event.preventDefault(); event.dataTransfer.dropEffect =
[HTML5] WebSocketを使ってスライドショーをつくってみる | DevelopersIO
はじめに つい先日まではリアルタイム通信といえばAjaxポーリングやCometを使用していました。 しかし、最近はノータイムでWebSocket使用を決定することが多くなっています。 Googleトレンドを見てもわかるように、WebSocketは数年前から日を追うごとに注目されてきおり、 今ではリアルタイム通信を実現するためのスタンダードな技術となっているといっても過言ではありません。 いままでWebSocket採用の障壁だったIE対応についても、去年から今年にかけてHTML5に対応し、WebsSocketも動くようになりました。 本記事ではWebSocketやそれに関連する技術の簡単な解説、Websocketを使用したサービスについて紹介し、 WebSocketを使った簡単なデモの説明を行います。 WebSocketとそれに関連する概要 まずはWebSocketおよびそれに関する技術につ
[HTML5] socket.ioで接続情報を取得したり接続種類を制限したりする | DevelopersIO
socket.ioの接続方式 nodeでWebSocketを使用する環境ではスタンダードとなっているsocket.ioですが、 これはクライアントに応じて接続方式を切り替えてくれるという機能を持っています。 接続種類は下記のとおり。 WebSocket Adobe® Flash® Socket AJAX long polling AJAX multipart streaming Forever Iframe JSONP Polling さまざまな接続方式を選択してくれるのはいいのですが、場合によっては特定の接続に制限したい場合もあります。 本記事ではsocket.ioにおいて接続を制限する方法を紹介します。 環境構築方法 今回使用した動作環境は以下のとおりです。 OS : MacOS X 10.9 node.js : v0.10.21 socket.io: 0.9.16 node.jsにつ
[HTML5] WebSocketでMessagePackを使う | DevelopersIO
MessagePackとは MessagePackとは、バイナリシリアライゼーションフォーマットです。 最近はクライアント/サーバ間でデータをやりとりする場合、JSONフォーマットが非常によく使用されていますが、 WebSocketでデータの送受信をする際にもJSON.stringifyを使用してJSON文字列を使っているのではないでしょうか。 MessagePackを使用した場合、JSONにくらべて高速に動作し、データサイズもコンパクトになるという特徴があります。 今回はnode + websocketにおいてMessagePackでデータの送受信をおこなってみましょう。 環境構築方法 今回使用した動作環境は以下のとおりです。 OS : MacOS X 10.9 node.js : v0.10.21 socket.io: 0.9.16 node.jsについては公式ページ等を参考にしてイン
The Basics of Web Workers | Articles | web.dev
The Basics of Web Workers Stay organized with collections Save and categorize content based on your preferences. The problem: JavaScript concurrency There are a number of bottlenecks preventing interesting applications from being ported (say, from server-heavy implementations) to client-side JavaScript. Some of these include browser compatibility, static typing, accessibility, and performance. For
HTML5で、オフラインでも使えるiPod/iPhone超簡単アプリっぽいものを作ってみた － Publickey
HTML5にはオフラインアプリケーション機能があり、オフラインに対応したWebサイトを作ることができます。Webブラウザでいちど表示させれば、あとはネットワークとの接続が切れてもそのままエラーを起こさずに利用し続けられるWebサイトです。 iPod TouchやiPhoneに搭載されているWebブラウザの「Safari」はHTML5のオフラインアプリケーション機能に対応しているそうなので、HTML5を使っていつでも参照できる超簡単なアプリを作れるのではないか、そう思ってお正月休みに試してみることにしました。 単に路線図を表示するだけのアプリ iPod Touchを僕は利用しているのですが、いつでも参照できる地下鉄の路線図があるといいなと思っていました。iPod TouchはWifi機能しかないため、外出中はずっとオフラインでの利用なのです。 そこで、起動すると路線図の画像を表示するだけの超
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネットグループ(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 日本のドメイン登録業者(レジストラ)（「ICANNがレジストラとして認定した企業」一覧（InterNIC提供）内に「Japan」の記載があるもの）を対象。 レジストラ「GMO Internet Group, Inc. d/b/a Onamae.com」のシェア値を集計。 2023年5月時点の調査。
HTML5キャッシュマニフェストを利用する | Act as Professional
NETWORK: * CACHE:キャッシュさせるファイルを記載します。 NETWORK:必ずネットワークから取得する内容を記述します。CACHEセクションに記載したデータ以外をネットワークから取得するようにするのでアスタリスクを記載します。 マニフェストファイルの自動生成上記でマニフェストファイルを作成しましたが、下記のmanifestRというサイトを利用して、現在閲覧しているURLのマニフェストファイルのひな形を自動生成してくれるサイトがあります。こういったサイトを利用してマニフェストファイルの作成をさくっとやってしまうのがオススメです。 manifestR作成されたマニフェストファイルの内容を確認してから利用してください。自動生成された物をそのまま利用すると何もかもキャッシュされてしまって、意図しない動作を招くと思います。 HTMLにマニフェストファイルを設定すべてのHTMLのDOC
Flowplayer | Flash Video Player for the Web
Flowplayer is now part of the Wowza Video live streaming and VOD platform. Learn more →
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネットグループ(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 日本のドメイン登録業者(レジストラ)（「ICANNがレジストラとして認定した企業」一覧（InterNIC提供）内に「Japan」の記載があるもの）を対象。 レジストラ「GMO Internet Group, Inc. d/b/a Onamae.com」のシェア値を集計。 2023年5月時点の調査。
HTML5 Hidden Attribute
HTML5 has given us some simple but incredibly useful HTML attributes: placeholder, download, and autofocus to name few. Another new attribute is the hidden attribute. When applied to an element, the hidden attribute acts very much like CSS' display: none; the element disappears from view and its dimensions collapse. It's as simple as: <div hidden> You can't see me! </div> If a given browser d
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - RonnieSan/uploadify: A jQuery plugin for file uploads.
エンジニアtype 技術者のキャリアを考えるWebマガジン - 転職＠type
