From d132914ab964aec5d9394d7e11725ef5d1ce339d Mon Sep 17 00:00:00 2001 From: atyamash Date: Sat, 5 Mar 2022 17:12:02 +0900 Subject: learn/javascript/client-side_web_apis/introduction の英単語の前後に半角空白を追加 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../client-side_web_apis/introduction/index.html | 32 +++++++++++----------- 1 file changed, 16 insertions(+), 16 deletions(-) (limited to 'files/ja') 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 51db397a58..20ff345db3 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
{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}
-

まずはAPIを高い視点から見ていきます — これは何なのか、どう働くのか、あなたのコードでどう使うのか、どういう風に作られているのか? また様々なクラスのAPIは何なのか、どのような使い方があるのかも見ていきます。

+

まずは API を高い視点から見ていきます — これは何なのか、どう働くのか、あなたのコードでどう使うのか、どういう風に作られているのか? また様々なクラスの API は何なのか、どのような使い方があるのかも見ていきます。

- + @@ -46,7 +46,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction

それと同じことで、そうですね、例えば3次元グラフィックのプログラムを JavaScript や Python のような高レベル言語で書かれた API を使ってやる方が、C や C++ のような低レベル言語から直接コンピューターの GPU やグラフィック機能を叩いてやるよりも、ずっと簡単です。

-

注記: API という語についてもっと詳しいことは APIの用語解説 を参照して下さい。

+

注記: API という語についてもっと詳しいことは API の用語解説 を参照して下さい。

クライアントサイド JavaScript での API

@@ -89,13 +89,13 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction -

一般的なサードパーティAPI

+

一般的なサードパーティ API

サードパーティ API はバラエティーに富んでいます。あなたが遅かれ早かれ使うようになりそうな、世間でよく使われているものには以下のようなものがあります:

@@ -104,19 +104,19 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction
  • Mapquest や Google Maps API のような地図の API は、あなたのWebページ上に地図を使ったあらゆる事を可能にします。
  • Facebook APIスイートによって Facebook エコシステムの様々な部品を使ってあなたのアプリを強化できます。例えばアプリへのログインを Facebook のログインで行なったり、アプリ内での支払い、ターゲット広告を出したりなどです。
  • Telegram APIs  を使用すると、ボットのサポートに加えて、Telegram チャネルのコンテンツを Web サイトに埋め込むことができます。
    • -
  • YouTube APIを使ってあなたのサイトに YouTube のビデオを埋め込んだり、YouTube を検索したり、プレイリストを作成したりなどなどできます。
    • +
  • YouTube API を使ってあなたのサイトに YouTube のビデオを埋め込んだり、YouTube を検索したり、プレイリストを作成したりなどなどできます。
  • Pinterest API は、Pinterest のボードとピンを管理して Web サイトに含めるためのツールを提供します。
  • Twilio APIはあなたのアプリで音声・ビデオ電話の機能を作成したり、SMS/MMSを送信したりなどするためのフレームワークを提供します。
  • Mastodon API を使用すると、Mastodon ソーシャルネットワークの機能をプログラムで操作できます。
    • -

    注記: サードパーティAPIについては Programmable Web API directoryでもっと多くの情報を見られます。

    +

    注記: サードパーティ API については Programmable Web API directory でもっと多くの情報を見られます。

    -

    APIはどのように動作する?

    +

    API はどのように動作する?

    -

    異なるJavaScript APIはそれぞれに違う方法で動作しますが、普通は、共通した機能とどのように動くべきかの類似したテーマを持ちます。

    +

    異なる JavaScript APIはそれぞれに違う方法で動作しますが、普通は、共通した機能とどのように動くべきかの類似したテーマを持ちます。

    オブジェクトに基づいています

    @@ -207,21 +207,21 @@ volumeSlider.addEventListener('input', function() {

    認識できる入口があります

    -

    APIを使うときは、その API の入口がどこなのかしっかり確認するべきです。Web Audio APIではとても単純でした — それは {{domxref("AudioContext")}} オブジェクトであり、あらゆる音声操作を行うために使用する必要があります。

    +

    API を使うときは、その API の入口がどこなのかしっかり確認するべきです。Web Audio API ではとても単純でした — それは {{domxref("AudioContext")}} オブジェクトであり、あらゆる音声操作を行うために使用する必要があります。

    -

    Document Object Model (DOM) API でも単純な入口があります — これの機能は{{domxref("Document")}} もしくは何らかの方法で影響を与えたい いHTML 要素のインスタンスにぶらさがっている場合が多く、例えば:

    +

    Document Object Model (DOM) API でも単純な入口があります — これの機能は {{domxref("Document")}} もしくは何らかの方法で影響を与えたい HTML 要素のインスタンスにぶらさがっている場合が多く、例えば:

    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
    -

    Canvas API は、諸々を操作するために使用するコンテキストオブジェクトの取得にも依存していますが、この場合は、音声コンテキストではなく描画コンテキストです。そのコンテキストオブジェクトは、描画をしたい {{htmlelement("canvas")}} 要素への参照を取得して、 これの{{domxref("HTMLCanvasElement.getContext()")}} メソッドを呼ぶと作成されます:

    +

    Canvas API は、諸々を操作するために使用するコンテキストオブジェクトの取得にも依存していますが、この場合は、音声コンテキストではなく描画コンテキストです。そのコンテキストオブジェクトは、描画をしたい {{htmlelement("canvas")}} 要素への参照を取得して、 これの {{domxref("HTMLCanvasElement.getContext()")}} メソッドを呼ぶと作成されます:

    const canvas = document.querySelector('canvas');
 const ctx = canvas.getContext('2d');
    -

    キャンバスを使って何かやろうとする場合は何でも、コンテキストオブジェクト (これは{{domxref("CanvasRenderingContext2D")}} のインスタンスです) のプロパティやメソッドを呼んで行ないます。例えば:

    +

    キャンバスを使って何かやろうとする場合は何でも、コンテキストオブジェクト (これは {{domxref("CanvasRenderingContext2D")}} のインスタンスです) のプロパティやメソッドを呼んで行ないます。例えば:

    Ball.prototype.draw = function() {
   ctx.beginPath();
@@ -238,7 +238,7 @@ const ctx = canvas.getContext('2d');

    すでに学習コース中でイベントについてはお話しています、イベントの紹介 — この記事でクライアント側 Web イベントとは何か、コードの中でどのように使えるのか詳しく見てきました。もしまだクライアント側 WebAPI の仕組みがよくわからいなら、この先に進む前に記事を読み直しておく方が良いでしょう。

    -

    イベントを持たないWebAPIもありますが、ほとんどの WebAPI はいくつか持っています。イベントが発火した際に関数を実行できるイベントハンドラーのプロパティについては、リファレンス記事の独立した"イベントハンドラー"セクションとしておおよそ列挙されています。

    +

    イベントを持たない WebAPI もありますが、ほとんどの WebAPI はいくつか持っています。イベントが発火した際に関数を実行できるイベントハンドラーのプロパティについては、リファレンス記事の独立した"イベントハンドラー"セクションとしておおよそ列挙されています。

    上記の Web Audio API の例では、すでにいくつかのイベントハンドラーが使用されています。

    @@ -270,7 +270,7 @@ request.onload = function() {

    WebAPI 機能は JavaScript や他の Web 技術と同等のセキュリティ上の配慮が必要です (例えば same-origin ポリシー) が、追加のセキュリティ機構が必要な場合もあります。例として今時の WebAPI の中に はHTTPS で配信されるページ上でしか動かないものがあり、これは機密とすべきデータをやりとりする可能性があるためです (ServiceWorkers や Push など)。

    -

    さらには、ある種のWebAPIへの呼び出しがあなたのコードにあると、ユーザに対してそれの許可を要求します。例えば、Notifications API (通知 API) はポップアップのダイアログボックスを用いて許可を要求します:

    +

    さらには、ある種の WebAPI への呼び出しがあなたのコードにあると、ユーザに対してそれの許可を要求します。例えば、Notifications API (通知 API) はポップアップのダイアログボックスを用いて許可を要求します:

    -- cgit v1.2.3-54-g00ecf
    前提条件:基本的なコンピューターの知識および利用能力、HTML と CSS の基本的な理解、JavaScript の基本 (第一歩、構成要素, JavaScriptオブジェクト).基本的なコンピューターの知識および利用能力、HTML と CSS の基本的な理解、JavaScript の基本 (第一歩、構成要素, JavaScript オブジェクト).
    目的: