フロントエンド開発が趣味のUIデザイナーです。
VS CODE と Chrome と Vue が好きなので、自然とできたやつを紹介させてください。
つくったもの
https://psephopaiktes.github.io/tabulasa/
新しいタブをシンプルなMarkdownエディタにするだけのChrome拡張です。
こだわりポイント
- デザイン (サイトみて
) - ローカルホストに自動保存してくれてるので安心
- 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モードに応じてデザインを出し分けられるようになりましたね。以下の記事で書いた方法で色を変数管理しながら対応させました。
今回ちゃんとダーク/ライト両方のデザインに対応させたのですが、これは最初にしっかり変数化して作らないと大変ですね。既存のページをあとから対応させると絶対抜けが出るだろうしやりたくないなあと思いました。
SVG画像の個人的にベストプラクティス
ReactやTypeScriptでSVGの画像やアイコンを扱う場合、どうやって扱っているでしょうか？
A. publicフォルダに.svg画像ファイルを直接<img>タグで普通に使う
B. Component(jsファイル)にして適宜importして使う
その他 ( HTML部分に直接<svg..を書く、objectタグなど
A,Bのメリデメは以下のような感じでしょうか
|メリット
|デメリット
:--|:--|:--
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にまとめるのが便利ですね
これからの予定
- こまかいUXのブラッシュアップ
- Vue3で作り直す
- (需要ありそうなら)VimとかAtomのキーバインディングに対応
ただしばらくはTRPG用のアプリを作る予定なので、こっちの更新は遅くなるかもです 