HTML5 History APIで非同期通信時にURLを変更する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアの店長です。 先日記事が出てましたが改めて自己紹介します。 大学卒業後はカフェで仕事をしていたのですが、退職して1年半ほどWebデザイナーをしていました。そして、LIGにはフロントエンドエンジニアとしてジョインすることに。 お察しのとおり、店長というアダ名はカフェで働いていたためです。 今後ともよろしくお願いします。 さて、今回はHTML5のHistory APIについてお話したいと思います。 History APIについて History APIには以前からブラウザの履歴（スタック）を行き来する機能があったのですが、HTML5でさらに以下のような機能が追加されました。 画面を遷移せず、履歴に新たなURLを追加する。 現在のページの履歴を変更する。 ブラウザの戻る・進むボタンをクリックしたときにイベントを検知する。 このような機能がどんな場面で使われてい
実はずっとWebRTCをウォッチしていたので大局的な話を書いた - 鈴木うどんの横須賀おもしろ生活
WebRTCについての話を社内勉強会でしてきたを見て、自分も何かを書いてみようかと思った。使い方やAPIの詳細について書かれた記事は多いが、大局的な話題を書いた記事はあまり見かけないので、そのような観点から公知になっている情報を中心に書いていこうと思う。 する話 僕のWebRTCの解釈 既存の通信技術との違い WebRTCのシグナリングの特徴点 今のWebRTCの情報源 今のWebRTCの妥当な使い道 しない話 VoIPデバイスとの相互接続のしかた 効果的な使い方 効果的なコード とても長い本文 WebRTCとは何かといえば、たとえばHTML5周辺技術であるとか様々な見方があるが、僕はテレフォニーの世界感をWebブラウザ上に移殖したフレームワークだと認識している。WebRTCは、サーバとクライアントからなる三角形構造あるいは台形構造を構成する。 それらは、かつてのIP電話のプロトコルである
Web Audio API 解説 - 01.前説 | g200kg Music & Software
: サイト内検索 トップ 製品 KnobMan 偏ったDTM用語辞典 過去記事一覧 ソフトウェア/VST WebMusic その他 g200kg > Web Audio API 解説 > 01.前説 Web Audio API 解説 2019/01/1901.前説 « Prev 01.前説 02.とりあえず音を出す 03.オシレーターの使い方 04.ノードの接続 05.ノードのライフタイム 06.バッファソースでワンショットサンプルから音を出す 07.パラメータとオートメーション 08.a-rateパラメーターとk-rateパラメーター 09.スクリプトプロセッサーの使い方 10.フィルターの使い方 11.オシレーターのカスタム波形 12.アナライザーの使い方 13.ディレイの使い方 14.ウェイブシェイパーの使い方 15.コンプレッサーの使い方 16.コンボルバーの使い方 17.パンナー
こてさきAjax:WebRTCをお手軽に。Peer.js試してみた - livedoor Blog（ブログ）
WebRTCへの最近の僕 今年最初のブログ記事ポスト。いやーもう4月も半ば。桜も散っちゃいました。ほんと、更新頻度の低いブログです・・・今日は、WebRTC関連の話題。 DataChannel(映像、音声以外の任意のデータを送受信できる機能)が実装されたり、Firefox nightlyでも実装が始まったり、Chrome for Android(beta)でも実装が始まったりと、最近ホットなニュースが目白押しのWebRTC（Web Real Time Communication）。僕も、ちょいちょいプロトタイプ実装を試しています。 例えば、3/22のWeb先端味見部の時に、当日講師の吉川さんに取り上げていただいたチャット実装(github)とか（その後、吉川さん、大津谷さんのcontributeのおかげで、ビデオチャット機能実装とかバグ改修とか進められています） なお、上のコードは、サンプ
WebKit2 と愉快な仲間たち - steps to phantasien
ある ニュース記事を同僚に教わった。 この記事によるとタッチデバイスの会社は WebKit2 に対応しているのに検索の会社は旧バージョンにとどまっており、HTML5 に課題は多いのだそうな。 そりゃ課題は常に山積みだよね…と思っていたら記事は誤解だと別の同僚が説明を書いている。 リンク先の記事はさておき、世間の関心をいまいち集められていない気がする WebKit2 についてざっと説明をしてみたいとおもう。 この記事を読み終われば WebKit2 と Chromium WebKit, Webkit1 の違いを知ったかぶれるようになる予定。 WebKit2 は 2010 年の 4 月にアナウンスされた WebKit の新しい API レイヤで、Mac 版 Safari などが使っている。 大きな特徴はレンダリングエンジンを別プロセスで動かせること。 Chromium でやっているのと同じような
Chrome Socket API で WebSocket - Block Rockin’ Codes
intro Chrome Canary で Socket API が listen() をサポートしたってことで、 ブラウザ上にサーバを立てるという矛盾した行為が、 にわかに流行っているようです。 HTTP Server on Chrome Socket API で、以下のようにするとサーバが立てられて。 クライアントからアクセスすると HTTP が配信されたりします。 Chrome Socket API Server しかし、 何故か accept() が一回しかリクエストを処理できず、 現状一回処理したら立ち上げ直す(= Chrom 再起動?) しかないので、 仕方なく accept() をその都度行わないといけない状況です。 (多分そのうち改善されるんだろうと思います。) WebSocket Server on Chrome Socket API ということで、動くか確かめて見たくな
MediaStream Integration
MediaStream Integration The following examples illustrate WebRTC integration with the Web Audio API. They are borrowed and modified from Robert O'Callahan's MediaStream Processing API proposal. Please note the addition of two new AudioContext methods: createMediaStreamSource() and createMediaStreamDestination(). They need to be documented more fully, but provide a simple and straightforward integr
ブラウザーにファイルを残せる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は非同期処理が多く、掲載している
The Web Platform: Browser technologies
Include single-engine specifications • To re-sort, click on any heading. SpecificationRepoDocsTestsEnginesCategory
WebRTCについて
28. サンプルコード <html> <head> </head> <body> <h2>CameraDemo</h2> <video id="live" autoplay controls></video> <script type="text/javascript"> video = document.getElementById("live") //for GoogleChrome navigator.webkitGetUserMedia("video audio", //Operaの場合はnavigator.getUserMedia function(stream) { video.src = window.webkitURL.createObjectURL(stream); }, function(err) { console.log("Unable to get video s
こてさきAjax:マルチデバイス連携を実現する Web Intents 〜マルチデバイス連携編〜 - livedoor Blog（ブログ）
前回のエントリーに引き続き、今回も Web Intents に関するポストです。今回は、「なぜ、Web Intents が Web でのマルチデバイス連携サービスを実現するにあたり、重要な API となるのか？」について説明します。なお、Web Intents の基本と使い方については、前回のエントリーを参照下さい。 Device APIs の最新動向 Web Intents とマルチデバイスとの関係に入る前に、Device APIs の最新動向について触れたいと思います。 スマートフォンなどの Device のネイティブ機能を Web から利用する API について、 W3C では、主に Device APIs Working Group で仕様化が進められています。例えば、住所録情報を取得する "Contacts API" や、カメラを起動し、撮影した写真画像を取得する "HTML M
はじめる！ Box2DJS
β版 Box2DのJavaScript版、Box2DJS。その世界で最初(で最後?)のガイドブックとして、作者自身がインストールや使い方からゲーム製作への応用までを紹介。巻末には主要APIリファレンスつき。 β版について 本書のステータスは現在β版であり、現在、著者やレビュアの方々により追加・修正が行われている段階です。 いま購入されてお読みいただけるのはその途上の原稿を元にしたものです。 最終的に正式公開されたものもダウンロードしお読みになることはできますが、 正式公開版を読みたい方には今しばらくお待ちいただくことになります。あらかじめご了承ください。 概要サンプルリンク用タグ 書誌情報 著者: あんどうやすし 発行日: 2011-07-11 最終更新日: 2011-07-11 バージョン: 0.9.0 ページ数: 85ページ(A4PDF版換算) 対応フォーマット: EPUB, PDF
HTML5 の Drag and Drop API と File API を使ってファイルアップロードを実装する - しばやん雑記
HTML5 の Drag and Drop API を使うことで、ブラウザにドロップされたファイルの情報を扱うことが出来ます。そして File API を組み合わせることで、ファイルの中身まで扱うことが出来るようになります。 そして FormData オブジェクトと XHR を組み合わせることでアップロード処理までを実装することが出来ます。完成図はこんな感じです。 今回は JavaScript の処理が中心です。jQuery を使っているので追加してくださいね。 $(function () { var uploadFiles = function (files) { // FormData オブジェクトを用意 var fd = new FormData(); // ファイル情報を追加する for (var i = 0; i < files.length; i++) { fd.append(
第1回 WebSocket登場までの歴史 | gihyo.jp
はじめに 初めまして。NTTアドバンステクノロジの金城と申します。幸運にも記事を執筆させていただけることになりました。WebSocketという新しいウェブの規格についての連載を、全4回の予定でお届けします。 用語統一について WebSocketは「WebSocket」「WebSockets」、単語を切り離した「Web Socket」等、表記に揺れがあります。2009年12月22日のワーキングドラフトのタイトルは「The Web Sockets API」となっていますが、2010年4月26日のエディターズドラフトでは「The WebSocket API」となっています。この連載では、最新の仕様書に則り、用語を「WebSocket」で統一します。 HTML5とWebSocketの関係 WebSocketは、もともとHTML5の一機能として仕様の策定が進められていました。しかし、Web S
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Quirks in DeviceOrientation API
照度と近接がDOMに入る
IBM Developer
IBM Developer
Safari on iPhone & iPad 4.2: Accelerometer, WebSockets & better HTML5 support | Breaking the Mobile Web
http://blog.goo.ne.jp/piselepce/e/1b32394951bb93a38cd1d854f060c79f