フロントエンド連載の5記事目です。 HTML5が2021年の1月に廃止されました。 Webエンジニアとしてバリバリ活躍されてる方やエグゼクティブテックリードのような肩書きを持つ方にとっては「何をいまさら」という話題かと思います。 しかしながら、今年も新人さん入ってきてくださったので、プログラミングを学習中にHTML5という文字列に悩まされないように、そもそもHTML5とは何かや、廃止された経緯をまとめてみます。 HTML5とはWebサイトを作るときに必ず書くことになるHTML。Webサイトのコンテンツ、つまり中身や構造を作るために使うマークアップ言語です。 そして、その最近版として10年ほど前に登場したHTML5。当時は Webニュースなどで盛んに特集が組まれていましたが、このHTML5がついこないだ、2021年1月28日に廃止されました。 広義のHTML5 / 狭義のHTML5HTML5
2019年4月3日、『神姫PROJECT』などソーシャルゲームの企画・開発を手がける株式会社テクロスが主催するイベント「TECH x GAME COLLEGE」が開催されました。第17回となる今回のテーマは「スマホ向け HTML5ゲームのすべて」。株式会社 Liberapp代表取締役の山田元康氏が、最新のHTML5ゲーム事情を解説します。後半パートとなる今回は、スマホ向けHTML5ゲーム市場の今と、現在の技術の潮流を解説します。 HTML5ゲームのプラットフォーム山田元康氏（以下、山田）：ここまでが市場全体の話です。それでは、スマホ向けのHTML5市場にはどんなプレイヤーがいるのかというと、一番上に書いてあるのがプラットフォームです。プラットフォームを大きく3つに分けています。 一番左に書いたのがオンチャットと呼ばれているものです。HTML5ゲームの市場が成り立ってるのは、基本的にオンチャ
スライムたちをいろいろな器にひたすら盛っていくゲームです。スライムが画面外に10個落下した時点でゲーム終了となります。 スライムが溜まってくると、PC・スマホ・ブラウザ等のスペックによっては処理落ち（重くなる）が発生する事がありますが、ご了承ください。 最初にスライムを盛る器を選択します。まずスライムが6個降ってきて、ゲーム開始となります。 他のスライムや器に当たらないように、画面の上のほうをクリック（タップ）すると、右下の「つぎ」に表示されているスライムを落とす事ができます。 同じ色のスライム同士はくっつく性質があります。また、キングスライム（大きいサイズのスライム）は、全ての色とひっつきます。 「自由盛り」を選択した場合は最初に器を作ってから盛ります。画面左下の「ここから」の部分をクリックした後に、右へクリックしていくと直線を描くことができます。 直線は何本も連続でつなげる事ができ、「
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
前のページ 次のページ キャンバスの環境をセットアップしましたので、キャンバスに描画する方法の詳細に入ることができます。この記事の終わりまでに、長方形、三角形、直線、円弧、曲線を描く方法を学び、基本的な図形について理解できます。キャンバスにオブジェクトを描く際はパスを扱うことが不可欠ですので、その方法を見ていきます。 描画を始める前に、キャンバスのグリッド、もしくは座標空間について話す必要があります。前のページの HTML スケルトンは、幅 150 ピクセル、高さ 150 ピクセルの canvas 要素を持っていました。 普通、グリッド上の 1 単位はキャンバス上の 1 ピクセルに相当します。このグリッドの原点は、左上の角に (0,0) の座標が配置されています。すべての要素がこの原点から相対的に配置されます。よって青い正方形の左上の場所は左から x ピクセル、上から y ピクセルの、 (
はじめまして、技術ブログ初投稿のキャスレーコンサルティングのSD(システム・デザイン)部・瀬戸口です。 フロント技術とデザインが好きなエンジニアです。よろしくお願いします。 今回は、HTML5で新たに実装された機能「フォームバリデーション」について、少し触ってみたのでご紹介します。 長年HTML4に慣れ親しんだ身としては、HTML5でフォームバリデーションができる！と知った時、とても感動しました。 是非実務にも取り入れたいと思ったので、どういった使い方をすると良さそうか、また、何に注意すべきかを検証してみました。 従来のフォームバリデーション 今までのHTML4単体では、バリデーション機能はありませんでした。 したがって、一般的にはHTMLは画面から受け取った文字列を渡すだけで、バリデーションチェックは主にJavaScriptとサーバーサイドの役目でしたね。 具体的な方法として色々あります
【この訳に特有な表記規約】 ◎表記記号 `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 内容~属性は、 そのような特能を［ ~~実際に供するかどうか／どう供するか ］について，~UA向けに~hintを与えるために利用できる。 ◎ User agents sometimes have features fo
あけましておめでとうございます！ 普段はフロントエンジニア兼webデザイナーとして日々精進している山田、いえ GORILLA-Yこと、ただのゴリラです。 本年もGrowGroup株式会社をどうぞよろしくお願いいたします！ さて今回はスマホコーディングについてもう一度おさらいということで記事を書きました！ 普段web上で色んなサイトを見ていたり、プラグインなどを眺めていると 「そんなのあったの？」なんて指定に気づいたり、「よく見かけるけどあんまわかってない」なんて 状況、よくありますよね。 これは専門書を読んで学んでいくだけだと、その中に無い指定について自分で探求するのをやめてしまうから起こってしまう悲劇だと個人的に思っています。 新しいものを取り入れていくためにも、ここらで「htmlとcssのスマホ対応これだけはやっとけ/これはある程度わかっとけ」を一度まとめておこうと思ったわけですね。ハ
※2012-04-07 セキュリティ面の問題に関して追記しました。 今日は、ウェブページの入力フォームでユーザーが楽にしかも正確に入力できるようにできる（可能性を秘めた）、新しいHTMLの仕様についての情報を。autocomplete属性に関する新しい仕様です。 グーグルは、入力フォームに自動入力する仕組みに関して、新しい仕様を提案しました。HTMLの仕様を拡張することで、ブラウザでフォームに自動入力する仕組みを使いやすくするものです。 これがうまく動作すると、フォーム入力が非常に楽になり、ミスもほぼなくなります。 どれぐらいすごいかというと、ちゃんと設定したブラウザを使うと、フォームで3クリックするだけで、一般的な項目が一気に入力されるのです。 たとえば、この状態から、 名前や住所などの標準的な項目が、一気に自動入力されます。 どうでしょう。こうした機能をサイトに設けられたら、フォームの
『しらぎく麻雀』では、クッキーを使用しております。 【お知らせ(令和元年11月 3日)】『しらぎく麻雀』に、アニメーション視覚効果をオフにする機能を実装しました。 『しらぎく麻雀』が重いと思われた方は、是非視覚効果オフをお試しください。 本コンテンツについて。 HTML5 で実現した麻雀アプリケーション『しらぎく麻雀』の公開サイトです。 携帯電話などの小型端末には、簡略化した『しらぎくモバイル麻雀』があります。 動作環境。 『しらぎく麻雀』は、 HTML5 に対応しているウェブブラウザ JAVA スクリプトを有効にしている環境 でプレイ出来ます。 但し、『しらぎく麻雀』はスマートフォン、特に画面が小さいフィーチャフォン型端末(いわゆる"ガラホ")でのプレイはお勧め出来ません。 また、携帯電話(スマートフォン・フィーチャフォン)の方は、『しらぎくモバイル麻雀』をおすすめします。 特に、フィー
まえがき W3C（とWHATWG）からの公式なアナウンスはまだ確認していませんが、何度目かに結成されるW3C HTML WorkingのDraft Charterと、このCharterから辿れるDRAFT Memorandum of Understanding Between W3C and WHATWG（Memorandumは日本語で覚書などと訳されるので、ここでも覚書と呼びます）がブログエントリーのタイトルのソースになります。もっとも、今確認できる覚書もドラフトですから、変更があるかもしれません。しかしながらURLで観測できるわけですから、大筋でW3CとWHATWGとの間で合意が取れているのではないかと推測します。あとは、覚書だけでなくCharterもドラフトということになっていますが、以下の文章では面倒なので省略します。最後にお約束ですが、このブログエントリーは「だいたいあってる」感
HTML5で使用できるようになったinputタグの属性などを復習を兼ねてまとめてみました。HTML5になるとJavsScriptを使ったような表現ができるようになったりしています。 入力フォームに関するHTML5はまだIEだと9でも対応していません。その他のモダンブラウザでも対応してないものが多々あります。解釈できないType属性は「type=”text”」と認識されるので、プログレッシブ・エンハンスメントな考えで実装するか、対応していないものはJavaScriptで対応することになります。 こちらの対応表”HTML5 & CSS3 Support, Web Design Tools & Support – FindMeByIP – CSS3 & HTML5 Browser Support”でどのブラウザが対応しているか確認できます。 表示例で使用した画像のブラウザはOp
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
