Firebase Hosting で公開しているこのブログに Google Analytics を導入する手順を紹介します。 Firebaseのドキュメント を元に対応していこうと思います。 Google Analyticsを有効化 Firebase管理画面で、⚙ > 統合 > Google Analytics と辿って、Google Analyticsを有効化します。 Firebaseのマイアプリ追加 Firebase管理画面で、⚙ > 全般 > マイアプリ と辿って、Webアプリを追加します。 設定は適宜入力していけば良いです。 設定の途中で、以下のようなスクリプトを自分のWebサイトのタグの下部に貼り付けるように言われます。 一旦コードをコピーして作業を完了させます。 WordPress側にスクリプトを追加 WordPressを利用している場合、Insert Continue Reading
年明けに思い立って、 はてブロ をやめて新しく個人ブログを立ち上げることにしました。初投稿はこのブログの仕組みについて紹介したいと思います。 注）本記事中のhttp://localhost:８０００の表記はポートが本来半角であるべきなのに全角になっています。これは半角のままだと、静的ファイル化に利用している Simply Static プラグインが、公開用の rinoguchi.net に変換してしまう挙動を回避するためのものです。 動機 12月のGoogle検索のアルゴリズムアップデートではてブロ上の個人ブログのPV数が3〜4割程度落ちました。 ブログ開設以来順調に伸びていたPV数が初めて落ち込んだので、何か対策をしたくなったのですが、コンテンツ自体は変える気が起きないので、以下の点を改善しようと考えました。 改善したい点１: ページの表示速度 現状の表示速度は PageSpeed In Continue Reading
任意の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
Firestore + typescript を使ってフロントエンドアプリ（Chrome拡張）を作っているのですが、DOS攻撃をうけたり、単純に利用者数が多かったりすると普通にFirestoreの無料枠を超える可能性があります。コストリスクを下げるために、色々対策を実施したので紹介しようと思います。 Firestoreの料金 まずは、FireStoreの料金体系について紹介します。思ったより無料枠が少ないです。 無料枠 こちらを参照しました。単位が書いてないのですが、おそらくアクセスするドキュメント数です。読み取り、書き込み、削除の制限が結構厳しくて、何も考えずに実装していると超えてしまいそうです。そうじゃなくても、一覧画面とかで F5 アタックとかされたら簡単に無料枠を超えてしまいそうです。 処理区分 無料枠 保存データ 1 GiB ドキュメントの読み取り 50,000/日 ドキュメント Continue Reading
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
Chrome拡張アプリを作っていて、ユーザのデータをユーザアカウント（email）単位にCloud FireStoreに保存したいと思っています。ユーザがアクセスできる情報をセキュリティルールを設定して制限したいので、Firebase AuthenticationでGoogle認証を行うことにしました。紆余曲折あり、いくつかの方法を試したので記録しておきます。 なお、単にGoogle認証したいだけなら google-api-javascript-client を使うのが一般的かもしれません。 【不採用】Firebase Authentication in ポップアップページ 公式ページで紹介されている方法を試してみました。参考にしたのは以下の二つのページです。 Chrome 拡張機能での Firebase 認証 Firebase を JavaScript プロジェクトに追加する Fireb Continue Reading
