フロントエンド連載の5記事目です。 HTML5が2021年の1月に廃止されました。 Webエンジニアとしてバリバリ活躍されてる方やエグゼクティブテックリードのような肩書きを持つ方にとっては「何をいまさら」という話題かと思います。 しかしながら、今年も新人さん入ってきてくださったので、プログラミングを学習中にHTML5という文字列に悩まされないように、そもそもHTML5とは何かや、廃止された経緯をまとめてみます。 HTML5とはWebサイトを作るときに必ず書くことになるHTML。Webサイトのコンテンツ、つまり中身や構造を作るために使うマークアップ言語です。 そして、その最近版として10年ほど前に登場したHTML5。当時は Webニュースなどで盛んに特集が組まれていましたが、このHTML5がついこないだ、2021年1月28日に廃止されました。 広義のHTML5 / 狭義のHTML5HTML5
Drag and Drop API について 最近のブラウザはライブラリを使わなくてもブラウザ標準APIでドラッグ＆ドロップが実現できます ブラウザの対応状況を見みるとPC用Webブラウザであればほとんど対応しています。 Drag and Drop - Can I use このAPIを使ってこんな感じなものが作れます。 実際に使ってみて Drag & Drop API を使うときにやっておいた方がよさそうなことを紹介します。 また、iOS/Android でも Drag & Drop API を使う方法も紹介します。 Drag & Drop APIの使い方については参考サイトに任せます。 参考サイト 意外と知らないHTML5 API - Drag & Drop APIとは ネイティブ HTML5 ドラッグ＆ドロップ やっておいたほうがいいこと ドラッグ対象以外の画像のドラッグを無効にする
新年度になりましたね。 気温の寒暖差が激しい今日このごろ、皆さまいかがお過ごしでしょうか、 streampack の木村です。 去年の話しになりますが、Apple が iOS11 と High Sierra でようやっと HEVC コーデックをサポートを開始し、HLS でも HEVC を利用できるようになりました。 コンテナは Fragmented MP4 (fMP4) に限定されますが、これにより MPEG-DASH と HLS でメディアを共通化することが可能になりました。 Bento4 を使うことで同じメディアで MPEG-DASH と HLS 配信に必要なファイル群（MP4、プレイリスト）を一気に作成が可能ですので、手順を書いてみます。 用意するもの 動画ファイル 今回は自分の iPhone7 Plus で撮影した動画を使用しました。 もちろん、その他のファイルでも良いです。 Be
HTML 5.2のそれぞれの要素が入れ子にできる「子要素」、包含されることが可能な「親要素」の一覧のルールを視覚化して表示します。 ※1 a要素の親要素が包含可能であること※1 audio要素の親要素が包含可能であること※1 canvas要素の親要素が包含可能であること※1 del要素の親要素が包含可能であること※1 ins要素の親要素が包含可能であること子要素省略※1 map要素の親要素が包含可能であること※1 noscript要素の親要素が包含可能であること かつ body要素の子孫であること子要素省略※1 video要素の親要素が包含可能であること ルート要素＆文書メタデータ html 親 子 head 親 子 title 親 子 base 親 子 link 親 子※HTML 5.2から可能。フレージングコンテンツが期待される場所※head要素の子孫であること meta 親 子※he
どうも、まさとらん（@0310lan）です！ 今回は、ブラウザ上から誰でも簡単にHTML5で作られたアニメーションを製作できるWebサービスをご紹介します！ Webサイトやサービスに組み込んで動きのあるコンテンツを作成したり、企業ロゴやバナー広告、商品紹介、インフォグラフィック…など、とても幅広い分野に応用することが可能です。 ブラウザさえあれば今すぐアニメーションを作れるので、ぜひみなさんもオリジナル作品を作ってみてください！ 【 Animatron Studio 】 ■「Animatron Studio」とは？ 「Animatron Studio」は、とにかく誰でも簡単にアニメーション製作ができることを前提に設計されています。 豊富なイラストやテンプレートを自在に組み合わせることで、わずかなマウス操作だけで楽しいアニメーションを次々と作っていくことが可能です。 例えば、以下のようなアニ
HTML 5.2は2017年12月14日に勧告（Recommendation）され、仕様がRECステージに達しました。これはW3Cメンバーとディレクターの正式な承認を受けたことを意味し、Web制作者として、新しい機能の実装を開始するのに最適な時期になります。 HTML 5.2ではいくつかの新機能と削除された機能があり、記述ルールもいくつか変更され、今までinvalidだったものがvalidになり、新しくinvalidになったものもあります。 すべての変更点はHTML 5.2: Changesで確認することができます。 Web制作に最も影響を与えると思われるいくつかの変更点について説明します。 What's New in HTML 5.2? 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 HTML 5.2の新機能 HTML 5.2
Preface This comprehensive primer on the internal operations of WebKit and Gecko is the result of much research done by Israeli developer Tali Garsiel. Over a few years, she reviewed all the published data about browser internals and spent a lot of time reading web browser source code. She wrote: As a web developer, learning the internals of browser operations helps you make better decisions and k
iPhone Safariで動画をインライン再生する方法への反応の中に「音声は？」との声がちらほらありました。 スマホは常にサイレントモードにしてて殆ど音出さないのですっかり頭から抜けていましたが、実験済みでしたので今回は音声付きでインライン再生する方法の話をば。 音声をAudio APIを使って同時に再生 最初に思いつくのは動画からDemuxして分離した音声をAudio APIを使って同時に再生する方法でしょう。 実際これで足りる場合もあります。が、足りない場合もあります。 VideoとAudioに同時に再生命令を送っても、同じ速さで再生されるかは保証されない 昔々にAviUTLだのTMPGEncだのでエンコしてた人なんかはわかると思いますが、分離された音声と映像は結構かんたんにズレます。 まして今回はVideoをまともに再生していないわけで。 ですからナレーションとBGMのみのCMなん
プログラマあるあるだけど友人からホームページ作ってよ!と言われることがある。 大体は適当な理由をつけて断るけど、1日程度で作る方法を模索してみた。 テンプレートをダウンロード 1から書いてる暇はないので適当なテンプレートを使います。今回はHTML5 UP!を使います。 HTML5 UP!のLicense 控え目でもCreditsをサイトに乗せれば無料で使用可能です。 以下はサンプル テーマはDirectiveを使用します。 フォームが付いててマークアップはそのままで使えそうですね。 開発環境 テーマがダウンロードできたら開発環境を準備します。 サーバーサイドは書きません。 Cloud9が便利そうだったので登録してワークスペースを作ります。Cloud9のワークスペースは一つなら非公開でも利用可能です。 以下のようにプロジェクトの情報を指定します。 ライブプレビュー準備 生成されたプロジェクト
みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？ 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ
プログラムで使うことの多い「乱数」。ゲーム開発やビジュアルアート、ウェブサイトのアニメーションにおいて乱数は非常に重要で、さまざまな用途で利用されています。プログラムで一般に乱数と聞くと、すべての数値が同じ頻度（分布）で出現する「一様乱数」と呼ばれる乱数をイメージする方が多いと思います。 多くの場合はこの「一様乱数」で取得した乱数を用いれば十分でしょう。しかし、場合によっては「一様乱数」ではなく、偏りのある乱数を用いることでコンテンツの見た目や現象の「自然さ」を演出することが可能です。 実は「一様乱数」に一手間加えることで、乱数の分布の偏りを制御できます。今回は乱数を使用して好みの分布を得るためのパターンをいくつか紹介します。 乱数分布のシミュレーションデモ （HTML5製） 次のデモはリアルタイムで乱数の出現頻度を計算し、グラフに可視化するコンテンツです。画面下のプルダウンで乱数の種類を
Computation Intelligence Car Evolution Using Box2D Physics (v3.2)
はじめに ネットには様々な情報が溢れており、JavaScriptに関する情報も多数存在しております。 その中には、「今時こんな書き方しねえよ…」と思わずツッコミを入れたくなるような、本当に、本当に古い内容について書かれている古文書も存在します。 そんな罠記事の情報に囚われてしまって、いつまで経っても現代的なJavaScriptが書けない皆さんのために、このシリーズの記事では、各セクション毎に分けて、旧石器時代の記述と、現代の記述を紹介する形で、文明開化をしていきたいという思いで記述する。 最初は、現在比較的メジャーなブラウザで一通り動作する「ECMAScript 5」までの内容に関してポエムを書き連ねていき、最終的には一連の内容を読むだけで「ES6(ES2015)」による新機能や、絶賛提案中の「ES7」の一部提案内容についても把握し、おおよそ現代人を育成することを目標とする。 …なんてめっ
HTML5(Canvus)、Javascript向けの画像処理ライブラリについてまとめたので紹介します。 続きを読む
ニコニコ動画の一般会員は本来なら使えないはずの「ムービーをシークバーの好きな場所から再生させる」機能や、PCから行えないはずの「ムービーの倍速再生」が行えてしまうスクリプトが公開されました。複数動画同時再生の制限回避なども可能で、Firefox・Google Chromeに対応しています。 ニコ動をHTML5で再生するスクリプト作った : lowlevelaware https://www.reddit.com/r/lowlevelaware/comments/3mk689/ 「ニコ動をHTML5で再生するスクリプト」はGoogle ChromeとFirefoxで動作するとのことなので、まずはGoogle Chromeで試してみます。Chrome ウェブストアでTampermonkeyのページを開いて「CHROMEに追加」をクリック。 「Tampermonkeyを追加しますか？」と聞かれる
動画関連のアプリを開発しているのですが、開発中にいくつかはまったので記事にします。 動作確認端末はNexus5でOSはAndroid5.1です。 他の端末やバージョンでは試していないのでどうなるか不明・・です。 もし情報あれば教えていただけると助かります。 autoplay属性を指定しても自動で再生されない 次のようにautoplay属性を指定しても自動で動画が再生されませんでした。 <video src="xxxx.mp4" width="320" height="240" autoplay controls></video> 対策としてloadstart時にplayを呼び出して再生するようにしました。 <video src="xxxx.mp4" width="320" height="240" autoplay controls></video> <script> var video
理解しておきたい、CSSによるインラインレイアウトの仕組み（vertical-align編その1）Inline Layout─Frontrend Conference 高津戸壮（株式会社ピクセルグリッド） この記事は、Frontrend Conferenceのセッション「Inline layout」でお話させていただいた内容を基に、連載記事（全4回）として書き起こしたものです。今回は第2回目です。 なぜ画像の下部にスペースができてしまうのか？ 今回の記事では、vertical-alignについて解説していきます。前回は、行のレイアウトが、font-sizeとline-heightによりどう変わるのかを見てきました。この行の中で、要素を縦位置のどこに配置するかを決定するのがvertical-alignです。これを理解すると、前回の疑問、「なぜ画像の下部にスペースができてしまうのか」が分かりま
追記: 情報が色々と古くなったため、2020年に書き直した版へのリンクを張っておきます。 この記事は VirtualDOM Advent Calendar 2014 - Qiita の初日です。 初日ということで、基調講演風に、Virtual DOMとはなにか、なぜ僕はこんな興奮しているのか！という話から。 Virtual DOMとはなにか 既存の概念で当てはめると、JavaScriptのMVC, MVW(Whatever)フレームワークのViewに位置します。が、その程度では終わりません。仮想DOMとは世界を革命する力であり、このjQueryのDOM操作で汚れきったフロントエンドを救う救世主なのです。 現時点で自分が知っている限りは、以下の実装を指します。 facebook/react 最も使われてるFacebookの実装 Matt-Esch/virtual-dom Altenative
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
