0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Ionic + Angular】TMDb APIで映画の一覧を取得して表示する

Last updated at Posted at 2020-09-16

#出来上がりはこんな感じ

#環境
Ionic + Angularでやってますが、他のjsフレームワークでもやり方は同じかと。。

$ ionic info

Ionic:

   Ionic CLI                     : 6.11.8 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.3.2
   @angular-devkit/build-angular : 0.1000.8
   @angular-devkit/schematics    : 10.0.8
   @angular/cli                  : 10.0.8
   @ionic/angular-toolkit        : 2.3.3

Capacitor:

   Capacitor CLI   : 2.4.1
   @capacitor/core : 2.4.1

Utility:

   cordova-res (update available: 0.15.1) : 0.6.0
   native-run (update available: 1.1.0)   : 0.2.8

System:

   NodeJS : v10.15.1 (/usr/local/bin/node)
   npm    : 6.12.1
   OS     : macOS Catalina

#映画情報を取得できるTMDDb API
https://www.themoviedb.org

まずは上記リンクから会員登録をして、API keyの申請をしましょう。
※API keyの申請で「どんなアプリケーションに使いますか?」的なことを聞かれますが、これは英語で回答しましょう:sweat_smile:
日本語で答えるとエラーで弾かれました。。。

#Ionicプロジェクトを作る

ionic start movieApp blank --capacitor

別になんでもいいのですが、適当にblankで作ります。

これで準備は完了!

#TMDb APIで映画の一覧を取得
まずはAPI keyを管理するapi.service.tsのファイル名でserviceを作成する

##API情報を扱うserviceを作る

ionic g service service/api

これでserviceフォルダの中にapi.service.tsが作成されたかと。

api.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  apiKey = '***';
  // 最後に &language=ja をつけると日本語に
  getNowPlayingURL = `https://api.themoviedb.org/3/movie/now_playing?api_key=${this.apiKey}`;

  constructor() { }
}

コメントにある通り&language=jaを最後につけると、API情報が日本語で取得できます(日本語の情報がある場合のみ)
https://developers.themoviedb.org/3/getting-started/languages

getNowPlayingURL = `https://api.themoviedb.org/3/movie/now_playing?api_key=${this.apiKey}&language=ja`;

##APIを扱うHttpモジュールを用意
まずはHttpClientModuleapp.module.tsでimport
これをしないと、必要なHttpClientが使えない。

app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { HttpClientModule } from '@angular/common/http';


@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    HttpClientModule,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

次はhome.page.ts

import { ApiService } from './../service/api.service';
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {

  // 映画の情報を入れ込む
  list;

  constructor(
    private http: HttpClient,
    private apiService: ApiService,
  ) { }

  ngOnInit() {
    // (data: any)のようにカッコがないと「resultsなんかないぞ」とエラーくらいます
    this.getMovies().subscribe((data: any) => {
      console.log(data);
      this.list = data.results;
    });
  }

  // api.service.tsのプロパティーを使う
  getMovies() {
    return this.http.get(this.apiService.getNowPlayingURL);
  }
}

##画面に表示する

home.page.html
<ion-header [translucent]="false">
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      このみる
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title>Now Movies</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-grid>
    <ion-row>
      <ion-col>
        <ion-card *ngFor="let movie of list" class="ion-padding-top">
          <div class="ion-text-center">
            <img src="https://image.tmdb.org/t/p/w300_and_h450_bestv2/{{movie.poster_path}}" />
          </div>
          <ion-card-header>
            <ion-card-subtitle>{{ movie.release_date }}</ion-card-subtitle>
            <ion-card-title>{{ movie.title }}</ion-card-title>
          </ion-card-header>
        
          <ion-card-content>
            {{ movie.overview }}
          </ion-card-content>
        </ion-card>
      </ion-col>
     
    </ion-row>
  </ion-grid> 
</ion-content>

スクリーンショット 2020-09-16 21.26.42.jpg

これで取得できていたらOK!

いやー、TMDb APIはすごい。しかも商用も無料!

#参考にしたページ
https://stackblitz.com/edit/angular-movies-list

#終わりに
検索もできます:point_down:
【Ionic + Angular】TMDb APIで映画の検索を実装する

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?