実践！iPhoneショートカットでWeb APIを使いこなそう！

ついに、Web APIを使ってショートカットを作る実践編に突入しました。

前回の記事では、「知識編」として

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

について解説しました。

まだ見ていない方は先にこちらの記事をご覧ください！

今回は、Web APIの実践編として、
「YouTubeの急上昇の1位の動画タイトルと再生数を取得する」ショートカットを作成していきます。

ついに、【iOSショートカットで学ぶ！プログラミング教室】シリーズも最終回となりました。

これまで学習してきた内容もフル活用していきますので、今回はフィナーレにふさわしい回になると思います。

ぜひ、最後までご覧ください！

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

今回のショートカットを作成する流れ

まずは、「YouTubeの急上昇の1位の動画タイトルと再生数を取得する」ショートカットを作成する流れをざっくりと掴んでいただきます。

ショートカットでWeb APIを使う方法は以下の通りでした。

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

前回の記事では、それぞれのステップでやることをざっくりと説明しましたね。

今回も以上の３ステップに沿ってショートカットを作成していきます。

また、今回のショートカット作りには、パソコンを併用することが望ましいです。

特に、Web APIを探すのに使う「Rakuten Rapid API」というサイトは、モバイル表示すると非常に見にくくなってしまいます。

ですので、「Rakuten Rapid API」というサイトはパソコンで開いていただいて、ショートカット作りはモバイル（もしくはMac）で行ってもらうのが良いと思います。

それでは、Web APIを登録していくところから始めましょう！

Web APIの登録

Rakuten Rapid APIの会員登録

まずは、「Rakuten Rapid API」というサイトの会員登録をしていきましょう！

① https://api.rakuten.net/ を開き、「新規登録」をタップします。

② 必須項目を入力し、完了

「Youtube Search and Download」の登録

それでは、「Youtube Search and Download」というWeb APIを登録していきます！

① 検索窓に「Youtube Search and Download」と入力し検索し、一番上のWeb APIを選択します。

② 「登録してテスト」をタップします。

③ Basicのプランを選択して完了です。

これでWeb APIの登録は完了です。

すごく簡単ですよね！

ただ、1つWeb APIを使う上で、注意点があります。

それは、使う量に応じて料金がとられることです！

今回登録した「Youtube Search and Download」では、無料枠だと1日あたり500回しか使えないように制限されています。

ですので、使用回数が500回を越えると自動で使えなくなります。

しかし、そういった使用制限をせず、

「はい、10回以上使ったから1000円ね！」

みたいな課金形態のWeb APIもあるので注意です。

Web APIを選定する際には、自分で料金プランや作成者が信頼できるかどうかを見極めることが重要です。

怪しいWeb APIも多く存在するので、よく調べてから使うようにしましょう！

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

それでは、ショートカットの作成に移ります。
※ 「Rakuten Rapid API」はまだ使うので、閉じないでおきましょう。

「Youtube Search and Download」からYouTube急上昇動画のデータを取得していきましょう！

全部で9ステップです！

詳しい説明は後ほどします！

① 新規ショートカットを作成し、「URLの内容を取得」アクションを追加します。

② Rakuten Rapid APIの「Youtube Search and Download」ページの「エンドポイント」の場所に移動します。

③ 左バーにある、「GET Trending」をクリックし、右側の「（Node.js）Unirest」というドロップダウンをタップし、「JavaScript」>「fetch」を選択します。

④ 真ん中の列「オプションパラメータ」の「type」を”mu”から”n”に、「hl」を”en”から”ja”に、「gl」の”US”を”JP”に変更する。

⑤ 右側のコードスニペット内の”https://youtube-search-and-download.p….”と、「x-rapidapi-key」「x-rapidapi-host」それぞれの値をコピー（メモアプリなどで保存）する。

⑥ ショートカットの「URLの内容を取得」アクションの”URL”の部分に”https://youtube-search-download.p…”をペーストする。

⑦ URLの内容を取得」アクションのヘッダを開き、2つ新規ヘッダを追加して画像のようにして「x-rapidapi-key」「x-rapidapi-host」の値を先をほどコピーしたものに設定する。

⑧ 画面右下の実行ボタンを押して、以下のように出力されれば成功です！

解説

「とりあえず出来たけど、理解ができなかった」という方が多いのではないでしょうか？

あまり詳細には踏み込みませんが、「Web APIを使えるようになる」ということを目的としてざっくりと解説します！

おそらく理解しにくかったのは、以下の「コードスニペット」の部分ですよね。

③ で、「（Node.js）Unirest」から「JavaScript」>「(JavaScript) fetch」に変更しましたよね。

「Node.jsとは何か」「fetchとは何か」という難しいことは置いておいて、
「ショートカットでWeb APIを使う時は”(JavaScript) fetch”にする！」と覚えてしまいましょう。

そうして設定された「コードスニペット」の内容は、ショートカットの「URLから内容を取得」アクションの設定項目と対応します。

以下の二つの画像を見比べてみてください。

この事実さえ知っていれば、他のWeb APIを使う時も同様の手順で使えるようになります。

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

「URLを取得」アクションでWeb APIからYouTube動画のデータを取ってくることができました。

前回の記事でも説明したように、Web APIから取り出したデータは「辞書」の形式になっています。

Rakuten Rapid APIの「Youtube Search and Download」ページ右側の「返信例」というところを見てみましょう。

ここでは、Web APIから取り出したデータがどのようなものかを見ることができます。

データを全て開いてみると、以下のようになっています。

何がなんだか分からないと思いますが、既に「辞書」の使い方を理解した皆さんであれば、解読することが可能です。

Web APIのデータは「辞書の形式」と言いましたが、辞書の形式をコードで書くと先ほどの画像のようになるのです。

コードで書くと「{  }」で囲われているのが「辞書」の印になり、
「{キー ： 値}」という書き方になります。

それを踏まえて、今回Web APIから取得したデータを解読していきましょう！

・全体のデータが「辞書①」（{  }で囲われている）である。
・「辞書①」の中に、キーが”contents”で、値が「配列A」となっているデータがある。
・「配列A」のインデックスが”0”の値に「辞書②」のデータがある。
・「辞書②」の中に、キーが”video”で値が「辞書③」のデータがある。
・「辞書③」の中に、様々なキーで動画の情報が入っている。

「配列A」の中にはインデックスが”0”から”14”まで、それぞれの値に辞書入っています。

配列Aのインデックスが”0”の値である辞書には、YouTube急上昇1位のデータが
配列Aのインデックスが”1”の値である辞書には、YouTube急上昇2位のデータが
配列Aのインデックスが”2”の値である辞書には、YouTube急上昇3位のデータが

入っています。

言葉で言われてもイメージがつきにくいと思うので、

以上の説明を画像やご自身のパソコンでコードを見ながら順に理解していただきたいです。

ポイントは、「辞書①」の中に、キーが”contents”で、値が「配列A」のデータがあるということ。

そして、「配列A」のインデックスが”0”の値が「辞書②」のデータであるということです。

「配列..?インデックス？」と忘れてしまった方は、第5回や第7回の内容を復習してみてください！

なんとなくイメージがついたところで、急上昇動画のタイトルと再生回数をショートカットで取り出していきましょう！

前回の記事で、ショートカットで「辞書の中にある辞書の値を取り出す方法」については解説していますので、もし忘れた方は復習してみてください！

たった２ステップで完了です。

① 「辞書の値を取得」アクションを追加し、「”URLの内容”内の”contents.1.video.title”の値を取得」となるよう設定します。

② 「辞書の値を取得」アクションを追加し、「”URLの内容”内の”contents.1.video.viewCountText”の値を取得」となるよう設定します。

これでYouTubeの急上昇1位の動画のタイトルと再生回数を取得することができました！

ここで補足説明ですが、
辞書の値となっている配列の中からデータを取り出すときは、キーにその配列のインデックスを指定することで取り出すことができます！

図解すると以下の通りです。

そして、ショートカットの「辞書の値を取得」アクション内で
”contents.1.video.title”の箇所を”contents.0.video.title”としないのは、ショートカットのリスト（配列）のインデックスが「1から」だからですよね！

ショートカットを完成させよう！

さて、あとは取得したデータを表示させるだけです！

もうひと頑張りやっていきましょう！

① 「テキスト」アクションを追加し、内容を以下の画像のように設定する。

② 「クイックルック」アクションを追加し、「”テキスト”をQuick Lookで表示する」となるように調整する。

これでショートカットの作成は終了です！

実行し、以下のように表示されれば成功です！！

終わりに

今回の『Web API』実践編で、【iOSショートカットで学ぶ！ショートカット教室】もフィナーレです！

特にこの「Web API」編はこれまでの総まとめ的な内容だったので、非常に難しかったと思います。

ここまで全ての記事を読んだあなたは、プログラミングの知識が周りの人から頭ひとつ抜けていることは間違いありません。

【iOSショートカットで学ぶ！ショートカット教室】シリーズは全11回で、およそ4万5000文字もあります。

それを読み切ったこと自体に自信を持っていただきたいです。

むしろ、私の稚拙な説明をここまで読み理解できたのは、あなたに「プログラミングの素養があるから」なのかもしれません。

もし少しでも「プログラミングって面白い！」と思っていただける方が１人でもいたら、このシリーズを書いてよかったと心から思えます。

最後までお読みいただき、本当にありがとうございました！

もしかすると、今後より詳しい内容を発信するシリーズを開始するかもしれませんので、お楽しみに！

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

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