はてなブックマーク

スマートフォンのネイティブアプリでは当たり前に用意されているリンクやファイルの共有機能ですが、Web Share API を使えばウェブアプリでも実現可能です。リンクやテキスト情報だけでなく、ファイルを他のアプリに共有することが可能です。今回は Web Share API の使い方について紹介します。

MutationObserver の使い方 まずは MutationObserver の使い方を簡単に紹介します。次のサンプルは span 要素のテキストの変更を検知して、変更前のテキストと変更後のテキストをコンソールに出力します。 // MutationObserver オブジェクトを生成 const observer = new MutationObserver((mutations) => { const rec = mutations[0]; // MutationRecord オブジェクト const before = rec.removedNodes[0].data; // 変更前のテキスト const after = rec.addedNodes[0].data; // 変更後のテキスト console.log('「' + before + '」が「' + after + '

オーディオの自動再生に大きな制約があるといえば、以前は iOS Safari に限った話でした。しかし、現在は PC も含め、あらゆるブラウザーでオーディオの自動再生に大きな制約があります。もし再生できたとしても、次に立ちはだかるのが再生開始遅延です。とりわけスマートフォンでタップ音や通知音を再生したい場合は違和感を感じてしまいます。 今回は、HTML マークアップおよび JavaScript によるオーディオ自動再生にどのような制約があるのか、その制約をどう解決するのか、そして、再生開始遅延を解消する方法について、詳しく見ていきます。 Chrome の自動再生ポリシー オーディオの自動再生ができないという制約は、当初は iOS Safari に限った話でした。ところが、Google が自動再生ポリシーを発表してから、メジャーブラウザーすべてがそれに従うようになりました。英語ですが「Aut

クリップボードにコピーする方法はネットに数多く見つかりますが、クリップボードの内容を読み取る方法は意外に少ないと思ったことはないでしょうか。実は、過去からいくつかのブラウザーにクリップボードの読み取り機能が実装されたことがありました。ネットを検索するといくつかの方法が見つかりますが、動かないコードもちらほら。 実はクリップボードを扱う JavaScript API の仕様が過去に何度か作られては廃止となったこともあり、ブラウザーの実装もそれに巻き込まれてきたのが実情です。そしてネットの情報も、古い実装に基づいたものも数多く残っており、混乱のもとになっています。 今回は最新の仕様と実装に基づいて、クリップボードの内容の読み取り方法について詳しく紹介します。

さまざまなウェブサイトでクリップボードにテキストをコピーする機能が使われています。しかし、クリップボードにはプレーンテキストだけでなくスタイル付きのテキストや画像データも書き込むことができます。また、クリップボードにはプレーンテキストとスタイル付きテキストといった具合に複数の種類のデータを同時にコピーすることも可能です。 今回は、JavaScript を使ってプレーンテキスト、スタイル付きテキスト、画像データをクリップボードにコピーする方法を詳しく解説します。