HTML5 Conference 2015 講演資料まとめ #html5j1月25日に開催された「HTML5 Conference 2015」の中継動画や講演資料をまとめました。 ※リンクミスや追加情報などありましたら、コメントまたは@unsoluble_sugarあてにお知らせいただけるとありがたいです オープニングセッション（10:00-10:50） 基調講演
Top Pens of 2014 on CodePen
{"__browser":{"country":"JP","device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer *; ambient-light-sensor *; camera *; display-capture *; encrypted-media *; geolocation *; gyroscope *; microphone *; mid
WebRTCでキャスしよう！片方向リアルタイム映像配信を作ろう
こんにちは！がねこまさしです。「WebRTCを使ってみよう」シリーズの最新話をお送りします。今回は、簡易的な放送局を作ってみましょう。 片方向配信の特徴 WebRTCを使った音声通話、ビデオチャットのサンプルには、双方向のものが多く見られます。ライブラリもそれを前提とした作りのモノが多いようです。なので今回は、片方向配信を実際に動かしてみましょう。 片方向配信には、双方向通信とは異なる特徴があります。 視聴側はカメラやマイクといった機器が不要なので、参加のハードルが下がる Peer-to-Peerでもフルメッシュ構造にはならないので、より多くの人が同時に利用できる 特に同時接続数はは双方向では4～5人が実用範囲なのに対し、片方向では10～30人程度に対して1つのPCから配信できます。ちょっとした仲間内のイベントや、社内イベントであれば、十分にカバーできるのではないでしょうか？（社内で動かせ
恐怖のHTML5 ApplicationCache Poisoning
自己紹介 (SelfIntroduction) @kyo_ago ApplicationCache Poisoning歴1年3ヶ月の新米です。 (ApplicationCache Poisoning NEWBIE.)
第51回html5とか勉強会行った #html5j - pirosikick's diary
第51回 HTML5とか勉強会 - connpass パフォーマンスに関するWeb標準についてとか、Web Animation APIとかは知らなかったのでちゃんと追わないと。。。 Chrome Dev Toolsの使い方とか、やらねばやらねばと思いつつも、FluxとかRact.jsとか、 ものを作るために必要な技術の勉強を優先してしまっているので、 会社で勉強会開くとか無理やりでも時間作らないとなーと思いました。 以下、メモ ブラウザのパフォーマンスを限界まで高める、HTMLコーディングの考え方 ブラウザのパフォーマンスを限界まで高める HTMLコーディングの考え方 from Hiroshi Kawada ブラウザのパフォーマンスを限界まで高める HTMLコーディングの考え方 川田寛さん NTTコムウェア株式会社 @kawada_hiroshi HTML5expoerts.jpとかに書い
WebRTCにおけるNAT越えの課題へのアプローチ - 鈴木うどんの横須賀おもしろ生活
WebRTCにおけるNAT越えの課題へのアプローチ - Qiita に移転しました。
<script async>でJavaScriptの非同期読み込みを - fragmentary
JavaScriptファイルをスクリプトから非同期で読み込むパターンは古い、という話を目にしたのはもう半年前のこと。 言ったのはIlya Grigorik。月末のGoogle Japanでのイベント、月初のHTTP2ConferenceにくるWebパフォーマンス界のすごいひとですよ。 Script-injected "async scripts" considered harmful - igvita.com 件のパターンは、スクリプトで動的に script を生成して、そこに読み込みたいJavaScriptファイルをぶっこんで読み込むというもの。 <script> var script = document.createElement('script'); script.src = "//somehost.com/awesome-widget.js"; document.getEleme
SVGクリッピングマスクにチャレンジ！静止画像も動画も、SVGで切り抜こう！
SVGクリッピングマスクにチャレンジ！静止画像も動画も、SVGで切り抜こう！Webクリエイターボックスでちょこちょこ取り上げてきたSVG。今回は第四弾！SVGを使ったクリッピングマスクを紹介します。今までは画像に透過PNGを重ねてマスクを表現できましたが、高解像度ディスプレイに対応させたり、マスク自体に効果をつけるならSVGが便利かなーと思います。サムネイル画像にフレームをつけたり、デザインのアクセントとして使えるので、ぜひマスターしてくださいね！ SVG のクリッピングマスク基礎1. 画像を用意それではさっそく試してみましょう！まずは切り抜かれる画像を用意し、img タグで表示します。この時画像に mask というクラスを与えておきます。 <img class="mask" src="images/rose.jpg" alt="Rose" /> 2. マスクの型を用意Illustrato
Construct 2 the HTML5 Game Maker - Scirra.com
Construct 3 Create stunning games in the worlds best 2D game engine
Chromecastで動くHTML5ベースのメディアストリーミングアプリを作るための基礎知識
意外と知られていないことですが、Chromecast対応アプリは、iPhoneアプリやAndroidアプリ同様に誰でも開発することができ、今多くの開発者から注目されていて、今後もその数が増えることが予想されます。 Web＆モバイル技術のSIを手掛けるオープンストリームでは、Chromecastデバイスの国内発売前からスマートフォンアプリ（iOS版およびAndroid版）の対応について技術検証を行い、詳細な技術ノウハウを獲得してきました。本連載では、その時に得た技術を基にChromecastアプリのシステム構成、開発環境、開発準備、メディアストリーミングアプリの開発方法について注意点を含めて解説していきます。Chromecast対応アプリを開発する参考にしてください。 初回は、Chromecastの概要とサンプルアプリを動作確認できるまでの開発手順を解説します。 Chromecastアプリの
HTML5 Cross Browser Polyfills
The No-Nonsense Guide to HTML5 Fallbacks So here we're collecting all the shims, fallbacks, and polyfills in order to implant HTML5 functionality in browsers that don't natively support them. The general idea is that: We, as developers, should be able to develop with the HTML5 APIs, and scripts can create the methods and objects that should exist. Developing in this future-proof way means as users
Building Interactive HTML5 Videos – Mozilla Hacks - the Web developer blog
The HTML5 <video> element makes embedding videos into your site as easy as embedding images. And since all major browsers support <video> since 2011, it’s also the most reliable way to get your moving pictures seen by people. A more recent addition to the HTML5 family is the <track> element. It’s a sub-element of <video>, intended to make the video timeline more accessible. Its main use case is ad
WebRTCの技術解説 公開版
13. Over The Top 手段の例 市場 ユーザ メリット 事業者 メリット 利用方法 Skype, WebEx (YouTube, Ustream) キャリアに縛られない独自の仕組みを 提供する少数のベンダーが参加可能 世界中の人と無料/安価で会話できる 限定的なAPI提供 一部連携可能 ユーザが組み合わせて利用 http://www.slideshare.net/mganeko/2013-web-rtctechcross/6 より改変して引用 15. キャリア型通信 Over The Top Webブラウザ型 手段の例 市場 ユーザ メリット 事業者 メリット 利用方法 固定電話 携帯電話 (TV放送) Skype, WebEx (Youtube, Ustream) WebRTC インフラを持つ キャリアが支配 キャリアに縛られない 独自の仕組みを提供 する少数のベンダー が参
WebRTCの最新動向が満載！WebRTC Update（Google I/O 2014番外編）
WebRTCの最新動向が満載！WebRTC Update（Google I/O 2014番外編） がねこまさし（インフォコム株式会社） Google I/Oの後で Google I/Oの後に、技術者が集結したサンフランシスコで様々なイベントが開催されたようです。WebRTC関連として、Kranky Geek WebRTC Event というものがあり、そこでGoogleからWebRTC Updateと題した発表がありました。今回はその50分のセッション映像から、ハイライトをご紹介します。 掴みはcardboard 最初の掴みは、DataChannelで制御できるローバー（自走車）です。キーノートで配布されたcardboardに装着したAndroidでローバーの首を振ってカメラの向きを制御できます。カメラの映像は当然WebRTCで伝達され、cardborad越しに見ることができます。(3分4
ハイブリッドアプリの動作性能を飛躍的にアップさせるiOS 8の新ブラウザエンジンを検証する
新ブラウザエンジン「WKWebView」 iOS 8では、これまで用いられていたブラウザエンジンであるUIWebViewに加え、「WKWebView」という新しいエンジンが追加されました。WKWebViewはその実行速度、安定性、そして機能面でも、UIWebViewを大幅に向上しています。要するに、WKWebViewを用いるだけで、アプリの実行速度が大幅にアップするのです。 しかし、WKWebViewもUIWebViewも、ベースは同じWebKitエンジンです。また、PhoneGapやCordovaといったハイブリッドアプリ、iOS版Chromeなどのブラウザアプリには、例外なくUIWebViewが使われています。WKWebViewとUIWebViewがどう違うのでしょうか？ 筆者はこの疑問について、iOS 7のUIWebView、iOS 8のUIWebViewとWKWebViewを比較対
Webrtc最新動向
5. 目次 • 最新情報を収集するには？ • W3Cでの標準化動向 • 気になるトピックス – Chrome M34,M35リリース – iOS対応 – H.264対応 – ObejctRTCについて • カンファレンスなどの予定 – WebRTC Conference Atlanta 6. 最新情報を収集するには？ • 公開Google Group – discuss-webrtc • https://groups.google.com/forum/#!forum/discuss-webrtc • 最新情報をキャッチアップできる • 情報量が多い • すごく初歩的な話題からかなり高度な話題まで様々 • ウォッチするのは結構疲れます・・・ • Chromeに関係する情報が多い • iOS向けのWebRTCスタックについても結構議論されている – mozilla.dev.media • ht
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - hail2u/html-best-practices: For writing maintainable and scalable HTML documents
How to create high-performance CSS animations | Articles | web.dev
js13kGames
Blog - LINE ENGINEERING