はじめまして。DMM.comラボ エンターテインメント本部イベント開発部の上井(ウワイ)と申します。 インフラからフロントエンドまで幅広く担当しております。 今回は、業務で利用しているNuxt.jsとFirebaseを使って、SPA×SSR×PWA×サーバーレスのWebアプリケーションを構築する方法をご紹介いたします。
さよなら「goo.gl」、URL短縮サービス「Google URL Shortener」が2019年3月終了 ただし既存リンクは生きつづける 「goo.gl」で知られるURL短縮サービス「Google URL Shortener」が終了します。Googleが2018年3月30日(米国時間)、開発者向け公式ブログで明らかにしました。 goo.glのサポートは今後数週間で打ち切られ、goo.glの作成や管理、クリック分析をおこなえるgoo.glコンソールおよびURL Shortener APIsは2019年3月30日をもってシャットダウンされます。もっとも、既存のgoo.glリンクが使えなくなるわけではなく、2019年3月30日以降も意図されたリンク先にリダイレクトされつづけるほか、リンクに関する情報をエクスポートすることもできます。 Googleでは開発者向けサービスの「Firebase D
はじめに すいません、最短は煽りですw 簡単な連絡帳みたいなものを作るサンプルを通して、Vue と Firebase / Firestore の組み合わせの開発コストが低いかを紹介したいと思います。 最初は、アクセス制御をかけずに作成し、次に Firebase の auth を使って認証をかけてみます。 最終形を以下でホスティングしてあります。適当にサインアップして試してみてもらってかまいません。 ロジックに集中するために、デザインはほぼあてていません。見た目悪いのは気にしないでください。 準備 Node.js と npm をインストールしてください。 https://nodejs.org/en/ この記事は、8.10.0 LTS で検証しています。 vue-cli をインストールしてください。 Firebase / Firestore をセッティング 公式ドキュメントにのっとればプロジェ
はじめに 前回の記事から随分経ってしまいましたが、今回はユーザ登録を実装してみます。 ログイン機能は前回実装した、Google Authorization機能を用いますが、一般に公開されるユーザ名を追加で設定できるようにします! この記事の内容で、FirebaseDB(と呼びます)への書き込みが理解できました。 成果物はこちらになります。 https://github.com/tamalign/CheekyCat/tree/day3 設計と実装 どのようにユーザ管理をするかを考えます。 (あまりWebに詳しくないので間違っていることがあるかもしれませんがご容赦ください。) 今回はユーザの一意のIDをKeyとして、必要な情報をValueに保存するテーブルで管理を行いたいと思います。 FirebaseDBでは以下のようにしてuidを取得できます。参考ページ
最近話題の FireStore の使い方を Chat を作りながら説明してみます。 以下の順番でやってみます。 HTML / JavaScript で素朴に Vue でモダンに Quasar でアプリに Quasar でやった最終の形を https://firestore-p.firebaseapp.com でホストしてあります。 適当にサインアップして使ってみてもらって構いません。 準備 Firebase / Firestore をセッティング 公式ドキュメントにのっとればプロジェクトのセットアップまでは簡単です。 Authentication のログイン方法で、メール/パスワードを有効にします。 データベースのルールをとりあえずテストモードにしておきます。 Firebase / Firestore の準備はこれだけで OK です。 チャットのデータの形 以下の4つのプロバティからなるド
こんにちは。GMOアドマーケティングのK.Mです。 最近よく聞くPWAという概念があります。ざっくりいうと「アプリのようなWeb」ということで、プッシュ通知や、アプリのようにリッチなオフライン体験、バックグラウンド処理などをWebにもたらそうとする取り組みやそういったWebアプリのことを指します。 サービスワーカーと呼ばれるブラウザがWebページとは別にバックグラウンドで実行するプログラムが肝となっており、具体的にはこのサービスワーカーが働くことによって「アプリっぽいWeb」を実現可能とします。 今回は、いざアプリっぽいWebをということで、Webアプリにプッシュ通知を追加するということを試してみました。プッシュ通知は、メルマガ等に比べてリーチしやすいことが多いと思いますし、それをしたいがためにネイティブアプリ化するようなケースも聞くところだったりしますので、既存のWebアプリにお手軽にプ
はじめまして。FRESH! でフロントエンドの開発をしている池田 (こりら) です。 この記事では、Web Push の実装概要や FRESH! における Web プッシュ通知機能 〜機能設計編〜 をもとに、実際に FRESH! でどのように Web Push 通知機能を実装したのかを紹介します。 アジェンダ Web Push の実装概要 Web Notifications API Web Push API Firebase Cloud Messaging (FCM) Service Worker push イベント notificationclick イベント FRESH! における Web プッシュ通知の実装 FCM に関連する処理をユーティリティ化 通知に関する実装 チュートリアルの実装 チャンネルページ・登録情報の管理ページの実装 各ブラウザの個別対応 Chrome (59) Fi
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.0/css/bulma.min.css"> <script src="https://unpkg.com/vue"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs
#teppeis_sushiというイベントで、Faao - ドメイン駆動設計で作るGitHub Issue Client -という話をしました。 Electronやブラウザなどで動くfaaoというGitHubクライアントを書いていてそれの技術的な話です。 クライアントサイドでDDDを取り入れた設計になっていて、その設計や規約の作り方やそれを守る方法についての話をしました。 azu/faao: Faao is a GitHub issue/pull-request client on Electron. Living Documentation by design, with Domain-Driven Design by Cyrille Martraire [PDF/iPad/Kindle]という無料から買える書籍では、ドキュメントとコードを同じ速度で成長させていくためにはドキュメントに対
前提 Macで環境構築 npmが入っていること FirebaseのHosting機能を利用する vue-cliの環境を構築する % npm install -g vue-cli % vue init webpack household_account % cd household_account % npm install % npm run dev firebaseの利用準備をする 下記URLからFirebaseコンソールに遷移してfirebaseのアカウントを作成する。 Firebaseコンソール「新規プロジェクト作成」から新規プロジェクトを追加する。 「ウェブアプリに Firebase を追加」を選択し、表示されたscriptタグなどをコピーする(project_rootのsrc/firebase.jsなどに保存しておく)。 「Authentication」から認証方法を選択する(G
最近、Firebaseがいいみたいになってるけど、2017年4月時点では、あんまり良くないと思っています。 そんな記事です。 主にFirebase Notificationsについてです。 前提 全ての状況で良くないわけではなくて、以下の前提がある場合です。 技術者でない人、例えば企画がPush通知を送りたい。 ユーザをセグメント分けして、対象のセグメントだけに送りたい。 お金はかけたくない。 駄目だと感じたところ セグメントが上書きされない 2018/12/7追加 現在は改善されているようです。(すいません、自分で試してないですが。。) 詳しくはコメント欄をみてください。 下記に記述していた公式のFirebaseヘルプも更新されていて全く違う内容になっていました。 ほぼ、これに尽きます。 Firebaseではユーザの属性情報(例えば、職業とか性別とか)は、ユーザプロパティと呼んでいます。
自己紹介 uryyyyyyy: しばたこ 本業はアドテクでScala/React/TypeScript 副業でReact Native 最近そこそこバズった記事→ReduxでのMiddleware不要論 話すこと React NativeでNative APIを扱ってみる Swift/Kotlinでやってみる お題として今回はFirebase SDKとGoogle認証を扱ってみます。 Firebaseのイベントトラッキングの方ではNative Moduleを扱う話、 認証周りでは、もう少し拡張してView/ViewControllerを扱ってみる話をします。 完成形 iOS Android ところで FirebaseにはNativeのSDKとWebのSDKがあるのは大丈夫ですよね? ちゃんと調べてないですが、違いはAnalyticsが弱いとかPush通知とかだと思います。 せっかくのRea
Firebaseを使ってファイル保存&管理機能を簡単に実装するための手順をまとめてみました。 Storage サーバ側のコードを使わずにユーザーが生成した写真や動画などのコンテンツを保管、提供する事ができる機能です。 今回はファイルアップロードとダウンロード(参照)を試してみます。 ファイルをダウンロード(参照)してみる。 Firebaseコンソールからアップロードした画像ファイルを参照して画面に表示できるようにしてみます。 Firebaseコンソールを開き Storage機能を追加したいプロジェクトを選びます。 Firebaseコンソール 左メニュー Storage を選択する。 ファイルアップロードボタンから適当な画像をアップロードする。 Storage バケット URL を確認する。 "ウェブアプリに Firebase を追加"を選択して表示される JavaScript を inde
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く