0
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

Vue で Chrome の新しいタブを VS CODE っぽい WISYWIG Markdown Editor にする拡張機能をつくりました

フロントエンド開発が趣味のUIデザイナーです。
VS CODE と Chrome と Vue が好きなので、自然とできたやつを紹介させてください。

つくったもの

Tabulasa
https://psephopaiktes.github.io/tabulasa/
新しいタブをシンプルなMarkdownエディタにするだけのChrome拡張です。

こだわりポイント

  • デザイン (サイトみて:pray:)
  • ローカルホストに自動保存してくれてるので安心
  • Markdownで入力すればリアルタイムにWISYWIGで表示してくれる
  • :emoji:やチェックボックスなどGFMも対応
  • VS CODE のキーバインディングがかなり使える
  • Gistに投稿したりHTMLで保存したり地味に便利な機能

用途

  • EvernoteやNotionなどを開くまえに、とにかくいったんメモしたいとき
  • MTG中に議事録をとるとき
  • PRやSlack投稿前の下書き

たまに、ブラウザで data:text/html, <html contenteditable> を開いてメモ帳代わりにしている人がいますが、そういう人に特におすすめしたいです。てかChromeとVS CODE使ってる人は全員さわってみてほしいです。

技術的な知見

いろいろ試してみた知見をメモ程度に共有しときます!

EditorはCodeMirror

ブラウザ上で動くエディターのライブラリはいくつかあるのですが、今回はCodeMirrorという歴史ある定番のヤツを採用しました。だいぶレガシーになりかけているのですが、PCだけで使うならとても良く動きますしかんたんでした。スマホでも使おうとすると厳しいらしく、リニューアル版が開発中だったりします。

ほんとはMicrosoft公式のMonacoを使いたかったのですが、機能過多すぎるのと、デザインの自由度が全然無くてありがちになっちゃいそうでやめました。

Dark Mode 対応はやっぱりCSS変数が便利

他でも書いたのですが、WebでもOSのLight/Darkモードに応じてデザインを出し分けられるようになりましたね。以下の記事で書いた方法で色を変数管理しながら対応させました。

Webのダークモード対応をSCSS変数で管理する方法を考える - Qiita

今回ちゃんとダーク/ライト両方のデザインに対応させたのですが、これは最初にしっかり変数化して作らないと大変ですね。既存のページをあとから対応させると絶対抜けが出るだろうしやりたくないなあと思いました。

SVG画像の個人的にベストプラクティス

ReactやTypeScriptでSVGの画像やアイコンを扱う場合、どうやって扱っているでしょうか?

A. publicフォルダに.svg画像ファイルを直接<img>タグで普通に使う
B. Component(jsファイル)にして適宜importして使う
その他 ( HTML部分に直接<svg..を書く、objectタグなど

A,Bのメリデメは以下のような感じでしょうか

メリット:thumbsup: デメリット:thumbsdown:
A わかりやすい
更新が楽
SVGの数だけリクエストが増えるので遅くなる
CSSでSVGをいじれない
B インラインになるのでリクエストが減る
CSSで見た目を変えられる
StoryBookなどで管理できる
いちいち@importするのが面倒
更新がだるい

今回は折衷案としてvue-svg-inline-loaderを使用しました。簡単に言うと<img svg-inline src="@/assets/icon/about.svg" />と書くとビルド時にインラインに変換してくれるパッケージです。

個人的には↑の両方良い所どりなので、しばらくこれを使っていこうかなと思います。(PUGには非対応...)

その他の雑感想

  • pugで書くとコード量めっちゃ減るけど、@include使えないしLinterも効かないのはつらみ
  • TypeScriptいちおう使ったけどぜんぜんわからん
  • 個人開発だとデザインファイルもドキュメントもタスクチケットも全部GitHubにまとめるのが便利ですね

これからの予定

Issues · psephopaiktes/tabulasa

  • こまかいUXのブラッシュアップ
  • Vue3で作り直す
  • (需要ありそうなら)VimとかAtomのキーバインディングに対応

ただしばらくはTRPG用のアプリを作る予定なので、こっちの更新は遅くなるかもです :bow:

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
0
Help us understand the problem. What are the problem?