どうしてHTML5が廃止されたのか | フューチャー技術ブログ
フロントエンド連載の5記事目です。 HTML5が2021年の1月に廃止されました。 Webエンジニアとしてバリバリ活躍されてる方やエグゼクティブテックリードのような肩書きを持つ方にとっては「何をいまさら」という話題かと思います。 しかしながら、今年も新人さん入ってきてくださったので、プログラミングを学習中にHTML5という文字列に悩まされないように、そもそもHTML5とは何かや、廃止された経緯をまとめてみます。 HTML5とはWebサイトを作るときに必ず書くことになるHTML。Webサイトのコンテンツ、つまり中身や構造を作るために使うマークアップ言語です。 そして、その最近版として10年ほど前に登場したHTML5。当時は Webニュースなどで盛んに特集が組まれていましたが、このHTML5がついこないだ、2021年1月28日に廃止されました。 広義のHTML5 / 狭義のHTML5HTML5
スマホ向けHTML5ゲーム開発の最前線 主要デベロッパーから人気ゲームエンジンまで解説
2019年4月3日、『神姫PROJECT』などソーシャルゲームの企画・開発を手がける株式会社テクロスが主催するイベント「TECH x GAME COLLEGE」が開催されました。第17回となる今回のテーマは「スマホ向け HTML5ゲームのすべて」。株式会社 Liberapp代表取締役の山田元康氏が、最新のHTML5ゲーム事情を解説します。後半パートとなる今回は、スマホ向けHTML5ゲーム市場の今と、現在の技術の潮流を解説します。 HTML5ゲームのプラットフォーム 山田元康氏（以下、山田）：ここまでが市場全体の話です。それでは、スマホ向けのHTML5市場にはどんなプレイヤーがいるのかというと、一番上に書いてあるのがプラットフォームです。プラットフォームを大きく3つに分けています。 一番左に書いたのがオンチャットと呼ばれているものです。HTML5ゲームの市場が成り立ってるのは、基本的にオンチ
スライム盛り | 無料ゲームは「ゲームのつぼ」
スライムたちをいろいろな器にひたすら盛っていくゲームです。スライムが画面外に10個落下した時点でゲーム終了となります。 スライムが溜まってくると、PC・スマホ・ブラウザ等のスペックによっては処理落ち（重くなる）が発生する事がありますが、ご了承ください。 最初にスライムを盛る器を選択します。まずスライムが6個降ってきて、ゲーム開始となります。 他のスライムや器に当たらないように、画面の上のほうをクリック（タップ）すると、右下の「つぎ」に表示されているスライムを落とす事ができます。 同じ色のスライム同士はくっつく性質があります。また、キングスライム（大きいサイズのスライム）は、全ての色とひっつきます。 「自由盛り」を選択した場合は最初に器を作ってから盛ります。画面左下の「ここから」の部分をクリックした後に、右へクリックしていくと直線を描くことができます。 直線は何本も連続でつなげる事ができ、「
[JavaScript] canvasに円を描画する（.arc） – コピペで使える JavaScript逆引きリファレンス
canvasに円を描画するには、.beginPath()と.arc()を使用します。 サンプルソース 例）canvasに円を描画する <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル</title> <script> window.onload=function(){ //コンテキストを生成 var cvs = document.getElementById("cvs1"); var ctx = cvs.getContext("2d"); //色を指定 ctx.strokeStyle="blue"; //線の色を青に指定 ctx.fillStyle="red"; //塗りつぶしの色を赤に指定 //円 ctx.beginPath(); ctx.arc(100, 100, 40, 0, Math
キャンバスでの図形の描画 - Web API | MDN
« 前のページ 次のページ » キャンバスの環境をセットアップしましたので、キャンバスに描画する方法の詳細に入ることができます。この記事の終わりまでに、矩形、三角形、直線、円弧、曲線を描く方法を学び、基本的な図形について理解できます。キャンバスにオブジェクトを描く際はパスを扱うことが不可欠ですので、その方法を見ていきます。 描画を始める前に、キャンバスのグリッド、もしくは座標空間について話す必要があります。前のページの HTML スケルトンは、幅 150 ピクセル、高さ 150 ピクセルの canvas 要素を持っていました。 普通、グリッド上の 1 単位はキャンバス上の 1 ピクセルに相当します。このグリッドの原点は、左上の角に (0,0) の座標が配置されています。すべての要素がこの原点から相対的に配置されます。よって青い正方形の左上の場所は左から x ピクセル、上から y ピクセルの
Canvasで円を描く方法
2017/08/03 Canvasで円を描くには、コンテキストのarc()を利用しましょう。 サンプルコード座標(100,100)を中心に、半径50の円を描くサンプルコードです。開始角度と終了角度はラジアン単位で指定しなければいけません。0度は円の中心の右側で、そこから終了角度まで時計回りに描くか、反時計回りに描くかを指定できます。塗りつぶしは開始座標と終了座標を結んだ枠内が対象で、パックマンのようにはなりません。 JavaScript // element = <canvas width="200" height="200"></canvas> var context = element.getContext( "2d" ) ; // パスをリセット context.beginPath () ; // 円の中心座標: (100,100) // 半径: 50 // 開始角度: 0度 (0
HTML5のフォームバリデーションに触れてみた | Casley Deep Innovations株式会社 技術ブログ
はじめまして、技術ブログ初投稿のキャスレーコンサルティングのSD(システム・デザイン)部・瀬戸口です。 フロント技術とデザインが好きなエンジニアです。よろしくお願いします。 今回は、HTML5で新たに実装された機能「フォームバリデーション」について、少し触ってみたのでご紹介します。 長年HTML4に慣れ親しんだ身としては、HTML5でフォームバリデーションができる！と知った時、とても感動しました。 是非実務にも取り入れたいと思ったので、どういった使い方をすると良さそうか、また、何に注意すべきかを検証してみました。 従来のフォームバリデーション 今までのHTML4単体では、バリデーション機能はありませんでした。 したがって、一般的にはHTMLは画面から受け取った文字列を渡すだけで、バリデーションチェックは主にJavaScriptとサーバーサイドの役目でしたね。 具体的な方法として色々あります
HTML Standard — Autofill （日本語訳）
【この訳に特有な表記規約】 この訳の，~algoの記述に利用されている各種記号（ ~LET, ~IF, ~RET, 等々）の意味や定義の詳細は、~SYMBOL_DEF_REFを~~参照されたし。 `input$e 要素が %X `状態にある@ とは、 要素は［ その `type$a 属性の状態 ~EQ %X ］を満たしていることの略記である。 4.10.18.7. ~autofill 4.10.18.7.1. ~form~controlの~autofill法： `autocomplete^a 属性 ~UAは、 利用者が~formを~fillする（埋める）ことを助ける特能を備えることもある — 例えば、 利用者の~addressを以前の利用者~入力に基づいて~prefillする（予め埋めておく）など。 `autocomplete@a 内容~属性は、 そのような特能を［ ~~実際に供するかどう
新年早々スマホコーディングの「html/css」についてもう一度おさらいしてみる。 | GrowGroup
あけましておめでとうございます！ 普段はフロントエンジニア兼webデザイナーとして日々精進している山田、いえ GORILLA-Yこと、ただのゴリラです。 本年もGrowGroup株式会社をどうぞよろしくお願いいたします！ さて今回はスマホコーディングについてもう一度おさらいということで記事を書きました！ 普段web上で色んなサイトを見ていたり、プラグインなどを眺めていると 「そんなのあったの？」なんて指定に気づいたり、「よく見かけるけどあんまわかってない」なんて 状況、よくありますよね。 これは専門書を読んで学んでいくだけだと、その中に無い指定について自分で探求するのをやめてしまうから起こってしまう悲劇だと個人的に思っています。 新しいものを取り入れていくためにも、ここらで「htmlとcssのスマホ対応これだけはやっとけ/これはある程度わかっとけ」を一度まとめておこうと思ったわけですね。ハ
これはすごい! フォーム最適化に役立つグーグル提案のautocomplete新仕様 | 初代編集長ブログ―安田英久
※2012-04-07 セキュリティ面の問題に関して追記しました。 今日は、ウェブページの入力フォームでユーザーが楽にしかも正確に入力できるようにできる（可能性を秘めた）、新しいHTMLの仕様についての情報を。autocomplete属性に関する新しい仕様です。 グーグルは、入力フォームに自動入力する仕組みに関して、新しい仕様を提案しました。HTMLの仕様を拡張することで、ブラウザでフォームに自動入力する仕組みを使いやすくするものです。 これがうまく動作すると、フォーム入力が非常に楽になり、ミスもほぼなくなります。 どれぐらいすごいかというと、ちゃんと設定したブラウザを使うと、フォームで3クリックするだけで、一般的な項目が一気に入力されるのです。 たとえば、この状態から、 名前や住所などの標準的な項目が、一気に自動入力されます。 どうでしょう。こうした機能をサイトに設けられたら、フォームの
HTML5 麻雀『しらぎく麻雀』
『しらぎく麻雀』では、クッキーを使用しております。 【お知らせ(令和元年11月 3日)】『しらぎく麻雀』に、アニメーション視覚効果をオフにする機能を実装しました。 『しらぎく麻雀』が重いと思われた方は、是非視覚効果オフをお試しください。 本コンテンツについて。 HTML5 で実現した麻雀アプリケーション『しらぎく麻雀』の公開サイトです。 携帯電話などの小型端末には、簡略化した『しらぎくモバイル麻雀』があります。 動作環境。 『しらぎく麻雀』は、 HTML5 に対応しているウェブブラウザ JAVA スクリプトを有効にしている環境 でプレイ出来ます。 但し、『しらぎく麻雀』はスマートフォン、特に画面が小さいフィーチャフォン型端末(いわゆる"ガラホ")でのプレイはお勧め出来ません。 また、携帯電話(スマートフォン・フィーチャフォン)の方は、『しらぎくモバイル麻雀』をおすすめします。 特に、フィー
W3Cで現在公開されているHTMLとDOM仕様は将来廃止されます - 水底の血
まえがき W3C（とWHATWG）からの公式なアナウンスはまだ確認していませんが、何度目かに結成されるW3C HTML WorkingのDraft Charterと、このCharterから辿れるDRAFT Memorandum of Understanding Between W3C and WHATWG（Memorandumは日本語で覚書などと訳されるので、ここでも覚書と呼びます）がブログエントリーのタイトルのソースになります。もっとも、今確認できる覚書もドラフトですから、変更があるかもしれません。しかしながらURLで観測できるわけですから、大筋でW3CとWHATWGとの間で合意が取れているのではないかと推測します。あとは、覚書だけでなくCharterもドラフトということになっていますが、以下の文章では面倒なので省略します。最後にお約束ですが、このブログエントリーは「だいたいあってる」感
フォーム回りで使える HTML5 タグ
HTML5で使用できるようになったinputタグの属性などを復習を兼ねてまとめてみました。HTML5になるとJavsScriptを使ったような表現ができるようになったりしています。 入力フォームに関するHTML5はまだIEだと9でも対応していません。その他のモダンブラウザでも対応してないものが多々あります。解釈できないType属性は「type=”text”」と認識されるので、プログレッシブ・エンハンスメントな考えで実装するか、対応していないものはJavaScriptで対応することになります。 こちらの対応表”HTML5 & CSS3 Support, Web Design Tools & Support – FindMeByIP – CSS3 & HTML5 Browser Support”でどのブラウザが対応しているか確認できます。 表示例で使用した画像のブラウザはOp
独自データ属性 - グローバル属性 - HTML5 タグリファレンス - HTML5.JP
3.2.5.9 data-* 属性を使った独自非表示データの組み込み 独自データ属性は、名前空間に属さない属性で、その名前は文字列 "data-" で始まり、ハイフンの後に少なくとも一文字が続きます。これは XML 互換で、ASCII 大文字 を含みません。 HTML ドキュメントの HTML 要素のすべての属性は自動的に小文字に変換されますので、ASCII 大文字に関する制約はこのようなドキュメントには影響を及ぼすことはありません。 独自データ属性は、適切な属性や要素がない場合に、ページやアプリケーションに固有の独自データを格納することを想定したものです。 これらの属性は、この属性を使うサイトと無関係のソフトウェアによる利用を想定していません。 例えば、音楽に関するサイトなら、各トラックの尺を含んだ独自データ属性を使って、アルバムのトラックを表すリスト項目を注記することができるでしょう。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5 花札『しらぎく花札』
将棋シューティング裸王
canvasContext.fillRect throws NS_ERROR_FAILURE exception in Firefox
IBM Developer
Build and implement a single sign-on solution
電脳麻将
