React×Firebaseでちゃんと開発するときの環境構築手順と解説
はじめに ReactとFirebaseを用いてフロントエンド開発するにあたって、追加で入れておきたい各種パッケージや設定を組み込んだ環境構築手順です。 この記事で構築する環境は以下の通りです。 ローカルで開発した内容をGitHubにpushすると、構文チェック→テスト→ビルド→デプロイされます。 また、mainブランチにpushしたらFirebaseの本番環境にデプロイされ、developブランチにpushしたらFirebaseの開発環境にデプロイされます。 事前準備 環境構築をするにあたって、以下は事前に準備してください。 VS Codeのインストール GitHubのアカウント登録 Node.jsのインストール 今回はv16.14.0を利用します Firebaseのプロジェクト作成 GitHubリポジトリの作成 GitHubのリポジトリを作成します。 公開範囲はPublic,Privat
React HooksとMaterial-ui v4で作成したウェブアプリをNext.jsで動かして、FirebaseでSSR(サーバーサイドレンダリング)をする。 - Qiita
やりたかったこと Next8とMaterial-UI4がHooksメインになってるから、 それで作成したものをFirebaseでSSRしたいだけの人生だった。 なので、テンプレートとしてカウンターを作った。 詳しいことはコード見てください https://github.com/scarlet-sage/React-Hooks-Nextjs-Material-Ui-next-With-Firebase-Hosting 結論としてはmaterial-ui/examples/nextjs-next at next · mui-org/material-ui · GitHub をnext.js/examples/with-firebase-hosting at canary · zeit/next.js · GitHubで動かしたら優勝した。 感想 Context APIあるとRedux不要論が現
FirebaseとReact+TypeScriptの連携 - Qiita
※同じ記事をこちらにも書いています 今回は以下の機能を利用します Firebase hosting 静的コンテンツの設置とfunctionsへのプロキシ functions databaseへの入出力 database データ保存 Webからのアクセスはfunctionsも含め、必ずhostingを介するようにします。これで静的コンテンツとデータアクセス用の窓口のドメインが同一になるので、CORS対策で余計な処理を付け加える必要がなくなります。 Reactに関してはトランスコンパイル後のファイルを静的コンテンツとしてhostingに配置します。フロントエンドからFirebaseのdatabaseへのアクセスはfunctions経由となるので、フロントエンド側にAPIキーの設定をする必要はありません。今回はキーを一切使わないコードとなっています。 １．基本設定 1.1 Firebaseツー
Next.jsとFirebaseで更新の手間がかからないポートフォリオサイトを作ってみた
はじめに ソフトウェアエンジニアとして就職して、2年半ほど経ちました。開発業務で得た知見を生かして、プライベートで簡単なツール開発、勉強会でのLT、Qiitaやブログへの記事執筆など様々な取り組みを行ってきたのですが、成果物が複数に分散する問題を抱えていました。 成果物を1箇所に集約することができれば、自分の得意なことや興味のあることが可視化できると考え、今回ポートフォリオサイトを作成したので、技術的な話をまとめたいと思います。 制作物 ポートフォリオサイトURL Kentaro Matsushita - @kentaro-m リポジトリ kentaro-m/portfolio: A my portfolio site that fetch data and display from various services such as GitHub, Qiita, SpeakerDeck.
Next.jsでFIrebase認証アプリ（with-firebase-authentication）を作る
next.js/examples/with-firebase-authentication at deprecated-main · vercel/next.js The React Framework. Contribute to vercel/next.js development by creating an account on GitHub. こちらを使います。 create-next-app --example with-firebase-authentication with-firebase-authentication-app cd with-firebase-authentication-app なお、create-next-appやfirebaseツールをインストールしていない場合は下記を予め実行しておきます。 # Next.js雛形作成ツール npm i -g cr
面倒なログイン機能の実装はFirebase Authenticationに丸投げしよう | apps-gcp.com
突然ですがこれを読んでいる皆さんはログイン機能を作ったことはありますでしょうか？筆者はFirebase Authenticationに触れるまで、ログイン機能というものを作ったことがありませんでした。何となく、ログイン機能を作るのは難しいという認識を皆さんも持っているのではないでしょうか。 ログイン機能とは、「ユーザの認証」と「システムにログインできること」という認可をおこなうことの組み合わせです。 認証と認可の違い 認証はユーザーが誰かを確認することです。認可は確認したユーザーがリソースに対するアクセス権限を持っているかを確認し、権限を持っている場合はリソースへの読み書きを許可します。 近年はOAuthやOpenID等の認証方法が登場し、それぞれの認証方法に対応したアプリケーションコードを毎回書くのは大変です。そこに登場したのがFirebase Authenticationです。Fire
React+MobX+Firebase-Authenticationでログイン/ログアウト機能を実装する - Qiita
はじめに 以前似たようなことをReact+Reduxでやってみています。 React+Redux+Firebase Authenticationでログイン/ログアウト機能を実装する (1) React+Redux+Firebase Authenticationでログイン/ログアウト機能を実装する (2) 最近、趣味の小規模プロジェクトだとReduxめんどくさいな、、と思い始めました。そこで、シンプルでいいよと聞くMobXを試してみることに。 まず手始めに、Reduxをつかってやってみたのと同じことをやってみようと思い、Firebase-Authenticationを使ったログイン/ログアウト機能をもつアプリケーションを作ってみました。 作成したものはk5trismegistus/react-mobx-firebase-loginにあります。 MobXとは MobXとは、Simple, sc
GPSを使わずにユーザーの位置情報を取得する方法 - Qiita
Why? モバイルアプリやゲームを作っていると、カジュアルにユーザーのおおまかな位置情報が欲しいと思うことは無いでしょうか？ しかし、AndroidやiOSでいちいちGPS使用権限の許可を得るのも大げさ。 そんなときにCloud Functions for Firebaseを使えば、カンタンに、しかも破格の料金1でユーザーの大まかな位置情報を取得することができます。 How? Cloud Functionsでは、リクエストヘッダ x-appengine-citylatlong 内にアクセスユーザーのおおまかな位置情報を表す緯度経度情報が入っています。ですので、このヘッダ情報を出力するfunctionを定義するだけで、いとも簡単に目的を達成できます。 なお精度に関して手元で検証したところ、現在位置の市区町村の役所の位置が出力されるようです。 例えば港区内でアクセスすると、35.658068,
2017-08-01-lignum
こんにちは。Lignumの開発を担当している明智と浅井です。 Lignumは今回紹介する配信基盤の名前です。 先日開催されたGoogle I/Oでも多くの新機能が発表されたFirebaseですが、弊社では昨年度からFirebaseを活用した機能開発に取り組んでいます。 今回は、その中でも『Firebaseを活用したアプリプッシュ通知の配信基盤の構築』について紹介したいと思います。 「アプリプッシュ通知の配信基盤」構築の背景 見えてきていた課題 弊社ではこれまで、リクルートグループ横断で利用できる独自開発された配信基盤を利用していました。 しかし、施策が高度化するにつれて 実施できる施策の制限 配信の見立て/結果の振り返りに利用したいデータが不足 といった「弊社独自の業務要件に追いつかなくなってきている」という課題が見えてきていました。 そこで、PDCAサイクルの回せる新たな配信基盤が必要だ
Firebaseの始め方
はこです。こんにちわ。今日はFirebaseを始めてみたいと思います。 Firebase is 何？ Firebase はGoogleが運営しているサービスで(2014年後半にGoogleが買収)、BaaSとかmBaaSと呼ばれるモノの一種。 ・・・だったはず何だけど、高機能多機能過ぎてヤバイことに。 BaaS/mBaaS is何？ 僕の理解では、mongoDB(或いは各種スキーマレスNoSQL)のクラウド上ホスティングから始まり、その他「サーバで作業しないとアプリ作れないもの」を仮想化するために追加された諸々（ログイン機能、push通知、etc...)のサービスを含む物。簡単にそして素早くアプリを作るためのもの。 たくさんあるけども、基本機能としてどれも「JSONを投げて保存・検索キーでJSON取り出し」がある。 Firebaseの諸機能 中心機能と特徴は 1. リアルタイムデータベース
ReactNative で Firebase を利用して push notification を配信する - Qiita
ReactNative で Firebase を利用し push notification を送る方法について紹介します。 構成 環境 Android 7.1.1 iOS 10.3.1 Android Studio 2.3.2 XCode 8.3.3 利用サービス Firebase 利用ライブラリ react-native-fcm 実装 Firebase の登録 以下のマニュアルにそって登録します。 Android用とiOS用をともに作成してください。 「Android パッケージ名」と「iOS バンドル ID」に入る「com.example.app」の部分は自分自身が作成しているアプリのものと同じものにしてください。 設定ファイルがそれぞれ作成されるのでダウンロードしておきます。 証明書の準備 Android とくにありません。 iOS 以下のマニュアルにそって準備します。 exampl
React+Redux+Firebase Authenticationでログイン/ログアウト機能を実装する (1) - Qiita
はじめに 表題の通り、React+Reduxで作っているアプリにFirebase Authenticationによるユーザー認証システムをのっけてみようというものです。ログインにはGoogleアカウントを使用することにします。 アプリといってもあくまでログイン機能のサンプルなので ログインしていない場合はログインボタンが表示されており、そのボタンをおすとポップアップでGoogleアカウントログイン ログインしている場合は画面にユーザー情報を表示する だけのものです。 サンプルアプリのリポジトリは↓にあります。 https://github.com/k5trismegistus/react-redux-firebase-login リポジトリをみてもらえばわかりますが、ディレクトリ構造は次のようになっています。フロントエンドは家でちょろちょろいじる程度なのでよくわかってないです><。普通こう
Firebaseによるプッシュ通知のハマりどころ - Qiita
Google I/O 2016で新しいFirebaseが発表されましたね。 iOSアプリでのプッシュ通知が実現したかったので、早速Firebase Cloud Messaging(FCM)を中心に使ってみました。 その中で、私がハマったところと解決方法を紹介します。 そもそも Firebase Notification と FCM は違うもの Firebase Notificationとは、FCMの上に実装された軽量でサーバレスのメッセージサービスです。Webコンソールからプッシュ通知を送ることで、アプリのグロースのために簡単にキャンペーンを行うことができます。 FCMとは、HTTPやXMPPを通して使う多機能なメッセージサービスです。 というわけで、似てるけど使い方が異なるサービスなわけです。 ドキュメントを読み進める上で、この違いは重要です。 以下は、それぞれを比較した表になります。
無料で使えるアプリ版Google Analyticsとでも言うべき「Firebase Analytics」などを繰り出すGoogle傘下Firebaseのすごいバックエンド機能まとめ
アプリ開発では、アプリ自体の設計だけでなく、データを共有するためのサーバーの管理やユーザー認証の設定、データを同期する仕組みや通知の出し方など、アプリの内容そのものではない付帯的な機能(バックエンド機能)への取り組みが不可欠です。しかし、このような裏側でアプリやサービスを支えるバックエンド機能への対応は複雑で時間がかかるため、アプリ開発者にとってやりたいことの妨げになる面倒な作業と言えます。アプリ開発者に代わって面倒なバックエンド機能の構築作業をクラウド上で引き受けるMobile Backend as a Service(mBaaS)の「Firebase」が、アプリ版のGoogle Analyticsとも言うべき解析ツール「Firebase Analytics」を機能制限なく無料で提供することになりました。 The Firebase Blog: Firebase expands to be
［速報］Google、モバイルアプリ用ログ解析ツール「Firebase Analytics」の無償提供を発表。ノーティフィケーションも無制限に無償で提供。Google I/O 2016 － Publickey
［速報］Google、モバイルアプリ用ログ解析ツール「Firebase Analytics」の無償提供を発表。ノーティフィケーションも無制限に無償で提供。Google I/O 2016 Googleはサンフランシスコで開催中のイベント「Google I/O 2016」で、モバイル向けバックエンドサービス（MBaaS）である「Firebase」の新バージョンで、アプリケーション向けログ解析ツール「Firebase Analytics」を無制限かつ無償で提供すると発表しました。 新バージョンのFirebaseは単なるMBaaSではなく、モバイルアプリケーションの開発を促進するためのさまざまな機能の集合体となっています。 Firebase Analyticsはアプリケーションのログ解析に最適化された、いわばアプリ版のGoogle Analytics。iOS、Androidに対応。 これを無償かつ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google、アプリとウェブを統合して測定する方法を発表
NOT SO BADなブログ