【GAS】APIを使って犬の画像を表示するWEBアプリを作る
今回は、APIを実際に使ってみようと思います。APIを扱うのは初めてなので、できるだけかんたんなAPIを使って画像を表示するWEBアプリを作ります。
Dog APIで画像を表示させるWEBアプリを作る
今回、使用させていただくAPIは以下のリンクです。犬の画像をランダムで表示してくれます。
Fetch!と書いてあるテキストボックスに入っているURLがエンドポイントになります。その下にあるボックス内に書かれている文字列がjsonとして受け取れる内容です。
https://dog.ceo/dog-api/json
エンドポイントにアクセスすると以下のレスポンスが得られます。GASで受け取るjsonの中身です。
{
"message": "https://images.dog.ceo/breeds/bulldog-boston/n02096585_6567.jpg",
"status": "success"
}GASでのFetch
GASでは以下のようにfetchを使うとReferenceErrorが出ます。
fetch('http://example.com/movies.json')
.then(response => response.json())
.then(data => console.log(data));GoogleのリファレンスではUrlFetchApp.fetch()を使いましょうとあるので、使います。
var dogjson = UrlFetchApp.fetch(dogUrl);
https://developers.google.com/apps-script/reference/url-fetc...JSON.parse()
jsonをGASで扱えるようにするために、jsonデータを解析します。
var data = JSON.parse(dogjson.getContentText());jsonデータからURLを取り出し
jsonデータからURLだけを取り出します。
var dogimgurl = data.message;HTMLで表示できるように書き込み
一応、URLを取り出せているか確認するために、dogimgをpタグで表示させていますが、なくてもいいです。
10行目ですが、「dogimg」にはURLの中身しか入っていないので、「'<img src="' + dogimg + '" >’」となりそうですが、これではうまく動作しません。
そこで、ダブルコーテーション「"」を文字列として認識させることで画像を表示させています。具体的には、「\」（￥か＼）を用いてエスケープしています。
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<?
var dogimg = fetchDogUrl();
output.append('<p>' + dogimg + '</p>');
output.append('<img src=\"' + dogimg + '\" >');
?>
</body>
</html>
https://developer.mozilla.org/ja/docs/Learn/JavaScript/First...GAS全体
値が代入されているかの確認のため、「console.log」がたくさん入っていますが、なくても動きます。
console.logをしておくと、変数の中に今どんな内容が入っているのかを確認できて便利です。jsonもどのように扱われているのかなんとなくわかります。うまく動作しない場合は活用していきましょう。
function doGet(){
var htmlTemplate = HtmlService.createTemplateFromFile('dog');
return htmlTemplate.evaluate();
}
function fetchDogUrl(){
const dogUrl ="https://dog.ceo/api/breeds/image/random";
var dogjson = UrlFetchApp.fetch(dogUrl);
console.log(dogjson);
var data = JSON.parse(dogjson.getContentText());
console.log(data);
console.log(data.message);
console.log(data.status);
var dogimgurl = data.message;
console.log(dogimgurl);
return dogimgurl;
}実行結果
ここで表示される画像は「Dog API」から取得しているので、毎回ランダムな画像が表示されます。画像のURLもその時々で変わるはずです。
以前作ったアプリを流用して作ったので、「HelloWorld」の文字列が入っていますが、今回のコードを使うと入らないはずです。
最後に
今回は、jsonを扱うのが初めてだったり、fetchのことでなかなか進みませんでしたが、無事に犬の画像を表示できてよかったです。次は、APIで取得した画像を使って、犬か猫の画像を選択できるアプリを作ろうと思います。
