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の説明です。 ご存知の方はすっ
Firebase+Nuxt.jsでTwitter認証する (つもりが勘違いでうまくいかなかった話)
tl;dr API Keyの入力欄にAccess Tokenを入れたことに気づかず数日を無駄にした。 おわり。 以下のあれこれは、上記キーの取り違えに気づくまでの間にやった意味不明な作業のメモで、役に立たないです。どんなミスをしたのかを書いています。 Qiita見てても分だの秒だの爆速だのでサクッとうまくいった記事ばっかなので、間抜けな記録が混じってもいいだろうと思って。 Firebaseにのっけたい。便利なツールが色々あるので使いたい Nuxt.jsでWebアプリを書いてる 認証をTwitterのやつ使おう （Google認証とか色々あるけどまずはTwitter) 余談ですがTwitter避けようぜキー発行厳しくなるし的な話ちょいちょ見かけますけど、個人的には厳しかったことは一度もない。 開発者アカウントの発行完了は秒でしたし、その後も特段困るような何かには遭遇してません。 API Ke
Nuxt.jsとFirebaseでサイトを作った話 -4- PWA/GTM/sitemap/feed対応 | isoppp.com
TL;DR Progressive Web App Google Tag Manager sitemap.xml feed 辺りの導入について 各モジュール類 全部Nuxtのコミュニティがサポートしていたりしますので簡単です。 @nuxtjs/google-tag-manager @nuxtjs/pwa @nuxtjs/sitemap @nuxtjs/feed GTM 用意するもの タグマネージャーのID(GTM-XXXXXXX) 実装方法 npm i @nuxtjs/google-tag-manager nuxt.config.js の moduleへの追加 modules: [ // ... ['@nuxtjs/google-tag-manager', { id: 'GTM-XXXXXXX' }], ]
Firebase、Flamelink、Nuxt、Netlify、PWAを使ってJAMstackなブログを作る
Firebase、Flamelink、Nuxt、Netlify、PWAを使ってJAMstackなブログを作るFirebasePWANetlifyJAMstackNuxt 長々としたタイトル通りのブツを作りました。 その技術内容を紹介をします。 ブログサイト STUDIO Blog | Webデザインのための、クリエイティブメディア Studio Designのマーケティングブログです。 元々Mediumを使っていたところから新規に作ることになったのですが、「じゃあ当然headless CMSでCDNでPWAなサイトですよね！？」と自分なりのフロント技術観を振りかざしてしまいました。 パフォーマンス キャッシュなしのファーストページはまあまあ及第点でしょうか。 遷移時や再訪時だとキャッシュ優先でネットワークを待たないのでより速くなります。 技術構成 まずはコンテンツのデータベースを選びます。
Nuxt.jsとFirebaseによるSPA × SSR × PWAでnode_modulesパッケージを追加する際の注意点 - Qiita
Nuxt.jsとFirebaseによるSPA × SSR × PWAでnode_modulesパッケージを追加する際の注意点JavaScriptFirebaseNuxt はじめに この記事は最近話題になってたNuxt.jsとFirebaseでSPA × SSR × PWAを実装するという以下の記事を元に進めています Nuxt.jsとFirebaseでSPA×SSR×PWA×サーバーレスを実現する 記事の通りに実装し、SPA × SSR × PWAをhello worldすることはできたのですが、その後Firebaseで認証やらを実装しようとしたときに恥ずかしながらハマってしまった点を書きます 行おうとしてたこと FirebaseのGoogle認証を実装する ハマったこと Google認証自体は以下のコードみたいに書けば非常に簡単に実装できます FirebaseのAuthすごい 詳しくは公式
Vue.jsとWebSpeechAPIを利用して音声文字起こし補助サイトを作った話 - Qiita
音声を文字起こしを補助するサイトを作ってみましたので作るまでの経緯や作ってみた感想などをずらずらと書いてみたいと思います。 Vue.js(Nuxt.js)+Firebaseでサイトを構築しているため、お金がかかったところと言えば独自ドメイン取得のところだけでした。 サイト制作までの経緯 会議の発言を全部文字起こしする際や、誰かにインタビューを行った後に内容を文字起こしする際に使うと便利かなーと思って「モジロイ」というサイトを作ってみました。 モジロイ 現在はクローズしましたmm ※ 音声認識はPCのGoogle Chromeでしか利用できません。 書き起こしイメージ↓ 最近Vue.jsを触っていたことから「Vue.jsでサイトを作りたい！」欲が高まって制作を決意しました。 どんなものを作るかで一番悩んでいたのですが、常々と課題に感じている「会議の議事録取り」に視野を当ててみました。 元々議
Nuxt + Firebase Authentication | shimar's blog
最近、個人でFirebaseをバックエンドとしたNuxtによるWebアプリケーションの開発をしています。その中で、Firebaseの機能の1つであるFirebase Authenticationを使用してユーザーの認証機能を実装してみました。この記事では、NuxtアプリでFirebase Authenticationによるユーザー認証機能を実装する方法について書いてみたいと思います。 はじめに ここで検討するアプリケーションは、次の仕様を前提としています。 Googleアカウントで利用可能である。 次のページを持つ。 ルートページ (/) ログインページ (/login) 認証されていないユーザーがルートページ(/)にアクセスした場合、ログインページ(/login)にリダイレクトする。 認証済みのユーザーがログインページ(/login)にアクセスした場合、ルートページ(/)にリダイレクトす
【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
Nuxt.js+Firebase HostingのサイトをPWA化してLighthouseで(ほぼ)100点満点を目指す - razokulover publog
1年くらい前に仕事でNuxt.jsをいじる機会があったんだけどそれ以来使ってなかった。 ただ、GW中にNuxt tech bookを読んだところ久々にいじりたくなってしまい。 そこでちょうどFirebase HostingとPWA化に関して調べてたとこだったので、Nuxt.jsのサイトをPWA化してFirebase Hostingで動かす手慣らしでもしておこうかと思いやってみた。 ただ、普通にやっても面白くないので一応Lighthouseのスコアを満点にすることを目指してみることにした。 コンテンツはNuxtのスターターキットの初期生成されるページ。このページを対象に行う。 以下、Firebase Hostingの設定・Nuxtのプロジェクト作成・PWA設定・Lighthouseのスコア上げの流れで説明してます。 一応ソースはこちらで。 nuxt-firebase-hosting-samp
SCOUTER開発者ブログ
2024-04-29 CSSってどんな勉強をしたらいいの？おすすめの勉強法3選！ 文字やタブなどWebサイトのデザインを作成するマークアップ言語がCSSです。 CSSを勉強すると、おしゃれなWebサイトやかっこいいWebサイトが作れるようになります。 また、Webサイトを作るときに必要なHTMLを理解するのにも役立ちます。 CSSを勉強するならできるだけ効率よく勉強できるようになりたいですよね。 ではCSSの勉強法はどのようなものがあるのでしょうか。 CSSの勉強法は、スクール […] 2024-04-29 WEBエンジニアから見たXserverの使い勝手と評判 レンタルサーバーのおすすめサイトを見ると、大体どこでも上がってくる有料のレンタルサーバーの一つに「Xserver」があります。 このXserverとは、どのようなサーバーで、サービスにはどのようなものがあるのか。 ホームページ関連
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - tkc24/nuxt2_firebase_chat: PWA Web Application by Nuxt v2 & Firebase.
【v2対応しました】Nuxt.jsとFirebaseを組み合わせて爆速でWebアプリケーションを構築する ref: https://qiita.com/potato4d/items/cfddeb8732fec63cb29c · GitHub
GitHub - davidroyer/nuxt-ssr-firebase-auth: Nuxt.js using SSR and Firebase with Authentication
GitHub - tkc24/firebase-simple-chat: nuxt & firebase simple chat
Nuxt.jsとFirebaseでWebアプリケーション開発
Nuxt.jsとfirestoreを組み合わせて簡単なサイトを作った話
GitHub - davidroyer/nuxt-firebase-auth: This is an example of using Nuxt.js in SPA mode with Firebase Authentication
GitHub - shimar/nuxt-firebase-auth-example
Nuxt.jsとFirebaseでSPA×SSR×PWA×サーバーレスを実現する - DMM inside