HTML5 History APIで非同期通信時にURLを変更する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアの店長です。 先日記事が出てましたが改めて自己紹介します。 大学卒業後はカフェで仕事をしていたのですが、退職して1年半ほどWebデザイナーをしていました。そして、LIGにはフロントエンドエンジニアとしてジョインすることに。 お察しのとおり、店長というアダ名はカフェで働いていたためです。 今後ともよろしくお願いします。 さて、今回はHTML5のHistory APIについてお話したいと思います。 History APIについて History APIには以前からブラウザの履歴（スタック）を行き来する機能があったのですが、HTML5でさらに以下のような機能が追加されました。 画面を遷移せず、履歴に新たなURLを追加する。 現在のページの履歴を変更する。 ブラウザの戻る・進むボタンをクリックしたときにイベントを検知する。 このような機能がどんな場面で使われてい
【HTML5】HISTORY API「pushState/popState」を使って画面遷移しなくてもURLを変化させて、戻るボタンの挙動をカスタマイズする | unitopi - ユニトピ -
【HTML5】HISTORY API「pushState/popState」を使って画面遷移しなくてもURLを変化させて、戻るボタンの挙動をカスタマイズする こんにちは。 pushStateやpopStateというHTML5 HISTORY APIをご存知でしょうか。 もともとhistory APIは前からあり、history.back();などでブラウザの戻ると同じ挙動をさせることができます。 今回はHTML5で追加されたpushStateとpopStateに注目していきましょう。 よくAjaxなど、画面遷移を伴わずコンテンツなどの入れ替えを行う際に活用されています。 Facebookの例 ※個人情報の観点からスクリーンショットがご用意できずすみません。 メッセージページでは左側にメッセージのやり取り相手の写真が並びます。 それらをクリックすることによってメインのやり取りが表示されていく
Web SQL Database APIによるデータベース・アクセス(1/6):JavaScriptによるHTML5プログラミング入門 - libro
HTML5では、「オフラインWebアプリケーション」のための機能がいろいろと用意されています。本来、サーバーにアクセスしてさまざまな動きをするものを、オフラインで、ローカル環境でも動くようにするための仕組みが考えられているのです。 中でも非常に重要となるのが「データベース機能」でしょう。HTML5では、SQL言語によってアクセスできるデータベースを内蔵するようになります。通常、SQLというのはデータベースサーバーというのを立てて、これにアクセスするような仕組みになっているのですが、HTML5の場合は内部にデータベースをもっていて直接ファイルにアクセスするようなシンプルなものです。 現在、こうした（データベースサーバーを必要としない）SQLデータベースとしては「SQLite」というものが広く使われており、HTML5に対応しつつあるWebデータベースも多くはこれを利用しているようです。ただ、仕
HTML5 Videoで全画面（フルスクリーン）動画再生
リッチコンテンツという言葉が以前から存在するように、最近はテキストや画像だけでなく、動画や動画のストリーミング配信を用いたコンテンツが多いですね。 只、一概に言えませんが、動画コンテンツはファイルサイズやトラフィックの問題から、外部サービス（YoutubeやUSTREAM）を使うケースが大半かと思います。 そういった背景もあり、HTML5で追加されたVideo要素にはこれまで注目していませんでした。 （仕様が標準化段階であり、ブラウザ毎に異なる動画形式でファイルを用意する煩雑さも要因の一つ） さて、冒頭からVideo要素のネガティブな面ばかり取り上げましたが、メリットも勿論存在します。 今回はそんなVideo要素を中心にご紹介します。 Video要素とは 既にご存知かと思いますので誤解を恐れず簡単に説明すると、 ブラウザ単体で（Flash PlayerやQuickTimeなどプラグインを必
FirefoxでゲームパッドAPIを使うサンプル - 強火で進め
以前、紹介したゲームパッドAPIのサンプルを作ってみました。 FirefoxのNightlyビルドとChromeのCanary版でゲームパッドAPIを提供開始 - 強火で進め http://d.hatena.ne.jp/nakamura001/20111220/1324389164 ※Firefoxの実装はW3Cのドラフトとはちょっと異なる部分も有るみたいなのでベンダープレフィックスの Moz を変更したとしたとしても他の環境では動作しない可能性も有るのでその点ご注意下さい。 ゲームパッドを接続した時には以下のイベントが発生します。既に接続済みの状態で実行するとゲームパッドのボタンなどを押した時などに発生します。 window.addEventListener("MozGamepadConnected", function(e) { }, false);こんな感じで情報を取得できます。 w
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
