API情報を取得し、複数表示したいです

API情報を取得し表示したいです!

■サイトのAPIを、AdaloのExternal Collectionsで設定

■以下の情報を取得できました。
{
“result”: [
{
“rule”: “ナワバリバトル”,
“rule_ex”: {
“key”: “turf_war”,
“name”: “ナワバリバトル”,
“statink”: “nawabari”
},
“maps”: [
“海女美術大学”,
“エンガワ河川敷”
],
“maps_ex”: [
{
“id”: 4,
“name”: “海女美術大学”,
“image”: “https://app.splatoon2.nintendo.net/images/stage/5c030a505ee57c889d3e5268a4b10c1f1f37880a.png”,
“statink”: “ama”
},
{
“id”: 9,
“name”: “エンガワ河川敷”,
“image”: “https://app.splatoon2.nintendo.net/images/stage/8c95053b3043e163cbfaaf1ec1e5f3eb770e5e07.png”,
“statink”: “engawa”
}
],
“start”: “2021-12-31T09:00:00”,
“start_utc”: “2021-12-31T00:00:00+00:00”,
“start_t”: 1640908800,
“end”: “2021-12-31T11:00:00”,
“end_utc”: “2021-12-31T02:00:00+00:00”,
“end_t”: 1640916000
}
]
}

■Simple Listにて表示設定


■しかし、海女美術大学しか表示されなかったです。
“海女美術大学”,
“エンガワ河川敷” の2つを表示したいです!

どうしたらいいでしょうか?
・CustomActionでのAPI設定を行いましたがうまくいきませんでした。。

adaloのみの完結で難しければ、airtableなどの連携で可能かなど
教えていただきたいです!

jinさんいろいろな事やってるねえ。質問の意味がよく分からないんだけど、「海女美術大学しか表示されなかった」というのは何?
JSONの中のキーになっている"maps_ex"のバリュー値になっているid4のimage画像だけは取得できたという事ですか?エンガワ河川敷のimage画像は取得できなかったという事ですか?

(質問)
1.このAPIのURLを教えて頂くことは出来ますか?→自分でもやってみます

NoCodeでAPIを介してデータを取得するときはJSONが単純なオブジェクトの場合に限られるのでAdaloだけで完結するのは難しいかもしれません。maps_exのバリュー値が配列[ ]になっているのでNoCodeの場合だと順番の指定が出来ないんだよね。

このJSONは結構単純なので他のデータベースツールと絡めると情報は取れると思います。プログラム(javascript)書くんならレスポンスの戻り値をjsonで示すと以下のように単純化することが出来るけど、配列[ ]があるとNoCodeだけでは指定が出来ないので難しいです。

海女美術大学→json[“maps_ex”][0][“image”]

エンガワ河川敷→json[“maps_ex”][1][“image”]

どっちにしろAPIのURL教えてもらえないですか?

作りたいアプリが色々思いつきまして!
説明不足で申し訳ありません。

いまは、時間が変わったので表示が変更されましたが
■出力結果を表示します。↓
スクリーンショット 2022-01-01 23.33.03

Json結果
{
“result”: [
{
“rule”: “ナワバリバトル”,
“rule_ex”: {
“key”: “turf_war”,
“name”: “ナワバリバトル”,
“statink”: “nawabari”
},
“maps”: [
“スメーシーワールド”,
“エンガワ河川敷”
],
“maps_ex”: [
{
“id”: 20,
“name”: “スメーシーワールド”,
“image”: “https://app.splatoon2.nintendo.net/images/stage/555c356487ac3edb0088c416e8045576c6b37fcc.png”,
“statink”: “sumeshi”
},
{
“id”: 9,
“name”: “エンガワ河川敷”,
“image”: “https://app.splatoon2.nintendo.net/images/stage/8c95053b3043e163cbfaaf1ec1e5f3eb770e5e07.png”,
“statink”: “engawa”
}
],
“start”: “2022-01-01T23:00:00”,
“start_utc”: “2022-01-01T14:00:00+00:00”,
“start_t”: 1641045600,
“end”: “2022-01-02T01:00:00”,
“end_utc”: “2022-01-01T16:00:00+00:00”,
“end_t”: 1641052800
}
]
}

nameとimageは取得できました!
id20のみ!
id9は取得できなかったです。

はい!ありがとうございます!!!

APIのURLを送ります。
■サイト https://spla2.yuu26.com/
■形式1のAPIを使用しています!

■API Base URL↓
https://spla2.yuu26.com/regular/now

■Get Allのみ変更

以上となります!

jinさんやっているんですけど、何をやればいいのか分からなくなってきました。
APIのURL見ていたら少し分かってきましたが、2つの画像の組み合わせが2時間おきに変わるんですね?そしてその組み合わせも固定ではなく、いろいろ変化するようですね。

画像の種類はおそらく24種類くらいあって、URLの後ろにregular/nowのパラメーター付けると2種類の組み合わせが出てくるようになっているようです。
(質問)
jinさんの最終的にやりたいことを教えて下さい。ただ、24種類の画像が見られればいいんですか?それとも現在の時刻で表示されている2種類の画像が何であるか見たいのですか?(知りたいのですか?)

(今のところの結論)
2種類の画像を見るのはAdaloでは出来ません。レスポンスで返ってくるJSONが入れ子になっていたり、結構複雑なのでAdaloの機能だけでは表示できないです。
1枚は見られるんですよ。2枚同時にデータを取得するのが出来ないんです。

そこでAPIのデータをいったんスプレッドシートに落とし込んで、Adaloからスプレッドシートを見に行くようにすれば2枚同時にデータを取得することが出来たので見ることができます。(下記画像の下の方)スプレッドシートにGASというプログラムを組んでやっています。(Javascriptの親戚のようなものです)


(私が考えているやり方)
Adaloのボタンを押してダミーデータをZapierを介してスプレッドシートに送って、それをトリガーとしてその時点での2種類の画像のURLを取得します。それをAdaloのWebViewで見ればいいんかな?

1 Like

とりあえず23種類の画像があるようなのでカルーセル方式で切り替わるようなアプリを作りました。左右の矢印をクリックすると画像が切り替わります。その下に画像一覧表を作っておきました。(画像はwebから呼び出しているので若干のタイムラグがあります)

(アプリ)

1 Like

返信遅くなりました^^;

おおすごい!
カルーセル方式とかあるんですね!
イメージとしては、2つの画像を取得するイメージでした!

実際に公開してあるアプリをイメージしていました!

かなり近いイメージのやつでした!
ありがとうございます!!

なんか、adaloは実装が難しいと思い
Integromatを勉強してました(^_^;)

私的に最もやりやすい方法で画像取得方法を考えてみました。Adalo単体だけでは2個の画像を
同時に取得できないのでスプレッドシート+GASで画像を取得して、それをAdaloに渡すような
形にしました。

画像は2時間おきにその内容が変化するのでスプレッドシートで2時間おきに画像を取得する
トリガーを設定してあります。画像情報を取得したスプレッドシートをAPI化してAdaloから
データを読み込めるようにしました。(アプリを載せましたので使ってみて下さい)

Zapierやintegromat等の連携アプリを使うやり方も考えたのですが、よく分からなかったので
仕事で毎日使っているスプレッドシート+GASが一番自分にはよさそうだったのでそうしました。

(アプリのプレビュー画面)

(参考アプリ)2時間おきに画像が入れ替わります

スプレッドシートにもしご興味があれば、GASの中身やAPI化する方法をご説明します。