Firebase公式のGitHubとHostingのインテグレーションが熱い🔥
ウェブコンテンツをホスティングする際に Firebase Hosting という大変便利なサービスがあります。 2020/10/8にGitHub ActionsとFirebase Hostingの統合が強化され、より便利に利用できるようになったのでご紹介します。 なお、公式のドキュメントは以下となります。 現時点では機械翻訳のため、言語をEnglishにして読んだほうが正確です。 GitHubプルリクエストを介してライブチャンネルとプレビューチャンネルにデプロイする できるようになったこと できるようになったことは主に以下の3つです。 GitHub ActionsでPull requestを作成時に、プレビューサイトをデプロイできる GitHub ActionsでPull requestをマージ時に、本番サイトにデプロイできる Firebase CLIツールのコマンドでGitHub Act
Next.jsのアプリをFirebase Hostingでいい感じに連携する - Lento con forza
最近Next.jsとFirebaseばかりやっています。って書きましたが、本当はこの一ヶ月どうぶつの森しかやってませんでした。どうぶつの森のプレイ時間は200時間を超えました。 そろそろエンジニアとしても生活したくなってきたのでエンジニアっぽい話をします。Next.jsで作ったアプリをデプロイする先の選択肢として、Verselを使うと便利です。 SSRが必要なく、静的ファイルをデプロイすれば良い場合はFirebase Hostingなども選択肢に入ります。Firestoreなどと組み合わせて使っている時は、設定を工夫することで便利に使うことができます。今回の記事ではNext.jsで作ったアプリをFirebaseと組み合わせて使う方法を紹介します。 Firebase HostingにNext.jsの静的生成機能を使ってデプロイする まずは、npm initから始めます。 npm init n
【React+TypeScript】Netflixのクローンを作るチュートリアル
【注意！】 2024年4月末にこちらの本の内容を大幅リニューアルしました！ https://note.com/terry10/n/nf0674af97617 ※こちらのZennのBookも5/7を目安にリニューアル内容を反映する予定です 多くの人に手に取って欲しいので、リニューアル後は期間限定で無料配布も検討しています。 こちらのツイートで無料配布について告知しています！ ↓ https://x.com/teriteri_code/status/1783358352447414464 --- React+TypeScriptを使ったNetflixの映画一覧を表示するアプリケーションのチュートリアルです。 学べる事 - ReactのFunctionComponent（関数コンポーネント）とTypeScriptの使用 - React Hooksによるstate管理 - TypeScriptで外
【Flutter】Web アプリを🚀爆速🚀で Firebase Hosting にデプロイする
この記事でできあがるもの はじめに 自分の作ったものが web に公開されるのはうれしいことだ。 そのうれしさまず体験することで開発モチベが高まると思う。 10 分くらいでできるのでお試しあれ。 やっていくこと Flutter のサンプルアプリを Firebase Hosting を使って web 上に公開する。 開発環境 マシン: M1 MacBook Air エディタ: VSCode Flutter: 1.26.0-2.0.pre.402 • channel master 作業の全体像 Flutter アプリを作成 GitHub と連携 Firebase に新規プロジェクト作成 Firebase CLI のインストール GitHub Actions の手直し PUSH & DEPLOY 1. Flutter アプリを作成
Firebase をフロントエンドから適切に隠蔽するための「Hooks Injection パターン」 - JX通信社エンジニアブログ
取締役の小笠原(@yamitzky)です。 JX通信社では、React 製のフロントエンドでも Clean Architecture で設計するなど、なるべく特定のバックエンドに依存しない設計を心がけたりもするのですが、一方で Firebase をラップした react-firebase-hooks などの「便利な Hooks」を使って開発スピードを加速したい、という課題を持っていました。 そして先日、次の記事が話題になっていました。まさに「どう Firebase を隠蔽するか」と「どう Firebase を活用するか」を両立する悩みです。 blog.ojisan.io 結論を言うと「Hooks そのものを注入する」のが筋が良いのではないか と思っています。個人的に「Hooks Injection パターン」と名付けたこの方法をご紹介したいと思います。 今回の記事の完成形はソースコードを公
next.js + vercel + firebase authentication で JWT の検証を行う + Graphql
今個人で作ってるアプリの 認証 + Graphql の部分を抜き出して GitHub に公開した。 mizchi/next-boilerplate-20200727 next.js + vercel + firebase は (パーツを良く選べば) 最高 next.js はルーティングを持つページを作るには最高で、サーバー、静的サイト、JAM スタック、AMP と必要に応じて選択できる。React ベースならこれ一択。 認証サーバーの実装は毎度疲れるし、Firebase Athunetication はこの点においては OAuth Secret を置くだけ + Custom Provider も作れるので、最高。 それと比べて firestore は、ちょっと前に firestore べったりでアプリを試作したことがあったのだが、型がないためにかなり扱いづらく、また読み書きの速度が遅くパフ
Firebaseの存在をフロントエンドから隠蔽するために
「Firebase は安いし楽だしマジ最高」という一心で技術選定してしまったプロダクトが成功して見えてきた課題、割高なコスト・権限管理・カスタマイズ性、そして （特性やスキルセット的に）RDB 製品が適していたのに無理やり Firestore を採用したことによるデータ不整合。 その結果チーム内で Firebase を抜ける機運が高まるも、Firebase べっとりなアプリケーションすぎて移行しづらいといった問題に出会うかもしれません。 そのような場合に備え、Firebase の存在を隠蔽して開発することに挑戦してみましょう。 注意: Firebase を剥がしているときに「俺、次は絶対そうするわ」と感じたものを書いているだけであり、まだ実際にはこのパターンでプロダクション導入していません。 あくまで個人開発で試してみていけそうと思ったので、提案しますという体です。 また Firebase
Next.jsで個人サービス作ったので技術スタックを公開する｜Vexus2
一昨日「買って応援！」というサイトをリリースしました。 コロナの影響で打撃を受けている生産者や飲食店、販売店の方々が「廃棄になるよりは･･･」という思いで各所で販売されていますが、情報が散らばっていたのでまとめている【買って応援！】するためのサービスです。 割とモダンな構成で作っているかなと思うので、使用している技術・サービス周りを少しまとめてみました。 Frontend今回は初めてProductionでNext.js(React)を使いました。 元々自分はNuxt.js(Vue)を書くことが多く、いつもだったら「Nuxt.js(Vue) + Firebase + Heroku + Algolia (+ 必要に応じてFastly)」を採用することが多いんですが、直近のNext.js 9.3から強力なSSGサポートが入ったこともあり、個人でやるんだしせっかくなら、ということでフレームワークも
アプリ内課金の定期購入（サブスクリプション）をFlutterとFirebaseで実装するときのポイント - Studyplus Engineering Blog
こんにちは、スタディプラスの須藤(id:kurotyann)です。 昨年の9月にFlutterとFirebaseで新規サービス「ポルト Porto」をリリースしました。 tech.studyplus.co.jp ポルトはアプリ内課金を未実装でローンチしました1。ローンチ時の決済手段は、Stripeを使ったWebクレジット決済（月額制で無料トライアル14日間）のみです。 高校生をメインターゲットとしながらもアプリ内課金がないのは大きな課題であったため、今年の2月25日にアプリ内課金をリリースしました。 そこで、今回は「FlutterとFirebaseに焦点をあてて」アプリ内課金の定期購入の実装ポイントを紹介します。 1. 技術選定 システム構成図 まず、システム構成図で全体像を示します。 アプリ内課金（定期購入） 定期購入のステータス変更通知 Flutter（アプリ側） Flutterにはア
Cloud Firestoreで「いいね」機能を実装するときの勘所
Cloud Firestoreで「いいね」機能を実装するときの勘所Tuesday, December 31, 2019 何かしらのサービスを作る際に、ユーザー同士のコミュニケーションを促進させる機能の一つに、 TwitterやInstagramなどのサービスでおなじみの「いいね」機能があります。 機能としては 投稿等に「いいね」をつけることができる（♡だったり☆だったりシンボルは様々) 「いいね」がどれだけついたか、その数がわかる (最近だとInstagramがいいねの数の表示をなくしましたね🤔) 投稿等に「いいね」をしたユーザーの一覧が見れる 自分が「いいね」をした投稿等の一覧が見れる といったものが挙げられます。 このような機能ををFirebase、Cloud Firestore(以下Firestore) を使って実装する場合、 どのように実装するのか、どのような設計が良いのか、 逆
実用的なFirebaseのDeploy Scriptを作る
実用的なFirebaseのDeploy Scriptを作るMonday, December 2, 2019 この記事はQiitaの「Firebase Advent Calendar 2019」の2日目の記事になります。 1日目はSuguruOokiさんの「Firebaseとスタートアップが考える料金のバランスと使い方の話」という記事でした。 今回は実用的なFirebaseのDeploy Scriptを作るというタイトルで、FirebaseのデプロイについてTipsを話しつつ、普段僕が携わっている開発の現場でも実際に使っているFirebaseのデプロイ用のスクリプトの紹介をしてみます。 FirebaseのDeploy 本題の前に、少しFirebaseのDeployについて基本的な事、Tips的なことをお話します。 Firebaseでは、Cloud FunctionsやHosting、Fire
Flutterに入門する前に集めたリンク集 - くらげになりたい。
結構前からFlutterしたいなと思ってたけど、そろそろはじめれそうだったので、 今まで集めたリンクを整理してみた(´ω｀) Twitterリンクも多いけど、気にせずリンク集にしてみた(´ω｀) 公式ドキュメント Flutter Documentation - Flutter FlutterAppの基本 | Flutter Doc JP Language tour | Dart 導入 【Flutter】Firebaseの導入方法をまとめておく【スクショあり】 | ぐるたかログ 【Mac】Flutterの環境構築をまとめてみる | ぐるたかログ Flutter 1.0がリリースされたので概要から、環境構築、実装方法、アーキテクチャ、情報収集方法まで全部書く - Qiita Dart Flutter入門のためのDart入門 - Qiita パッケージ構成 mono0926/flutter_na
Firebaseで1時間で簡単なWebチャットアプリが作れるハンズオン - Qiita
経緯 私Google系はド素人だったのでハンズオン勉強会に参加した所短時間でスムーズにざっくり理解できた気がするので自分なりに整理するために記事にしました。（開催元には許可頂いてます） 参加した勉強会 こちらの勉強会に参加しました。案内のとおり、若手エンジニアが多く私浮いてた気がしますが全く気にしてないです。若い世代のエンジニアと交流すると私もがんばらなきゃという気になります。 ハンズオンスライドがとてもわかりやすかったです。このスライドの手順さえあれば1時間で簡単に作れます。 こういうの作るの大変だけど自分自身勉強になるんだよね。 おそらく、Googleが提供しているここのFirebaseWebCodelabのチュートリアルから翻訳とカスタマイズして作成したんだと思います。 完成イメージ こんなのが作成できます。Google認証も簡単に実装できちゃう。 アプリの構成 作成するチャットアプ
将棋が指せる WEB サービスを個人で開発しました - SHOGIX
みなさんこんにちは、はじめまして、菊池です。 先日、関数型言語と Google のクラウドサービスを使って作った【SHOGIX 無料で将棋の対局ができる WEB サービス 】を公開しました。完全に個人の趣味プロジェクトです。 WEB ブラウザがあれば将棋の対局ができるので、よかったら友達と将棋を指す時とかに使ってみてください！ 今回は SHOGIX を構成する技術について、その概要を紹介してみようと思います。 今後の SHOGIX には、棋力が同じぐらいのユーザー同士でマッチング対局できる機能や、将棋が強くなれる機能を少しづつ追加していく予定です。お楽しみに！ shogix.jp SHOGIX の構成 SHOGIX は Google の各種クラウドサービスを使って、サーバーレスで構成しています。インフラの運用は全てクラウドサービス側にお任せでスケールアウトもしてくれるので、ロジックの開発に
Firebaseを活用したPUSH通知基盤構築
2018年7月2日、Firebase Japan User Groupが主催するイベント「Firebase Meetup #4」が開催されました。2011年に登場し、その後Googleが買収たことでクラウドプラットフォームの一員となったFirebase。その知見を共有するため、Firebaseをサービスに用いるエンジニアたちが一堂に会して、プレゼンテーションを行いました。「Firebaseを活用したPush通知基盤構築のよもやま話」では、danno氏が登壇この講演はcrash.academyでもご視聴いただけます。講演資料はこちら Firebaseを活用したPush通知基盤構築 danno氏（以下、danno）：こんにちは。テレビ東京コミュニケーションズのdannoと申します。 いつもFirebase User Groupには参加させていただいてて、フィードバックしないとなというところで、
Firestore で CQRS やってみた
Evolutionary Architecture - Discovering Boundaries @DevTalks 24
Webアプリ無料運営のススメ：FirebaseとNuxt(Vue)なら最強！ - Qiita
まだサーバーで消耗してるの？Firebase（サーバーレス）とNuxt.js（Vue系）ならWebアプリ運営は最強でしょ！？ この記事は、 サーバー費用をなるべくかけたくないけどショボいのはNO Firebaseの活用法をあまり理解していない Nuxt/Vueを使ってアプリ作ってみたい（Next/Reactと悩んでたり） アプリ構想はあるけどアイデアの落とし込みスピードが遅くて毎回挫折する という人向けに、「こんな感じで構築すれば効率良く開発できそうよ」というのを、勉強になった記事や技術的トピック・躓いた点なども合わせて紹介させていただきます。初心者向け＆技術トピック気になる方向けです！ 今回作ったアプリ「Moji → Pic」 Moji → Picは、文字だけだとなかなか目につく投稿ができないなぁ…とお困りの時にインパクトある画像が即座に出来るアプリ。目立ったツイートで友達に差をつけろ！
ZOZO大忘年会でFirebaseを使った1,000人規模のリアルタイムアンケートを費用2円で制作した話 - Qiita
この記事はZOZOテクノロジーズ TECH BLOGにも同じ内容で投稿しています。よろしければ他の記事もご覧ください。 こんにちは！ ZOZOテクノロジーズ フロントエンドエンジニアの高橋（ニックネームはQ）です（@anaheim0894） 昨年12/26、毎年年末に行われる大忘年会（ZOZOCAMP2018）で、グループ会社も含めた1,000人規模でのリアルタイムアンケートを、FirebaseとVue.jsを使って制作しました。 当日会場にて弊社の昨年の事業紹介や、「楽しく働く」というコンセプトの動画を流し、動画の合間で質問をし動画と一体となるような演出を行いました。 その質問に対して全社員それぞれのスマートフォンで回答できるシステムを作ったので、その制作の裏側や、当日の様子などご紹介させていただきます。 まずは当日の様子の紹介 これを実現するまでの様子をご紹介いたします。 CAMP運営
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - CannerCMS/canner-firestore-cms: The example of building the CMS with Canner and Firestore
GitHub - Canner/canner-firebase-cms: CMS (Content management) for Firebase with SSR supported with NextJS, for blog, ecommerce, mobile apps and even chatbot! This project is based on Canner, a open source CMS framework
