[Angular 4.0] Metaサービスの使い方

Angular 4.0で追加された新しい組み込みサービス、Metaについて解説します。

`Meta`サービス

Metaサービスは、その名のとおり、HTMLの<meta>タグに対する操作を行うためのサービスです。 @angular/platform-browserパッケージから提供されていて、2.0ですでに実装されているTitleサービスと同じように使用できます。

import { Meta } from '@angular/platform-browser';

@Injectable()
export class MyService {
    constructor(metaService: Meta) {}
}

`getTag(attrSelector: string): HTMLMetaElement`

getTagメソッドは、引数のattrSelectorに該当するmetaタグ要素を取得するものです。 attrSelectorは通常のCSSセレクタではなく、属性をベースにした文字列です。たとえばpropertyがfb:app_idのmetaタグを取得したい場合は次のように呼び出します。

const tag = metaService.getTag('property=fb:app_id');

同じ引数で、複数件の戻り値を返せるgetTagsもあります。

const tags = metaService.getTags('name=author');

`addTag(tag: MetaDefinition, forceCreation: boolean = false): HTMLMetaElement`

addTagメソッドは新しくmetaタグをheadに追加するためのものです。引数はMetaDefinition型のオブジェクトと、すでに同じmetaタグが存在するときに上書きするかどうかのフラグです。戻り値には新しく生成された、あるいはすでに存在していたmetaタグ要素が渡されます。

MetaDefinitionインターフェースは次のような定義になっています。

export type MetaDefinition = {
  charset?: string; 
  content?: string; 
  httpEquiv?: string; 
  id?: string; 
  itemprop?: string;
  name?: string;
  property?: string;
  scheme?: string;
  url?: string;
}

実際の使い方は次のようになります。

metaService.addTag({name: 'author', content: 'page author'});

こちらも同時に複数件を処理するaddTagsメソッドが用意されています。

metaService.addTags([
    {name: 'twitter:title', content: 'Content Title'},
    {property: 'og:title', content: 'Content Title'}
]);

`updateTag(tag: MetaDefinition, selector?: string): HTMLMetaElement`

updateTagメソッドはすでに存在するmetaタグを更新するためのものです。第2引数にセレクタが渡されなければ、第1引数のnameやpropertyをもとに更新対象を自動で判別します。また、対象が存在しなければmetaタグの追加を行います。

`removeTag(attrSelector: string): void`

removeTagメソッドはセレクタにヒットしたmetaタグを除去します。

`removeTagElement(meta: HTMLMetaElement): void`

こちらは、セレクタではなくmetaタグ要素を受け取り、その要素をDOM上から除去します。

まとめ

これまでSNSへのシェアなどのためにmetaタグを操作する必要があったときは、直接DOMを操作する必要がありました。ただブラウザ上で動かすだけなら問題ないですが、Angularはクロスプラットフォームに動作できることが目標なので、これは避けるべきものでした。

今回導入されたMetaはAngular内部で統合されているので、将来的にはUniversalによるサーバーサイドレンダリング時にも使えて、SEOのためのmetaタグ操作も可能になるよう設計されています。ぜひ独自のサービスから組み込みのMetaに乗り換えておきたいところです。ただし、このAPIはまだexperimentalなので、半年後の次期メジャーアップデート(5.0)の時には多少の破壊的変更が入るかもしれないことに留意しましょう。

Metaについてもっと知りたい方はソースコードや、テストコードを読むとよいでしょう。

Angular 4.0 Features