Fetch JSON：あなたのアプリを激的に拡張するプラグイン その４【ノーコード・ツールGlide】
今回は、JSON形式で得られた辞書の定義データのうち、「最初の定義」のみならず、「すべての定義」を表示させます！
あ、このページからアクセスしちゃいました？前回（第３回）の記事はこちらです。1回目と2回目も読んでくださいね～。
いやもう動画で見たいんだ、という方はこちらです。
では、早速行きましょう😆！
修正すべきは、JQクエリーだ
JSON形式で得られた全データのうち、抽出するデータを変えてみましょう。となれば、JQクエリーの内容を書き換える必要がありますな。。。🤔
では、結論から申しましょう！各配列の番号を削除します～！
「おい、おい、おい！😑」
あの、、、「なら、最初からそうしとけ」とおっしゃりたいんですよね💦。でも、一応、配列（アレイ）という考え方を説明したかったので、いったん「最初の配列」だけを取り出すことにしました。
では、気を取り直して、配列番号を消しちゃったらどうなるか、考えましょう。
最上位の配列はどうなってる？
いまいちど、JSON形式のデータがどうなっているのか確認します。一番上の階層は、配列（アレイ）[ ]でできています。
その配列には、定義の数だけ値が格納されます。catの場合、５つあるみたいですね。検索語によっては、もっと多かったり、もっと少なかったりするはずです。
で、配列の番号を削除すると何が起こるのでしょうか？そう、全部の配列の値を取得することになります！
それより下の階層の配列についても同じことが起こります。
では得られるデータは、どうなっているでしょう！？
一見複雑なデータをどう扱うか
アレイの番号「０」を削除したJQ Queryでは、どんなデータが取得されるか見てみましょう。こうなります。
「ぎゃお～😭」
素晴らしい、素晴らしいリアクションです！（打ち合わせ通りですね🧡）
こんなもの読めたもんじゃない、、、じゃあ、どうするんでしたっけ。
ここでも登場！Formatter
そうです。Formatterに、得られたデータを入れ込みます！
すると、こうなります！
ちゃんと構造化されていることが見て取れますね！
よく見てみると、次のような法則性があるようです。
・一番上の階層にアレイがある。
・アレイの各値は、「文字列」である。
・それぞれの文字列（定義）は、ダブルクオーテーションで囲まれいており、カンマで終わる。
ということになります。
なるほど、データはきれいに取得されていることは分かりました。では、このようなデータを、Glideというウェブアプリ上で構造化して表示するにはどうしたらいいでしょう？
構造化といえば、あの言語だ！
ウェブアプリ、、、構造化して表示、、、そうか、
「HTMLを使うんだ！😆」
ご明察であります！！！JSONの形式を、HTMLタグの形式に変えてあげればいいのです（※リッチテキスト・コンポーネントでお馴染みの「マークダウン記法」では、難しでしょう）。
どんなタグを使いましょう。
「番号付きリストがいいんじゃない！😆」
俄然やる気ですね。。。ではでは、<ol>タグと、<li>タグを使いましょう！
下のように、文字の置き換えをすることになります。
では、テンプレートカラムを新規設定します。Fetch JSONカラムの値を下の３つの規則で変換します。
先頭と最後だけ特別で、残りは真ん中にある「","」という文字列を「</li><li>」と変換するのがミソです。（終了タグから先に変換するルールなんて思いつかないな～。この変換ルールを思いつく人ってすごいな～。私じゃないですよ💦。）
テンプレートカラムの中身は、こうなりました！なんかうまくいってる！？でも、確信は持てないな。。。
うまくいったぞ～！
では、アプリ側で確認してみましょう！catと打ち込むと、、、来ました！番号付きリスト！きれいに表示されているじゃないですか！
やりました～！！🎉🎉🎉🎉🎉
これで本当におしまいでございます！
まとめ
「Fetch JSON」を使って、外部プログラム（無料、認証なし）からAPI経由でJSON形式のデータを取得、さらにアプリ上で活用するというテーマ、いかがっだったでしょうか！？
どうしてもHTTPやJavaScriptといったノーコードの領域を超える話が混じるため、今までで一番読み取りにくい記事になってしまったかもしれません。
ですが、これを使ってアプリにいろんな機能を追加しちゃうのが楽しみになりますよね ♪。面白いAPIがあれば、今後も紹介したいと思います😆！
箇条書きでまとめておきましょう！
●1回目の記事（JSON形式データを取得する）
・アプリに、英語辞書を検索できる機能を実装する！
・APIを通じて、英語辞書プログラムにアクセスする。
・そのために「Fetch JSON」というプラグインを使う。
・APIにアクセスするURLを取得する。
・JSON形式のデータは読みずらいから、Formatterを使って記述を分析する。
●2回目の記事（データの中で欲しいデータを指定する）
・テストページで、プラグインが動くか確かめる。
・提供されるJSON形式のデータのうち、欲しいデータだけを指定する。
・そのために、JQクエリーを使う。
●３回目の記事（データエディタ及びアプリ設定）
・検索ワード用のカラムは、User-Specificにする。
・APIに送り込むURL用のカラムをテンプレートカラムで作成する
・Fetch JSONプラグイン用のカラムでは、JQクエリを記述し、取得するデータを絞り込む。
・検索用に「テキスト・エントリー」、表示用に「リッチテキスト・コンポーネント」を使用する。
●４回目の記事（すべての単語の定義を取得し、HTMLで表示する）
・配列の番号を削除し、単語の定義の全件を取得できるようにする。
・テンプレートカラムを使って、JSONの記述をHTMLタグの記述に変換する。
・番号付リスト形式で単語の定義が表示されることを確認する。
本当にお疲れさまでした！うまくいったよ～という方は、ぜひコメントを残していたけると、とてもうれしいです！
では、ビーダゼーン！
※私のやる気アップとブログの品質向上につながりますので、記事が気に入られた方は、「ポチっ」と好きボタンを押してくださったり、フォローいただけますと幸いです🙇。
この記事が気に入ったらサポートをしてみませんか？