Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
Angular TIPS

Angular TIPS

コンポーネントからページのメタ情報を操作するには?(Meta)

2018年3月30日

Metaサービスを使って、コンポーネントからページのメタ情報を操作する方法を説明する。

  • このエントリーをはてなブックマークに追加

【対応バージョン】 Angular 5以降。v5時点で執筆しました。

 コンポーネントからページのメタ情報(<meta>要素)を操作するには、専用のMetaサービスを利用します。別稿「TIPS:コンポーネントからページのタイトルを操作するには?」でも触れたように、コンポーネント(テンプレート)からはページの骨組みに関わる要素(例えば<head>要素配下の要素)を操作することはできないので注意してください。

 さっそく、具体的な用例を見てみましょう。以下は、ページに対して、

<meta name="description" content="Angularの基本機能を解説" />

のようなメタ情報を追加するためのコードです*1。メタ情報が追加されているかどうかは、ブラウザーの開発者ツール(Chromeであれば、その[Elements]タブから)などから確認してください。

  • *1 descriptionはページの詳細情報を表します。その他、ページのキーワードを表すkeywordなどもよく利用します。
TypeScript
import { Component } from '@angular/core';
import { Meta } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  template: `<h1>Hello {{name}}</h1>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 1Metaサービスを注入
  constructor(private meta: Meta) {
    // 2メタ情報を追加
    this.meta.addTag({
      name: 'description',
      content: 'Angularの基本機能を解説'
    })
  }
  name = 'Angular';
}
メタ情報(ページの説明)を設定するためのコード(app.component.ts)
メタ情報が追加されている(ブラウザーの開発者ツールから確認)

 コンストラクター経由でMetaサービスを注入できる点は、他のサービスを利用する場合と同じです(詳しくは、別稿「TIPS:自作のサービスを定義するには?」も参照してください)。コンポーネントのmetaプロパティにインスタンスをセットしておきます(1)。

 メタ情報を追加するのは、addTagメソッドの役割です(2)。

[構文]addTagメソッド

addTag(tag [,force])

  • tag: メタ情報
  • force: 同一のメタ情報がある場合にも追加するか(falseで上書き)

 引数tag(メタ情報)は、以下のようなプロパティを持つオブジェクトとして宣言します。

プロパティ 概要
name メタ情報のキー名
http-equiv プラグマ指示子
content name/http-equiv属性に対応する値
charset 文字コード
引数tagで設定できるプロパティ

 namehttp-equivプロパティは、いずれか片方を設定します。この例であれば、descriptionというキーで、「Angularの基本機能を解説」という値を設定しなさい、という意味になります。

 プラグマ指示子とは、ブラウザーに対してドキュメントの付随情報を伝達したり、決められた挙動を指示したりするための命令です。主な指示子には、以下のようなものがあります。

  • refresh: ページのリロード時間
  • content-language: ページの使用言語
  • content-type: ファイルの型
  • default-style: デフォルトで適用されるスタイルシート

Metaサービスのその他のメソッド

 Metaサービスでは、addTagメソッドの他に、以下のようなメソッドを利用できます。

addTags(tags [,force]) メソッド

 複数のメタ情報をまとめて設定するためのメソッドです。引数tagsに「メタ情報のキー: 値」形式のオブジェクトを配列として列記できる他は、addTagメソッドと同様に利用できます。

 例えば以下は、keyworddescriptionキーをまとめて設定する例です。

TypeScript
this.meta.addTags([
  {
    name: 'description',
    content: 'Angularの基本機能を解説'
  },
  {
    name: 'keyword',
    content: 'Angular Tips'
  }
]);
複数のメタ情報をまとめて設定するコード(app.component.tsから抜粋)

 もちろん、addTagメソッドを列記しても同じ意味になります。

updateTag(tag) メソッド

 設定済みのメタ情報を更新します。nameキーが等しいメタ情報を上書き更新します。

 例えば以下であれば、descriptionをキーとするメタ情報を上書きしています。

TypeScript
this.meta.updateTag({
  name: 'description',
  content: 'Angularの基本機能を解説'
});
既存のメタ情報を更新するコード(app.component.tsから抜粋)
removeTag(selector) メソッド

 引数selectorに合致する既存のメタ情報を削除します。例えば以下であればname属性がkeywordであるメタ情報を削除します。

TypeScript
this.meta.removeTag('name=keyword');
既存のメタ情報を更新するコード(app.component.tsから抜粋)
処理対象:サービス(Service) カテゴリ:基本
処理対象:クラス(CLASS) カテゴリ:サービス(Service)
API:Meta カテゴリ:@angular > platform-browser > CLASS(クラス)

※以下では、本稿の前後を合わせて5回分(第44回~第48回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

Angular TIPS
44. 式の値によってメッセージを切り替えるには?(ngSwitch)

JavaScriptのswitch文のように、ある式を評価して、その式の値に応じて、表示するメッセージを切り替える方法を説明する。

Angular TIPS
45. 自作のサービスを定義するには?(@Injectableデコレーター)

既存のコンポーネントからアプリ固有のロジックをサービスとして切り出すための基本的な方法を説明する。

Angular TIPS
46. サーバーサイドと非同期通信するには?(HttpClientサービス)

HttpClientサービスを使ってWeb APIと非同期通信するための基本的な方法を説明する。

Angular TIPS
47. ファイルをサーバーにアップロードするには?(HttpClientサービス)

HttpClientサービスを使ってサーバーにファイルをアップロードするための基本的な方法を説明する。

Angular TIPS
48. 【現在、表示中】≫ コンポーネントからページのメタ情報を操作するには?(Meta)

Metaサービスを使って、コンポーネントからページのメタ情報を操作する方法を説明する。

サイトからのお知らせ

Twitterでつぶやこう!