iOS でも Web Push が送れる！microCMS と Firebase Cloud Messaging を使った実装方法
iOS でも Web Push が送れる！microCMS と Firebase Cloud Messaging を使った実装方法 お初にお目にかかります(？) chot Inc. で Web エンジニアをしているすてぃんです。 もう 1 ヶ月前ですが iOS Safari でプッシュ通知に対応したバージョンのベータ版が発表されましたね。 Web のプッシュ通知は、シェアの大きい iOS が対応してくれなかったのであまり実用的ではありませんでしたが、これからは Web でも多くのユーザーに能動的に新着情報を伝えることができるようになります。 本記事では Firebase Cloud Messaging(以降 FCM と表記) を用いた Web Push 通知の実装方法を、架空のメディアサイトを実装しながら紹介します。 FCM 以外には microCMS と Next.js を使用します。m
どちらを選ぶ？ Firebaseが提供する2つのデータベース「Realtime Database」「Cloud Firestore」
クロスプラットフォームに対応した、Googleが提供するmBaaS「Firebase」。無料で使い始めることができ、アプリ開発者の工数を大幅削減できるサービスです。連載第6回は、Firebaseが提供する2つのデータベース、Realtime DatabaseとCloud Firestoreについて詳しく解説します。 Realtime DatabaseとCloud Firestoreの共通点 Realtime DatabaseとCloud Firestoreは以下のような共通点を持っています。 クライアントファーストのSDK（デプロイして維持するサーバーが不要） リアルタイム更新 無料利用枠があり、その後は使用分に従う支払い どちらのサービスを採用するかは、上記の共通点に加え、技術・ビジネスの両面において得意・不得意なことがあるため、サービスの詳細を知る必要があります。前半はそれぞれのサービ
レガシーおじさん、SPAを始めてみた。そして限界を知る
はじめに 最近、Webの記事を見てるとReactだVue.jsばかりが上がっていてJSPやERBの話をしてる人は誰もいません。jQueryの記事ももちろん見ない。 つまり、Webだけ見る限りではほとんどの人がSPAを使ってるように見えます。 私はWeb界隈には居るもののどちらかというとバックエンド寄り、もっというとそもそもWebとか関係ない領域を見る事が多いので、ちょっとキャッチアップを兼ねていくつかの個人プロダクトにVue.jsを採用してみました。 jQueryくらいで頭が止まってたので。サーバサイドもマイクロサービスでAPI化が進んでるのでフロントもそれに合った技術を選ばないとですしね。 というわけで、今回はその中で得た知見というか、従来型のサーバサイドでのWeb開発をしていた人の視点でVue.jsをキャッチアップする流れで書いていきたいと思います。 まあ最終的な結論は正直「これすごく
コネヒトでネイティブアプリをグロースさせるために使っているSaaS - コネヒト開発者ブログ
こんにちは！コネヒトでアプリケーションエンジニアをしているaboです。 今回はコネヒトで特にネイティブアプリをグロースさせるために使っているSaaSを、それぞれどう使っているかも合わせて紹介します。 今回紹介するのはこの４つで、ざっくりとした使い方は以下の通りです。 Firebase：クラッシュ分析や、A/B テストなど KARTE：ポップアップ配信 Repro：プッシュ通知配信 Mixpanel：フローやファネル、リテンションなど多様なデータ分析 それぞれについてもう少し詳しく紹介していきます。 Firebase のつかいかた Firebase は多くの機能を持つアプリ開発プラットフォームですが、コネヒトでは以下の機能をつかっています。 Firebase Analytics：BigQuery とリンクさせて多様なデータ分析 Firebase Crashlytics：クラッシュ/非重大なイ
ちょっとでもセキュリティに自信がないなら、 Firebase Authentication を検討しよう
note のやらかしのあのへんについて。 認証自作、 Rails 、 Devise - Diary パーフェクト Rails 著者が解説する devise の現代的なユーザー認証のモデル構成について - joker1007’s diary 認証サーバーの実装は本質的に難しいです。セキュリティが絡むものは「簡単な実装」などなく、プロアマ個人法人問わず、個人情報を守るという点で、同じ水準を要求されます。悪意あるハッカーは常にカモを探していて、もし認証が破られた場合、自分だけではなく大多数に迷惑が掛かります。初心者だから免責されるといったこともありません。全員が同じ土俵に立たされています。 とはいえ、認証基盤を作らないといろんなサービスが成立しません。そういうときにどうするか。 Firebase Authentication で、タイトルの件なんですが、 Firebase Authenticat
Firebase Realtime DBを実践投入するにあたって考えたこと - Qiita
Firebase Realtime DBを実践に投入する Databaseと聞くと、これから利用しようとするFirebaseがmBaaSであることを忘れてついREST(Client Server Model)で考えてしまいがちですが、大前提はMobile Platformなので、一度REST、RDBの考え方は捨ててみてください。 RDBの考え方を引き継いだままでは、Firebase Realtime DBの最善の設計はできないと考えています。 そして、RDBの考え方を引き継いだままFirebase Realtime DBを理解しようとすることが、導入の一つの障壁となっていると思っています。 ぜひ頭をリフレッシュしてFirebase Realtime DBの見方を変えてみてください。 この記事では、Firebase Realtime DBの導入するにあたっての考え方やテクニックを紹介します。
Cloud Firestoreを実践投入するにあたって考えたこと - Qiita
はじめに Firebase Realtime DBを実践投入するにあたって考えたことを読んで頂いてありがとうございます。 多くの方から「いいね」を頂いて、今回のこの記事を書くモチベーションになりました 本当にありがとうございました！ さて、CloudFirestoreは、Firebase Realtime Databaseとは全く違うデータベースです。特にSubCollectionやQueryが導入されたことにより、リレーションシップの設計に関して大きく異なります。 この記事では、主にCloudFirestoreにおけるリレーションシップの設計方法から、アプリ・CloudFunctionsに至るまでを幅広く解説して行こうと思います。 次の記事ではデータベースの歴史を解説しています。 RDBの限界とNoSQLの登場 Cloud Firestoreでの開発について 私の経験上確実に断言できるこ
[社内ハンズオン資料] Angular+Firebaseで作るTODOアプリケーション | DevelopersIO
大阪オフィスのフロントエンド勉強会で使用したAngular+Firebaseハンズオンの資料を公開します。勉強用のサンプルアプリケーションとして活用していただければ幸いです。 どうも！大阪オフィスの西村祐二です。 大阪オフィスではフロントエンド勉強会を隔週で行っており、そこでAngular+Firebaseで作るTODOアプリケーションのハンズオン行ったのでその資料を公開します。 勉強のためのサンプルアプリケーションとしてお役に立てれば幸いです。 ゴール 下記のようなTODOアプリケーションを実装します。 主な機能として下記になります。 TODOの追加削除 Drag And DropでTODOを移動させてデータを更新 Googleアカウントでログイン・ログアウト TODO追加入力フォームのバリデーション バックエンドはFirebaseを利用しています。 利用するツール Angular An
![[社内ハンズオン資料] Angular+Firebaseで作るTODOアプリケーション | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/6e0940ba64874bd2343c7288634d9d170730b2e5/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2020%2F03%2Fangular9-eyecatch-1200x630-1.jpg)
Amplify vs Firebase 比較してみた - Qiita
サーバレスアーキテクチャの選択肢として、AWSのAmplify、GoogleのFirebaseが有力な候補となっているのではないでしょうか。 実際にAmplify・Firebaseの両者に触れ、比較・検討して得られた知見をまとめました。 ※直近プロダクトの開発にAmplifyを採用して進めてきたので、Amplifyを軸に記事を書いています。 API連携 AmplifyとFirebaseとで異なる特徴のひとつにAWS AppSync（GraphQLをすぐに利用できるフルマネージドサービス）を利用できる点があります。 自前でGraphQLを構築するのは手間がかかりますが、AmplifyのAPIモジュールは「AWS AppSync」をサポートしているので簡単に構築できます。DynamoDBやLambdaとのアクセスもシームレスに行えるので非常に便利です。 以下はその他のAppSyncのメリット
2020 年、 React 軸で学ぶべき技術 - mizchi's blog
なぜ仮想 DOM という概念が俺達の魂を震えさせるのか - Qiita から 5 年経ち、 仮想 DOM を備えた React やそれを採用した Vue や他のライブラリも市民権を得たように思います。 有用な技術が市民権を得る、というのはエコシステムが花開くことでもあります。新しいプロダクトを作る際の技術選定において、 TypeScript + React が常に正解というわけではないですが、このスタックはかなり強力だという手応えがあります。 このスタックは得意のウェブフロントエンドは勿論、それ以外もとりあえず 80 点ぐらいの品質でプロトタイピングできる、というようなエコシステムになってきたような肌感があります。 モダンフロントエンドだと TypeScript と Webpack は採用しているのを前提として、本記事では React を軸にその技術を活かすために、次の 6 個の技術を紹介
Firebase Cloud Messaging(FCM)を利用したWebPush通知の実装について - Qiita
最近FCMを利用したWebPush通知を実装する機会があったため、 その備忘録として簡単にまとめておきます。 WebPushについて FacebookやGmail、SlackやChatworkなどを利用されているとブラウザの画面右上に飛んでくる通知。 （※ 画像はサンプルで開発したWebPush通知のスクショです） これをFCMを利用して実装してみました。 FCMとは FCMとは、Firebase Cloud Messagingの略で、 W3CをIETFで標準化が進むWebPushをFCMを利用して通知を送信できるようになりました。 これまでは、Firefoxでは事前のキーやIDが必要なくWebPushを送信出来ていましたが、 GoogleChromeではAndroidのアプリケーションと同様に GoogleCloudMessaging（GCM）の登録やキーとIDの取得が必要な状態でした。
Firebase Cloud Messaging (FCM) で Web Push 通知を実装してみた – rilakkuma3xjapan's blog
Overview 「Web Push 通知を実装してみた」で Web Push 通知の概要と, web-push モジュールを利用した Web Push 通知の実装を記載しました. しかしながら, web-push モジュールを利用した Web Push 通知は鍵のやりとりが少々煩雑で実装も複雑になってしまいます. Firebase Cloud Messaging (FCM) を利用すると, 鍵のやりとりの代わりにトークンを利用することで Web Push 通知を簡単に実装することができます. What is Firebase Cloud Messaging ? クロスプラットフォームのプッシュ通知のためのソリューションです. 詳細は, こちらのドキュメントを参考にしてください. How to use Firebase Cloud Messaging ? Firebase console
Firebase Analyticsで送信するイベント設計の方針を考えてみた (BigQueryは使わない案) | DevelopersIO
Firebase Analyticsを使い始めましたが、Google Analyticsと同じように確認できないことに改めて気づきました。 そのため、「どのような方針でイベント送信すれば良いのか？」を自分なりに考えてみました。 スマホアプリの使用状況を把握するために、Google Analyticsを導入していましたが、2019年10月31日でサポートが終了するため、Firebase Analyticsに入れ替えました。 Google アナリティクス開発者サービス SDK の終了 しかし、Google Analyticsと同じようにイベント送信をしても、Firebaseコンソール上で同じように確認できないことに改めて気づきました。 そのため、「どのような方針でイベント送信すれば良いのか？」を自分なりに考えてみました。 注意 本記事は筆者の考えをまとめた内容です。そのため、事実と異なる可能性
Web Push Interoperability Wins | Blog | Chrome for Developers
When Chrome first supported the Web Push API, it relied on the Firebase Cloud Messaging (FCM),formerly known as Google Cloud Messaging (GCM), push service. This required using it's proprietary API. This allowed the Chrome to make the Web Push API available to developers at a time when the Web Push Protocol spec was still being written and later provided authentication (meaning the message sender i
React & Firebaseで簡単なChatアプリを作ってみた - Qiita
この記事は Retty Advent Calendar 22日目です。 昨日は、@akiさんのAWS Cognitoを実践で使うときのハマりどころでした。 こんにちは、エンジニアのkawamuraです。 今年も盛り上がりを見せた、React.jsとFirebaseの流行りの波に乗り、簡単なChatアプリを作ってみました。 データベースからホスティングまで全て無料で利用できるFirebaseはとても便利ですね！ 作ったアプリはこちらです。 Firebaseの準備 https://console.firebase.google.com/ にアクセスし自身のGoogle accountでログインし、「新規プロジェクト」を作成します。 Reactプロジェクトの準備 一から環境構築するのが大変なので、create-react-appを利用します。 導入方法 Node.js version 4以上があ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GoogleのmBaaS「Firebase」を活用したスマートなアプリ開発一覧
AndroidでFirebaseを使ったPush通知(FCM)を実装する
Firebase Analyticsの使い方｜できることや分析・計測方法、dashboardを解説 | はじめての「Google アナリティクス for Firebase」入門
Firebase入門 フリマアプリを作りながら、認証・Firestore・Cloud Functionsの使い方を学ぼう！ - エンジニアHub｜Webエンジニアのキャリアを考える！
Developers.IO 2019 in OSAKAで「ML Kit for Firebase入門」を話しました #cmdevio | DevelopersIO
