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

この記事は約 5 分で読めます。

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

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

九九アプリのルビをAPIで取得して表示

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

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

現在勉強中の Riot.js という Javascript のライブラリを使ったSPA(シングルページアプリケーション)で、外部にあるJso...

自作APIについて

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

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

Laravelトップ画面

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

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

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

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

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

APIを検証するChromeアプリ

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

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

ルビ取得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 の設定は不要です。

まとめ

如何でしたでしょうか。

API さえ用意できれば、呼び出して利用するのは簡単ですね。

今回用意した API は決まった文字列を取得するだけの単純なものだったので認証などは不要です。

しかし API を利用して DB のデータを追加や更新するようなものには認証の仕組みが必要です。

でないと悪意のある API 呼び出しによって、DB のデータが意図しないものになってしまったりします。

もし、個人情報を扱うようなサービスであれば、不正アクセスによって個人情報を流出してしまうリスクもあります。

ある程度の知識や技術を身につけるまでは、リスクの高いデータは管理しない方が無難ですね。

次回は九九アプリの結果をAPIでサーバーに登録し、ランキングを表示する仕組みを実装してみようと思います。

以上、『Riot.js で自作APIを利用する』やり方の説明でした。

The following two tabs change content below.
会社員Shira
IT系の会社員。1978年生まれ。個人開発でAndroidのアプリをリリース、総ダウンロード数は96万くらい。36歳で初めての転職、未経験のweb業界で日々悪戦苦闘してます。

当記事がお役に立ちましたらシェアして頂けると嬉しいです。

フォローする