7 JavaScript Web APIs で未来的なウェブサイトをつくろう、開発者が知らないこと🤯
技術の急速な変化により、開発者は信じられないほど新しいツールやAPIを提供されています。100種類以上あるAPIのうち、開発者が実際に使っているのはわずか**5％**だと言われています。
それでは、あなたのウェブサイトを月まで打ち上げるのに役立つ、便利なWeb APIをいくつか見てみましょう！🌕🚀
1. スクリーンキャプチャAPI
その名の通り、スクリーンキャプチャAPIは画面の内容をキャプチャすることを可能にし、スクリーンレコーダーを作るプロセスを簡単にします。
キャプチャされた画面を表示するためにビデオ要素が必要です。スタートボタンでスクリーンキャプチャが開始します。
<video id="preview" autoplay>
お使いのブラウザはHTML5をサポートしていません。
</video>
<button id="start" class="btn">スタート</button>
フルスクリーンモードを出る
const previewElem = document.getElementById("preview");
const startBtn = document.getElementById("start");
async function startRecording() {
previewElem.srcObject =
await navigator.mediaDevices.getDisplayMedia({
video: true,
audio: true,
});
}
startBtn.addEventListener("click", startRecording);
フルスクリーンモードを出る
2. ウェブシェアAPI
ウェブシェアAPIは、テキスト、リンク、そしてファイルをウェブページからデバイスにインストールされた他のアプリに共有することを可能にします。
async function shareHandler() {
navigator.share({
title: "Tapajyoti Bose | ポートフォリオ",
text: "私のウェブサイトをチェックしてください",
url: "https://tapajyoti-bose.vercel.app/",
});
}
フルスクリーンモードを出る
注記: ウェブシェアAPIを使用するにはユーザーのインタラクションが必要です。例えば、ボタンをクリックすることやタッチイベントが必要です。
3. インターセクションオブザーバAPI
インターセクションオブザーバAPIは、要素がビューポートに入ったり出たりするのを検出するのに使えます。これは無限スクロールを実装するのに非常に便利です。
注記: デモでは私の個人的な好みによりReactを使用していますが、任意のフレームワークやバニラJavaScriptでも使用できます。
4. クリップボードAPI
クリップボードAPIは、クリップボードへの読み書きを可能にします。これは、クリップボードにコピーする機能を実装するのに有用です。
async function copyHandler() {
const text = "https://tapajyoti-bose.vercel.app/";
navigator.clipboard.writeText(text);
}
フルスクリーンモードを出る
5. スクリーンウェイクロックAPI
YouTubeがビデオ再生中に画面が消えないようにしているのは、スクリーンウェイクロックAPIのおかげです。
let wakeLock = null;
async function lockHandler() {
wakeLock = await navigator.wakeLock.request("screen");
}
async function releaseHandler() {
await wakeLock.release();
wakeLock = null;
}
フルスクリーンモードを出る
注記: スクリーンウェイクロックAPIは、ページがすでに画面に表示されている場合のみ使用することができます。それ以外の場合はエラーが発生します。
6. スクリーンオリエンテーションAPI
スクリーンオリエンテーションAPIは、現在の画面のオリエンテーションを確認したり、特定のオリエンテーションに固定することができます。
async function lockHandler() {
await screen.orientation.lock("portrait");
}
function releaseHandler() {
screen.orientation.unlock();
}
function getOrientation() {
return screen.orientation.type;
}
フルスクリーンモードを出る
7. フルスクリーンAPI
フルスクリーンAPIは、要素または全ページをフルスクリーンで表示することができます。
async function enterFullscreen() {
await document.documentElement.requestFullscreen();
}
async function exitFullscreen() {
await document.exitFullscreen();
}
フルスクリーンモードを出る
注記: フルスクリーンAPIもまた、使用するためにはユーザーのインタラクションが必要です。
個人ファイナンスが難しいと感じているあなたへ。私の Instagram をチェックして、Dollar Ninjaについてもっと知りましょう。
トップレートのフロントエンド開発フリーランサーを求めていますか？Upworkで連絡してください。
私が何に取り組んでいるか見たいですか？私の個人ウェブサイトとGitHubをチェックしてください。
LinkedInでつながりましょう。
私が最近何をしているか知りたいですか？私のInstagramをフォローしてください。
Devで、2週に1度の新しいヒントを提供するブログをフォローしてください。
よくある質問
いくつかのよくある質問をいただくことがあります。このFAQセクションがあなたの問題を解決することを願っています。
-
初心者ですが、フロントエンドウェブ開発をどう学ぶべきですか？
以下の記事を参照してください： -
あなたは私にメンターになってくれますか？
申し訳ありませんが、すでに多くの仕事を抱えており、誰かのメンターをする時間はありません。
こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/ruppysuppy/7-javascript-web-apis-to-build-futuristic-websites-you-didnt-know-38bc
