お疲れさまXMLHttpRequest、こんにちはfetch - Qiita
Service Workersでプッシュ通知を受信できるようになったわけですが([1]: GCM)([2]: Web Push)、Chromeではバージョン48まではGCMで通知だけができるようになっただけで、メッセージ本体は通知を受けてからService Workerでサーバから改めて受け取るような実装をする必要があったりします。 ここで、Service Workersでは、XMLHttpRequestが使えません。その代わり、XMLHttpRequest (以下、XHR)に代わるWHATWGの仕様としてFetch APIがあり、Service WorkersではこのFetch APIを使うことになっていますので、その使い方を簡単に紹介します。 Fetch API自体は、Service Workers専用のものではなく、メインスレッドでもXHRの代わりに使うことが可能です。現時点で実装し
HTML5/Javascriptの画像処理ライブラリまとめ
HTML5(Canvus)、Javascript向けの画像処理ライブラリについてまとめたので紹介します。 続きを読む
WebRTCセキュリティレポート · A Study of WebRTC Security
WebRTCセキュリティレポート あらまし WebRTC(Web Real-Time Communication)は、Webアプリケーション技術の昨今のトレンドの一つだ。WebRTCを利用すると、プラグイン無しで、また他の条件も無しでリアルタイムコミュニケーションを実現できる。だが、そのオープンソースとして性質から、WebRTCを採用しようとする人がセキュリティ上の不安を覚えることもあるだろう。本レポートはWebRTCのセキュリティについて明らかにし、他の技術と比較してWebRTCのセキュリティが優れていることを解説する。 1. 導入 WebRTCはオープンソースのWebベースの技術であり、ユーザがリアルタイムメディア通信を、プラグイン無しで実現可能な技術だ。適切なブラウザを利用すれば、ウェブサイトをブラウズするだけで、他者に発信して通話することができる。 WebRTCの主なユースケースは
WebRTCによるビデオチャットサービスの開発 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに Webで使えるビデオチャットサービスを開発しましたので、システム構成や使用したフレームワークやサービス、開発のポイントなどまとめてみました。 (去年にはQiitaの投稿を作っていたのですが、下書き保存したまま忘れて今頃の投稿になってしました。。) 月々のランニングコストは1000円以内、開発工数は1人月以内で作成しています。 WebRTCが出てきたおかげで、かなり容易にビデオチャットサービスが開発できるようになっていますので、よければ参考にしてください。 開発のポイント、コードだけでなく、開発の動機から、システム構成を決める為
超簡単に3DCGできるJavaScriptライブラリ作った - aike’s blog
ブラウザでWebGLが使えるようになって3DCGプログラミングはずいぶん身近なものになりました。と書いてるそばから違和感を感じるくらい生のWebGLをJavaScriptで書くのは敷居が高かったりします。できなくはないけど前提となる知識がかなり必要な感じ。 three.jsが登場したときは、これで普通に3DCGができるということで一気にひろまりました。とはいえ、それでもまだやることは多く、画面に四角い箱を表示する場合以下のようなプログラムを書くことになります。 ・シーンを作成 ・ライトを作成、位置と向きを設定、シーンに追加 ・カメラを作成、位置と向きを設定、シーンに追加 ・マテリアルを作成、色を指定 ・BoxGeometryを作成、サイズを指定 ・メッシュを作成、位置と向きを設定、シーンに追加 ・レンダラーを作成 ・レンダリングループ処理 これらのひとつでも間違えたりパラメーターが適切でな
WebRTCにおけるNAT越えの課題へのアプローチ - 鈴木うどんの横須賀おもしろ生活
WebRTCにおけるNAT越えの課題へのアプローチ - Qiita に移転しました。
WebRTC で動く Chord DHT の実装 webrtc-chord を公開しました - 研究会
概要 分散ハッシュテーブルの実装の一つである Chord を WebRTC を用いて実装しました。 tsujio/webrtc-chord - GitHub Chord とは Chord は分散ハッシュテーブル (DHT: Distributed Hash Table) の実装の一つです。 分散ハッシュテーブルはその名の通りハッシュテーブルを分散して管理するものであり、P2P においては例えばファイル共有ソフトで「あるファイルを提供しているノードはどれか」といった情報をピア間で分散管理し高速に検索できるようにする用途で利用されています。 Chord の解説としては以下のスライドが分かりやすいです。 ChordアルゴリズムによるDHT入門 webrtc-chord その分散ハッシュテーブルの実装の一つである Chord を、Web ブラウザー間で P2P 通信を行う機能を持つ WebRTC
The WebSocket API （日本語訳）
WebSocket API 日本語訳 このページ は、 W3C により， 2012 年 9 月 20 日付けの 勧告候補として公開された The WebSocket API を日本語に翻訳したものです。 この翻訳の正確性は保証されません。 この仕様の公式な文書は英語版であり、この日本語版は公式のものではありません。 （ このページの詳細情報 ） 更新：2012-09-23 本文ダブルクリックで当該箇所の原文が表示されます（左下隅ボタンですべて表示）。 CSS や DOM の対応が古いブラウザでは、一部機能が働かないことがあります。 （他のウェブ関連仕様の日本語訳一覧と共通の機能／詳細） 誤訳その他ご指摘／ご意見は連絡先まで。 WebSocket API W3C Candidate Recommendation 20 September 2012 このバージョン http://www.w3.
MMDモデルを3DCGでウェブ上に公開し閲覧者がアングルを動かしまくれるJavaScriptライブラリ「jThree」
MMD(MikuMikuDance)で作成したファイルをウェブページ上に表示し、閲覧者が視点を自由に操作できるようにするJavaScriptライブラリが「jThree」です。ページ上にモデルを表示させるにはWindows 7を搭載したPCでChrome・FireFox・Operaを使えばOK。また、Macの場合はOperaならば同様にページ上で動作させることが可能なようです。 3DCGコンテンツをjQueryスタイルで作るJavaScriptライブラリ - jThree http://www.jthree.jp/ 実際にウェブページ上でどんなことができるようになるのかは以下のムービーを見れば分かります。 「jThree」を使うとウェブページ上でこんなことができるようになる - YouTube jThreeのトップページにはデモページが3つ用意してあるので、今回は「千本桜 + カゲロウデイズ
知っていれば恐くない、XMLHttpRequestによるXSSへの対応方法
知っていれば恐くない、XMLHttpRequestによるXSSへの対応方法：HTML5時代の「新しいセキュリティ・エチケット」（3）（1/2 ページ） 連載目次 皆さんこんにちは。ネットエージェントのはせがわようすけです。前回は、同一オリジンポリシーを突破する攻撃の代表的事例であるXSSについて、特にDOM based XSSと呼ばれるものについて解説しました。今回はその続きとして、XMLHttpRequestによるXSSを解説します。 XHR Level 2によるリモートからのコード挿入によるXSS 従来、XMLHttpRequest（以下、XHR）は、表示しているドキュメントと同じオリジン（オリジンについては第1回を参照）としか通信できませんでしたが、現在の主要なブラウザーではXHR Level 2と呼ばれる実装により、オリジンを超えて通信することが可能になっています。 これは、Jav
Webアプリ開発者のためのHTML5セキュリティ入門
Enterprise x HTML5 Web Application Conference 2014の発表資料です。
HTML5で実現できる！環境光に合わせたレスポンシブなUI
HTML5で実現できる！環境光に合わせたレスポンシブなUI Tomomi Imura（Slack） フロントエンド開発やデザインに携っている皆さんにとって、ここ数年間「レスポンシブ・ウェブ」についての話題は避けて通れないものとなっているでしょう。モバイルやタブレット上でも、ユーザー・エクスペリエンスを失うことのないウェブを表現するには、CSS3 Media-queriesが欠かせないものとなってきました。 それでは実際、レスポンシブ・ウェブとは何についての対応（レスポンシブ）なのでしょうか。 現在のところ、私たちがいうレスポンシブ・ウェブデザインとは、どんなスクリーンの幅や表示領域、デバイスの画面解像度や画面の縦横の向きにも対応したウェブデザイン、というのが事実上の定義となっているようです。 そこで今回、私はその定義を超えたレスポンシブ・ウェブのユースケースについて考えてみました。 太陽光
WebSocket(RFC 6455)上で使用するプロトコル設計についての備忘録 - kazuhoのメモ置き場
一般論として、全二重の通信プロトコルを実装するにあたっては、いくつか注意すべき点があって、具体的には、到達確認と切断シーケンスについて定めておかないと、送達されたはずのメッセージがロストしていたり、切断タイミングによってエラーが発生*1したりする。 具体例をあげると、たとえばTCP/IPにおいてshutdown(2)を用いずに、いきなりclose(2)を呼んでいると、read(2)やwrite(2)がエラー(ECONNRESET)を返す場合がある。 翻って、WebSocket (RFC6455)の場合はどうなってるか？ だいたい以下のような感じっぽい。 ws.close()が呼び出されるとWebSocketをCLOSING状態に変更し、Closeフレームを送信する ws.onmessageはWebCosketがCLOSING状態にある間も呼ばれるかもしれない*2 相手からCloseフレーム
WebRTCを仕組みから実装までやってみる - blog::wnotes.net
このエントリはFrontrend Advent Calendar 2013 23日目の記事です。 2014/03/16追記 WebRTC-DataChannelについてもエントリ書きました。↓からどうぞ。 WebRTC-DataChannel使ってみたよ WebRTCを仕組みの理解から実装まで Advent Calendarを書くということでなんか新しいことやったほうがいいかなーって思ってたので、今回はWebRTCを調べてみました。 調べながらだったので間違っている箇所もあるかもですが、専門家の方のツッコミあれば歓迎です。 先に作ったサンプルデモを触りたい方は以下のアドレスからどうぞ。 WebRTC Video Chat Sample ※接続名は同時にアクセスしている方全員から見えますのでご注意ください！接続依頼が来た際にはダイアログが出るようにしてますが、安易に応答すると知らない人とつな
ブラウザーにファイルを残せるFile system APIの使い方 (1/5)
HTML5では、Web StorageやWeb SQL/Indexed DBといった、JavaScriptでクライアントサイド（ブラウザー）にデータを保存する機能があります。今回紹介する「File system API」もそんな機能の1つですが、MacやWindowsのようなディレクトリを持ったファイルシステムにデータをファイルとして保存できます。 File system APIを使うと、Canvasに描いた画像をファイルとしてブラウザーに保存する、といったことができます。現在のところ、「Google Chrome」と、Android 4の「Chrome for Android」だけで利用できますが、特にスマートフォンでファイルが扱えるのは便利でしょう。 今回は、File system APIを使って簡単なファイラーを作ります。File system APIは非同期処理が多く、掲載している
Canvasで超可愛いグラフが作れる！「Chart.js」の紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのハルエです。 最近ちょくちょくグラフを用いた制作物に関わることがあり、案件によってはエンジニアさんにお願いしたりIllustratorのグラフツールで作ったりしていたのですが、なんやかんやで時間とられちゃうんですよね。で、もっとこうオシャレでスマートにさくっとハイテンションで作れるものはないかと探してみました。 そこで見つけたのがこれ。「Chart.js」。 めちゃくちゃ愛くるしい動きをしてくれます。デザインもフラットでいい！ ポートフォリオやプレゼンなんかにもきっと役立ちますよ。 Chart.jsとは？ 折れ線グラフ、棒グラフ、円グラフ、レーダーチャートなど、6種類のグラフが簡単に描けてしまうJavascriptのライブラリです。 HTML5のCanvasを使って描画され、表示の際の気持ちいいアニメーションの動きが特徴的です。とても分かりやすいマークアップなので、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WebRTC入門+最新動向
WebRTCの技術解説 公開版
WebブラウザでP2Pを実現する、WebRTCのAPIと周辺技術
Learn web development | web.dev
