Laravel QUEST #7【YouTube API・RESTful API】

2019年12月24日 2020年5月16日

ゆーや

これまで一通りのLaravelアプリケーション制作の流れを学習してきましたが
アプリケーションのレベルをワンランク上げるために、外部アプリケーションとの接続のための規約である
APIを利用してみましょう。

●今回のキーポイント

YouTube API
Google Developer Console
APIキー
動画のタイトルをYouTubeから取得
RESTful API
ユーザ一覧を取得（index）
動画登録フォームを表示（create）
動画を登録（store）
ユーザ個別詳細情報を取得（show）
動画を削除（destory）

この記事の目次 [表示]

前回の内容はこちら

https://yu-nocode.com/entry/laravel-quest-6

YouTube API を使ってみよう

まずは、本講義のアプリケーションで最も身近である「YouTube」上のデータを取得する方法を学んでいきましょう。

Google Developer Consoleの設定

GoogleのサービスであるYouTube APIを利用する為に、まずは、Google Developer Consoleにプロジェクト登録と設定をしていきましょう。

その前に、APIを利用して操作するGoogleアカウントが必要となりますので
Googleアカウントをまだお持ちでない方は、下記よりアカウントを取得しましょう。

Googleアカウントの作成

https://accounts.google.com/SignUp

Googleアカウントを取得できましたら、そのアカウントでGoogle Developer Consoleを開いてください。

Google Developer Console

https://console.developers.google.com/

Google Developer Consoleを開くと、下記のような画面が表示されるかと思います。

ここで、左上の「プロジェクトの選択」を押します。

出てくるウインドウの右上の「新しいプロジェクト」を押します。

すると、新たなプロジェクトの「プロジェクト名」が設定できるようになります。
プロジェクト名は「laravel-quest」などにしておきましょう。
場所は設定しなくても構いません。

プロジェクト作成後は、また「プロジェクトの選択」から「laravel-quest」プロジェクトを選択しましょう。
これでプロジェクトの作成が完了しました。

次はYouTube APIの設定をしていきます。
下記ページ「3.ライブラリから使用するAPIを選択」以降を参考に
YouTube Data APIを有効にして、APIキーを取得しましょう。

YouTube Data APIを触ってみよう【導入編】プラスデザインカンパニー

https://www.plusdesign.co.jp/blog/?p=7752

YouTube APIで情報を取得する

では、いよいよYouTube APIを使っていきましょう。

まずは一例として、YouTube上の情報を簡単に取得する方法を見ていきたいと思います。

YouTube APIも、後ほど説明する「RESTfulサービス」の１つですので、URLでAPIにアクセスします。
YouTube APIにアクセスする際には、APIキーが必須です。

Google Developer Consoleの「認証情報」から自分のAPIキーを確認し、APIキーを含めて下記のようにURLを入力して下さい。

URL欄に下記を入力

https://www.googleapis.com/youtube/v3/playlists?part=snippet&id=PL1JwPGjp6gpc6zXQ0uvj6VnNwREuEbfot&key={あなたのAPIキー}

実行すると、下記のようなデータが取得できると思います。
これは、本講義のYouTube動画の「プレイリスト」に関する情報を取得しているものです。
上記URLの "id=" の後にプレイリストを特定するIDを入れているので、本講義動画のプレイリストを取得できるのです。

表示されているデータ形式は、JSON(JavaScript Object Notation)と呼ばれ、APIなどのWebサービスでよく使われます。

このようにAPIを使って取得できる情報を元に、今まで作ってきたアプリケーションでも
YouTube上の情報を扱えるようにしていきましょう。

参考

https://developers.google.com/youtube/v3/docs/playlists/list?hl=ja

APIキーの設定

アプリケーション上でAPIキーを使う場合、原則的にAPIキーを「環境変数」として設定します。

APIキーは外部に流出すると悪用される危険があるので、他人に見せることはしてはいけないのですが
APIキーを記載したコードをそのままリモートリポジトリ等にプッシュすると
コードと一緒にAPIキーまでもが、全世界に公開されてしまい危険な状態になります。

なので、漏洩の危険がないように、APIキーを環境変数として指定してやるということを行います。

では、アプリケーションの .env ファイルのどの場所でも良いので、
先ほど取得したAPIキーを記載していきましょう。

laravel-quest　＞　.env

.env

API_KEY={あなたのAPIキー}

Laravelプロジェクトにおいて、.envファイルに指定したAPIキーはそのまま利用される訳ではなく、通常キャッシュを用いて利用されます。

Laravelではアプリの起動時に複数のファイルを読み込んでいて、その実行速度を早めるために
起動のたびに.envファイルの環境変数を読み込むのではなく、キャッシュを利用して環境変数を読み込んでいるからです。

なので、configフォルダの中のファイルの app.php に、環境変数を読み込ませるための記述をしていきましょう。

laravel-quest　＞　config　＞　app.php

app.php

    //(前略)

    'aliases' => [

        'App' => Illuminate\Support\Facades\App::class,
        'Artisan' => Illuminate\Support\Facades\Artisan::class,
        'Auth' => Illuminate\Support\Facades\Auth::class,
        'Blade' => Illuminate\Support\Facades\Blade::class,
        'Broadcast' => Illuminate\Support\Facades\Broadcast::class,
        'Bus' => Illuminate\Support\Facades\Bus::class,
        'Cache' => Illuminate\Support\Facades\Cache::class,
        'Config' => Illuminate\Support\Facades\Config::class,
        'Cookie' => Illuminate\Support\Facades\Cookie::class,
        'Crypt' => Illuminate\Support\Facades\Crypt::class,
        'DB' => Illuminate\Support\Facades\DB::class,
        'Eloquent' => Illuminate\Database\Eloquent\Model::class,
        'Event' => Illuminate\Support\Facades\Event::class,
        'File' => Illuminate\Support\Facades\File::class,
        'Gate' => Illuminate\Support\Facades\Gate::class,
        'Hash' => Illuminate\Support\Facades\Hash::class,
        'Lang' => Illuminate\Support\Facades\Lang::class,
        'Log' => Illuminate\Support\Facades\Log::class,
        'Mail' => Illuminate\Support\Facades\Mail::class,
        'Notification' => Illuminate\Support\Facades\Notification::class,
        'Password' => Illuminate\Support\Facades\Password::class,
        'Queue' => Illuminate\Support\Facades\Queue::class,
        'Redirect' => Illuminate\Support\Facades\Redirect::class,
        'Redis' => Illuminate\Support\Facades\Redis::class,
        'Request' => Illuminate\Support\Facades\Request::class,
        'Response' => Illuminate\Support\Facades\Response::class,
        'Route' => Illuminate\Support\Facades\Route::class,
        'Schema' => Illuminate\Support\Facades\Schema::class,
        'Session' => Illuminate\Support\Facades\Session::class,
        'Storage' => Illuminate\Support\Facades\Storage::class,
        'URL' => Illuminate\Support\Facades\URL::class,
        'Validator' => Illuminate\Support\Facades\Validator::class,
        'View' => Illuminate\Support\Facades\View::class,

    ],
    
    'key_name' => env('API_KEY'),//追記

];

動画のタイトルをYouTubeから取得して表示させよう

環境変数の設定が終わったら、次に今まで作成してきたファイルに
APIキーとYouTube API利用の記述をしていきましょう。

ここでは、動画に対するコメント（commentカラム）が記述されていない場合には
登録した動画のタイトルがYouTube上から自動的に取得されて表示されるようにしましょう。

まず、users.blade.phpを変更して、トップページやフォロー中・フォロワーユーザの一覧ページの内容を書き換えましょう。

laravel-quest　＞　resources　＞　view　＞　users　＞　users.blade.php

users.blade.php

<h2 class="mt-5 mb-5">users</h2>

<div class="movies row mt-5 text-center">

    @foreach ($users as $key => $user)

        @php
    
        $movie=$user->movies->last();
        
        if($movie){
        
                $key_name = config('app.key_name');
                $get_api_url = "https://www.googleapis.com/youtube/v3/videos?id=$movie->url&key=$key_name&part=snippet";
                $json = file_get_contents($get_api_url);
    
                if($json){
                    $getData = json_decode( $json , true);
                    if($getData['pageInfo']['totalResults']==0){
                        $video_title="※動画が未登録です";
                    }else{
                        $video_title=$getData['items']['0']['snippet']['title'];
                    }
                }else{
                    $video_title="※一時的な情報制限中です";
                }
            
         }
        
        @endphp
    
        //(中略)
                    <div>
                        @if($movie)
                            <iframe width="290" height="163.125" src="{{ 'https://www.youtube.com/embed/'.$movie->url }}?controls=1&loop=1&playlist={{ $movie->url }}" frameborder="0"></iframe>
                        @else
                            <iframe width="290" height="163.125" src="https://www.youtube.com/embed/" frameborder="0"></iframe>
                            @php
                                $video_title="※動画が未登録です";
                            @endphp
                        @endif
                    </div>
                    
                    <p>
                        @if(isset($movie->comment))
                            {{ $movie->comment }}
                        @else
                            {{ $video_title }}
                        @endif
                    </p>
                    
                        @include('follow.follow_button',['user'=>$user])

                </div>
                
            </div>

    @endforeach

</div>

{{ $users->links('pagination::bootstrap-4') }}

もし、動画URLの登録自体がなければ、「※動画が未登録です」という文字がコメント部分に表示されるようにしており
万一動画URL（YouTube動画ID）がYouTube上に存在しないものだったとしても、「※動画が未登録です」という表示がされるよう、if文によって設定しています。
また、APIキーによる動画タイトルの取得がうまく行かなかった場合は、「※一時的な情報制限中です」と表示されるように規定しています。

次に、movies.blade.phpを変更して、ユーザ個別詳細の動画一覧ページの内容を書き換えましょう。
基本的にusers.blade.phpと同じ内容です。

laravel-quest　＞　resources　＞　view　＞　movies　＞　movies.blade.php

movies.blade.php

<div class="movies row mt-5 text-center">
    
    @foreach ($movies as $key => $movie)
    
        @php
        
        if($movie){
        
                $key_name = config('app.key_name');
                $get_api_url = "https://www.googleapis.com/youtube/v3/videos?id=$movie->url&key=$key_name&part=snippet";
                $json = file_get_contents($get_api_url);
    
                if($json){
                    $getData = json_decode( $json , true);
                    if($getData['pageInfo']['totalResults']==0){
                        $video_title="※動画が未登録です";
                    }else{
                        $video_title=$getData['items']['0']['snippet']['title'];
                    }
                }else{
                    $video_title="※一時的な情報制限中です";
                }
            
        }
        
        @endphp

        //(中略)

                    <div>
                        @if($movie)
                            <iframe width="290" height="163.125" src="{{ 'https://www.youtube.com/embed/'.$movie->url }}?controls=1&loop=1&playlist={{ $movie->url }}" frameborder="0"></iframe>
                        @else
                            <iframe width="290" height="163.125" src="https://www.youtube.com/embed/" frameborder="0"></iframe>
                            @php
                                $video_title="※動画が未登録です";
                            @endphp
                        @endif
                    </div>
                    
                    <p>
                        @if(isset($movie->comment))
                            {{ $movie->comment }}
                        @else
                            {{ $video_title }}
                        @endif
                    </p>
                    
                    @if(Auth::id() == $movie->user_id)
                        {!! Form::open(['route' => ['movies.destroy', $movie->id], 'method' => 'delete']) !!}
                            {!! Form::submit('この動画を削除する？', ['class' => 'button btn btn-danger']) !!}
                        {!! Form::close() !!}
                    @endif

                </div>
                
            </div>

    @endforeach

</div>

{{ $movies->links('pagination::bootstrap-4') }}

ここまで出来ましたら、トップページやユーザ個別詳細ページをプレビューして
コメントを未入力の動画の下に、YouTube上の「動画タイトル」が表示されているか確認してみましょう。

うまく表示されなければ、キャッシュを利用した環境変数＝APIキーが上手く機能していない可能性が
考えられますので、一度下記コマンドを実行してみてください。

ターミナル

$ php artisan config:cache

上記コマンドにより、設定関連のキャッシュが一度クリアされ、
現在configフォルダ内で設定されている環境変数などの情報がキャッシュとして保存しなおされます。
つまり、先ほど環境変数を書き換えた内容が、上記コマンドにより更新されるということです。

RESTful API

RESTful APIとは？

YouTube API では、URLとHTTPメソッド（GETなど）を用いて動画のタイトルなどを取得してきました。

HTTPメソッドを使って決まったルールでアプリケーションにアクセスできるようにする考え方をREST（REpresentational State Transfer）といい、
その考え方に基づいて作られた YouTube API のような外部アプリケーションとの接続のルールを
RESTful APIといいます。

テキストの前半では、YouTubeというアプリケーションの内容を本講義のアプリケーションに連携させてきましたが
今度は、これまで作ってきた講義のアプリケーション自体を、他のサービスと連携させる術を学んでいきましょう。

少し発展的な内容にはなりますが、学んでいただくことで
Webサービスでは現状主流である「自社アプリケーションを他社サービスに連携させる」という
エンジニア業務上大切な仕事についてもある程度理解できると思います。

まず、初めにRouterから作っていきましょう。
前提として、URLの末尾に「/rest」を付けると、RESTful APIを扱えるようにしていきます。

下記内容を追記して下さい。
複数のルートを１行で表現できるresourceメソッドを用いて記述し、利用するアクションを 'only' を使って
５つに制限しましょう。
また、後ほど「RestappController」というコントローラを新規に作りますので、コントローラ名はこちらの名前で指定します。

laravel-quest　＞　routes　＞　web.php

web.php(一部抜粋)

//(前略)

Route::get('/', 'UsersController@index');

Route::get('signup', 'Auth\RegisterController@showRegistrationForm')->name('signup');
Route::post('signup', 'Auth\RegisterController@register')->name('signup.post');

Route::get('login', 'Auth\LoginController@showLoginForm')->name('login');
Route::post('login', 'Auth\LoginController@login')->name('login.post');
Route::get('logout', 'Auth\LoginController@logout')->name('logout');

Route::resource('users', 'UsersController', ['only' => ['show']]);

Route::group(['prefix' => 'users/{id}'], function () {
    Route::get('followings', 'UsersController@followings')->name('followings');
    Route::get('followers', 'UsersController@followers')->name('followers');
});

Route::resource('rest','RestappController', ['only' => ['index', 'show', 'create', 'store', 'destroy']]); //追記

//(後略)

次に、RestappControllerコントローラを作成しましょう。
下記の通り、コマンドの最後に--resource と記述すると、主要７アクションを自動的に作ってくれて便利です。
（本講義で実際に利用するのは５つのアクションなので、editアクションとupdateアクションは消してしまっても構いません）

ターミナル

$ php artisan make:controller RestappController --resource

laravel-quest　＞　app　＞　Http　＞　Controllers　＞　 RestappController.php

RestappController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class RestappController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        //
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        //
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        //
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        //
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        //
    }
}

では、５つのアクションの中身をそれぞれ追記していき、
このアプリケーションのRESTful APIをつくっていきましょう。

indexアクション

まず、URLにアクセスした人が「アプリケーションに登録しているユーザ一覧」を取得できるように
indexアクションをつくっていきます。
YouTube APIも同じでしたが、アクセスした人がJSONというデータ形式で、情報を取得できるようにしていきます。

laravel-quest　＞　app　＞　Http　＞　Controllers　＞　 RestappController.php の indexアクション

RestappController.php (一部抜粋)

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\User;
use App\Movie;

class RestappController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $users = User::all();
        return response()->json(
            [
                'users' => $users
            ],
            200,[],
            JSON_UNESCAPED_UNICODE|JSON_PRETTY_PRINT
        );
    }

早速ですが、下記アドレスにアクセスしましょう。
下記画像のように、今登録しているユーザの情報一覧が取得できれば成功です。

URL欄に下記を入力（「xxxxxxxx」部分は各自のプレビュー画面のアドレスに置き換えて下さい）

https://xxxxxxxxxxxxxxxxxxxxxxxxxx.vfs.cloud9.us-east-1.amazonaws.com/rest

createアクション

次に、このアプリケーションに外部から「動画を登録する」ことができるように
createアクションとstoreアクションをつくっていきます。

当然ながら、登録フォームがないと外部から動画登録することも出来ませんので、フォームをまず作成します。
createアクションでは、後ほど作るViewを表示させるだけの内容なので、下記のように記述しましょう。

laravel-quest　＞　app　＞　Http　＞　Controllers　＞　 RestappController.php の createアクション

RestappController.php

    public function create()
    {
        return view('rest.create');
    }

viewフォルダの中に、restフォルダを作成し、その中にcreate.blade.phpをつくって次のように記述していきます。
外部のアプリケーションでも同様のフォームを作れるように、ヘッダーやフッターは省いて記述しましょう。

laravel-quest　＞　resources　＞　views　＞　rest　＞　create.blade.php

create.blade.php

<!DOCTYPE html>
<html lang="ja">
    
    <head>
        
        <meta charset="utf-8">
        <title>YouTubeまとめ×SNS</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        
    </head>
    
    <body>
        
        <div class="container">
            
            @include('commons.error_messages')

        
                <h2 class="mt-5">動画を登録する</h2>
        
                {!! Form::open(['route'=>'rest.store']) !!}
                    <div class="form-group mt-5">
        
                        {!! Form::label('url','新規登録YouTube動画 "ID" を入力する',['class'=>'text-success']) !!}
                            <br>例）登録したいYouTube動画のURLが <span>https://www.youtube.com/watch?v=-bNMq1Nxn5o なら</span>
                            <div>  "v="の直後にある "<span class="text-success">-bNMq1Nxn5o</span>" を入力</div>
                        {!! Form::text('url',null,['class'=>'form-control']) !!}
                        
                        {!! Form::label('comment','登録動画へのコメント',['class'=> 'mt-3']) !!}
                        {!! Form::text('comment',null,['class'=>'form-control']) !!}
                        
        
                        {!! Form::submit('新規登録する？',['class'=> 'button btn btn-primary mt-5 mb-5']) !!}
        
                    </div>
                {!! Form::close() !!}

        </div>
        
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script>
        
    </body>
    
</html>

下記のURLにアクセスして、登録フォームが表示されるか確認しましょう。

URL欄に下記を入力（「xxxxxxxx」部分は各自のプレビュー画面のアドレスに置き換えて下さい）

https://xxxxxxxxxxxxxxxxxxxxxxxxxx.vfs.cloud9.us-east-1.amazonaws.com/rest/create

storeアクション

登録フォームの次は、storeアクションです。
フォームから登録される内容の保存処理を実行できるようにします。

動画登録できるのは、ユーザID：１のアカウントだけという形で制限を掛けています。
任意のアカウントに動画登録できるようにしても良いのですが、今回はID：１のユーザだけが外部アプリケーションから動画投稿できるアカウントとして、外部に解放する形にしていきましょう。

laravel-quest　＞　app　＞　Http　＞　Controllers　＞　 RestappController.php の storeアクション

RestappController.php (一部抜粋)

public function store(Request $request)
    {
        $this->validate($request,[
            'url' => 'required|max:11',
            'comment' => 'max:36',
        ]);

        User::find(1)->movies()->create([
            'url' => $request->url,
            'comment' => $request->comment,
        ]);

        $movies = User::find(1)->movies;
        
        return response()->json(
            [
                'movies' => $movies
            ],
            200,[],
            JSON_UNESCAPED_UNICODE|JSON_PRETTY_PRINT
        );
    }

完成したら、createアクションにアクセスして、保存を実行してみましょう。

URL欄に下記を入力（「xxxxxxxx」部分は各自のプレビュー画面のアドレスに置き換えて下さい）

https://xxxxxxxxxxxxxxxxxxxxxxxxxx.vfs.cloud9.us-east-1.amazonaws.com/rest/create

フォームに情報を入力後、「新規登録する？」ボタンを押せば、下記のように登録した動画情報が表示されるはずです。

showアクション

各ユーザの個別詳細情報を取得できるアクションをつくっていきましょう。
ユーザが持っている動画（movies）も表示されるようにしています。

laravel-quest　＞　app　＞　Http　＞　Controllers　＞　 RestappController.php の showアクション

RestappController.php (一部抜粋)

    public function show($id)
    {
        $user = User::find($id);
        $movies = $user->movies;
        return response()->json(
            [
                'user' => $user,
            ],
            200,[],
            JSON_UNESCAPED_UNICODE|JSON_PRETTY_PRINT
        );
    }

実際にアクセスして、ユーザの個別詳細情報を取得してみましょう。

URL欄に下記を入力（「xxxxxxxx」部分は各自のプレビュー画面のアドレスに置き換えて下さい）

https://xxxxxxxxxxxxxxxxxxxxxxxxxx.vfs.cloud9.us-east-1.amazonaws.com/rest/1

destroyアクション

ここでは、先ほど登録したような動画情報を削除するアクションをつくっていきましょう。
storeアクションではID:１のユーザの動画登録のみ実行できるようにしていましたので、
同じくID:１のユーザの動画情報のみ削除できるようにしていきたいと思います。

laravel-quest　＞　app　＞　Http　＞　Controllers　＞　 RestappController.php の deleteアクション

RestappController.php (一部抜粋)

    public function destroy($id)
    {
        $movie = Movie::find($id);
        $user = $movie->user;
        
        if ($user->id == 1) {
            $movie->delete();
        }
        
        $movies = $user->movies;

        return response()->json(
            [
                'movies' => $movies
            ],
            200,[],
            JSON_UNESCAPED_UNICODE|JSON_PRETTY_PRINT
        );
    }

destroyアクションを実行する際は、先ほどつくったcreate.blade.phpを利用して
そのcreate.blade.phpの中に登録動画情報の表示と「動画を削除する」ボタンをつくって消去出来るようにしていきます。

laravel-quest　＞　app　＞　Http　＞　Controllers　＞　 RestappController.php の createアクション

RestappController.php (一部抜粋)

    public function create()
    {
        $user = User::find(1);
        $movies = $user->movies;
        
        $data = [
            'movies' => $movies,
        ];
        
        return view('rest.create',$data);
    }

続いては、Viewの動画登録フォームの下に、登録動画情報と「動画を削除する」ボタンを記述していきましょう。

laravel-quest　＞　resources　＞　views　＞　rest　＞　create.blade.php

create.blade.php (一部抜粋)

　　//(前略)

                        {!! Form::submit('新規登録する？',['class'=> 'button btn btn-primary mt-5 mb-5']) !!}
        
                    </div>
                {!! Form::close() !!}
                
                
            <h2 class="mt-5 mb-5">動画を削除する</h2>
 
                @foreach ($movies as $key => $movie)
            
                    <p>動画ID：{{ $movie->id }}　URL：{{ $movie->url }}　コメント：{{ $movie->comment }}</p>
            
                    {!! Form::open(['route' => ['rest.destroy', $movie->id], 'method' => 'delete']) !!}
                            {!! Form::submit('この動画を削除する？', ['class' => 'button btn btn-danger mb-3']) !!}
                    {!! Form::close() !!}

                @endforeach

        </div>
        
　　//(後略)

では、再び登録フォームにアクセスして、「この動画を削除する？」ボタンを押して
動画情報がきちんと削除されるか確認してみましょう。

URL欄に下記を入力（「xxxxxxxx」部分は各自のプレビュー画面のアドレスに置き換えて下さい）

https://xxxxxxxxxxxxxxxxxxxxxxxxxx.vfs.cloud9.us-east-1.amazonaws.com/rest/create

Herokuを更新しよう

開発環境で上手くいったら、更新した内容でHeroku上のページに再度プッシュしていきましょう。
次のコマンドを実行して下さい。

ターミナル

$ git add .
$ git commit -m'API'
$ git push heroku master
$ heroku config:set API_KEY={あなたのAPIキー}

プッシュして、Herokuの環境変数も変更するところまでできたら、Herokuのページ上で上手く表示されるかを確認してみましょう。
上手くいきましたでしょうか？

APIについては、以上となります。

APIを使うと、自身のサービスを外部サービスにつなげたり、逆に外部サービスを自分のサービスにつなげたり出来るので、アプリケーションの幅が大きく広がります。

今回扱った以外のサービスとのAPI連携や、今回は触れていない外部サービスへ情報を渡す方法も学んでみてください。

お疲れ様でした！

この記事を書いた人

ゆーや