GitHub - minetti0327/sample-qa: 技術書典7にて販売した「Nuxt & Firebaseではじめる！サーバーレスWebアプリ開発入門」の共有向けリポジトリです。You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Serverless PHP on App Engine + Firestore
In recent decades the PHP community has gone through some major changes. First, we saw billion-dollar platforms like Facebook adopting PHP as a primary language. Then tools like the Laravel framework quickly rose in popularity as it enabled the community to quickly build modern applications. Finally, PHP 7 gave the language a bright future with performance improvements and features like type hinti
マッチングアプリ強者を体験できる PWA 開発で、Web プッシュ通知を理解しよう - Qiita
どうも、親からもらったお年玉でマッチングアプリを始めるも、いいね 0 件のまま 3 ヶ月で退会した@sadnessOjisan です。 今日はタイトルの通り、マッチングアプリ強者を体験できる PWA を開発します。具体的には、いいね 通知がたくさん届くアプリを開発します。なおこのアプリは「通知止まらん www」を体験できるアプリを作ったの影響を深く受けました。ただし、これから作る push 通知体験アプリでは、通知の疑似体験ではなく本当に通知が届きます シンプルにプッシュを送るだけのコード: https://github.com/sadnessOjisan/simple-push マッチングアプリ っぽいUIがついたコード: https://github.com/sadnessOjisan/simple-push-ui 書いた動機 この記事では Firebase を使った web push
Nuxtで毎日やりたいことを習慣づけるWebアプリ「コツコツ忍者」を作った🏃♀️【個人開発】 - Qiita
お久しぶりです。 以前、Nuxt.jsとFirebaseでchocottoというTwitterでお菓子と一緒にメッセージを送れるサービスを作ったG4RDSです。 先週、二十歳を迎えて成人しました🎉 今は高専五年で、編入試験を受けている真っ只中です。 適度にお酒を入れて、今後も個人開発頑張っていこうと思います！ さて、今回作ったWebサービスは「コツコツ忍者」というWebアプリです。 昔ばなしに、忍者は跳躍力向上のために毎日成長していく小さな木を飛び続けた、というお話があるのをご存知ですか？ ある能力を向上させたいのであれば毎日継続してやり続けることが大事である、ということですね。 自分が好きなことは続けられますが、好きではないけど上達したいことは続かないからなかなか上達しません。 そんな「上達したいけど続けられない」ことがある人のために、毎日やったことを記録できるWebアプリを作りました
Firebase Authenticationでカスタム認証システムをつかう勘所@Firebase Meetup #13
認証疎いのですががんばりました
[Nuxt.js] Firebaseの覚書 ② ServiceWorkerによるセッション管理
NuxtでリファレンスにあるServiceWorkerによるセッション管理をやってみたのでここに記す…。 Firebase 認証 とかでググってみると、auth().onAuthStateChangedのイベントハンドラでstateを変更するのがよく引っかかるけど、 onAuthStateChangedは状態が反映されるまでの読み込みにかかるラグがどうしても発生するので、ログイン状態でも一瞬ログアウト状態が見えてしまう。 それを隠すためにローディングを入れるというのが合わせて出てくる手法なんだけれども、NuxtでSSRだとローディング表示はしたくないじゃないですかあ…。 リロードしてもログイン状態を即反映させるためには描画前にログインしているかどうかを判断しなければならないわけで、 それをやっつけるのがServiceWorkerによるセッション管理なのでした。 CookieではなくServ
![[Nuxt.js] Firebaseの覚書 ② ServiceWorkerによるセッション管理](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
Firebase Storage に動画ファイルがアップロードされたら Cloud Functions で自動的にサムネイルを作成する - Qiita
npm install --save @google-cloud/storage mkdirp ffmpeg-static ffprobe-static fluent-ffmpeg @types/ffmpeg-static @types/ffprobe-static @types/fluent-ffmpeg @types/mkdirp import * as functions from 'firebase-functions'; import * as admin from 'firebase-admin'; admin.initializeApp(); import * as storage from '@google-cloud/storage'; import * as path from 'path'; import * as os from 'os'; import * as
Nuxt.js + FirebaseでOGPの仕組みを完全に理解した 〜俳句をSVGで描画するサービスをリリースした話〜 - Qiita
TL;DR(要約) Nuxt + Firebase を使って俳句を作成できるサービスを作りました 俳句メーカーはこちら 簡易チュートリアルサイトのソースコードはGit Hubにあげてます 自己紹介 個人的なプロジェクト「毎月サービスリリースで技術もノウハウもうっはうは祭り」をしています、ミツダマ(@mitudama)です。 1月の時間割メーカーに引き続き2月は俳句メーカーをリリースしました！ ノウハウうっはうはになったのでシェアします！ 作ったサービス 【新サービスリリース】 ・業界のあるあるをみつけたとき ・ジェネレーションギャップを感じたとき ・ブラック企業に疲れ果てたとき その気持ちを17文字にまとめてみませんか？ 「俳句メーカー」をリリースしました！！🎉🎉🎉https://t.co/xfdJaKbbCx 俳句を気軽につくってシェアしましょう♪ — ミツダマ@500円プログラマ
Nuxt.jsではじめるときのやることリスト(SSRも国際化も自動デプロイも) - くらげになりたい。
Nuxt.jsでプロジェクトをはじめるときにいつもやることが整理してみた。 モジュールが多いので、いろいろ設定が必要だけど、ヌケモレあったりするので。。 Nuxt.jsのバージョンは、2.5.1です。 いつもやることの概要 作成したいプロジェクトは以下な感じ TypeScript/Sassを使う、UIはBuefy/Bulma Firebase Hosting / Cloud Functionsを使ってSSR 英語版/日本語版と国際化したいので、nuxt-i18nも入れる SEOも気にするので、各種設定&各ページで個別にタイトルとかを設定 Google Analyticsやsitemapなどももちろん Firebaseへのデプロイは、CircleCIで自動化したい 最終的な例は、GitHubにおいています。 Nuxt.js Template using TypeScript, Sass an
Nuxt.jsとFirebase Authenticationでログイン認証を作る | non-standard world株式会社
こんにちは、エンジニアの高崎です。 Nuxt.jsとFirebaseを使って簡単なメモを取るWEBサービスを作るこの特集、前回は導入のためのセットアップをしました。今回はNuxt.jsとFirebase Authentication（ログイン認証）を使ってGoogleアカウントでログインする機能を実装します。 Googleのログイン認証を有効にする １．Firebaseのコンソールにログインします。 ２．プロジェクトを選択し、表示されるトップページの赤枠をクリックします。 3.Nuxt.jsのプロジェクトをフォルダに戻って/pluginsフォルダの中に下記のようなfirebase.jsを作ります。 4.２の画面で表示される画面を参考にapiKey〜messagingSenderIdまでをご自身のプロジェクトのものに変更します。 apiKey: "ここにAPIキーが入ります", authDo
nuxt.js/Firebase超初心者がnuxt.jsのv2をFirebaseにデプロイする - Qiita
TL;DR nuxt.jsもFirebaseも分かってない超初心者がnuxt.jsをFirebaseにデプロイを試みた奮闘記。 参考文献からいいとこ取りしただけなので詳しくはページ下にある「参考文献」をご確認ください。 ポイント nuxt.jsをFirebaseにデプロイ nuxt.jsは動的アプリケーションでデプロイしたい npm run generate を使いたくない Firebase functionsはnode.js v8を使用する 今回のオチ SparkプランだとFirebase functionsが使えない→SSRできない→ここまで頑張ったのに… （できなかったんですが、方法としてはあってると思うので方法だけ備忘録として記載） なにか間違ってるかもなのでご指摘いただけると助かります。 前提 環境 OS: macOS Mojave (バージョン10.14) node: v8.1
Firebaseの認証サービスとCloud Firestoreのセキュリティルールを簡単に解説 - 秋田ホームページ制作 Lab
Firebaseの認証処理とCloud Firestoreのセキュリティルール 前回の記事でCloud Firestoreの簡単な使い方を紹介しましたが、セキュリティルールの設定をしていないため、だれでもデータの操作ができる状態になっていました。 今回はこのCloud Firestoreのデータベースにセキュリティルールを設定し、サインインされているユーザーだけが書き込みできるようにします。サインインの認証は、Firebaseの認証サービスAuthenticationを利用します。 認証処理の準備 今回の認証方法は、メール・パスワードによるログインで行います。Firebaseのコンソール左メニューの「Authentication」→「ログイン方法」→「メール/パスワード」からメール・パスワードによる認証方法を有効にします。 ダイアログが表示されますので、メール/パスワードの設定を「有効にす
How to Develop Real-Time Apps with Firebase and Firestore Secured with Auth0
Auth0 Marketplace Discover and enable the integrations you need to solve identity Explore Auth0 Marketplace TL;DR 本書では、Firebase および Firestore でリアルタイム Web チャットを作る方法を学びます。さらに、認証システムとして Firebase アプリで Auth0 を使う方法（そしてそれを使用する理由）も学びます。これらテクノロジーと統合の手始めとして、確実にメッセージを Firestore に保存し（Firebase が提供するリアルタイムのデータベース）、ユーザーが Auth0 を通して認証できる簡単なリアルタイム Web チャットを構築します。必要であれば、この GitHub リポジトリにある記事で作成した最後のコードをご覧ください。 "Fire
Nuxt.jsでQiita API取得して一覧表示するアプリをFirebaseへデプロイするチュートリアル - 動かざることバグの如し
他のチュートリアルとか、やってみた！だと早速認証周りだとかElement UIとかに手を出してて難しすぎる。 本質的に、一番シンプルな感じで Qiita API v2 認証不要を叩いて リスト表示するだけのアプリをNuxt.jsで作って firebaseに無料デプロイ！ までやる。 環境 Nodejs v10 Nuxtjs v2.5.0 インストール まずはひな壇を生成する。最近では公式のnuxt/create-nuxt-appを使うのが定石らしい。 ってことで実行 本当はyarnでやりたかったのだが、なぜかパッケージの一部が４０４でインストールできなかったので今回はnpmで実行 npm init nuxt-app すると質問が何個か対話的に行われる。今回は以下のようにした > Generating Nuxt.js project in /private/tmp/hogehoge ? Pr
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で完結するリッチなWebアプリ構築の勘所 - Qiita
先日、Togetter社長の@yositosiさんとひょんなことからお友達になり「なんかFirebase使って面白いことやろうよ」という話になったので一緒に面白いことをやりました。 この記事は、 Firebaseを使うと何ができるのか Nuxt.js/Vue.jsとFirebaseの勘所 Firestoreでの複雑なクエリ処理にどう対応するか などのトピックを中心に紹介していければと思っています。 なんとかPay Togetterの社長の@yositosiさんからFirebaseを使ったアプリ構築の話を頂きお手伝いさせていただいた、エイプリルフールの企画の「なんとかPay」というサービス。誰でも自由にPayを発行できる、昨今のPay蔓延している社会に物申しているようなそうでもないようなそんなサービス。 今回は技術周りで色々とお手伝いをさせていただきました！ 自分だけのPayが作れる リアル
Nuxt/VuexでFirebase Authenticationを使ってユーザー認証機能を作る - フリーランチ食べたい
Nuxt/VuexでFirebase Authenticationを使ったユーザー認証機能を作るにあたって、基本的なやり方はFirebaseドキュメントに書いてあるのですが、「どこに何を書けばいいのか」がよくわからなかったので調べながらまとめてみました。 完成形 こんな感じで用意されたUIを使ってログイン機能が実装できます。 前提条件 Firebase Projectの作成/Firebase SDKの作成はNuxt/Vuexには関係しない部分なので次の記事を参考に行ってください。この記事はFirebase SDKをNuxt/Vuexにどう組み込むか、を中心に書きたいと思います。 firebase.google.com 環境 nuxt@2.5.1 vue@2.6.10 vuex@3.1.0 firebase@5.9.2 firebaseui@3.5.2 FirebaseUIインストール＆CS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Firebase入門 フリマアプリを作りながら、認証・Firestore・Cloud Functionsの使い方を学ぼう！ - エンジニアHub｜Webエンジニアのキャリアを考える！
https://github.com/memory-lovers/nuxt-template-with-ts-sass-ssr/blob/master/README.md
https://slideship.com/users/@iktakahiro/docs/2018/01/JnhLGehLsRw4dcZ42EY3Jf/
