hifiveの小さな便利機能、h5.apiの紹介「localStorage編」
hifiveには頻繁に使われるであろう機能をAPIとしてまとめており、h5.apiというネームスペースでアクセスできるようになっています。 今回はlocalStorageを便利にしてくれるh5.api.storageについて紹介します。 localStorageの利用可否を判定する...
View ArticleHTML5.2で追加されるリファラーポリシーについて
従来、Webサイト間はリンクでつながっており、リンクを辿った際にはリファラーが送信される仕組みになっていました。しかしプライバシーの保護であったり、URL中に機密情報が含まれていた場合に問題になるため、送信されないことも多々あります。 HTML5.2ではリファラーポリシーが追加され、リファラーの送信について細かく制御できるようになります。 リファラーポリシーの設定法...
View ArticleClik here to view.
JavaScriptを安全に実行するためのnonce導入法
Webサイトでは不特定多数の人たちがサービスに触れます。その結果、悪意を持ったユーザによってWebページを改ざんされたり、不用意なJavaScriptを実行したりするリスクが発生します。 運営側で予期していないJavaScriptの実行を制限するのに使えるのがnonceです。CSP（コンテンツセキュリティポリシー）によって実行できるJavaScriptを制限できます。 仕組み...
View ArticleJavaScriptのProxyを使いこなそう
最近、ReactやVueなどVirtualDOMを使った技術がトレンドになっています。VirtualDOMの特徴として、DOMの状態を管理から開放されて、変数を変えるだけで自動的に表示に反映される仕組みがあります。 変数の変更を感知し、表示に反映するために使われるのがProxyになります。VirtualDOMに限らず使える場面が多いオブジェクトなので、ぜひ使い方を覚えましょう。 基本的な使い方...
View ArticleWebAssembly が書ける言語まとめ
Webブラウザ上でコンパイルされたコードが動作するWebAssembly。モダンなブラウザではほぼ実装されており、実用段階に入ってきています。現在の仕様ではDOM操作ができませんので、主にCanvasやWebGLを使う場合であったり、重たい計算処理を行う際に使われるでしょう。...
View ArticleJavaScriptの新しいAPI、ジェネレータの使い方
ES6で新しく追加されたJavaScript APIにジェネレータがあります。使い方次第で新しいJavaScriptの書き方が可能です。ES6 GeneratorはIE11を除くモダンなブラウザではサポートされていますので、ES6が利用できるのであれば使わない手はないでしょう。 ジェネレータの基本形 ジェネレータは function*...
View ArticleClik here to view.
PWAの根幹技術、Notifications APIの使い方
アプリでは当たり前になっているプッシュ通知ですが、Webブラウザ向けにはNotifications APIが用意されています。スマートフォンではまだ実装されていませんが、デスクトップ向けであれば十分使える状態になっています（Notifications APIはPush APIとは別です）。 今回はNotifications APIの実装方法を紹介します。 Notifications APIとPush...
View ArticleClik here to view.
パスワードレスの時代が来る！Web authentication APIの仕組みについて
Web authentication API（WebAuthnとも呼ばれます）がついにFirefox 60で対応し、本格的な普及に向けて進み始めました。Google ChromeやEdgeでも次期バージョンから対応が予定されています。残るはSafariですが、こちらは未定となっています。ただ、MacBook...
View ArticlePWAの技術要素について
PWA（Progressive Web App）という言葉が良く聞かれるようになってきました。今回はこのPWA全般と、各技術要素について紹介します。 PWAとは PWAはその名の通り、Web技術の上に構築されています。PWAという技術名がある訳ではなく、幾つかの技術の組み合わせを総称してPWAと言います。 Service Worker Service...
View ArticleJavaScriptのapplyをどこで使うのか
JavaScriptの関数によっては引数を幾つでも設定できるものがあります。例えばMath.maxです。この関数は引数で与えた数字の内、最大のものを返してくれる関数です。 しかし引数を動的に変更したい場合はどうしたらいいでしょうか。そこで使えるのがapplyになります。applyは引数を配列で与えられるようになります。 最初の引数 null...
View ArticleClik here to view.
Webブラウザ上で使えるデータベース、IndexedDBを使ってみよう
Webブラウザ上でデータを保存しておくための仕組みは幾つか用意されています。 Cookies localStorage/sessionStorage IndexedDB Web SQL...
View ArticleIndexedDBでデータをまとめて取得するには？
IndexedDBはWebブラウザ上で使えるJSONをサポートしたKVSです。KVSなのでデータの取得はキー単位なのですが、それだとキーを知らないとデータにアクセスできなくなりますので若干不便です。 そこで使えるのがカーソルとインデックスになります。 カーソルの使い方 カーソルはオブジェクトストアに対して openCursor メソッドで実行します。まず IndexedDB を開きます。...
View ArticleIndexedDB1系と2系の違いについて
IndexedDBはまだ普及していると言える段階にはありませんが、それでも開発者のフィードバックを受けてバージョンアップが行われています。最新のブラウザで実装されているのは IndexedDB2系になります。 今回は1系と2系で何が変わったのかを紹介します。 オブジェクトストアとインデックス名を変更できるようになった db.objectStore であったり、 objectStore.index...
View ArticleClik here to view.
PWAの基礎知識（その4）「Web App Manifest」
PWA（Progressive Web App）という単語がトレンドになっています。PWAは特定の技術を指す言葉ではなく、様々な技術が組み合わさったスマートフォンにおけるWebアプリのベストプラクティスと言えます。 今回はそんなPWAの基礎になる、Web App Manifestについて紹介します。 利用できるブラウザについて Web App...
View ArticleClik here to view.
PWAの基礎知識（その1）「Service Workerの使い方」
PWA（Progressive Web App）という単語がトレンドになっています。PWAは特定の技術を指す言葉ではなく、様々な技術が組み合わさったスマートフォンにおけるWebアプリのベストプラクティスと言えます。 今回はそんなPWAの基礎になる、Service Workerについて紹介します。 利用できるWebブラウザについて Can I useによると、モダンなブラウザの中でService...
View ArticleClik here to view.
PWAの基礎知識（その2）「Service Workerの開発法」
PWA（Progressive Web App）という単語がトレンドになっています。PWAは特定の技術を指す言葉ではなく、様々な技術が組み合わさったスマートフォンにおけるWebアプリのベストプラクティスと言えます。 今回はそんなPWAの基礎になる、Service Workerの開発方法について紹介します。 Google Chromeの場合 Google ChromeはWebブラウザ側、Service...
View ArticleClik here to view.
PWAの基礎知識（その3）「オンライン、オフライン判定」
PWA（Progressive Web App）という単語がトレンドになっています。PWAは特定の技術を指す言葉ではなく、様々な技術が組み合わさったスマートフォンにおけるWebアプリのベストプラクティスと言えます。 今回はそんなPWAの基礎になる、Service Workerについて紹介します。 利用できるWebブラウザについて Can I useによると、モダンなブラウザの中でService...
View ArticleClik here to view.
PWAの基礎知識（その5）「Web App Manifestの使い方」
PWA（Progressive Web App）という単語がトレンドになっています。PWAは特定の技術を指す言葉ではなく、様々な技術が組み合わさったスマートフォンにおけるWebアプリのベストプラクティスと言えます。 今回はそんなPWAの基礎になる、Web App Manifestについて紹介します。 利用できるブラウザについて Web App...
View ArticleClik here to view.
PWAの基礎知識（その6）「Web App Manifest作成の便利テクニック」
PWA（Progressive Web App）という単語がトレンドになっています。PWAは特定の技術を指す言葉ではなく、様々な技術が組み合わさったスマートフォンにおけるWebアプリのベストプラクティスと言えます。 今回はそんなPWAの基礎になる、Web App Manifestを作る時に便利なテクニックを紹介します。 Web App Manifestとは？ Web App...
View ArticlePWAの基礎知識（その7）「Web App Manifestを提供する上で知っておくと良いこと」
PWA（Progressive Web App）という単語がトレンドになっています。PWAは特定の技術を指す言葉ではなく、様々な技術が組み合わさったスマートフォンにおけるWebアプリのベストプラクティスと言えます。 今回はそんなPWAの基礎になる、Web App Manifestを作る時に便利なテクニックを紹介します。 Web App Manifestとは？ Web App...
View Article