はじめに この記事では、Firebase Authenticationを使ってTypeScriptを使用したNextアプリにGoogleログインを実装する方法を記述します。 JavaScriptを使用したNextアプリにGoogleログインを実装する方法はこちらに記述しています。 この記事が他の人の参考になれば幸いです。 また、この記事の内容に間違った記載がありましたら、指摘してもらえるとありがたいです。 環境 名前 バージョン
Next.js（TypeScript）でFirebaseを利用し、Googleログインを実装する
はじめに この記事では、Firebase Authenticationを使ってTypeScriptを使用したNextアプリにGoogleログインを実装する方法を記述します。 JavaScriptを使用したNextアプリにGoogleログインを実装する方法はこちらに記述しています。 この記事が他の人の参考になれば幸いです。 また、この記事の内容に間違った記載がありましたら、指摘してもらえるとありがたいです。 環境 名前 バージョン
Next.jsを使ってCloud FunctionsとFirebase HostingでSSRする - Qiita
Next.js 9を使ってCloud FunctionsとFirebase HostingでSSRする 皆さんこんにちは、noriです。 FirebaseSummitのレジストレーションがオープンしましたね。僕は今年も参加しますよ！! 今年はスペインの開催ですねー 楽しみ。 最近フロントの環境設定をする機会があったので、登場したばかりのNext.js 9をCloud Functionsにのせてみました。 Cloud Functionsにのせるところまでは、すぐだったんですがReactの扱いが初めてだった僕にとってつまりどころがあったので、同じことをしようとしている人たちのためにこの記事を書くことにしました。 先にサンプルコードを置いておきます。 Firebase HostingとしてNext.jsを動かす まず今回やったことを図として示します。 ポイントは以下の2つです。 Next.jsを
ゼロから始める Firebase × Nextjs入門 #1 セットアップ編
ゼロから始める Firebase × Next.js 入門 これから何回かに分けて、Firebase × Next.js の入門講座を始めたいと思います。 第一回となる今回は、Firebase と Nextjs のセットアップと連携をやっていきたいと思います！ セットアップは、どんなアプリケーションを作るときにも必ず必要になってきますので、是非一緒にやってみてください！ Firebase とは？ Firebase とは、Google が提供している、すばやく高品質のモバイルアプリや Web アプリケーションを開発することができるプラットフォームです。 Firebase を使うことで、開発者はアプリケーションの開発に専念でき、バックエンドで動くサービスを作成する必要も管理する必要もありません。 バックエンドとは、サービスの内、見えないところでデータの処理や保存などを行う要素のことです。具体的
FirebaseのデータをmicroCMSに移行する
個人で作っているアプリで、Firestoreに保存していたデータの一部をmicroCMSに移行しました。 移行後の世界は今のところはなかなか良い感じで、今後他のアプリでもやりそうなので忘れないよう手順をメモします。 microCMSに移行する理由 今回は以下の理由から移行することにしました。 全文検索に標準で対応している FirestoreもAlgoliaなどを使えば実現できるが実装が必要 入稿画面がわかりやすくデータを更新しやすい データ件数が10,000件を超えないのでmicroCMSの無料プランで十分使える 今回移行したのはユーザー共通で利用するRead-onlyなメディアデータです。 書き込みなどはないためFirestoreで管理する必然性はなかったのですが、手頃なデータストアがなく慣れたFirestoreに置いていました。 その後ヘッドレスCMSの存在を知り、上記の理由で移行する
とりあえずWebサービス作る時の私の技術選定ポイント@2022/02
はじめに inspired mogaさんのブラウザで動くサービスを作るときの技術選定が素晴らしい記事だったので、自分も書いてみる事にしました。 幸いにも技術選定からのお仕事をする機会が多くて、自分の中でパターンが大体決まってきているので言語化してみます。前提が同じサービスは無いので絶対的な正解は無いですが、なんかしらの参考になれば幸いです。 ※2022/02時点 私/よくあるお仕事について Web系のサービスなんかいい感じにするマンとして、フリーランスとして働いています。 準委任という形でスタートアップ企業をお手伝いする事が多いです。 MVPを作りたい、もしくはMVPは行けたのでちゃんと作り直したい、という要望があって参画して、まるっと作ってそのまま運用をします。作って終わりではなくて、運用や拡張性を考えてやってます（サービスに必要なのはもちろん、運用する自分が楽だから）。 前提 エンジニ
ブラウザで動くサービスを作るときの技術選定
はじめに 私の仕事は、新規サービスをまるっといい感じに開発するのを委託されることがほとんどです。最近はネイティブアプリを作ることよりもブラウザで動くWebサービスを開発することが多いのですが、案件の規模感や要求によって技術選定を少し変えるようにしています。「こういうときはこう」みたいに一概には言えないのですが、普段使う構成を紹介します。誰かの参考になれば幸いです。 2022/02/10 現在での内容です。 前提 開発を委託される場合の運用費をどうするの問題があります。クライアントにクレカ登録をしてもらうか、こちらで支払って毎月請求するかになります。僕は毎月やるのがめんどくさいのでできるだけ前者に倒している関係上、あまりいろいろなSaaSを組み合わせて作ることをなるべく避けています。 規模感によらず使っているもの 私の場合、以下が使えるとめちゃくちゃ効率よく開発できます。 GCP 好きだから
Firebase Analytics の First Step ! iOSアプリにイベントとユーザプロパティを仕込んでみた
どんなことであっても最初に踏み出す一歩って大変ですよね。Firebase Analytics の一歩を少しでも楽に踏み出せるように、という思いを込めて Firebase Analytics の基本についてまとめてみました！ はじめに Firebase Analytics って何？どんなことができるの？ということについてまとめたのちに、iOSアプリに Firebase Analytics を仕込んでみたという構成になっています。手っ取り早くやってみたい方はFirebase Analytics を導入まで飛ばしてしまっても大丈夫です。 Firebase Analytics は無料のアプリ測定ソリューション Firebase Analytics は、アプリの使用状況とユーザエンゲージメントについて分析することができる無料のアプリ測定ソリューションです。Firebase Console の Ana
[iOS] Firebase AuthenticationでSign in with Apple - Qiita
こんにちは、株式会社実験のエンジニアのmogamingです。 今朝、firebase-ios-sdkにSign in with Apple対応がマージされてリリースされました🎉🎉🎉中の方々本当にありがとうございます。感謝しかない！ ちょうど新しいアプリでSNSログインが必要で、FirebaseのSDKに対応が入るのを待ちつつ別の機能を作ってました。せっかくリリースされたので早速対応してみたので、やったことを書きます。iOSアプリでの対応の話しかしません。 参考リンク 基本的にはドキュメントを読めばなんとかなります。読みましょう。 Authenticate Using Apple on iOS FirebaseのExample Sign in with Apple(Apple公式) 手順 Capabilityの設定 Certificates, Identifiers & Profile
![[iOS] Firebase AuthenticationでSign in with Apple - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/7ad8e5fa1e2f04731e178fa5ee1177f5fc2d5caa/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9JTVCaU9TJTVEJTIwRmlyZWJhc2UlMjBBdXRoZW50aWNhdGlvbiVFMyU4MSVBN1NpZ24lMjBpbiUyMHdpdGglMjBBcHBsZSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YzlmYmU4MzQ3NDlmYTQxMDNiYjA0NTZlMWU4NzQwMzY%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwX21vZ2FtaW5nJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz03NWZhZTk3ZDNiNjc0ZmVmNzM2MGFlNWJkMGVkY2RiZA%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D0eb830f609bd8fcb71d454115e37ae1f)
Firebaseの本番と開発環境の用意 - Qiita
はじめに アプリエンジニアの@daisuke0131と申します。 qiita投稿久しぶりで緊張しています。 この記事は、Firebase Advent Calendar 2018 9日目の記事になります。 前回の記事は、@takuchalleさんのFirebase Hosting で自動で古いバージョンを削除する(今のところ)最善の方法でした。私はまだFirebase Hosting触っていないですが今度使ってみようと思います。 私は、本業ではアプリ開発(ios/android)をメインでやっているエンジニアです。アプリエンジニアの為のFirestore入門本、基礎から実施までCloud FirestoreによるiOSアプリ開発を執筆したので興味ある方は是非買ってください！一冊手元に置いておくと便利だと思います。 書籍を色々な方達に読んでもらったのですが、全体的には分かりやすいというフィー
firestore, vue.jsでリアルタイム同期のチャットを実装してみる [チュートリアル形式] - Qiita
以前までは、リアルタイム同期のwebアプリ※はwebsockets等を使用しなくては実現できませんでした。 でも今の時代にはFirebaseがあります！！！ FirebaseのFirestoreを使えば、リアルタイム同期のwebアプリを本当に数行で構築できてしまいます。 今回はそのサンプルとしてFirestoreとvue.jsを使い、リアルタイムでコメントが同期されるチャットを作成してみました。 この手の記事は既に色々あり、何番煎じかわからないのですが、Firebaseに初めて触る人でも理解できるよう、 わかりやすさ重視でスクショを多めに掲載しています。 ※ ここでいうリアルタイム同期は、プラウザをリロードせずとも常に他のクライアントで加えた変更が反映されること どんなwebアプリ？ リアルタイムでコメントが同期されるチャットアプリです。 コメントの追加 コメントの削除 が可能です。 ユー
![firestore, vue.jsでリアルタイム同期のチャットを実装してみる [チュートリアル形式] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/b3303caa70581e73708b2478cdc72127f27cf9d4/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTIwZmlyZXN0b3JlJTJDJTIwdnVlLmpzJUUzJTgxJUE3JUUzJTgzJUFBJUUzJTgyJUEyJUUzJTgzJUFCJUUzJTgyJUJGJUUzJTgyJUE0JUUzJTgzJUEwJUU1JTkwJThDJUU2JTlDJTlGJUUzJTgxJUFFJUUzJTgzJTgxJUUzJTgzJUEzJUUzJTgzJTgzJUUzJTgzJTg4JUUzJTgyJTkyJUU1JUFFJTlGJUU4JUEzJTg1JUUzJTgxJTk3JUUzJTgxJUE2JUUzJTgxJUJGJUUzJTgyJThCJTIwJTIwJTVCJUUzJTgzJTgxJUUzJTgzJUE1JUUzJTgzJUJDJUUzJTgzJTg4JUUzJTgzJUFBJUUzJTgyJUEyJUUzJTgzJUFCJUU1JUJEJUEyJUU1JUJDJThGJTVEJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1jY2RiNTIwZDllNWNiMzJlM2NkZmM4Y2Y5ZGI4MzcxYw%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwcnlvMjEzMiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NmVkYTM4NDRmZDdmNTk3MTI1NzE4ODBjMjBkZjE1MTQ%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D23141257c7c22bd56dfd9774508b18f1)
【公式ドキュメントを噛み砕く】Firestore編（ベータ版） - Qiita
はじめに 案件で触れるから、学習がてらアウトプットしてみるよ。（本は無いし、公式ドキュメントは読みにくいし・・・） 個人の理解メモなので、正しい情報は公式ドキュメント見てくださいね。 （そして誤りあれば指摘してもらえると嬉しいです） 本文 概要 「ここ」の話 公式文言（抜粋） 柔軟でスケーラブルな NoSQL クラウド データベース リアルタイム リスナーを介してクライアント アプリ間でデータを同期し、モバイルとウェブのオフライン サポートを提供します。 Cloud Firestore は現在、ベータ版リリースです。 「リアルタイム リスナーを介してクライアント アプリ間でデータを同期し、モバイルとウェブのオフライン サポートを提供します。」ってのが良く分からんけど、とりあえず読み進めていく。 主な機能 柔軟性 「柔軟な階層型データ構造に対応」ってのが言いたいだけっぽい。「KVS」って理解
知っておいて損はない、Firebaseのセキュリティルールのこと
2018年7月2日、Firebase Japan User Groupが主催するイベント「Firebase Meetup #4」が開催されました。2011年に登場し、その後Googleが買収たことでクラウドプラットフォームの一員となったFirebase。その知見を共有するため、Firebaseをサービスに用いるエンジニアたちが一堂に会して、プレゼンテーションを行いました。「Firestoreのセキュリティルールについて」では、セキュリティエンジニアのコキチーズ氏が登場。Firebaseをセキュアに使用するために求められるセキュリティルールの必要性と、正しい設定方法について解説します。この講演はcrash.academyでもご視聴いただけます。講演資料はこちら Firestoreのセキュリティルールについて コキチーズ氏（以下、コキチーズ）：今日はセキュリティルールについて話そうかなと思いま
VueとFirebaseの基本機能全部使ってぬるぬる動くポートフォリオサイトを作ったのでソースと解説 - Qiita
絵描きとかUXとかやりつつフロントもやってる「ゆき」です。ポートフォリオサイトは10年くらい前にMoveableTypeで作ったきり。最近流石に「これでフロントやってますとか言ったら絶対次転職できなくね？」と危機を感じたので0から作り直しました。 サイト： https://pf.nekobooks.com/ ソース： https://github.com/yuneco/portfolio 機能・性能・運用を考えて作った結果、VueとFirebase(Web)の機能を一通り使ったサイトが出来上がりました。これからちょっと凝ったポートフォリオサイトを作りたい方向けに、どういう目的でどの機能を使ったのか、その時のポイントはなんだったのかを共有します。 2019.4.18追記 春なので期間限定1で桜が咲くアニメーションを追加してみました。単体のアニメーションはテストページで試せます。複雑に見えるか
【v2対応】Nuxt.jsとFirebaseを組み合わせて爆速でWebアプリケーションを構築する - Qiita
Firebase Advent Calendar 2017 21日目の記事です。 フリーランスでフロントエンドを中心にエンジニアをやっているpotato4dです。 普段はVue.jsを中心に、案件を進めたりコミュニティに関わったりしていますが、今回はそんなVue界隈で今アツいフレームワークであるNuxt.jsとFirebaseを組み合わせて、SPA + SSRにAuthと Firestore を組み合わせたアプリケーションを高速で作る方法を、サンプルとあわせてご紹介します。 2019/10/16 追記 このサンプルは Firestore が存在しない Nuxt v1.x + RTDB 時代のコードを愚直に移行している ので全体的に資料が古くなっています。 インフラ構成については順次更新していますが、特にデータストア操作周りについては できるだけ参考にしないでください。 2019/07/02
Vue.js + Firebase を使って爆速でユーザ認証を実装する - Qiita
最初に この記事はVue.js アドベントカレンダー#4 25日目の記事です。 この一ヶ月でVue.jsについてのナレッジが100記事増えたことになります。やったね！！ 2018/8/2 追記 現在では vue-cli の3.x.xがリリースされており、スキャフォールドからVueプロジェクト作成の工程が若干異なりますのでご留意ください。 この記事でやること バックエンドをFirebaseに丸投げしたユーザ登録 → サインイン → サインアウト までのチュートリアルです。 認証の実装は面倒 フロントエンドの技術を使ってちょっとしたアプリケーションを作った時、認証やユーザ管理を実装するのはそれなりに面倒かと思います。フレームワークの選定、DBは何使う?など決めなければならないこと、覚えなくてはならないことがたくさんありますね。 そこでBaaSを使います。 BaaSって？ Backend as
Next.js を Firebase hosting で動かしてSSRする - Qiita
いわゆるサーバーレス。 TL;DR すべてのリクエストを Firebase Functions に流して next.js に食わせた結果を返すとSSRになる。最高。 概要 Firebase Hosting は index.html を上げたら動いてくれる静的サイトホスティングだと思っていたが、 全てのルーティングを Firebase functions に全て受けさせる。こともできた GCP知らない人向けに 一応解説しておくと Firebase Function = Google Cloud Function ≒ AWS Lambda そんでもって、React で SSR したいとき、スクラッチでもいいけど、一番簡単なのは next.js。next.js 公式にも exmaples があり、読んでみたら勉強になったので解説してみる。 Firebase Hosting の設定 { "func
Firestoreを試してみた - Qiita
※ こちらの記事は古くなってきてしまっているのであれですが（近いうちに内容の更新をしたい…）、FirestoreはもちろんFirebaseにご興味ある方は、ConnpassのFirebase Japan User Groupに参加するといろいろと情報が得られると思いますのでぜひ。 （Slackのワークスペースもあるのでそちらもどうぞ） 運営でもなんでもないですが、宣伝でした。 はじめに Firebaseを使用したアプリを作成しようと考えていたところ、Firestoreのベータ版がリリースされたとのことだったので、今後移行する可能性も考えて、使い勝手を試してみたいと思い使用してみました。 今回は、Swiftでのコーディングを試したいというところなので、GUIDESの内容で基本的なデータ操作まわりをざっと流したものをまとめた内容になります。 また、Realtime DatabaseとFires
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
コピペで始めるNext.js + Firebase Hosting 【静的サイト】 - Qiita
Cloud Firestoreの勘所 パート2 — データ設計
FirebaseとNuxt.jsを使ってユーザ認証関係を簡単に作ってみる+1ヶ月の自分に教えたいリンク集 - Qiita
