2
1

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&PolymerでWebアプリを始める

Posted at

#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を自分のプロジェクトのものに書き換えていく

2
1
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
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?