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
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
現在プライベートで作っている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
