予定では、明日の 10 日に webpack のメジャーバージョンである v5 がリリースされますが、まだエコシステムが安定していない可能性があるため、注意してアップグレードを行ってください。 webpack 5 release plan · Issue #11406 · webpack/webpack TL;DR: release planned for 2020-10-10 After nearly 1 year of beta testing and about 2 years of devel... change log: https://github.com/webpack/changelog-v5 移行ガイド: https://webpack.js.org/migrate/5 追加機能 Persistent Caching このバージョンからは今までメモリ上でしか行ってなかった
モーダル・ダイアログ ボックスはWebサイトやスマホアプリでよく見かけます。しかし、その実装方法は何通りもあります。その多くはWebを視覚的にナビゲートしないユーザーにとっては実質的にモーダルボックスを使用できず、アクセシブルに実装するのは困難でした。 HTML 5.2で登場した新しい<dialog>要素はこの問題を解消し、実装方法を迷うことなくモーダルやダイアログ ボックスを利用できるようにするものです。 <dialog>要素で、モーダル・ダイアログ ボックスを実装する方法と注意点を紹介します。 Meet the New Dialog Element 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 HTML 5.2の新機能: モーダル・ダイアログ ボックスを実装するための<dialog>要素 <dialog>要素の基本機能 <
プロジェクト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
Scratch Reveal with <canvas>は、<canvas>タグとJSで実装する、画像のスクラッチ表現です。 カラフルな写真にマウスを載せて、ドラッグすると、スクラッチを削るようにグレースケースの写真が現れます。 もちろん、デフォルトをグレースケールの写真にして、スクラッチでカラフルな写真を表示させることも可能です。 例えば、キャンペーンサイトなどで、画像にシリアルコードや当たり、ハズレのマークを埋め込んでおいて、ユーザーが画像を削ると表示される、という使い方ができそうです。 実装方法 デフォルトに表示される画像と、スクラッチで削った後に表示される画像の2枚を用意しておきます。 HTML <canvas>を用意します。 <figure id="bridgeContainer"> <canvas id="bridge" width="750" height="465"></c
Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. Test on: Did you know? Next If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself! You can import usage data from your Google Analytics account and
はじめに 聖地の写真を共有するサービス「Holy Place Photo」にService Workerによるキャッシュを実装しました。 そのためネットワークがオフラインでも下記のようにサクサク動きます!!!! Service Worker Demo pic.twitter.com/t04xSRl7B2 — tiwu (@tiwu_official) 2019年2月25日 また、LighthouseのPWAのスコアは100を取れました。 この記事ではService Workerを利用したキャッシュの設計、Laravel + Vue.jsのWebアプリケーションでの実装を解説していきたいと思います。 注意書き 僕の考えた最強のService Workerのキャッシュの設計のため唯一の正解ではありません キャッシュの設計はサービスによって違うと思うのでこの記事は一つの参考にしてください まずS
A year ago, in January 2018, Apple surprised everyone with its early support for Progressive Web App technologies in iOS 11.3 beta. At that time, I published PWAs coming to iOS: Cupertino, we have a problem. Two months later, the stable release appeared and most of the bugs and UX issues remained during 2018, with new bugs coming in and out between iOS 11.4 and 12.1. Note: Final iOS 12.2 was relea
webサイトを多言語対応して運用されているウェブマスターやサイトオーナーもいらっしゃると思います。 今回は、そのようなサブドメインや、サブディレクトリなどURLが言語ごとに異なる方法で運用している多言語サイトを、言語・地域別に正しく検索結果に表示させる方法について解説していきます。 では、まずは地域別に意図したページをGoogleなどの検索結果に表示させるために必要な、rel=”alternate” hreflang=”x”というアノテーションタグからご説明していきます。 hreflangタグとは？ はじめに「hreflangタグ」とは何かという点をご紹介させていただきます。 hreflangはエイチレフラングと読みますが、hreflangタグというのはページの言語や地域を指定するための属性となります。hreflangタグはhreflangアノテーションとも呼ばれる事があります。 href
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
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 »
ウェブ向けのストレージ コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 外出中はインターネット接続が不安定であったり存在しなかったりする場合があります。このような理由から、オフライン サポートと信頼性の高いパフォーマンスがプログレッシブ ウェブアプリにおける一般的な特徴となっています。完全なワイヤレス環境であっても、キャッシュやその他のストレージ テクニックを適切に利用すれば、ユーザー エクスペリエンスを大幅に向上させることができます。静的アプリリソース（HTML、JavaScript、CSS、画像など）とデータ（ユーザーデータ、ニュース記事など）をキャッシュする方法はいくつかあります。では、最適なソリューションはどれでしょうか？保存できるデータの量はどのくらいですか？強制排除を防ぐにはどうすればよいですか？ 何を使用すればよいですか？ リソースの保存に関
ウェブ開発者が、ユーザーのブラウザー（つまり、ユーザーがウェブサイトを閲覧するために使用している端末のローカルディスク）にデータを格納するために利用できる技術はたくさんあります。 ブラウザーがウェブサイトに格納することを許可するデータ量と、その制限に達したときにデータを削除するために使用する仕組みは、ブラウザーによって異なります。 この記事では、データを格納するために使用できるウェブ技術、ウェブサイトがデータを格納しすぎないように制限するためにブラウザーが所有しているクォータ、および必要なときにデータを削除するために使用する仕組みについて記述されています。 ブラウザーは、ユーザーがウェブ上で追跡されるリスクを縮小するために、ウェブサイトからのデータをさまざまな場所に格納します（バケットとも呼ばれます）。ほとんどの場合、ブラウザーは格納されるデータをオリジンごとに管理します。 このため、オリ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
