diff options
Diffstat (limited to 'files/ja/learn/javascript/client-side_web_apis')
| -rw-r--r-- | files/ja/learn/javascript/client-side_web_apis/index.html | 18 | ||||
| -rw-r--r-- | files/ja/learn/javascript/client-side_web_apis/introduction/index.html | 32 |
2 files changed, 25 insertions, 25 deletions
diff --git a/files/ja/learn/javascript/client-side_web_apis/index.html b/files/ja/learn/javascript/client-side_web_apis/index.html index 2335c02956..f0d4f7740e 100644 --- a/files/ja/learn/javascript/client-side_web_apis/index.html +++ b/files/ja/learn/javascript/client-side_web_apis/index.html @@ -19,11 +19,11 @@ translation_of: Learn/JavaScript/Client-side_web_APIs --- <div>{{LearnSidebar}}</div> -<p class="summary">Web サイトやアプリケーション用にクライアント側のJavaScriptを書いていると、すぐに<strong>アプリケーションプログラミングインターフェース </strong>(<u>A</u>pprication <u>P</u>rogramming <u>I</u>nterfaces、<strong>API</strong>) にでくわします。API とはブラウザやサイトが動作している OS の様々な面を操作したり、他の Web サイト、サービスから取得したデータを操作するためのプログラムされた機能です。このモジュールでは API とは何か、開発作業の中でよく見かける最もよく利用される API のいくつかについて、どのように使うかを説明していきます。</p> +<p class="summary">Web サイトやアプリケーション用にクライアント側の JavaScript を書いていると、すぐに<strong>アプリケーションプログラミングインターフェース </strong>(<u>A</u>pprication <u>P</u>rogramming <u>I</u>nterfaces、<strong>API</strong>) にでくわします。API とはブラウザやサイトが動作している OS の様々な面を操作したり、他の Web サイト、サービスから取得したデータを操作するためのプログラムされた機能です。このモジュールでは API とは何か、開発作業の中でよく見かける最もよく利用される API のいくつかについて、どのように使うかを説明していきます。</p> <h2 id="前提条件">前提条件</h2> -<p>このモジュールをよく理解するためには、ここまでの一連のJavaScriptに関するモジュール (<a href="/ja/docs/Learn/JavaScript/First_steps">First steps</a>, <a href="/ja/docs/Learn/JavaScript/Building_blocks">Building blocks</a> と <a href="/ja/docs/Learn/JavaScript/Objects">JavaScript objects</a>) の学習をすませているべきです。これらのモジュールでは大抵簡単な API を使っていますが、その助けなしにクライアント側の JavaScript を書き上げるのは難しいからです。このチュートリアルの中では、JavaScript 言語のコア部分については十分理解しているものとして、よく使われる Web API についてもう少し詳しく探っていきます。</p> +<p>このモジュールをよく理解するためには、ここまでの一連の JavaScript に関するモジュール (<a href="/ja/docs/Learn/JavaScript/First_steps">First steps</a>, <a href="/ja/docs/Learn/JavaScript/Building_blocks">Building blocks</a> と <a href="/ja/docs/Learn/JavaScript/Objects">JavaScript objects</a>) の学習をすませているべきです。これらのモジュールでは大抵簡単な API を使っていますが、その助けなしにクライアント側の JavaScript を書き上げるのは難しいからです。このチュートリアルの中では、JavaScript 言語のコア部分については十分理解しているものとして、よく使われる Web API についてもう少し詳しく探っていきます。</p> <p><a href="/ja/docs/Learn/HTML">HTML</a> と <a href="/ja/docs/Learn/CSS">CSS</a> に関する基礎知識も役に立つでしょう。</p> @@ -35,17 +35,17 @@ translation_of: Learn/JavaScript/Client-side_web_APIs <dl> <dt><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Web API の紹介</a></dt> - <dd>まずはAPIを高い視点から見ていきます — これは何なのか、どう働くのか、あなたのコードでどう使うのか、どういう風に作られているのか? また様々なクラスのAPIが何なのか、どんな使い方があるのかも見ていきます。</dd> + <dd>まずは API を高い視点から見ていきます — これは何なのか、どう働くのか、あなたのコードでどう使うのか、どういう風に作られているのか? また様々なクラスの API が何なのか、どんな使い方があるのかも見ていきます。</dd> <dt><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">文章の操作</a></dt> - <dd>Webページやアプリを書く場合に、最も多く必要になるのはWeb文書をどうかして操作する事でしょう。これは普通ドキュメントオブジェクトモデル(<u>D</u>ocument <u>O</u>bject <u>M</u>odel、DOM)、これはHTMLとスタイルに関する情報を{{domxref("Document")}}オブジェクトを使いまくって操作するための一連のAPIです、を用いて行ないます。この記事では、DOMの使い方を詳しく見ながら、面白い方法であなたの環境を変える事ができる興味深い他のAPIもいくつか見ていきます。</dd> + <dd>Web ページやアプリを書く場合に、最も多く必要になるのは Web 文書をどうかして操作する事でしょう。これは普通ドキュメントオブジェクトモデル(<u>D</u>ocument <u>O</u>bject <u>M</u>odel、DOM)、これは HTML とスタイルに関する情報を {{domxref("Document")}} オブジェクトを使いまくって操作するための一連の API です、を用いて行ないます。この記事では、DOM の使い方を詳しく見ながら、面白い方法であなたの環境を変える事ができる興味深い他の API もいくつか見ていきます。</dd> <dt><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">サーバからのデータ取得</a></dt> - <dd>また別に、モダンなWebサイトやアプリケーションでしょっちゅう必要になるのは、サーバから個々のデータを取ってきて、新しいページ全体を読んでくることなしに、ページの一部を書き換える事です。この一見ちょっとした事が、サイトのパフォーマンスや振舞いに巨大なインパクトを与えました。この記事ではそのコンセプトを解説し、これを可能にした技術{{domxref("XMLHttpRequest")}}と<a href="/ja/docs/Web/API/Fetch_API">Fetch API</a>について見ていきます。</dd> + <dd>また別に、モダンな Web サイトやアプリケーションでしょっちゅう必要になるのは、サーバから個々のデータを取ってきて、新しいページ全体を読んでくることなしに、ページの一部を書き換える事です。この一見ちょっとした事が、サイトのパフォーマンスや振舞いに巨大なインパクトを与えました。この記事ではそのコンセプトを解説し、これを可能にした技術 {{domxref("XMLHttpRequest")}} と <a href="/ja/docs/Web/API/Fetch_API">Fetch API</a> について見ていきます。</dd> <dt><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">サードパーティ API</a></dt> - <dd>これまでに説明したAPIはブラウザに組込まれていますが、全てのAPIが組込まれているのではありません。グーグルマップやTwitter、Facebook、ペイパルなど、多くの巨大なWebサイトやサービスが、開発者に対して彼らのデータを利用したり(例:あなたのブログにtwitterのタイムラインを表示させる)、サービスを利用したり(例:あなたのサイトに独自のグーグルマップを表示したり、あなたのサービス利用者にFacebookでログインできたり)するためのAPIを提供しています。この記事ではブラウザAPIとサードパーティAPIの違いを見ていき、典型的な後者の使い方をお見せします。</dd> + <dd>これまでに説明した API はブラウザに組込まれていますが、全ての API が組込まれているのではありません。グーグルマップや Twitter、Facebook、ペイパルなど、多くの巨大な Web サイトやサービスが、開発者に対して彼らのデータを利用したり(例:あなたのブログに twitter のタイムラインを表示させる)、サービスを利用したり(例:あなたのサイトに独自のグーグルマップを表示したり、あなたのサービス利用者に Facebook でログインできたり)するための API を提供しています。この記事ではブラウザ API とサードパーティ API の違いを見ていき、典型的な後者の使い方をお見せします。</dd> <dt><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">絵を描く</a></dt> - <dd>ブラウザにはグラフィックを描くためのとても強力なツールがいくつか組込まれています。<a href="/ja/docs/Web/SVG">SVG</a>(Scalable Vector Graphics)言語から、HTMLの{{htmlelement("canvas")}}キャンバス要素に描画するためのAPIまで (<a href="/ja/docs/Web/API/Canvas_API">キャンバスAPI</a> や <a href="/ja/docs/Web/API/WebGL_API">WebGL</a>を参照)。 この記事ではキャンバスAPIへの導入を説明し、もっと深く学習していくためのリソースをご紹介します。</dd> + <dd>ブラウザにはグラフィックを描くためのとても強力なツールがいくつか組込まれています。<a href="/ja/docs/Web/SVG">SVG</a>(Scalable Vector Graphics) 言語から、HTML の {{htmlelement("canvas")}} キャンバス要素に描画するための API まで (<a href="/ja/docs/Web/API/Canvas_API">キャンバス API </a> や <a href="/ja/docs/Web/API/WebGL_API">WebGL</a>を参照)。 この記事ではキャンバス API への導入を説明し、もっと深く学習していくためのリソースをご紹介します。</dd> <dt><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">動画と音声の API</a></dt> - <dd>HTML5には文書にリッチなメディアを埋め込むための要素が備わっています — {{htmlelement("video")}} と {{htmlelement("audio")}} — それぞれに再生やシークなどの操作するための独自APIを備えています。この記事では独自の再生操作パネルを作成するような、よくある仕事をどうやればいいのかお見せします。</dd> + <dd>HTML5 には文書にリッチなメディアを埋め込むための要素が備わっています — {{htmlelement("video")}} と {{htmlelement("audio")}} — それぞれに再生やシークなどの操作するための独自 API を備えています。この記事では独自の再生操作パネルを作成するような、よくある仕事をどうやればいいのかお見せします。</dd> <dt><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">クライアント側でのデータ保存</a></dt> - <dd>モダンなブラウザには、Webサイトに関するデータを保存し必要なときに取り出すための様々に異なる技術が実装されており、これを使ってデータを長期間保存したり、サイトをオフラインに保存したりなどなどができます。この記事ではこれらがいかに動作するのか、その基本の基本について説明します。</dd> + <dd>モダンなブラウザには、Web サイトに関するデータを保存し必要なときに取り出すための様々に異なる技術が実装されており、これを使ってデータを長期間保存したり、サイトをオフラインに保存したりなどなどができます。この記事ではこれらがいかに動作するのか、その基本の基本について説明します。</dd> </dl> diff --git a/files/ja/learn/javascript/client-side_web_apis/introduction/index.html b/files/ja/learn/javascript/client-side_web_apis/introduction/index.html index 52f5fc8777..d47da81e1d 100644 --- a/files/ja/learn/javascript/client-side_web_apis/introduction/index.html +++ b/files/ja/learn/javascript/client-side_web_apis/introduction/index.html @@ -18,13 +18,13 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction <div>{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}</div> -<p class="summary">まずはAPIを高い視点から見ていきます — これは何なのか、どう働くのか、あなたのコードでどう使うのか、どういう風に作られているのか? また様々なクラスのAPIは何なのか、どのような使い方があるのかも見ていきます。</p> +<p class="summary">まずは API を高い視点から見ていきます — これは何なのか、どう働くのか、あなたのコードでどう使うのか、どういう風に作られているのか? また様々なクラスの API は何なのか、どのような使い方があるのかも見ていきます。</p> <table class="learn-box standard-table"> <tbody> <tr> <th scope="row">前提条件:</th> - <td>基本的なコンピューターの知識および利用能力、<a href="/ja/docs/Learn/HTML">HTML</a> と <a href="/ja/docs/Learn/CSS">CSS</a> の基本的な理解、JavaScript の基本 (<a href="/ja/docs/Learn/JavaScript/First_steps">第一歩</a>、<a href="/ja/docs/Learn/JavaScript/Building_blocks">構成要素</a>, <a href="/ja/docs/Learn/JavaScript/Objects">JavaScriptオブジェクト</a>).</td> + <td>基本的なコンピューターの知識および利用能力、<a href="/ja/docs/Learn/HTML">HTML</a> と <a href="/ja/docs/Learn/CSS">CSS</a> の基本的な理解、JavaScript の基本 (<a href="/ja/docs/Learn/JavaScript/First_steps">第一歩</a>、<a href="/ja/docs/Learn/JavaScript/Building_blocks">構成要素</a>, <a href="/ja/docs/Learn/JavaScript/Objects">JavaScript オブジェクト</a>).</td> </tr> <tr> <th scope="row">目的:</th> @@ -46,7 +46,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction <p>それと同じことで、そうですね、例えば3次元グラフィックのプログラムを JavaScript や Python のような高レベル言語で書かれた API を使ってやる方が、C や C++ のような低レベル言語から直接コンピューターの GPU やグラフィック機能を叩いてやるよりも、ずっと簡単です。</p> <div class="note"> -<p><strong>注記</strong>: API という語についてもっと詳しいことは <a href="/ja/docs/Glossary/API">APIの用語解説</a> を参照して下さい。</p> +<p><strong>注記</strong>: API という語についてもっと詳しいことは <a href="/ja/docs/Glossary/API">API の用語解説</a> を参照して下さい。</p> </div> <h3 id="クライアントサイド_JavaScript_での_API">クライアントサイド JavaScript での API</h3> @@ -89,13 +89,13 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction <ul> <li>ブラウザーで読み込んだ<strong>文書を操作するための API</strong>。一番目にする例は <a href="/ja/docs/Web/API/Document_Object_Model">DOM (Document Object Model) API</a> で、 HTML と CSS を操作できます — HTML を作成したり削除したり書き換えたり、動的に新しいスタイルをページに適用したり、などなど。例えばページにポップアップウィンドウが表われたり、何か新しい中身が表示されたりする時、DOM が使われています。この種の API については<a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#the_document_object_model">ドキュメントの操作</a>でもっといろいろ見られます。</li> <li><strong>サーバからデータ取得をする API</strong> で Web ページの一部を書き換える事はとてもよく行なわれます。この一見ちょっとした事が、サイトのパフォーマンスや振舞いに巨大なインパクトを与えました — 在庫一覧や新しいお話一覧を書き換えたい時に、サーバからページ全体をリロードする事なしにさくっとできたら、サイトやアプリはずっと反応よく素早く感じられます。これを可能にした API には <a href="/ja/docs/Web/API/XMLHttpRequest" title="XMLHttpRequest is an API that provides client functionality for transferring data between a client and a server. It provides an easy way to retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just a part of the page without disrupting what the user is doing."><code>XMLHttpRequest</code></a> と <a href="/ja/docs/Web/API/Fetch_API">Fetch API</a> が含まれています。<strong>Ajax</strong> という言葉を聞いた事があるかもしれませんが、これがこのテクニックの呼び名です。これらの API について <a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">サーバからのデータ取得</a>でもっといろいろ見られます。</li> - <li><strong>グラフィックスを描画したり操作する API</strong> は多くのブラウザーがサポートしています — 最も知られているものには<a href="/ja/docs/Web/API/Canvas_API"> Canvas</a> と <a href="/ja/docs/Web/API/WebGL_API">WebGL</a> があり、HTML の{{htmlelement("canvas")}} 要素上にあるピクセルデータを書き換えて2次元や3次元のシーンを作成するのに使えます。例えばキャンバスAPIを使って長方形や円のような形を描いたり、キャンバスに画像を読み込んだり、セピアやグレイスケールといったフィルターを適用したり、あるいは WebGL を使ってライティングやテクスチャを使った3Dシーンを作成したりできます。これらの API はよくアニメーションループを作成するAPI({{domxref("window.requestAnimationFrame()")}} など)や他のものと組み合わせて使われ、アニメやゲームのようなものの表示を定期的に書き換えるようにします。</li> - <li><strong><a href="/ja/docs/Web/Guide/Audio_and_video_delivery">動画と音声の API</a></strong> {{domxref("HTMLMediaElement")}}や <a href="/ja/docs/Web/API/Web_Audio_API">Web Audio API</a> や <a href="/ja/docs/Web/API/WebRTC_API">WebRTC</a> のような API を使うと、 マルチメディアを使ってとても面白い事ができます。音声や動画再生のための独自のコントロールUIの作成、字幕やサブタイトルのような音声トラックをビデオと一緒に表示したり、Web カメラの画像を取り込んで操作し、上述のキャンバスに表示したり Web カンファレンスに参加している他の誰かのコンピューター上に表示したり、音声トラックにイフェクト(ゲイン、ディストーション、音場効果など)をかけたりできます。</li> + <li><strong>グラフィックスを描画したり操作する API</strong> は多くのブラウザーがサポートしています — 最も知られているものには<a href="/ja/docs/Web/API/Canvas_API"> Canvas</a> と <a href="/ja/docs/Web/API/WebGL_API">WebGL</a> があり、HTML の {{htmlelement("canvas")}} 要素上にあるピクセルデータを書き換えて2次元や3次元のシーンを作成するのに使えます。例えばキャンバス API を使って長方形や円のような形を描いたり、キャンバスに画像を読み込んだり、セピアやグレイスケールといったフィルターを適用したり、あるいは WebGL を使ってライティングやテクスチャを使った3Dシーンを作成したりできます。これらの API はよくアニメーションループを作成する API ({{domxref("window.requestAnimationFrame()")}} など)や他のものと組み合わせて使われ、アニメやゲームのようなものの表示を定期的に書き換えるようにします。</li> + <li><strong><a href="/ja/docs/Web/Guide/Audio_and_video_delivery">動画と音声の API</a></strong> {{domxref("HTMLMediaElement")}} や <a href="/ja/docs/Web/API/Web_Audio_API">Web Audio API</a> や <a href="/ja/docs/Web/API/WebRTC_API">WebRTC</a> のような API を使うと、 マルチメディアを使ってとても面白い事ができます。音声や動画再生のための独自のコントロールUIの作成、字幕やサブタイトルのような音声トラックをビデオと一緒に表示したり、Web カメラの画像を取り込んで操作し、上述のキャンバスに表示したり Web カンファレンスに参加している他の誰かのコンピューター上に表示したり、音声トラックにイフェクト(ゲイン、ディストーション、音場効果など)をかけたりできます。</li> <li><strong>デバイス API</strong> は基本的に Web アプリで使えるような形で、今時のハードウェアデバイスのデータを操作したり取得する API です。デバイスの位置データにアクセスして地図上にあなたの居場所を書くような位置情報 API についてはすでにお話しました。他の例にはシステム通知を使って Web アプリに役に立つアップデートがあるのを知らせたり(<a href="/ja/docs/Web/API/Notifications_API">Notifications API</a> を参照)、ハードウェアを振動させたり(<a href="/ja/docs/Web/API/Vibration_API">Vibration API</a> を参照)などがあります。</li> <li><strong>クライアント側でのデータ保持 API </strong>は今多くのブラウザーに普及しつつあります。— クライアント側にデータを保存できると、ページを移動しても状態を保存したり、たとえデバイスがオフラインでも動作するようなアプリを作成したいような場合、とても役に立ちます。いくつもの選択肢があり、例えば <a href="/ja/docs/Web/API/Web_Storage_API">Web Storage API</a> を使ったキーバリューストアや、 <a href="/ja/docs/Web/API/IndexedDB_API">IndexedDB API</a> を使ったもっと複雑なテーブル型データ保存などです。</li> </ul> -<h3 id="一般的なサードパーティAPI">一般的なサードパーティAPI</h3> +<h3 id="一般的なサードパーティAPI">一般的なサードパーティ API</h3> <p>サードパーティ API はバラエティーに富んでいます。あなたが遅かれ早かれ使うようになりそうな、世間でよく使われているものには以下のようなものがあります:</p> @@ -104,19 +104,19 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction <li><a href="https://developer.mapquest.com/">Mapquest</a> や <a href="https://developers.google.com/maps/">Google Maps API</a> のような地図の API は、あなたのWebページ上に地図を使ったあらゆる事を可能にします。</li> <li><a href="https://developers.facebook.com/docs/">Facebook APIスイート</a>によって Facebook エコシステムの様々な部品を使ってあなたのアプリを強化できます。例えばアプリへのログインを Facebook のログインで行なったり、アプリ内での支払い、ターゲット広告を出したりなどです。</li> <li><a href="https://core.telegram.org/api">Telegram APIs</a> を使用すると、ボットのサポートに加えて、Telegram チャネルのコンテンツを Web サイトに埋め込むことができます。</li> - <li><a href="https://developers.google.com/youtube/">YouTube API</a>を使ってあなたのサイトに YouTube のビデオを埋め込んだり、YouTube を検索したり、プレイリストを作成したりなどなどできます。</li> + <li><a href="https://developers.google.com/youtube/">YouTube API</a> を使ってあなたのサイトに YouTube のビデオを埋め込んだり、YouTube を検索したり、プレイリストを作成したりなどなどできます。</li> <li><a href="https://developers.pinterest.com/">Pinterest API</a> は、Pinterest のボードとピンを管理して Web サイトに含めるためのツールを提供します。</li> <li><a href="https://www.twilio.com/">Twilio API</a>はあなたのアプリで音声・ビデオ電話の機能を作成したり、SMS/MMSを送信したりなどするためのフレームワークを提供します。</li> <li><a href="https://docs.joinmastodon.org/api/">Mastodon API</a> を使用すると、Mastodon ソーシャルネットワークの機能をプログラムで操作できます。</li> </ul> <div class="note"> -<p><strong>注記</strong>: サードパーティAPIについては <a href="http://www.programmableweb.com/category/all/apis">Programmable Web API directory</a>でもっと多くの情報を見られます。</p> +<p><strong>注記</strong>: サードパーティ API については <a href="http://www.programmableweb.com/category/all/apis">Programmable Web API directory</a> でもっと多くの情報を見られます。</p> </div> -<h2 id="APIはどのように動作する">APIはどのように動作する?</h2> +<h2 id="APIはどのように動作する">API はどのように動作する?</h2> -<p>異なるJavaScript APIはそれぞれに違う方法で動作しますが、普通は、共通した機能とどのように動くべきかの類似したテーマを持ちます。</p> +<p>異なる JavaScript APIはそれぞれに違う方法で動作しますが、普通は、共通した機能とどのように動くべきかの類似したテーマを持ちます。</p> <h3 id="オブジェクトに基づいています">オブジェクトに基づいています</h3> @@ -207,21 +207,21 @@ volumeSlider.addEventListener('input', function() { <h3 id="認識できる入口があります">認識できる入口があります</h3> -<p>APIを使うときは、その API の入口がどこなのかしっかり確認するべきです。Web Audio APIではとても単純でした — それは {{domxref("AudioContext")}} オブジェクトであり、あらゆる音声操作を行うために使用する必要があります。</p> +<p>API を使うときは、その API の入口がどこなのかしっかり確認するべきです。Web Audio API ではとても単純でした — それは {{domxref("AudioContext")}} オブジェクトであり、あらゆる音声操作を行うために使用する必要があります。</p> -<p>Document Object Model (DOM) API でも単純な入口があります — これの機能は{{domxref("Document")}} もしくは何らかの方法で影響を与えたい HTML 要素のインスタンスにぶらさがっている場合が多く、例えば:</p> +<p>Document Object Model (DOM) API でも単純な入口があります — これの機能は {{domxref("Document")}} もしくは何らかの方法で影響を与えたい HTML 要素のインスタンスにぶらさがっている場合が多く、例えば:</p> <pre class="brush: js notranslate">const em = document.createElement('em'); // create a new em element const para = document.querySelector('p'); // reference an existing p element em.textContent = 'Hello there!'; // give em some text content para.appendChild(em); // embed em inside para</pre> -<p><a href="/ja/docs/Web/API/Canvas_API">Canvas API</a> は、諸々を操作するために使用するコンテキストオブジェクトの取得にも依存していますが、この場合は、音声コンテキストではなく描画コンテキストです。そのコンテキストオブジェクトは、描画をしたい {{htmlelement("canvas")}} 要素への参照を取得して、 これの{{domxref("HTMLCanvasElement.getContext()")}} メソッドを呼ぶと作成されます:</p> +<p><a href="/ja/docs/Web/API/Canvas_API">Canvas API</a> は、諸々を操作するために使用するコンテキストオブジェクトの取得にも依存していますが、この場合は、音声コンテキストではなく描画コンテキストです。そのコンテキストオブジェクトは、描画をしたい {{htmlelement("canvas")}} 要素への参照を取得して、 これの {{domxref("HTMLCanvasElement.getContext()")}} メソッドを呼ぶと作成されます:</p> <pre class="brush: js notranslate">const canvas = document.querySelector('canvas'); const ctx = canvas.getContext('2d');</pre> -<p>キャンバスを使って何かやろうとする場合は何でも、コンテキストオブジェクト (これは{{domxref("CanvasRenderingContext2D")}} のインスタンスです) のプロパティやメソッドを呼んで行ないます。例えば:</p> +<p>キャンバスを使って何かやろうとする場合は何でも、コンテキストオブジェクト (これは {{domxref("CanvasRenderingContext2D")}} のインスタンスです) のプロパティやメソッドを呼んで行ないます。例えば:</p> <pre class="brush: js notranslate">Ball.prototype.draw = function() { ctx.beginPath(); @@ -238,7 +238,7 @@ const ctx = canvas.getContext('2d');</pre> <p>すでに学習コース中でイベントについてはお話しています、<a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの紹介</a> — この記事でクライアント側 Web イベントとは何か、コードの中でどのように使えるのか詳しく見てきました。もしまだクライアント側 WebAPI の仕組みがよくわからいなら、この先に進む前に記事を読み直しておく方が良いでしょう。</p> -<p>イベントを持たないWebAPIもありますが、ほとんどの WebAPI はいくつか持っています。イベントが発火した際に関数を実行できるイベントハンドラーのプロパティについては、リファレンス記事の独立した"イベントハンドラー"セクションとしておおよそ列挙されています。</p> +<p>イベントを持たない WebAPI もありますが、ほとんどの WebAPI はいくつか持っています。イベントが発火した際に関数を実行できるイベントハンドラーのプロパティについては、リファレンス記事の独立した"イベントハンドラー"セクションとしておおよそ列挙されています。</p> <p class="simple-translate-result" style="color: rgb(0, 0, 0);">上記の Web Audio API の例では、すでにいくつかのイベントハンドラーが使用されています。</p> @@ -270,7 +270,7 @@ request.onload = function() { <p>WebAPI 機能は JavaScript や他の Web 技術と同等のセキュリティ上の配慮が必要です (例えば <a href="/ja/docs/Web/Security/Same-origin_policy">same-origin ポリシー</a>) が、追加のセキュリティ機構が必要な場合もあります。例として今時の WebAPI の中には HTTPS で配信されるページ上でしか動かないものがあり、これは機密とすべきデータをやりとりする可能性があるためです (<a href="/ja/docs/Web/API/Service_Worker_API">ServiceWorkers</a> や <a href="/ja/docs/Web/API/Push_API">Push</a> など)。</p> -<p>さらには、ある種のWebAPIへの呼び出しがあなたのコードにあると、ユーザに対してそれの許可を要求します。例えば、<a href="/ja/docs/Web/API/Notifications_API">Notifications API (通知 API)</a> はポップアップのダイアログボックスを用いて許可を要求します:</p> +<p>さらには、ある種の WebAPI への呼び出しがあなたのコードにあると、ユーザに対してそれの許可を要求します。例えば、<a href="/ja/docs/Web/API/Notifications_API">Notifications API (通知 API)</a> はポップアップのダイアログボックスを用いて許可を要求します:</p> <p><img alt="" src="notification-permission.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> |