Riot.js で自作APIを利用する

Riot.js で開発したSPA（シングルページアプリケーション）の九九アプリで自作APIを利用するやり方を記します。

こちらが実際の九九アプリです。

「さんいちがさん」と表示している文字列は、APIで取得したデータを利用しています。

前回の記事では API ではなく、外部の Jsonファイルを利用する方法を説明しています。

自作APIについて
1. APIを検証するChromeアプリ
アプリで API の呼び出しを実装
1. CORS の利用宣言
まとめ

自作APIについて

九九アプリから呼び出す API は、PHPのフレームワークである Laravel（ララベル）で作成しました。

こちらが Laravel のトップ画面です。

画面右上に会員登録とログインのラベルがありますが、実はクリックすることで実際に会員登録とログインができます。

ただし、ログインしたところで何もできません。

Laravel には artisan(アルチザン)というコマンドを叩くだけで、ある程度のソースを自動生成してくれる機能があります。

CakePHP や Ruby on Rails でいうところの Scaffold(スキャフォールド)と同じようなものです。

これを使って試しに作ってみただけです。

APIを検証するChromeアプリ

Postman というAPIを検証する Chromeアプリがあります。

この検証アプリを使って API を呼び出した結果がこちらです。

単純に Getメソッドで API を叩くと、Json で九九のルビを返すものです。

アプリで呼び出す前に信頼できるツールで事前に確認しておく。

そうすれば、アプリに組み込んだ結果、うまく動作しなかった場合に調査の範囲を狭められ時間を短縮できます。

アプリで API の呼び出しを実装

それでは実際に組み込んだソースを見てみましょう。

diff --git a/tag/question.tag b/tag/question.tag
index d18a3db..352c114 100644
--- a/tag/question.tag
+++ b/tag/question.tag
@@ -74,7 +74,10 @@
       // ルビが未設定の場合
       if (self.rubis.length == 0) {
         // jsonファイルのルビを読み込み
-        fetch('/tools/kuku/assets/json/rubi.json')
+//        fetch('/tools/kuku/assets/json/rubi.json')
+        fetch('https://api.sastd.com/api/rubi',{
+          mode: 'cors'
+        })
         .then(function(data) {
           return data.json()
         })

修正前のソースは Fetch API を利用して Jsonファイルからルビを取得して表示していました。

‘/tools/kuku/assets/json/rubi.json’ が利用していた Jsonファイルです。

実際にブラウザで https://sastd.com/tools/kuku/assets/json/rubi.json と入力すれば Json ファイルの中身が確認できます。

その部分を API のエンドポイントに差し替えました。エンドポイントとは API にアクセスするための URI のことです。

CORS の利用宣言

その下の行はオプションで CORS(Cross-Origin Resource Sharing) を利用することを宣言しています。 CORS は、ブラウザが異なるドメインのサーバーからデータを取得する仕組みで、クロスドメイン問題を解決する方法です。

呼び出し元の九九アプリはドメインが「https://sastd.com」ですが、API のドメインは「https://api.sastd.com」です。

ドメインが異なるため、CORS を利用しないとAPIでデータが取得できません。

API の方も CORS に対応するため、以下のようにレスポンスヘッダーに ‘Access-Control-Allow-Origin’ を追加しています。

    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $rubi = $this->getRubi();
        $respons = \Response::json($rubi);
        return $respons->header('Access-Control-Allow-Origin', '*');
    }

呼び出し側のアプリと、呼び出されるAPIのドメインが同じならば、CORS の設定は不要です。