7
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Firebase Hostingを使ってアプリのお知らせページを実装

Last updated at Posted at 2017-09-19

やりたいこと

Androidアプリ内にお知らせページを作りたい。
お知らせページは更新頻度が高めなので、アプリの更新をしなくてもお知らせ情報だけ更新できるようにしたい。
サーバーは用意できない。

そこで思いついたのが下記の2つ。

  1. Google Apps Scriptを用いてHTMLを生成・配信。
  2. Firebase Hostingを用いてHTMLを配信。

Google Apps Script(GAS)を用いてHTMLを生成・配信。

実際に試してみましたが、生成したHTMLをアプリのWebViewで表示するとなにやら上部に謎の表記が。。。
Screenshot_1505659875 3.png

拡大してみるとこんな表記が。
This application was created by another user, not by Google.
Report abuse - Terms of Service
消し方が分からず、これを出しっぱのままアプリをリリースするわけにもいかないのでFirebase Hostingの方を選択してみました。

Firebase Hostingを用いてHTMLを配信。

ここではFirebase Hostingの導入から、ホスティングした静的コンテンツ(HTML)を表示できるようにするところまでを紹介します。
前提として、Firebaseにてプロジェクトを作成済みであるとします。

Node.jsとnpmのインストール

まずはNode.jsとnpmのインストールを行います。
https://nodejs.org/ja/
インストーラの手順に沿ってインストールを行ってください。

Firebase CLI(コマンドライン インターフェース)のインストール

npmを用いてFirebase CLI(コマンドライン インターフェース)のインストールを行います。
コマンドラインツールから下記コマンドを実行してください。
npm install -g firebase-tools

実行時にError:EACCESというエラーが発生するかもしれません。
その場合は下記の記事を参考にしてください。
http://qiita.com/Gaddict/items/8c76d92bd0adec2bfb6a

Firebaseへのログイン

ここからはFirebase CLIのコマンドを使って操作をしていきます。
まずはFirebaseへのアクセスを可能にするために下記コマンドでFirebaseのプロジェクトと紐付いたアカウントにログインします。
Firebase login

Firebaseアプリの初期化

ログイン後、Firebaseアプリの初期化を行います。
ここでいうFirebaseアプリとは、Firebase Hostingで配信する静的コンテンツのことを指します。(たぶん。。。)
下記コマンドをアプリのルートディレクトリにて実行してください。
firebase init

私の場合はAndroidアプリをBitbucketで管理しているので、静的コンテンツも同じように管理したいと思いアプリのプロジェクト直下にディレクトリを移動してから上記コマンドを実行しました。

上記コマンドを実行すると、まずはじめにFirebaseのどの機能を利用するかを聞かれるのでHostingを選択します。
さらに、紐付けるFirebaseプロジェクトを聞かれるので、自分が設定したいプロジェクトを選択してください。
続いて、公開ディレクトリの指定を促されます。今後はこのディレクトリ内に静的コンテンツを配置していくことになります。そのままEnterを押すとpublicというフォルダが作成されその中にindex.htmlが作成されます。
最後に、アクセスを全てindex.html経由にするかどうかを聞かれます。複数のHTMLを配置してそれぞれに直接アクセスできるようにしたい場合はNO、全てのアクセスをindex.html経由にしたい場合はYESを入力してEnterを押してください。ちなみにここでNOを選択すると、index.htmlが生成されたフォルダ内に404.htmlが生成されます。

これにて初期化は完了です。

静的コンテンツをデプロイする。

先ほど指定した公開ディレクトリの中身の静的コンテンツに外部からアクセスできるようにするには、このフォルダ内のコンテンツをデプロイする必要があります。
下記コマンドを実行することでデプロイできます。
firebase deploy

成功するとプロジェクト固有のドメインが表示されるので、そのドメインにアクセスするとindex.htmlの内容が表示されることが確認できると思います。

終わりに

Firebase Hostingを用いることでサーバレスでHTMLを配信することができました。
無料のアカウントだと保存容量が1GB、ユーザーアクセスによるダウンロードが10GB/月なので、個人開発のアプリやサイトであれば十分な容量ではないかと思います。
皆さんも是非、使ってみてください。

7
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?