テスト環境の作成

公開環境でテストをするわけにはいかないので、テストのための環境を用意する必要があります。

Firebase上で別プロジェクトを作成して、テスト環境を用意しました。
FirebaseのCLIツールでは、一つの作業ディレクトリで複数のプロジェクトを扱うことができます。

参考URL
Firebase CLI リファレンス | Firebase

Angular CLIでAngularプロジェクトを作成した場合にenvironmentsで環境毎の設定変更が可能です。
アプリ内での環境変更はこれを活用しました。
/src/environments/にテスト環境用と本番環境用の設定を用意しました。

独自ドメインの設定

お名前.comでドメインを取得しました。
Firebaseの場合、FirebaseのコンソールにあるHostingのメニューから独自ドメインを設定することができます。
SSL証明書も自動的に付いてきます。
Firebaseの情報に従って、お名前.comのDNSサーバにDNSレコードを設定しました。

参考URL
Connect a custom domain | Firebase

トップページにアプリの紹介を載せる

トップページには、どんなアプリなのかを理解してもらうための簡潔な説明を書きました。
いらすとやから画像を拝借しています。

かわいいフリー素材集いらすとや

問い合わせ先の記載

メールアドレスの用意

Webアプリの問い合わせ先を用意します。
問い合わせ先として独自ドメインのメールアドレスを用意しました。
参考にしたサイトが独自ドメインのメールアドレスを用意していたので、そういうものなんだと思っています。
独自ドメインのメールアドレスを用意するのにお名前メールを使いました。

失敗したこと

お名前メール用の共用DNSサーバを使う必要があるようで、Firebaseへのホスティング用に使用したDNSサーバは使えずにドメイン名が異なるメールアドレスになってしまいました。
契約した後に気付いたので、これはそのままになっています。

利用規約とプライバシーポリシーの記載

Webアプリのルールを定めたものとして利用規約とプライバシーポリシーを用意する必要があるようです。

作成にあたっては、こちらを参考にしました。
Webサイトの利用規約（無料テンプレート・商用利用可）

見よう見まねです。

その頃よくチェックしていた技術書典のサイトも大いに参考にしました。
技術書典8

著作権表示の記載

著作権表示を慣習として用意します。
著作権表示には正式な書き方があるようです。
色々な書き方がありますが、下記の内容が表記されていれば十分のようです。

Copyright表記
著作物の発行年号
著作権所有者の氏名

こちらを参考にしました。
Copyright(コピーライト：著作権表示)の正しい書き方を知っていますか？：webサイト制作 - webデザイン初心者｜sometimes study

こちらも見よう見まねです。

Googleアナリティクスを追加

アプリをどれくらいのユーザが利用しているのかトラッキングしたいので、Googleアナリティクスを導入します。
AngularでGoogleアナリティクスを使うためのポイントは下記の通りです。

index.htmlにGoogleアナリティクスが提供するJavaScriptのトラッキングコードを記載する
ルーティングの際にページを表示したデータを送る

app.component.ts

...
constructor(private router: Router) {
  this.router.events.subscribe(event => {
    if (event instanceof NavigationEnd) {
      (<any>window).ga('set', 'page', event.urlAfterRedirects);
      (<any>window).ga('send', 'pageview');
    }
  });
}
...

参考URL
Using Google Analytics with Angular - codeburst

JavaScriptのエラートラッキングを追加

今回のアプリの構成だとサーバがないためにエラーが発生してもクライアントでしか分かりません。
クライアントのエラー情報を収集するための仕組みを用意する必要がありました。

このためにSentryというサービスを使いました。
Application Monitoring and Error Tracking Software | Sentry

Angularで使うためのドキュメントが公式で用意されています。
Integrations - Docs

Sentryのコンソールからクライアントで発生したJavaScriptのエラー情報が見えるようになりました。

SNSシェアボタンの設置

Twitterとはてブのボタンを設置しました。
Twitterでの表示を意図したものにするためにOGPの設定を行いました。

index.html

<meta property="og:title" content="ページタイトル" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:type" content="website" />
<meta property="og:url" content="ページのURL" />
<meta property="og:description" content="ページの説明" />
<meta property="og:image" content="ページのイメージ画像" />
<meta name="twitter:card" content="summary">

ボタンの配置は公式で提供されている方法を使いました。

Twitter Publish

はてなブックマークボタンの作成・設置について

ボタンを配置するためのコードにscriptタグが含まれていますが、
Angularではscriptタグをhtmlに記載しても無効化されてしまうので、
コンポーネントの初期処理時にscriptタグを生成するコードを記載しました。

...
constructor(
  private elementRef: ElementRef
) {}

ngOnInit() {
  const twitter = document.createElement('script');
  twitter.src = 'https://platform.twitter.com/widgets.js';
  twitter.async = true;
  twitter.charset = 'utf-8';
  this.elementRef.nativeElement.appendChild(twitter);
}
...