【18：スクラッチくじ】Canvasをレイヤーの様に使う - one's way blog
プロジェクトNo.18：スクラッチくじ Canvasを２枚重ねて、前面のcanvasをマウスダウンとマウスムーブで消すといったものを作りました。 Canvasをレイヤーの様に使うために まずHTMLで２つのcanvasエレメントを用意します。 HTML <canvas id="parent" width="400" height="300"></canvas> <canvas id="child" width="400" height="300"></canvas> 次にCSSでcanvasに対してposition: absoluteを指定。 CSS canvas{ position: absolute; } ||< あとは、JavaScriptの方でそれぞれのcanvasエレメントに対してオブジェクト生成し、 それぞれに処理を行っていきます。 ***JavaScript >|javasc
キャンペーンサイトに使えそう！<CANVAS>タグを使った画像のスクラッチ表現
Scratch Reveal with <canvas>は、<canvas>タグとJSで実装する、画像のスクラッチ表現です。 カラフルな写真にマウスを載せて、ドラッグすると、スクラッチを削るようにグレースケースの写真が現れます。 もちろん、デフォルトをグレースケールの写真にして、スクラッチでカラフルな写真を表示させることも可能です。 例えば、キャンペーンサイトなどで、画像にシリアルコードや当たり、ハズレのマークを埋め込んでおいて、ユーザーが画像を削ると表示される、という使い方ができそうです。 実装方法 デフォルトに表示される画像と、スクラッチで削った後に表示される画像の2枚を用意しておきます。 HTML <canvas>を用意します。 <figure id="bridgeContainer"> <canvas id="bridge" width="750" height="465"></c
たぶん世界一簡単なIndexedDBのサンプル - DRYな備忘録
WebSQL先輩… localStorageのようなシンプルなkvsじゃなくて、検索を伴うようなブラウザで永続化できるストレージあるかな、そういえばWebSQLってどうなってるんだろう？と思って調べたら、 Developer's blog | HTML5のWeb SQL DatabaseがW3Cの仕様策定の範囲から外れていた W3C、「Web SQL Database」の仕様策定を正式に断念 - builder by ZDNet Japan あらまあ Migrating your WebSQL DB to IndexedDB - HTML5 Rocks 代わりにIndexedDBを使えということらしい. なにそれ食えんの. IndexedDBとは？ どうやら検索キーを指定してドキュメントをつっこめるストレージっぽい. IndexedDB is a way for you to persis
Dexie.js - Minimalistic IndexedDB Wrapper
Reactive Dexie 3.2 integrates better with front-end frameworks. Query the db without boilerplate and let your components mirror the database in real time. Show me » Easy to learn Dexie was written to be straightforward and easy to learn. If you've ever had to work with native IndexedDB then you'll certainly appreciate Dexie's concise API. Dive right in »
ウェブ向けのストレージ | Articles | web.dev
ウェブ向けのストレージ コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 インターネット接続は不安定であったり、存在しない場合があります。そのため、プログレッシブ ウェブアプリでは、オフライン サポートと信頼性の高いパフォーマンスが一般的な機能となっています。完全なワイヤレス環境であっても、キャッシュやその他のストレージ技術を適切に使用することで、ユーザー エクスペリエンスが大幅に向上する可能性があります。静的なアプリケーション リソース（HTML、JavaScript、CSS、画像など）とデータ（ユーザーデータ、ニュース記事など）をキャッシュに保存するには、いくつかの方法があります。では、どちらのソリューションが最適なのでしょうか。どれくらい保存できますか？強制排除を防ぐにはどうすればよいですか？ 何を使用すればよいですか？ リソースの保存に関する一般的な
ブラウザーのストレージ制限と削除基準 - Web API | MDN
ウェブ開発者が、ユーザーのブラウザー（つまり、ユーザーがウェブサイトを閲覧するために使用している端末のローカルディスク）にデータを格納するために利用できる技術はたくさんあります。 ブラウザーがウェブサイトに格納することを許可するデータ量と、その制限に達したときにデータを削除するために使用する仕組みは、ブラウザーによって異なります。 この記事では、データを格納するために使用できるウェブ技術、ウェブサイトがデータを格納しすぎないように制限するためにブラウザーが所有しているクォータ、および必要なときにデータを削除するために使用する仕組みについて記述されています。 ブラウザーは、ユーザーがウェブ上で追跡されるリスクを縮小するために、ウェブサイトからのデータをさまざまな場所に格納します（バケットとも呼ばれます）。ほとんどの場合、ブラウザーは格納されるデータをオリジンごとに管理します。 このため、オリ
IndexedDB の使用 - Web API | MDN
IndexedDB は、ユーザーのブラウザー内にデータを永続的に保存する手段です。ネットワークの状態にかかわらず高度な問い合わせ機能を持つウェブアプリケーションを作成できますので、アプリケーションがオンラインとオフラインの両方で動作するようになります。 このチュートリアルでは、IndexedDB の非同期 API の使い方を見ていきます。IndexedDB について詳しくない場合は、始めに IndexedDB の主な特徴と基本用語をお読みください。 IndexedDB API のリファレンスドキュメントとして、IndexedDB API の記事とそのサブ記事をご覧ください。この記事では、IndexedDB で使用されるオブジェクトの種類と、非同期 API のメソッドについて説明します (同期 API は仕様から削除されました)。 IndexedDB で推奨される基本パターンは、以下のように
IndexedDBでの検索がちょっと便利になるMultiEntry - へっぽこプログラマーの日記
HTML5 Advent Calendarの24日目です。 残すところあと1日となりました！ 他の方々が有用な記事をたくさん書いて頂いているので、そちらも是非チェックしてみてください。 さて、私からはIndexedDBのMultiEntryという仕組みについて少しだけ解説したいと思います。 IndexedDBが題材ということで少しマニアックですが… IndexedDBの検索方法 IndexedDBの検索方法について簡単に触れておくと、その名前の通り、あらかじめ索引を作成して検索するというものです。つまり、検索に使う可能性があるプロパティやパターンをあらかじめ洗い出しておく必要があります。また、RDBMSのように複合検索というものがないため、複雑な検索を行うためには、データ検索用のプロパティを別途用意しなければなりません。 検索がちょっと便利になるMultiEntry 前述したように、Ind
IndexedDBの（少し詳しい）サンプルコード - Qiita
IndexedDBは検索すればすぐにサンプルコードが出てきますが、一部不明瞭な点があるのでそれを補完したサンプルコードです。 IndexedDBとは (大量の)オブジェクトを格納するためのHTML5アプリで使えるデータベースです。 サンプルコード //1.indexedDBを開く var idbReq = indexedDB.open("archives", 1); //2.DBの新規作成時、またはバージョン変更時に実行するコード idbReq.onupgradeneeded = function (event) { var db = event.target.result; var twitterStore = db.createObjectStore("twitter", { keyPath: "id_str" }); var pocketStore = db.createObject
Web Worker を使用する - Web API インターフェイス | MDN
ウェブワーカーは、ウェブコンテンツがスクリプトをバックグラウンドのスレッドで実行するためのシンプルな手段です。ワーカースレッドは、ユーザーインターフェイスを妨げることなくタスクを実行できます。さらに、fetch() や XMLHttpRequest など API を用いて、ネットワークリクエストを行うことができます。ワーカーが生成されると、それを作成した JavaScript コードが指定するイベントハンドラーにメッセージを投稿することで、そのコードにメッセージを送ることができます（逆も同様）。 この記事では、ウェブワーカーを使用するための詳しい紹介をしています。 ワーカーはコンストラクター（Worker() など）を使用して生成されるオブジェクトであり、名前付きの JavaScript ファイル（このファイルはワーカースレッドで実行するコードを持ちます）を実行します。またワーカーは、現在
History APIとスマホブラウザでのハマりどころ - Qiita
仕事でスマホ用サイトをイジっておりまして、非同期処理でのページングを 修正するに際して、History APIを触ってました。 スマホのブラウザ周りの差分で色々とハマったので、メモしておきます。 History APIとは とりあえず復習しましょう。 概要 HTML5で追加された、履歴操作のAPI。 履歴スタックに履歴を追加（push)、現在の履歴の書換（replace)、 ブラウザバック等のアクションによる履歴移動を監視する(pop)、といったことが可能になる。 history自体は以前からあって履歴の操作は画面遷移を伴っていたが、これらのAPIの追加によって、 画面遷移を行わなくともJavaScriptからの履歴操作が可能となった。 pushState 履歴をスタックに追加する。
お疲れさま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の代わりに使うことが可能です。現時点で実装し
Polymer library - Polymer Project
The Polymer library is in maintenance mode. For new development, we recommend Lit. The Polymer library provides a set of features for creating custom elements. These features are designed to make it easier and faster to make custom elements that work like standard DOM elements. Similar to standard DOM elements, Polymer elements can be: Instantiated using a constructor or document.createElement. Co
Tapquo
The blog tapquo.com has been acquired by FindMyHosting.com. Its best and archived contents are kept alive as sub-pages of FindMyHosting.com/tapquo/ FindMyHosting.com takes no responsibility for the factual accuracy or anything else regarding the archived Tapquo contents posted under FindMyHosting.com/tapquo/ About Tapquo.com: Tapquo, founded in 2011, was built to develop meaningful projects design
Learn web development | web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
File API で作成した blob をダウンロードする
この記事は “HTML5 Advent Calendar 2012” の16日目の記事です。他の記事もぜひご覧ください。 HTML5 では BlobBuilder オブジェクトを作成して、ファイルをメモリ上に読み込んだり、あるいはユーザーの入力やサーバーから取得したデータを元にしてメモリ上にファイルの内容を作成することが可能です。また作成した Blob は XML HTTP Request (XHR) の FormData としてサーバーにアップロードすることも可能です。 ではメモリ上の Blob をローカルに保存したい場合、どうすればよいでしょうか。Web ページのスクリプトから直接ローカルのファイル システムを操作する File System API (File API: Directories and System と File API: Writer) の標準化について議論が進めら
Html5のWebStorageについてのメモ - console.lealog();
その道の方、ご存知の方にはまったく役にたちません。 全然大したことは書いてません！ あくまで自分へのメモですです。 Web Storageとは Cookieのすごい版。 ブラウザ閉じても情報を保持できる仕組み。 localStorageとsessionStorageの2種類があって、後者はセッションが生きてる間だけ有効。 Cookieとの違いは、リクエストとして送信するかしないか。 ローカルで完結するので、Cookieより安全な感じ。 ソースでいうと 「キー：バリュー」でデータ保存。 localStorage.setItem("neko", " nyan"); localStorage.setItem("inu", "wan"); localStorage.hiyoko = "piyopiyo"; 取り出すときは、 localStorage.getItem("neko"); // "nya
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5 Sortable library
Dom7 - Custom DOM Library | Framework7 Documentation
Bitbucket