@kazumich さんにお声がけいただき、WCAN 2015 Winter でおよそ 60 分ほどのセッションを登壇してきました。32:9 のスクリーンがあるという、TED でもやるんかオイという特殊な環境でした。普段はプロジェクター的な投影なので、スクリーンの前に立つのが微妙なんですが、ここはディスプレイが壁面に大量に並んでいて自ら発光するので、部屋を暗くしなくてもテレビのように十分に見えますし前に立っても平気です。 一緒に登壇したのが @yhassy さんと @Hidehisa さんということもあり、近年まれに見る胃痛を伴う緊張を味わいながらお話させていだきました。（リアルにセッション終了後、1時間くらい胃痛がズキズキしてました） 技術的なお話でした 参加されたみなさま、メインセッションや LT に登壇された各位、ならびに運営されたスタッフの方々、ひとまずお疲れさまでございました。貴

画像表示のマルチデバイス対応をHTMLとCSSのみで実現できる「レスポンシブ・イメージ」ですが、効果的な使い方をするには、いくつか注意点があります。プロダクション・サイトで使えるようになるまでにはもう少し時間がかかりそうですが、基礎と注意点くらいは今から覚えておいても良さそうです。 Cloud Fourというアメリカの制作会社のブログ で、<picture>要素の使い方について注意を促していて、とても重要な情報だと思ったのでこちらでもシェアします。先日書いたレスポンシブ・イメージとPicturefill 2のまとめとあわせて、近い将来、レスポンシブ・イメージ実装の参考になれば幸いです。 まずは推奨の記述方法から レスポンシブ・イメージ実装の際に推奨されるHTMLの記述方法は以下のとおりです： とりあえず、これだけ覚えておけば、細かいところはこの記事をはてブ しておいて、使う時にもう一度見な

このイベントは、「来るべき近未来のために業界の認識をアップデートすべく」（イベントページより）企画されたとのこと。近未来ってどういうことか、ちょっと気になります。 また、先日の木達一仁さんに行ったインタビューでも、「『アクセシビリティが当たり前の社会』というビジョンを実現するために、HTML5 Experts.jpとしても、お手伝いできることは何でもします！」と言った約束も守らねばなりません。 ということで、タイトルからしてちょっと楽しそうなこのイベント、無理を言って取材させてもらっちゃいました。今回はそのレポート記事になります。 「アクセシビリティ＝高齢者・障害者対応」は大間違い！ 最初のセッションはヤフーでマークアップエンジニア/フロントエンジニアを担当していらっしゃる（最近では「アクセシビリティエンジニア」と名乗っているそうです）福本翔さんによる「やはりお前らのWebアクセシビリテ

Web制作時に、あれ？なんだっけな？って時に役立つ便利サイトを紹介します。 HTML5やCSS3の各ブラウザのバージョンごとのサポート状況、スクリーンサイズやデバイスごとのMedia Queriesの書き方、Bootstrap, Foundationなど各フレームワークの対応ブラウザやライセンス、ブラウザの各バージョンごとのCSS Hackなど、いざという時に役立つサイトばかりです。 Can I Use...Support tables for HTML5, CSS3 Can I Useは先月くらいにUIを刷新し、より使いやすくなりました。デスクトップ・モバイル用の各ブラウザでのバージョンごとのHTML5, CSS3のサポート状況がそれぞれ詳しく分かります。

(訳注：2015/8/4、いただいた翻訳フィードバックを元に記事を修正いたしました。) 本題に入る前に強調しておきます。WebSocketは優れた通信プロトコルです。実際私はこの RFC6455 を、 Fanout のサービスで使っている( Zurl や Pushpin といったパーツで採用しています。Fanoutではまた、 Primus （異なるリアルタイムフレームワーク間での通信を可能とするラッパー）を利用し、 XMPP-FTWインターフェース を介したWebSocket通信をサポートしています。 しかしながら私はこれまで、多くの広く普及しているアプリケーションにかなりの時間を費やし、おかげでRESTやメッセージングパターンについては多少なりとも理解が深まってきた今、実はWebSocketを実装した典型的なWebアプリケーション（もしくはWebSocketライクな抽象化レイヤ）の大部分

HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第二版

SkyWayはビデオ・音声通話が簡単に実装できる、マルチプラットフォームなSDKです。

HTML5でネイティブアプリを作ろう！「Windowsストアアプリ」開発入門 物江 修（日本マイクロソフト株式会社 Webエバン...） これまでのHTMLはオンライン上のドキュメントを記述する目的に設計され、発展してきましたが、HTML5ではそれに加え、アプリケーションのプラットフォームとしての仕様も盛り込まれています。 HTML5のマークアップや API、CSS3、SVGなどの関連技術を使用すれば、Webブラウザの独自の拡張機能に頼らずとも、Web標準から外れることなく、高機能なWebアプリケーションを開発することができるようになりました。また、HTML5とその関連技術が提供するさまざまな標準化された仕様は、Webブラウザ内で動作するコンテンツにとどまらず、クロスプラットフォーム開発が必要とされるネイティブアプリの開発でも使用されるようになっています。 こういったクロスプラットフォーム

HTML5 勧告候補が 2月 4日付けで更新されました。勧告候補としての更新は今回で 2回目 （去年の 8月 6日付けで更新されています） ですが、今回は新たに template 要素などが追加されたようです。 Five Documents Published by the HTML Working Group ： W3C News HTML5 - W3C Candidate Recommendation 04 February 2014 template 要素とは？ template 要素は HTML5 extension （HTML5 拡張仕様） として策定されていた要素で、所謂 Web Components 仕様の 1つ。 JavaScript によって文書に挿入する HTML の断片 （パーツ） をテンプレートとして定義します。この要素でマークアップされた部分は通常状態ではレンダリ

作成：2014/01/27 更新：2015/08/07 Web制作 > 前回、Web制作の一連の流れを書きましたが、今回は少し掘り下げて「コーディング」についてのフローをまとめます(HTML5+レスポンシブ+WordPress)。会社によって違うと思いますが、ざっくりとしたコーディングの流れと気をつけておきたいことをメモしています。 エンジニア速報は Twitter の@commteで配信しています。 もくじ コーディング前の準備 １．仕様書の確認 ２．入稿データの確認・スケジューリング HTML5 マークアップ ３．テンプレート作成 ４．条件付きコメント ５．GCF＋キャッシュクリア ６．OGP記述 ７．ファビコン ８．アウトライン作成 ９．バリデーターをチェック CSS の設定 １０．ノーマライズスタイル レスポンシブデザイン設計 １１．モバイルファーストを基準に設計 １２．プログレッ

jeffcroft.com 2014.1.3のブログエントリ 2014.2.13追記。結び（diversify or die）を誤解してた Web Standards Killed the HTML Star – JeffCroft.com 「html/cssが得意なだけでは飯が食えない」という周知の事実について 「名人」としての活動歴（書籍、登壇）のある人が現状について書いたエントリ 「あの名人はいま」風で面白く読んだ 以下斜め読んだ内容 2003年にJeffrey Zeldman「Designing With Web Standards」を出版した頃の話 html/cssかくあるべし、と議論されてた レイアウトはtable要素でなくcssで 画像置換のテクニック。これはアクセシビリティを守るため semanticなマークアップ -　などなど カンファレンスも何度もあった。本を書いた人も

HTML5の概要や目的について説明しています。セクション関連要素についても紹介しています。 2009年のCSS Nite vol. 40で話したときのスライドです。Read less

WebページをRetina対応させるテクニック～基礎知識編：jQuery×HTML5×CSS3を真面目に勉強（4）（1/2 ページ） iPhoneのRetinaディスプレイは、Webページの制作フローにも大きな変化をもたらした。WebページをRetina対応させるにはどうすればいいのだろうか。 はじめに 2010年6月に登場したアップルのiPhone 4には「Retinaディスプレイ」と呼ばれる、それまでの常識を覆した高精細なディスプレイが搭載されました。それ以降、スマートフォンやタブレットといったモバイル端末のディスプレイはより解像度の高いものへと進化していき、2013年の初めにはサムスン電子のGALAXY S4やソニーモバイルのXperia Zなど、フルHD画質対応（1920×1080ピクセル）のディスプレイを搭載したスマートフォンが登場するまでになりました。 高精細ディスプレイの登場

ストラクチャファーストとしてのHTML5、ビジュアライゼーションに有効なHTML5と関連技術／ライブラリ8選、WebRTCの概要や3つのライブラリなど。 2013年4月23日、InfoQJapan主催のカンファレンス「QCon Tokyo 2013」が開催された。本稿では、その中からモバイル／HTMLカテゴリの3つのセッションの模様をダイジェストで紹介する。 HTML5と情報表現の最適化 WebRTCで変わるWebの未来 HTML5でできる多彩なビジュアライゼーション モバイル／HTMLカテゴリ以外のセッションについては、以下を参照してほしい。 fluentd、Hubot、DDD、Fab、JSLintに見る最先端の開発手法～QCon Tokyo 2013まとめレポート HTML5と情報表現の最適化 QCon Tokyo 2013の「HTML／モバイル」カテゴリ最初のセッションは、Webディ

HTML5 のマークアップで心掛けたい事を挙げてみます。 平成25年 5月16日現在、HTML5 勧告に向けて、グラフィカルなウェブブラウザの開発者は HTML5 への対応を急速に進めておりますが、そうでない環境、例えば音声出力ブラウザや CUI 環境向けテキストブラウザなどについては、殆どと言って良い程話を聞きません。 こう言った事から、HTML4/XHTML1 時代の環境でも問題なく取り扱えるようにマークアップすべきでしょう。 はじめに。 平成24年12月17日に HTML5 の勧告候補が発表され、HTML5 は勧告に向けて大きく前進しております。 特にグラフィカルなウェブブラウザの開発者は、WAHTWG に加盟していないマイクロソフト社を含めて HTML5 への対応を急速に勧めており、西暦2014年に勧告される頃には、殆どのグラフィカルなウェブブラウザが HTML5 対応になっている

HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう HTML5で複雑なアニメーションを実現する方法にはいつか方法がありますが、それぞれの手法について容量とパフォーマンスのメリット・デメリットを検証してみたいと思います。 スプライトシートを使う方法 ベクターアニメーションを使う方法 スプライトシートビルダーを使う方法 おまけ：GIFアニメーションを使う方法 おまけ：Flashアニメーションを使う方法 スプライトシートを使う スプライトシートとは映画のコマのようにアニメーションの全コマを画像として用意しておいて、順番に高速に切り替えることでアニメーションを実現する方法です。enchant.jsやCreateJSなど多くのJavaScriptのフレームワークで採用されており、もっともスタンダードな方法です。 表現の再現性が高いう

基本的にグラデーションや角丸はジェネレータからコピペして設定できるので、作業自体は簡単です。HTML5＋CSS3サンプルを使って表現してみましょう。 （1）装飾のキモは「グラデーション・線・角丸・影・テクスチャー」 前回HTML5＋CSS3の「レイアウトを自在に使いこなす」では、限られたいくつかのCSSプロパティを組み合わせて、さまざまなレイアウトができることをお見せしましたが、今回はそれに装飾を加えていきます。 いざ装飾しようとすると、どこから手を付ければ良いのか迷ってしまうかもしれませんが、アイコンなどの絵を除けば、装飾の要素は「グラデーション」「線」「角丸」「影」「テクスチャー」くらいなものです。それらを整理して組み合わせることで、全体として一体感のあるデザインに仕上げられます。 「それが難しいんだよ！」というお叱りの声が聞こえてきそうですが（笑）、以下の2つを見比べてみましょう。上