「ショートカットで学ぶ!プログラミング教室」連載中! 記事へ

Web APIって何?iPhoneショートカットで活用する方法!

みなさん、Web APIって知っていますか?

全く知らない、聞いたことがあるけど使ったことがない、という人が多いのではないでしょうか?

Web APIを使いこなすことができれば、ショートカットで出来ることが一気に広がります。

例えば、

・Amazonの価格を調べるツールの作成
・YouTubeの急上昇の動画をすぐに取得
・ぐるなびの検索機能をショートカット内に組み込む

などです。

本記事では

  • そもそもWeb APIとは何か
  • iOSショートカットでWebAPIを使う流れ
  • WebAPIを使うのに必要な重要アクション

について解説していきます!

iOSショートカットで学ぶ!プログラミング教室】今回で最終回…と言いたいところだったのですが、「Web API」編は「知識編」と「実践編」の2部構成にすることにしました!

「Web API」編はプログラミングの初心者さんには理解が難しいところが多くなってしまうかもしれません。

しかし、「Web APIを使える」ということを目的として、なるべく分かりやすく専門用語は使わない方針で進めていきますので、ぜひ最後までご覧ください!

それでは、Let’s プログラミング!

目次

Web APIとは

まずは、Web APIとは何かを解説していきます。

Web APIとは、すごく簡単に言うと「画面のないアプリ」のことです。

普通のアプリだったら、画面がありますよね?

画面の中にあるボタンなどをタップしたり、フォーム内にテキストを入力したりすることで、
・検索
・投稿
・いいね
などのアプリの機能が使えるわけです。

一方で、Web APIでは画面をタップしたりテキスト入力したりすることなく、これらの機能が使えます。

私たち人間がアプリの画面上でタップやテキスト入力などをする代わりに、コンピューターが自動でアプリの機能を使ってくれるイメージです。

ショートカットでは、リマインダーやLINEなどのアプリ画面を開くことなく「アクション」を使ってアプリの機能を使うことができますよね。

Web APIを使っても、同じように「アプリの画面を開かず、アプリの機能を使える」ということができます。

人間が1からアプリの画面を操作したりするよりも、コンピューターが自動で操作してくれた方が楽ですし早いですよね。

そのため実は、YouTubeやLINEなどの「画面があるアプリ」も、コンピューターが自動で操作するための「画面のないアプリ」(Web API)が用意されていることが多いです。

「画面がない、コンピューター用のアプリ」が「Web API」と考えていただければと思います。

※イメージです。

ショートカットでWeb APIを使う方法

Web APIがどのようなものか、ざっくりと理解できましたでしょうか?

使い慣れて初めて分かる部分もあると思いますので、とりあえず先に進みながら理解を深めていきましょう。

ここでは、ショートカットでWeb APIを使う方法を解説します。

おおまかな流れは以下の通りです。

  1. Web APIを探す
  2. 「URLの内容を取得アクション」でデータを取得する
  3. 「辞書の値を取得」アクションでデータを取り出す

Web APIを探す

まずは、使いたいWeb APIを探しましょう。

Web APIを探せるサイトは沢山ありますが、ここでは最もポピュラーな「Rakuten Rapid API」で探していきましょう。

以下のように「Rakuten Rapid API」では無料で便利なWeb APIがたくさん使えるようになっています。

使いたいWeb APIをクリックしてみると、以下のような画面になります。

Web APIの使い方や料金などがこの画面で確認でき、登録することが可能です

詳しい画面の見方や手順は次回の実践編で解説しますが、もし興味がある方は色々物色してみてください!

「URLの内容を取得アクションでデータを取得する

使いたいWeb APIが決まったら、ショートカットの作成を始めます。

まず使うのが「URLの内容を取得」アクションです。

「URLの内容を取得」アクションをショートカット内に追加し、アクションの中身を開いてみましょう。

全て開かれた状態

このアクションを使って、Web APIに接続しデータを取得していきます。

詳しくは次回の実践編で手を動かしながら理解していきますが、Web APIからデータを取得する流れをざっくりと説明しておきます。

  1. 「”URL”の内容を取得」の”URL”の部分に、使いたいWeb APIのURLを入れる。
  2. アクション内2行目の「方法」を決める。(GET? POST?…)
  3. アクション内3行目の「ヘッダ」などに色々なデータを入れる。

今は全くイメージが掴めないと思いますが、問題ありません。

とりあえず、「URLの内容を取得」というアクションを使ってWeb APIからデータを取ってくるということだけ覚えておいてください!

「辞書の値を取得」アクションでデータを取り出す

「URLの内容を取得」アクションを使ってWeb APIから取得したデータは「辞書」形式のデータになっています。

そこで「辞書の値を取得」アクションを使い、取得したデータをショートカット内で活用していきます。

「まず、”辞書の形式のデータ”が分からないのですが…」

という方も多いと思います。

そこで、まずは「辞書」形式のデータについて解説しておきましょう。

「辞書」形式のデータとは?

「辞書」形式のデータとは、”キー”と”値”がセットで保存されているデータのことです。

“キー”と”値”がセット」と言われてもよく分からないですよね。

ここで思い出して欲しいのが「変数」です。

変数は、箱に名前をつけて値(データ)を保存していましたね。

“変数の名前”と”値”をセットで保存していたわけです。

キー”とは、変数で言うと「変数の名前」
”とは、変数で言うと「変数の中に入れる値(データ)」
と言えるでしょう。

そして、「辞書」は”キー”と”値”がセットで保存されるデータを複数保存できます

変数が辞書の中に複数保存されるイメージです。

辞書の中に入っているデータは、”キー”指定すれば取り出すことができます

以下のような辞書が用意されていた場合、

辞書から“名前”というキーを指定すれば「山田」、

住所”というキーを指定すれば「東京」、

職業”と言うキーを指定すれば「学生」というデータが取れます。

変数のようなものを複数保存できるのが辞書だと覚えてもらって差し支えないでしょう。

ショートカットで辞書の値を取り出す

ショートカットで「辞書」形式のデータを取り出すには、「辞書の値を取得」アクションを使います。

データを取り出す具体例を見てみましょう。

「辞書の値を取得」アクションで、キーの部分に”名前”と指定することで、上の辞書から「山田」と言うデータを取得することができました。

一見難しそうに感じる辞書ですが、使い慣れると簡単に扱うことができます。

辞書の入れ子

また、「辞書の値に新たに辞書を入れ込むことができるということも覚えておきましょう。

まずは、こちらのイメージ図を見ていただきたいです。

「辞書1」の”キーA”とセットになっている値が「辞書2」になっていることが分かります。

「辞書1」の”キーA”を指定することで、「辞書2」全体(”キー”と”値”がセットになっている複数のデータ)を取り出すことが出来るというわけです。

では、このように辞書が入れ子になっている状態でデータを取り出すにはどうすれば良いのでしょうか?

こちらも具体例で考えます。

以下のような「辞書」を事例として考えます。

「辞書1」の”名前”というキーとセットになっている値が「辞書2」になっていて、「辞書2」の中には「日本人:山田」「アメリカ人:マイケル」という”キー”と”値”がセットになった複数のデータが辞書として格納されています。

ショートカットでこのような「辞書」を再現すると、以下のようになります。

辞書1
辞書2(画像1枚目の赤四角をタップすると出る画面)

ここで、辞書2から「マイケル」という値を取り出したいとしましょう。

「辞書の値を取得」アクションを追加し、以下のように設定します。

キーのところに「名前.アメリカ人」と設定していますね。

これで辞書2の中の「マイケル」という値を取り出すことができました。

このように「.」でキーを繋げてあげることによって、辞書内にある辞書の値を取り出すことができるのです。

辞書が入れ子状態になっている時の値の取り出し方はざっくりと理解できましたでしょうか?

Web APIから取得したデータは、「辞書が入れ子」状態になっているデータがほとんどです。

最初は辞書を扱うのに苦労すると思いますが、この苦労を乗り越えた先に待っている景色は素晴らしいものです。

この「辞書の値を取得」アクションを使ってデータを適切に取り出せるようになることで、「Web API」を最大限活用できるようになるからです。

これで、「ショートカットでWeb APIを使う方法」概要の説明を終わります!

終わりに

今回は、

  • Web APIとは何か
  • 「ショートカットでWeb APIを使う方法」の概要

について解説してきました。

知らない単語が多く出てきて困ってしまった方も多いと思います。

もし今回の内容が全て理解できていなくても、落ち込まないでください。

知らないことを身につけようと思った時は、必ず相応の時間がかかるものです。

ゆっくりと時間をかけて、知識を習得していきましょう!

次回、実践編で「Web API」を使ってショートカットを実際に作成していきます。

ついに【iOSショートカットで学ぶ!プログラミング教室】最終回です…!

手を動かす中で今回の内容が頭に入ることも多いと思いますので、ぜひチャレンジしてみてください!

プログラミング教室の記事一覧

ショートカットの投稿アプリ爆誕!

もっと色々なショートカットを楽しみたい!

という方のために、iOSショートカットを投稿・共有できるアプリ をリリースしました!

「Twitterの自動いいねツール」「1TB以上のデータを保存できるようにするショートカット」など、
ここでしか手に入らないショートカットが盛りだくさんですよ!

もちろん、投稿されたショートカットはダウンロードし放題ですので、ぜひ試してみてください!

このショートカットの不具合を報告する

    ご使用のiOSバージョン
    ご使用の端末
    不具合詳細

    目次
    閉じる