質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Curl(プログラミング言語)

Curl(プログラミング言語)は、Webコンテンツ向けのプログラミング言語。HTMLのようなテキスト記述やレイアウトデザイン、JavaScript のようなオブジェクト指向プログラム言語、Java のような重量機能など複数の言語の特徴を一つのフレームワークに統合しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

解決済

javascriptでAPIを叩きたい

chiba_kun
chiba_kun

総合スコア16

Curl(プログラミング言語)

Curl(プログラミング言語)は、Webコンテンツ向けのプログラミング言語。HTMLのようなテキスト記述やレイアウトデザイン、JavaScript のようなオブジェクト指向プログラム言語、Java のような重量機能など複数の言語の特徴を一つのフレームワークに統合しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

1回答

0評価

2クリップ

6705閲覧

投稿2019/09/22 01:09

##実現したいこと

HTMLファイル内に書かれたscriptから、APIを叩いて、API返ってきたレスポンス結果をconsole.logで表示したいです。

叩きたいAPIはface++というAPIです。

##経緯

APIを使うと色々便利なことが出来ると知ったので、APIの使い方の勉強をつい最近始めました。

最初はPowerShellとcurlを使い、APIを叩いていたのですが、それ以外にもAPIを使う方法がないのかと考え、調べてみました。

すると、Javascriptでは、xmlhttprequestや、fetchと呼ばれるものを使えば、APIを叩けるということを知りました。

fecthの方がモダンな技術とのことだったので、fecthを使うことにしました。

「fecth API」と調べると、fetchを用いAPIを叩く解説をしているキータの記事がいくつか出てきました。

下記の参考にしている記事のコードの抜粋です。

参考元記事

const API_KEY = '${API_KEY}'; const CITY = 'Tokyo'; const URL = `http://api.openweathermap.org/data/2.5/forecast?q=${CITY},jp&units=metric&APPID=${API_KEY}`; fetch(URL) .then(res => { if(res.ok){ return res.json(); } else { throw new Error(); } }) .then(myJson => { console.log(JSON.stringify(myJson)); }) .catch(err => { console.log(err); })

fetch(リクエストURL)とすれば、APIを叩ける、意外とすんなりできそうだなと思ったのですが、疑問が発生しました。

リクエストパラメータの渡し方がよく分からないのです。

私が使おうとしている、face++は、リクエストURLの他に、3種類渡さなければいけないパラメータがあります。

api_keyとapi_secretと、image_urlというパラメータです。

参考元の記事のコードでは、渡したいパラメータを変数に代入し、リクエストURLの中に含ませているのがわかります

const URL = `http://api.openweathermap.org/data/2.5/forecast?q=${CITY},jp&units=metric&APPID=${API_KEY}`;

CITYとAPI_KEYの部分ですね。

私が使おうとしているface++のリクエストURLは

https://api-us.faceplusplus.com/facepp/v3/detect

なので

https://api-us.faceplusplus.com/facepp/v3/detect?api_key=<api_key>&api_secret=<api_Secret>&image_url=https://studio728.jp/wp-content/uploads/2016/02/id2.jpg

としましたが、リクエストURLの箇所がおかしいらしく、エラーが発生してしまいました。

※api_keyやapi_Secretは勿論意図的に隠しています。

エラー文は二つです。

一つはエラーコード400で、Face++の公式ドキュメントを参照すると、渡そうとしていた画像ファイルに問題があるとのこと。

しかし、curlでAPIを叩いてた時、ネットにある適当な画像のURLを渡してもJasonが毎回ちゃんと返ってきていました。

どうしてfetchでapiを叩くと、画像に問題があると出てくるのかよく分かりません。

イメージ説明

2つ目のエラーは

from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

というエラーでした。

##試してみたこと

face++の公式ドキュメントにサンプルリクエストがないかと思い、調べてみましたが、ありませんでした(curlでのサンプルリクエストしか書いてなかった)。

MDNのドキュメントを読み、fetchについて勉強をしていますが、まだ解決には至っていません。

MDN

##質問

APIを使おうとした上で、複数疑問が湧いたので、番号をつけ箇条書きをします。

①CORSについて

CORSとは同一オリジンポリシーに纏わる話ですよね。HTTP通信でface++に顔写真を渡すと、その結果がJasonでクライアントに返ってきます。この際にどうしてCORSの話になるかが分かりません。登場人物はface++とクライアントの二つだけです。それともリクエストURLの送り先とJasonを返すサーバーは違うのでしょうか?

②APIの利用方法

face++の公式ドキュメントには、curlを使った利用方法のサンプルしか載っていませんでした。

そこで疑問に思ったのですが、APIというのはcurlでしか叩けないだとか、javascriptからのhtpp通信は許さないとか、場合によってはそういう制限があるのでしょうか?

③私が書いたリクエストURLに間違いなどがあれば教えて欲しいです。
またエラーコード400が出る理由も分かれば、教えて欲しいです。

https://api-us.faceplusplus.com/facepp/v3/detect?api_key=<api_key>&api_secret=<api_Secret>&image_url=https://studio728.jp/wp-content/uploads/2016/02/id2.jpg

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

m.ts10806

2019/09/22 01:32

>Jason 細かいですがJSONです。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Curl(プログラミング言語)

Curl(プログラミング言語)は、Webコンテンツ向けのプログラミング言語。HTMLのようなテキスト記述やレイアウトデザイン、JavaScript のようなオブジェクト指向プログラム言語、Java のような重量機能など複数の言語の特徴を一つのフレームワークに統合しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。