任意の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
vue + typescriptで作っているフロントエンドアプリにmarkdown editorを導入したので少し紹介します。 XSS対策をちゃんとできるかという点に着目しつつ、mavonEditorとEasyMDEを試して最終的にEasyMDEの方を採用しました。 mavonEditor 2020年6月時点でstar数も3.9kあり実績十分ぽかったのでまずはこれを試しました。 導入手順 こちらをベースにやっていくわけですが、typescript＋開発時はnode_modules・本番はCDNという前提で導入手順を記載しておきます。 ライブラリをインストールし、 npm install mavon-editor –save-dev mavonEditor.tsに以下のように記述します。cssはCDNから読み込む予定なのでここではimportしません。 import Vue from &# Continue Reading
現在プライベートで作っているWEBサービスのフロントエンドを作るにあたって、Vue.js＋TypeScriptを試してみることにした。 基本的には公式サイトを参照させていただいた。 作るもの メモを編集する画面を作成する。 初期表示 メモ表示欄とEDITボタンが表示されている メモ表示欄にはメモ取得APIで取得したメモの内容を表示する APIで取得する内容はこんな感じ。{ id: 123, body: "これはサンプルです"} EDITボタンクリック 表示欄＋EDITボタンを非表示にし、編集欄（textarea）＋SAVEボタンを表示する SAVEボタンクリック 編集欄＋SAVEボタンを非表示にし、表示欄＋EDITボタンを表示する メモ保存APIでメモを保存する プロジェクト作成 npmのインストール 以前記事を書いたのでこちらを参照のこと。 node.jsおよびnpm 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
