なになれ

IT系のことを記録していきます。

Angular+FirebaseのWebアプリを公開するために実施したこと

過去に記事にしたWebアプリを公開しました。

bookshelf-share.site

技術的なことは下記記事を見てください。

hi1280.hatenablog.com

この記事では、アプリの開発以外で実際に公開するために実施したことを紹介します。

目次

テスト環境の作成

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

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サイトの利用規約(無料テンプレート・商用利用可)

見よう見まねです。

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

著作権表示の記載

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

  • 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というサービスを使いました。
Sentry | Error Tracking Software — JavaScript, Python, PHP, Ruby, more

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

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);
}
...

参考URL
javascript - script tag in angular2 template / hook when template dom is loaded - Stack Overflow

まとめ

友達から気軽に本を借りたいという個人的な動機から生まれたアプリです。
今後も使い勝手を向上するために改善して行く予定です。

bookshelf-share.site