Angularでディープリンクを使いこなすためのベストプラクティス

Angular でのディープリンク処理の徹底ガイド

ディープリンクは、SPA の特定のルートまたはコンポーネントを直接指す URL です。ユーザーがブックマークをクリックしたり、ソーシャル メディアから共有されたリンクを開いたり、他の Web サイトから直接アプリにアクセスしたりすると、ディープリンクが使用されます。

Angular でディープリンクを処理するには、いくつかの主要なステップがあります。

ルーティングの設定

まず、Angular のルーティングモジュールをセットアップする必要があります。これにより、アプリの異なるルートと、各ルートに対応するコンポーネントを定義できます。

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'products', component: ProductsComponent },
  // その他のルートを定義...
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

ディープリンクの検出

次に、アプリケーションが起動されたときにディープリンクを検出する必要があります。これを行うには、Location サービスを使用できます。

import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  constructor(private location: Location) {}

  ngOnInit() {
    this.location.subscribe((event) => {
      // URL の変更を処理する
      console.log('新しい URL:', event.url);
      // ディープリンクかどうかを判断し、対応するコンポーネントにナビゲートする
    });
  }
}

ディープリンクを検出したら、対応するコンポーネントにナビゲートする必要があります。これを行うには、Router サービスを使用できます。

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-product-details',
  templateUrl: './product-details.component.html',
  styleUrls: ['./product-details.component.css']
})
export class ProductDetailsComponent implements OnInit {

  constructor(private router: Router) {}

  ngOnInit() {
    // ルートパラメータから製品 ID を取得する
    const productId = this.activatedRoute.snapshot.paramMap.get('id');
    // 製品詳細ページにナビゲートする
    this.router.navigate(['/products', productId]);
  }
}

追加の考慮事項

• パラメータの処理: ディープリンクには、コンポーネントに渡されるパラメータが含まれている場合があります。これらのパラメータは、ActivatedRoute サービスを使用して取得できます。
• エラー処理: ディープリンクが無効な場合、または対応するコンポーネントが見つからない場合は、適切なエラーメッセージを表示する必要があります。
• アクセス制御: 特定のルートまたはコンポーネントへのアクセスを制限する必要がある場合は、認証と認可を実装する必要があります。

<router-outlet></router-outlet>

import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  constructor(private location: Location) {}

  ngOnInit() {
    this.location.subscribe((event) => {
      // URL の変更を処理する
      console.log('新しい URL:', event.url);
      // ディープリンクかどうかを判断し、対応するコンポーネントにナビゲートする
      if (event.url.startsWith('/products')) {
        const productId = event.url.split('/')[2];
        this.router.navigate(['/products', productId]);
      }
    });
  }
}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'products', component: ProductsComponent },
  { path: 'products/:id', component: ProductDetailsComponent },
  // その他のルートを定義...
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent { }

<a routerLink="/products/1">製品 1 を表示</a>
<a routerLink="/products/2">製品 2 を表示</a>

products.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.css']
})
export class ProductsComponent { }

<ul>
  <li *ngFor="let product of products">
    <a routerLink="/products/{{product.id}}">{{product.name}}</a>
  </li>
</ul>

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ProductService } from '../product.service';

@Component({
  selector: 'app-product-details',
  templateUrl: './product-details.component.html',
  styleUrls: ['./product-details.component.css']
})
export class ProductDetailsComponent implements OnInit {

  product: Product;

  constructor(
    private activatedRoute: ActivatedRoute,
    private productService: ProductService
  ) {}

  ngOnInit() {
    const productId = this.activatedRoute.snapshot.paramMap.get('id');
    this.productService.getProduct(productId).subscribe((product) => {
      this.product = product;
    });
  }
}

<h2>{{product.name}}</h2>
<p>{{product.description}}</p>
<p>価格: {{product.price}}</p>

product.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ProductService {

  constructor(private http: HttpClient) {}

  getProducts() {
    return this.http.get<Product[]>('https://jsonplaceholder.typicode.com/products');
  }

  getProduct(id: string) {
    return this.http.get<Product>(`https://jsonplaceholder.typicode.com/products/${id}`);
  }
}

product.ts

export interface Product {
  id

Angular 8 以降では、RouterModule.forChild() メソッドを使用して、個別のモジュール内でルーティングを定義できます。これは、アプリケーションをよりモジュール化し、コードを整理するのに役立ちます。

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: 'products', component: ProductsComponent },
  { path: 'products/:id', component: ProductDetailsComponent },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ProductsRoutingModule {}

ルートガードを使用する

ルートガードを使用して、特定のルートへのアクセスを制限できます。これは、認証と認可を実装するのに役立ちます。

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AuthService } from '../auth.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(private authService: AuthService) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    if (this.authService.isLoggedIn()) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

const routes: Routes = [
  { path: 'products', component: ProductsComponent, canActivate: [AuthGuard] },
  { path: 'products/:id', component: ProductDetailsComponent, canActivate: [AuthGuard] },
];

カスタムリンクディレクティブを使用する

カスタムリンクディレクティブを使用して、独自のディープリンクを作成できます。これは、より複雑なディープリンク処理が必要な場合に役立ちます。

import { Directive, Input } from '@angular/core';
import { Router } from '@angular/router';

@Directive({
  selector: '[appDeepLink]'
})
export class DeepLinkDirective {

  @Input() appDeepLink: string;

  constructor(private router: Router) {}

  onClick() {
    this.router.navigate([this.appDeepLink]);
  }
}

<a appDeepLink="/products/1">製品 1 を表示</a>

ngrx/store を使用する

ngrx/store を使用して、アプリケーションの状態を管理できます。これにより、ディープリンクを処理し、アプリケーション全体で状態を更新するのに役立ちます。

これらは、Angular でディープリンクを処理するいくつかの方法です。最適な方法は、アプリケーションの要件によって異なります。

• ディープリンク URL を簡潔でわかりやすくする
• ディープリンクが検索エンジンに最適化されていることを確認する
• ディープリンクがテストされていることを確認する