HTML5とHTML 5.1、それらの新機能
2016年11月に2年ぶりのバージョンアップを果たしたHTMLの言語仕様。その目指すところと、HTML 5.1の新機能を幾つか見てみよう。 連載目次 2016年11月1日付けでW3CはHTML 5.1を勧告した。これは2014年10月28日付けで勧告されたHTML5をバージョンアップするものだ。本稿ではその主な追加機能などをざっくりと見ていくことにしよう（なお、本稿ではメジャーバージョンのみを付加する場合には「HTML5」と、マイナーバージョンを含める場合には「HTML 5.1」などと表記する。これはW3Cでの仕様における表記とも合致している）。 そもそもHTML5とは 新機能の話をする前に「HTML5とは」について少し考えておきたい。1つは誰が仕様を策定しているか。もう1つはHTML5の位置付けだ。 仕様を策定するのは誰？ 前者に関していえば、現在、HTMLはWHATWG（Web Hyp
Yeomanのあれこれ - Qiita
はじめに 僕はWebフロントエンドはほぼやってないんだけど、Firefox OSとかもアレだって事でソレ系にも手を出すかとあれこれやってたらまぁWebのフロントエンド周りのツールが何か色々あってよくわかんねーしどうしよっかなと思ってた所Yeoman辺りが大分良さそうなんじゃないか程度にはわかって来たので手を出してみた次第。 Yeomanってなに Webフロントエンドでよくある各種構成をコマンド一発で生成してやろうじゃん、というのがYeomanらしい。Yeomanは内部でyo, bower, gruntの3つのツールにわかれていて、Yeoman自身が作ってるのはyo。bowerはTwitter社が、GruntはBocoup社がメインで作っている。 ワークフローとしてはこうらしい yoでプロジェクトを作成し、bowerで依存性管理をし、gruntでビルド&テストをするという事だそうで。volo
The web's scaffolding tool for modern webapps | Yeoman
Get started and then find a generator for your webapp. Generators are available for Angular, Backbone, React, Polymer and over 5600+ other projects. One-line install using npm: npm install -g yo What's Yeoman?Yeoman helps you to kickstart new projects, prescribing best practices and tools to help you stay productive. To do so, we provide a generator ecosystem. A generator is basically a plugin tha
Android × Canvas の即死ポイントとその回避策 | buccchi.jp
CreateJS を使ったWebアプリをいくつか作ったのですが、iPhone はサクサクでも Android でやたらハマる。 Android 2.3 で最適化したつもりのものが 4.0 の標準ブラウザで落ちたりする。 機種や OS のバージョンにより動作がさまざまなため確認しきれない。 というとこでハマったポイント3つを共有します。 誰かもっとよい解決策を教えてくれるとありがたい。 即死ポイントその1 Android 4.0.4 で Canvas をリサイズするとブラウザが落ちる 回避策 Canvas 領域を広めにとっておき、Canvas ではなく Container 側をリサイズ。 はみでた部分は css でトリミング。 これで落ちなくはなるが全体的にボケる。 2013.7.7 追記 その後、以下の方法を試したところ落ちずに動作すことが確認できました。 描画とかGPUアクセラレーション
HTML 5は「アメリカ人」が標準化させようとしている物ではありません | ykzts.blog
さようならHTML5…。アメリカ人と日本人の標準化に差を感じる 内容に関しても思う所は御座いますが、一つだけ。 HTML 5の仕様を現在 書いていらっしゃるGoogle社のIan Hickson氏はアメリカの方ではなくスイスで生まれた方です。現在どちらに住まれているのかは存じませんが少なくとも「アメリカ人」と表現されるような方ではないかと考えます。 またHTML 5は当初はApple社、Google社、Mozillaが共同で設立させた団体であるWHATWGによって仕様が策定されていましたが、現在ではW3Cに移管されています。W3Cは多国籍な団体 (そもそもイギリスで生まれ方が創設した団体です) であり、日本で生まれた方も多く議論に参加なさっています。そもそもApple社もGoogle社も元より多国籍な会社であり、アメリカで生まれた方 以外も多く所属されているように思います。 そしてその仕様
PCやスマフォでどこでも持ってる音楽を聴けるHTML5ベースの音楽サーバ「streeme」:phpspot開発日誌
streeme - Project Hosting on Google Code PCやスマフォでどこでも持ってる音楽を聴けるHTML5ベースの音楽サーバ「streeme」。 HTML5ベースということでiPhoneやAndroidでも使えるそうです。 サーバ側ではPHPとMySQLサーバが必要。iTunes の XML から読み出しを行えたりもするみたいです。 iPhoneでのアクセスのスクリーンキャストはこちら iPodっぽいUIで音楽を再生できるのが分かります。iPhone上のSafariで動きます デスクトップからのアクセスのスクリーンキャストはこちら ほんとにブラウザベース？というリッチなUIで音楽の再生ができる どこでもブラウザベースで音楽を聴きたい方は試してみるとよいかもしれません。 関連エントリ CSSでクールにデザインされたHTML5動画・音楽プレイヤー実装JS「Medi
HTML5でゲームを作りたい時に参考になりそうな記事のメモ - もとまか日記
先日以下を書いたところ、 HTML5でスマホアプリを作ってみよう。第１回「じゃんけんゲーム」 あまり深く考えず「第１回」ってしちゃってたので(^^;;何かネタを考えないといけないなー・・・・ てことで、HTML5のCanvasを中心に、その他もろもろ、ゲーム作成に関連しそうなことについて色々調べてみたメモ。 HTML5全般について以前、以下でまとめた。前から気になってたHTML5について色々調べてみました この内容もまた整理し直さないと・・・ HTML5 Canvasの基礎HTML5のCanvasに関する基礎情報。Canvas - Canvasとは - HTML5.JP HTML5 CanvasのリファレンスCanvasリファレンス - HTML5.JPHTML5 Canvas Cheat Sheet 様々なゲームの作り方AppStoreのカテゴリ別だけど、JavaScriptが多いので参
アドビ、オープンソースのHTMLエディタ「Brackets」を公開。まだまだ開発中
アドビがオープンソースとして公開している「Brackets」は、HTML5とJavaScriptで作られたHTMLエディタです。アドビ自身はBracketsについてブログやプレスリリースでのアナウンスは何もしておらず、Github上にAdobeのコードとしてひっそりと公開されています。 アドビには統合的なWeb開発環境として確固たる地位を持つDreamweaverがありますが、Bracketsの画面を見るかぎり、目指すものはDreamweaverを置き換えるようなものではなく、もっと直感的で軽くシンプルなHTML/CSS/JavaScriptエディタを実現しようとしているように見えます。 Bracketsはまだ開発が始まったばかりで、それほど多くの機能が実装されているわけではありません（実際に起動してみましたが、短時間では使い方もよく分かりませんでしたし……）。今後もう少し機能が追加されて
『video要素』超基本を知る!! | HTML5でサイトをつくろう
video要素について 今回はHTML5新要素の中でも注目度が高い｢video要素｣の基本的な記述方法をご紹介します。 video要素はFlashなどのプラグインを使用することなく動画をウェブ・ページに表示することができます。ですが、IEが8まで対応していないことなどから動画コンテンツはまだまだFlashを使ったものが多いように感じます。今後ブラウザの対応が進めば、video要素を使った面白い動画コンテンツがドンドン出てくると思いますので、その時にコンテンツ制作に関わったりアイデアを出せるように今から少しずつ学んでいこうと思います。 video要素の再生とブラウザ表示 video要素をただ再生するにはsrc属性に再生する動画ファイルを指定するだけです。試しにsrc属性にMP4形式のファイルを指定しブラウザでの表示確認をしてみます。また、controls属性を指定することで再生・停止ボタンな
JavaScriptでファイル操作！？ File APIを使いこなそう
連載目次 近年のWebアプリケーションでは、画像ファイルやテキスト・ファイル、Officeファイルのアップロードやダウンロードのやり取りが行われることが多くなってきている（例えば、Twitter上での画像ファイル共有やGoogleドキュメントでのOfficeファイルのアップロードなどがそれだ）。 HTML5では、ファイル操作に関するAPIとして「File API」が定義されたことで、ローカルのファイルをブラウザ上で直接、取り扱うことが可能となった。これによって、Webとローカルの違いをアプリケーションで意識しなければならない局面も少なくなる。 現在、File APIは以下の3種類の仕様が策定されている。
HTML5のmenu要素にも対応した、独自の右クリックメニューを実装するjQueryプラグイン・jQuery contextMenu
HTML5のmenu要素もサポートしている オリジナルのコンテキストメニュー を実装するjQueryプラグインです。 普通のサイトじゃ使わないでしょう けど、最近ではHTML5製のリッチコン テンツ等利用するシーンもあるかも なのでメモがてら。 基本的に通常のWebサイトでコンテキストメニューを変えてしまうのはユーザビリティを大きく損ないますが、HTML5によるペイントツールやゲームなど幅広いコンテンツの実装が可能になってきましたのでこういったライブラリも用途が出来始めた気がします。 右クリックメニューを独自のものに変えます。それだけならちょっとアレなんですが、このプラグインは左クリックメニューにも出来るので一応覚えておいてもいいんじゃないかなと。他にもmenu要素にも対応してたり、アイコンを付けたりなどいろいろ応用が利くみたい。 右クリックでフォームが出る・・なんてのも作れる。実際あった
rails3 + html5 canvasでお絵かき投稿サイトを作ろう！
はじめましてこんにちは。 KRAYアルバイトの浅海です。 html5のcanvasを使ってお絵かき投稿サイトを作ってみようと思います。 初めてブログ記事を書くということで気合が入りました。 ちょっと長めですがお付き合い下さい。 機能 お絵かき投稿サイトの必要最低限な機能って？ ざっと下のような機能を入れてみます。 絵を描ける 絵を消せる 描画を一回分戻れる 線の太さを変えられる 線の色を変える 絵を投稿できる 投稿された画像の一覧を表示できる → 完成見本はこちら完成見本の公開は終了致しました。 絵を描ける HTML5のcanvasにマウスの軌道に線を引いていくわけです。 canvasでのマウス軌道の描き方は、 ・mousemoveイベント発生時に点をプロット という手段が真っ先に思い浮かぶと思いますが、これは、以下の様になります。 これではお話になりません。 なので、点ではなく線を引くこ
HTML5 のオフライン機能 - 強火で進め
Google Developer Day 2011に参加しました。 参加したセッションのメモを書いときます。 (追記 2012/01/14) Googleから動画が公開されました。 http://www.youtube.com/watch?v=MY06xnSZyaw:moive ※このセッションで解説された内容に一部変更点があるとのことなので、こちらも合わせて参照下さい。 (追記ここまで) HTML5 のオフライン機能(Eiji Kitamura) @agektmr 東京 - Google Developer Day 2011 http://www.google.com/intl/ja/events/developerday/2011/tokyo/agenda/session_1001.html スライド 動的なデータの保存 Web Storage (localStorage / sess
ふつうのユーザが知らないHTML5コーディングツール10選 - YAMAGUCHI::weblog
はじめに こんにちは、Python界の情弱です。今日はChrome+HTML5 Conferenceのお手伝いに来てます。いままで全く触れてこなかった世界ですが、結構HTML5はXMLのようにセマンティクスに重点を置いてるんですね。CSS3も動的なエフェクトを簡単にかけられるようになってるし、とてもいいですね。 さて、YouTube Live Streamのお手伝いしながらRSS見てたら、ちょうど今日のテーマに沿ったエントリがdiggで紹介されてたので、翻訳しました。 10 Excellent HTML5 coding Tools Many Users Don’t Know About 10 Excellent HTML5 coding Tools Many Users Don’t Know About （オリジナル） HTML5はウェブサイトの作成方法を根本から変えることになるでしょう。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Apache Cordova
ゲーム感覚でレイアウトを組み立てる、HTML5+CSS3に対応したレイアウトジェネレーター -PageBlox
re-dzine.net situs togel online toto 2023 -
IDEA * IDEA
HTML5 Coding assessment test - jsdo.it - Share JavaScript, HTML5 and CSS
GRADIUS