Learn web development | web.devWeb Platform Dive into the web platform, at your pace.
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の例 ※個人情報の観点からスクリーンショットがご用意できずすみません。 メッセージページでは左側にメッセージのやり取り相手の写真が並びます。 それらをクリックすることによってメインのやり取りが表示されていく
<template>: コンテンツテンプレート要素 - HTML: ハイパーテキストマークアップ言語 | MDN
HTMLガイドコンテンツカテゴリーコメント日付と時刻の形式制約検証ビューポートの meta 要素レスポンシブ画像マイクロデータマイクロフォーマット後方互換モードと標準モードHTML 早見表手引HTML で用語を定義するデータ属性の使用別オリジンの画像の利用画像の上にヒットマップを追加する読み込みが速い HTML ページを作成するJavaScript の追加リファレンス要素<a><abbr><acronym> 非推奨; <address><area><article><aside><audio><b><base><bdi><bdo><big> 非推奨; <blockquote><body><br><button><canvas><caption><center> 非推奨; <cite><code><col><colgroup><data><datalist><dd><del><details
HTML5 Sortable
HTML5 Sortable is a jQuery plugin to create sortable lists and grids using native HTML5 drag and drop API. DEPRECATION NOTICE This project is not mantained anymore. I recommend using RubaXa's Sortable or voidberg's fork instead. Why another sortable plugin? Because it's better. Well, If you want to read the whole story read it here. Features Less than 1KB (minified and gzipped). Built using native
JavaScript でのローカル ファイルの読み込み - HTML5 Rocks
Selecting and interacting with files on the user's local device is one of the most commonly used features of the web. It allows users to select files and upload them to a server, for example, when sharing photos or submitting tax documents. It also allows sites to read and manipulate them without ever having to transfer the data across the network. This page walks through how to use JavaScript to
cocos2d-html5エンジンが凄い件 - tsuge development page
cocos2dっていうiPhoneでは有名なゲームエンジンがあるんだけど、それのHTML5版でcocos2d-html5ってのがある。 http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Cocos2d-html5 これ、ちょっとまともに調べてみたけどかなり凄い。 凄いんだけどいまいちZyngaの日本での頑張りが足らないのか記事が少ないので、ちょっと紹介する。 ダウンロードとか とりあえず自分で触ってみるわって人は、上のリンクからCocos2d-html5-v何がしの最新版リンクをクリックしてダウンロードすればいい。 この記事時点ではCocos2d-html5-v2.1.4が最新。 サンプルゲームはpixi.js辺りに比べるといまいちだけど、個別の機能を確認するのはcocos2d-html5のテストプログラムが使える。 http://www.c
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 少しのコードで実装可能な 20 の jQuery 小技集 目次Div 全体をクリックできるようにするテーブルの偶数・奇数の行の色を変えるフォームにテキストを入れておき、フォーカスで消す（文字色も変更）ラジオボタンとチェックボックスを装飾するスライドパネルアコーディオンツールチップ言語によってスタイルを変更横並びの div の高さ揃えるボックスを上下左右中央に配置するそれでは実際にどんな
SPAがネイティブアプリをぶっ壊す：HTML5/Javascriptが変えるWebの未来 - Qiita
はじめに タイトルは半分釣りですが、半分本気で考えてもいます。 近い将来、Webアプリが今のネイティブアプリの市場を超えてくる、と仮説を立てています。 ぜひ、先人のみなさんのご意見やお考えを教えてください。 SPAについて SPAとはなにか（What） 歴史 佐川夫美雄さんのイベントレポートの一部が、非常にまとまっていてわかりやすい部分でしたので、まず引用させていただくこととします。 RIAはアプリケーション利用者に対し高い評価を得ましたが、2010年のAppleショックにより衰退の方向へ向かいます。具体的には2010年にSteve JobsがFlashを激しく批判したことに端を発します。プロプライエタリ(Proprietary Software)なFlashよりオープン性のあるHTML5を推進するようになりました。2011年にはMicrosoftがWeb開発者に対してSilverligh
Web SQL Database APIによるデータベース・アクセス(1/6):JavaScriptによるHTML5プログラミング入門 - libro
HTML5では、「オフラインWebアプリケーション」のための機能がいろいろと用意されています。本来、サーバーにアクセスしてさまざまな動きをするものを、オフラインで、ローカル環境でも動くようにするための仕組みが考えられているのです。 中でも非常に重要となるのが「データベース機能」でしょう。HTML5では、SQL言語によってアクセスできるデータベースを内蔵するようになります。通常、SQLというのはデータベースサーバーというのを立てて、これにアクセスするような仕組みになっているのですが、HTML5の場合は内部にデータベースをもっていて直接ファイルにアクセスするようなシンプルなものです。 現在、こうした（データベースサーバーを必要としない）SQLデータベースとしては「SQLite」というものが広く使われており、HTML5に対応しつつあるWebデータベースも多くはこれを利用しているようです。ただ、仕
JavaScriptによるHTML5プログラミング入門 - libro
※ページが正常に表示されない場合 AddBlockなどの広告ブロックツールがONになっていると、ページの一部が表示されないことがあります。これらのツールをOFFにしてみてください。
描画面を移動させる-HTML5編
HOME JavaScript入門[HTML5編] 描画面を移動させる 前のページでは描画面を回転・変形させる方法を見てきました。 このページでは描画面を移動する方法について見ていきたいと思います。 描画面を回転させる時に、起点を移動させれば扱いやすくなります。 描画面を移動させる命令文 前のページではsetTransform()の最初の４つの引数を見てきましたが、 5番目と6番目の引数は描画面を移動させる時に指定します。 それと、もう一つ別の命令を見てみましょう。 context.setTransform(m11,m12,m21,m22,dx,dy) 第５引数，第６引数で指定した分だけ描画面を移動します。 context.translate(dx,dy) 指定しただけ描画面の起点（左上の点）を移動します。 この二つは同じ効果があります。 描画面の移動だけでなく変形も必要ならsetTran
save(), restore() メソッド - Canvasリファレンス - HTML5.JP
構文 context . save() 現在の状態をスタックの最後に加えます。 context . restore() スタックの最後の状態を抜き出し、その状態をコンテキストに復元します。 仕様 コンテキストは描画状態のスタックを維持します。描画状態は次の要素から構成されます： 現在の変換マトリックス 現在のクリップ領域 次の属性の現在の値： strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline. 現在のパスと現在のビットマップは描画状態に含まれません。現在のパスは、b
隠れたフォームのバリデーションに失敗 - Qiita
とある入力フォームを作った時の話ですが、送信ボタンを押しても一向に送信されず、原因をあれこれ探っていくと、Chromeのエラーコンソールに何やら出力されていました。 An invalid form control with name='foobar' is not focusable. そして、この問題になったフォームオブジェクトは<div style='display:none'>の中、つまりユーザーからは知覚も操作も不能な場所に置かれていて、そしてHTML5のバリデーション属性がかかっていました。 対策法 もちろん最初からこんなフォームを作ることはないとは思いますが、JavaScriptで制御しているとこのように「見えないコントロールがinvalidとなる」ということは発生してしまいます。対策法を検討してみる過程で、いろいろなものがありました。 novalidate、formnoval
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまで - Qiita
GitHub - SortableJS/Sortable: Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.
1216彩票-官网平台
koolchart.com - このウェブサイトは販売用です！ - koolchart リソースおよび情報
JavaScript製FlashPlayer「swf2js」swfをそのままHTML5に変換。 - Qiita
javascriptで文字列の描画幅を取得する方法 - Qiita
