Firebaseのデータベース（Cloud Firestore）をWebからサクッと使ってみる - Qiita
なにがしたい？ Firebaseのデータベースを使ってみる。 Web（フロントエンド）のJavaScriptから操作してみる。 はじめに FirebaseのセッティングとHostingできるところまでは持っていってください。 単なるHostngだけならそんなに苦労しないです。 簡単言うと、Firebaseのサイト（コンソール）から、 新しいプロジェクトの作成 Hostingを使ってみるを選ぶとコマンドが出てくる パソコンのターミナルからfirebase login → init → deployを実行 という感じです。 Basic認証付きという状態で良ければ、手前味噌ながらにこの記事を参考にしてくれてもいいです。 （もっとわかりやすい記事も探せばあると思います） FirebaseでBasic認証をかけてHostingをする(Windows) DBの作成 ここからが本題です。 Firebas
VuexFireでNuxt.jsアプリに一瞬でFirestoreを導入する - Qiita
今回のチュートリアルではNuxt.jsを使っていますが、全部フロントエンドで動いているのでVue.jsアプリでも同様に動きます。 TL;DR サンプルコードはGithubにあります。 VuexFireを使ってNuxt.jsアプリでFirestoreからデータを取得しページに表示させます。また、ページ上のフォームからFirestoreにデータを追加します。 はじめに 前回の記事でVuex.jsとFirebaseのCloud Functionsを使ってSSRアプリを作ってみました。 そのアプリをベースに、今回はVuexFireを使ってFirestoreを導入してみます。 FirestoreはFirebaseの提供するNoSQLデータベースです。現在はβ版ですが、今後Firebase Realtime Databaseに代わりFirebaseのデータベースサービスになっていくようです。 Step
【Vue.js,Firebase】麻雀好きのエンジニアによる麻雀好きのためのサーバレスな麻雀成績管理PWAアプリをリリースした【個人開発】 - Qiita
【Vue.js,Firebase】麻雀好きのエンジニアによる麻雀好きのためのサーバレスな麻雀成績管理PWAアプリをリリースした【個人開発】Vue.jsWebサービスFirebase個人開発PWA 今までにない麻雀成績管理アプリをリリースしました！ https://t.co/jjpEyVcSHh 麻雀の成績管理アプリローンチしました！ 全ての麻雀好きのためになりますように！ — kooooohe@旅人 (@kooooohe_) 2018年11月5日 背景 雀荘に行くたびに麻雀の成績をほとんどの人が紙で書いている かくいう私もアプリを数個入れていたが、結局紙に成績をつけてしまっていた... 紙のUI,UXにアプリが勝てていないのか？ 元雀荘店員エンジニアとして、最新技術を駆使し、麻雀成績管理Appを作ることが私の責務である 機能要件 PWA 麻雀の得点を記録できる 得点の履歴が見れる 3人の点
Flutterで社員研修用のアプリを作った話 - pixiv inside
みなさんはじめまして。初めてじゃない方はお久しぶりです。ピクシブでAndroidアプリエンジニアをしておりますconsommeです。 ピクシブでは基本的に年一回、社員同士の交流を深めるという目的のもと、社員研修を開催しています。2018年は2泊3日の沖縄研修が計画されました。そのなかで研修運営チームから「社員研修で使うアプリを作れないか？」という相談を受けました。 研修中は基本的にチーム行動になるので、自分のチーム以外の人が何をしているかがわかりづらい。それなら各自で研修中に撮った写真を共有して、みんなで楽しめれば社員同士の交流につながるのではないか、そのためのアプリが欲しい、とのこと。 そう言われるとアプリエンジニアとしては作らないという選択肢はありません。ぜひやりましょう、ということで、社員研修を盛り上げるためのアプリを開発することになりました。 システム構成 アプリ側 アプリはFlu
Nuxt v2とFirebase(CloudFirestore)でPWA対応Webアプリ開発 - Qiita
福岡から世界中の"むずかしい"を簡単にする株式会社diffeasyCTOの西@_takeshi_24です。 公開から1年以上が経ち、この記事の内容も少し古くなってきました。 Nuxt.jsやFirebaseを使って、サーバーレスでWebアプリケーションを開発する手順について、アドベントカレンダー「diffeasyCTO西の24(にし)日連続投稿チャレンジ Advent Calendar 2019」の中で、「Nuxt.jsとFirebaseとCloudFunctionsでWebアプリ開発」シリーズとして、連載していきます。 Nuxt.jsとFirebaseなどを使ってWebアプリケーション開発にチャレンジしたい方、是非Qiitaアカウントかtwitterをフォローしていただき、ツッコミやいいね！お願いします！ 言葉の説明 まずはNuxt、Firebase、PWAの説明です。 ご存知の方はすっ
Firestore で、DB設計を考える際に参考になった情報
Firestore におけるDB設計 DB設計について考える場合、そもそもFirestoreのようなドキュメント指向のNoSQLデータベースではどんなDB設計をするべきなのか、いろいろと情報を漁ってみました。 以下は、いろいろ調べた中で、個人的に参考になった記事です。 おそらくFirestore のDB設計について考える場合、今回挙げた記事は、何度も読むことになりそうなので、備忘録的に残すことにしました。 NoSQLデータモデリング技法 参考になった点 Firestore に限定されず、NoSQLデータベースとしてのプラクティスが網羅されている いきなり具体例ではなく、概念から解説してから、具体的な技法について解説している RDBでは、基本的には、正規化を徹底するが、NoSQLデータベースでは、非正規化を許容する、むしろ活かす Firestore Database Design https
Googleの新サービス Firebase Cloud Firestore の使い方を簡単にご紹介。
Firestoreについて 昨日(2017-10-04)、Googleが提供しているFirebaseに、新しいデータベースサービスCloud Firestoreが追加されました。以前からFirebaseには興味がありで、ちょうど良い機会だったのでCloud Firestoreを触ってみました。 最終的にCloud Firestoreを使ったTodoアプリの作成をご紹介いたします。 慣れないと不安なセキュリティに関する部分も簡単ではありますが解説しますので、Google Firebaseに初めて触れる方がいましたら、私も初心者ですので一緒に頑張っていきましょう。 Firestoreのドキュメント 基本的にはGoogle公式のCloud Firestoreドキュメントの通りに実装していきます。現在は英語ですが、コード等に迷ったらこちらをご参照ください。 Cloud Firestoreの準備 F
Cloud Firestore with Vue.jsで簡単なメモアプリを実装する - Qiita
概要 以前に投稿した「Vue.jsで簡単なメモアプリを実装する 」に続く記事で、メモアプリのデータ管理をGoogleのCloud FirestoreというNoSQLデータベースを利用するように改修しました。 この記事の前半でCloud Firestoreを利用するまでの手順、後半でメモアプリをどのように改修したのかを説明します。 環境 Windows 10 Professional Node.js 8.11.1 Vue.js 2.5.16 Vuex 3.0.1 vue-router 3.0.1 firebase 4.13.1 Cloud Firebase Beta Visual Studio Code 1.23.0 参考 Cloud Firestore | Firebase Overview | Firebase Googleが運営するFirebaseというMBaasサービスがありますが、
GAE+NuxtのSSRでFirestoreを使う - Crieit
App Engineの標準環境でNuxtを使って無料SSR を先日やってみたので、今度はFirebaseのCloud Firestoreでデータの保存を試してみました。 ちなみにGAEのスタンダード環境ではNode8が動くため、ローカルでも全てNode8で動かす必要があります。 ※また後日記事を書きますが、通常セキュリティルールが入っているため、実際にはcloud functions経由でfirebase-adminを利用してデータを取ってくる必要があります。 Firebaseの初期設定 plugins/firebase.jsに下記のように設定を保存します。 import * as firebase from "firebase"; require("firebase/firestore"); if (!firebase.apps.length) { const config = { ap
トランザクションとバッチ書き込み | Firestore | Firebase
フィードバックを送信 トランザクションとバッチ書き込み コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 Cloud Firestore は、データを読み書きするアトミック オペレーションをサポートしています。一連のアトミック オペレーションでは、すべてのオペレーションが正常に完了するか、またはどのオペレーションも適用されないかのいずれかです。Cloud Firestore には 2 種類のアトミック オペレーションがあります。 トランザクション: トランザクションとは、1 つ以上のドキュメントに対して読み取り / 書き込みを行う一連のオペレーションのことです。 バッチ書き込み: バッチ書き込みとは、1 つ以上のドキュメントに対して書き込みを行う一連のオペレーションです。 トランザクションでデータを更新する Cloud Firestore クライアント ライ
Nuxt.js, Firebase, Stripe をフル活用してサーバーレスでJAMStackなECサイトを2日で開発した話 - Qiita
Nuxt.js, Firebase, Stripe をフル活用してサーバーレスでJAMStackなECサイトを2日で開発した話stripeVue.jsFirebasedeprecatedNuxt 本記事で紹介しているサービスの公式Twitterアカウントができました → @jslounge_info はじめに potato4d こと花谷拓磨です。 普段は ElevenBack という屋号のもと、フロントエンドを中心としながらも、デザインやサーバーサイドなどをも含めて作業することが多いのですが、屋号での活動の一環として、 JSLounge という渋谷で活動するハンズオン団体の運営を行っています。 その JSLounge にて過去に開催したハンズオン資料を入手できるサイトを構築することとしました。 通常、ハンズオンとなればその場でメンターがついて 1:1 で進めますが、 JSLounge の資
firebaseでサーバレスなSPAアプリを作った話 - Qiita
はじめに Firebase使ってみて便利さに感動したのでポイントまとめてみました Reactとかフロントエンドのフレームワーク使ってSPA作る分には結構戦えますね とはいえ最終的に細かい作り込みをすると辛いところは出てきそう… 作ったもの https://喫煙所.net 見たまんまですが、喫煙所の共有サービスです 喫煙者の皆様は是非使ってみてくださいｗ 使ったもの Firebase Hosting Reactでbuildした静的ページの配信 Authentication 非ログイン時は匿名認証 SNS認証使ってログイン時にグレードアップ Cloud Firestore 喫煙所情報の保存 いいね情報の保存 公開用のユーザ名の保存 Cloud Functions for Firebase Firestoreの更新をトリガーにAlgoliaのインデックス更新を実行 Algolia 主に喫煙所の検
Cloud Firestore の import / export やってみた - Qiita
Firebase の import / export 機能がきたので、実際に試してみました。 Export and import data | Firebase 流れとしては以下のようになります。 gcloud のコマンドを使って Cloud Storage に export データを保存 import も Cloud Storage にあるデータを Firestore に復元 所感としては、いい感じに動いてそうです。 事前準備 Before you begin Blaze plan でないと import / export は利用できない export 用の Storage Bucket を作成 Firestore, Cloud Storage の権限が適切か確認 Storage Bucket はこんな感じで作りました。 gcloud 設定 Set up gcloud for your
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - wataruoguchi/nuxtjs-firebase-example: Example project of Nuxt.js & FIrebase
GitHub - tkc24/nuxt2_firebase_chat: PWA Web Application by Nuxt v2 & Firebase.
Choose a database: Cloud Firestore or Realtime Database | Firebase
Firestore | Firebase
Full-text search | Firestore | Firebase
firestore で配列の検索・追加・削除がサポートされたので試してみた - Qiita
Firebase Cloud Firestoreの使い方 - Qiita
