Glideプラグインの中でも、もっとも応用の幅が広く役立つプラグインってなんでしょう。

それは、きっと「Fetch JSON」プラグインです😆。

Fetchは「行って、取って、帰ってくる」という意味です。で、JSONって何よ！？

JSONとは！？

JSONは、JavaScript Object Notationの略です。
・Javascriptは、ウェブページに動きをつけるときなどに使われている、とっても大事なプログラミング言語です。
・Objectは、複数データを取りまとめる器（もの）みたいなもので、Javascriptで使われます。
・Notationは、、、、記述方法みたいな意味ですね。

誤解を恐れず言えば、「JavascriptのObjectと同じような書き方で、提供データを整理する方法」ということになります。

「何言っちゃってるの😅！？」

すみません。ようは、「Fetch JSON」は、ネット上に公開されている外部プログラムの入り口（ＡＰＩ）から、JSONで記述されたデータをもらってきて、それをアプリ内で使えるというスゴイ機能なわけです。

※ちなみに、読み方は、英語の名前のように「ジェイソン」です。どうしても、ホラー映画の「ジェイソン」が頭に浮かびます。。。💦

Fetch JSONの使い方を教えてくれる有難い動画

このFetch JSONの使い方を親切に解説してくれている動画があります。これを見て私は、「うおー、何とか自分にもできちゃいそうだそ～😆」と思っちゃったわけです😁。

何ができるかって？例えば、英語辞書をアプリ内に取り込めます！この動画の製作者、Darren Aldermanさんのアプリ（Glide Page）を見てみましょう。

catと打ち込めば、、、なんとCatの意味が表示されます！めっちゃ便利です。

しかし、動画は英語だし、内容が小難しい。。。ということで、このたび、自分で試して、日本語しかも口語調で解説しようというわけです！無理筋！？まあ、何とかしますので、生温かい目で見ていただければと。

今回は長くなります。ですから、記事は４回に分けます。

これがすべてのポイントだ

先に、もう何がポイントなのかを全部書き出しておきます。今回のシリーズは、過去で一番読みにくいかもしれません。迷子にならぬようポイントを抑えてから進むことにしましょう！（イノベーションの過程に例えてみました😅）

●1回目の記事（JSON形式データを取得する）

・アプリに、英語辞書を検索できる機能を実装する！
・APIを通じて、英語辞書プログラムにアクセスする。
・そのために「Fetch JSON」というプラグインを使う。
・APIにアクセスするURLを取得する。
・JSON形式のデータは読みずらいから、Formatterを使って記述を分析する。

ここが「魔の川」です。JSONの記述が難しいかもしれませんが、何となります。

●2回目の記事（データの中で欲しいデータを指定する）

・テストページで、プラグインが動くか確かめる。
・提供されるJSON形式のデータのうち、欲しいデータだけを指定する。
・そのために、JQクエリーを使う。

ここが「死の谷」です。JQクエリーという一見難しそうなものを何とか理解しましょう。

●３回目の記事（データエディタ及びアプリ設定）

・検索ワード用のカラムは、User-Specificにする。
・APIに送り込むURL用のカラムをテンプレートカラムで作成する
・Fetch JSONプラグイン用のカラムでは、JQクエリを記述し、取得するデータを絞り込む。
・検索用に「テキスト・エントリー」、表示用に「リッチテキスト・コンポーネント」を使用する。

ここが、「ダーウィンの海」です。データエディタのComputed Columnsを駆使します。こここで溺れないように。。。

●４回目の記事（すべての単語の定義を取得し、HTMLで表示する）

・配列の番号を削除し、単語の定義の全件を取得できるようにする。
・テンプレートカラムを使って、JSONの記述をHTMLタグの記述に変換する。
・番号付リスト形式で単語の定義が表示されることを確認する。

ここが、「自由の山頂」（勝手に言葉を作りましたｗ）です。ＨＴＭＬまで持ち出して、アプリ上で美しく出力します。

ＲＰＧっぽくなってきました！こころの準備は、OKですか！？
では、出発です😄！

無料で使えるAPIがずらり

無料で使えるAPIの一覧が紹介されているサイト（GitHub）に行きます。

めちゃくちゃ大量のAPIが紹介されています。今回は辞書を使いたいので、Dictionariesで検索します。すると、認証の必要がなく無料で使えそうな辞書があります。これを使わせていただきましょう！Free dictionaryをクリックします。

JSON形式で出力されるも、心配無用！

下図は、Free Dictionary APIのトップページです。

冒頭の説明を読みましょう。ふむ。
次のURLに対して単語（<word>)の定義を要求できます。URL内に埋め込むんですね。HTTPリクエストの方式は、Getメソッドということなりましょう。
https://api.dictionaryapi.dev/api/v2/entries/en/<word>

では、URLに実際打ち込んでみましょう。意味の説明が欲しい単語は、catだとしましょう。えい！とエンターします。

すると、つぎのような値が返ってきました。JSON形式でcatの意味の説明がかえってきた模様です。

「もう、腹いっぱいです😭」

ここでひるまないでください。誰だってこんなもの読めません😅。人間には（コンピュータにとっては読みやすい…）。

世の中には、JSONの記述を（人間にとって）読みやすくするためのサイトがあるんですね。ありがたい！JSON Formatterです。さきほどのURLを入力します。

おお！JSONの記述がきちんと改行されて、インデントされて出力されました。しかも、折りたたみマークまであります。きちんと階層化されていることが分かります。これは分かりやすい😲！

はい、本日は、ここまで。

では、ビーダゼーン！

※私のやる気アップとブログの品質向上につながりますので、記事が気に入られた方は、「ポチっ」と好きボタンを押してくださったり、フォローいただけますと幸いです🙇。