Firebase&PolymerでWebアプリを始める

Polymerのインストール

Polymer CLIのインストール

node.jsのバージョンを確認
node --version

※node.jsが入っていない場合は、こちらからインストール

npmを最新版をインストール
npm install npm@latest -g

gitのバージョンを確認
git --version

※gitが入っていない場合は、こちらからインストール

Bowerの最新版をインストール
npm install -g bower

Polymer CLIをインストール
npm install -g polymer-cli

※Polymer CLIのインストール時にエラーが出る場合は、node.jsのバージョンを落としてから再度試す。過去バージョンのインストールはこちら

Polymer本体のインストール

Polymerをインストールするフォルダを作成
mkdir polymer-20-test

作成したフォルダに移動
cd polymer-20-test

Polymerを初期化
polymer init

※Polymer2を選択(polymer-2-starter-kit)

ローカルサーバを起動
polymer serve

Firebaseを始める

プロジェクトを始める

Firebaseのサイトにアクセス こちら

「スタートガイド」から「プロジェクトを追加」を選択

• プロジェクト名
• 地域 / ロケーション

を入力・選択し、同意のチェックボックスにチェックを入れて、「プロジェクトを作成」をクリック

PolymerにFirebaseを追加

polymerfireをインストール

インストールはこちら

DOWNLOADからコマンドをコピーしてペースト

src/my-app.htmlにpolymerfireをインポート
<link rel="import" href="../bower_components/polymerfire/polymerfire.html">

firebase-appのタグを追加

my-app.html

<firebase-app
  auth-domain="polymerfire-test.firebaseapp.com"
  database-url="https://polymerfire-test.firebaseio.com/"
  api-key="AIzaSyDTP-eiQezleFsV2WddFBAhF_WEzx_8v_g"
  storage-bucket="polymerfire-test.appspot.com"
  messaging-sender-id="544817973908">
</firebase-app>

Firebaseの、Project Overviewから「ウェブアプリにFirebaseを追加」をクリック

firebase-appのattributeを自分のプロジェクトのものに書き換えていく