Category:

Firebase Hosting に Google Analyticsを導入

Firebase Hosting で公開しているこのブログに Google Analytics を導入する手順を紹介します。 Firebaseのドキュメント を元に対応していこうと思います。 Google Analyticsを有効化 Firebase管理画面で、⚙ > 統合 > Google Analytics と辿って、Google Analyticsを有効化します。 Firebaseのマイアプリ追加 Firebase管理画面で、⚙ > 全般 > マイアプリ と辿って、Webアプリを追加します。 設定は適宜入力していけば良いです。 設定の途中で、以下のようなスクリプトを自分のWebサイトのタグの下部に貼り付けるように言われます。 一旦コードをコピーして作業を完了させます。 WordPress側にスクリプトを追加 WordPressを利用している場合、Insert Continue Reading

Posted On :
Category:

WordPress で構築したサイトをFirebase Hosting

年明けに思い立って、 はてブロ をやめて新しく個人ブログを立ち上げることにしました。 初投稿はこのブログの仕組みについて紹介したいと思います。 動機 12月のGoogle検索のアルゴリズムアップデートではてブロ上の個人ブログのPV数が3〜4割程度落ちました。 ブログ開設以来順調に伸びていたPV数が初めて落ち込んだので、何か対策をしたくなったのですが、コンテンツ自体は変える気が起きないので、以下の点を改善しようと考えました。 改善点1: ページの表示速度 現状の表示速度は PageSpeed Insights で確認すると以下の通りでした。 PC mobile また、提案された主な改善事項は以下の通りです。 使用していない JavaScript の削除 JavaScript の最小化 使用していない CSS を削除してください 最初のサーバー応答時間を速くしてみてください はてブロProであ Continue Reading

Posted On :

Vue.js+TypeScript+FirebaseでChrome Extensionを作った

任意のWEBサイトに自分用のメモを残すことができる Chrome Extension を作って公開しました。 plaintextモード or markdownモードでメモを取ることができます。よければ使ってみてください。 この記事では、このChrome拡張開発のコアな部分が出来上がるまでについて紹介していこうと思います。 Web Storeリンク https://chrome.google.com/webstore/detail/memorun/lhkibcggoojcpjmigjohdlgfgjdbjkpb 紹介動画 使用している技術 Chrome Extension Vue.js + Vuetify TypeScript Firebase Authentication Cloud Firestore Cloud Function(この記事では出てきません) Vue.jsを使ったChro Continue Reading

Posted On :
Category:

Firestoreのコストリスク削減

Firestore + typescript を使ってフロントエンドアプリ(Chrome拡張)を作っているのですが、DOS攻撃をうけたり、単純に利用者数が多かったりすると普通にFirestoreの無料枠を超える可能性があります。コストリスクを下げるために、色々対策を実施したので紹介しようと思います。 Firestoreの料金 まずは、FireStoreの料金体系について紹介します。思ったより無料枠が少ないです。 無料枠 こちらを参照しました。単位が書いてないのですが、おそらくアクセスするドキュメント数です。読み取り、書き込み、削除の制限が結構厳しくて、何も考えずに実装していると超えてしまいそうです。そうじゃなくても、一覧画面とかで F5 アタックとかされたら簡単に無料枠を超えてしまいそうです。 処理区分 無料枠 保存データ 1 GiB ドキュメントの読み取り 50,000/日 ドキュメント Continue Reading

Posted On :

Vue+Firebaseで作ったフロントエンドアプリのバンドルサイズを削減する

Vue+Typescript+FirebaseでChrome拡張を作っているのですが、バンドルサイズが大きいよと警告が出たので対応しようと思います。 使っている技術 Chrome Extension Vue+Vuetify TypeScript Firebase Authentication Cloud Firestore ワーニングの内容 npm run build(cross-env NODE_ENV=production webpack –hide-modules)で本番用のコードを出力してみたところ、バンドルサイズが推奨サイズ(244 KB)を超えているというワーニングが出ました。 WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). Thi Continue Reading

Posted On :

Chrome拡張+FirebaseでGoogle認証するいくつかの方法

Chrome拡張アプリを作っていて、ユーザのデータをユーザアカウント(email)単位にCloud FireStoreに保存したいと思っています。ユーザがアクセスできる情報をセキュリティルールを設定して制限したいので、Firebase AuthenticationでGoogle認証を行うことにしました。紆余曲折あり、いくつかの方法を試したので記録しておきます。 なお、単にGoogle認証したいだけなら google-api-javascript-client を使うのが一般的かもしれません。 【不採用】Firebase Authentication in ポップアップページ 公式ページで紹介されている方法を試してみました。参考にしたのは以下の二つのページです。 Chrome 拡張機能での Firebase 認証 Firebase を JavaScript プロジェクトに追加する Fireb Continue Reading

Posted On :