任意の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
Vuetify は、とても使いやすいVue UIコンポーネントを提供してくれるライブラリなのですが、リセットCSSが強制的にページ全体に適用されてしまうため、既存ページの一部分にVuetifyを使いたくてもその外側のデザインが崩れてしまうことがあります。 ここではその問題を回避する方法について紹介します。 リセットCSSとは リセットCSSとは各ブラウザがデフォルトで適用するCSSの差異の影響で画面のデザインが変わってしまわない様に、ブラウザが適用するCSSを打ち消すためのものらしいです。 VuetifyのリセットCSS VuetifyのリセットCSSは以下で、これが強制的に適用されます。 https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/styles/generic/_reset.scss 例えば、 Continue Reading
2020年6月追記：記事の内容がだいぶ古くなっていたので、最新の情報に見直しました。 Vue+TypeScriptで作ったフロントエンドアプリの見た目をよくしたかったので、Vuetifyを導入しました。 Quick Startにいっぱい書いてあって、どれをどうやればいいかが結構分かりにくかったので、導入手順を記載しておきます。 インストール こちら にしたがって導入をします。 VuetifyのUI Componentを利用する箇所で毎回moduleをimportしなくても、自動的にimportしてくれる vuetify-loader を利用するケースについて記載しています。 依存ライブラリを追加します。 npm install –save vuetify npm install –save-dev sass sass-loader fibers deepmerge -D npm ins Continue Reading
