読者です 読者をやめる 読者になる 読者になる

ウラガミ

いわゆるチラ裏

「calm editor」アップデート。MarkDownプレビュー、ショートカットキー実装など

f:id:akio6o6:20161104170705p:plain

ほぼ自分用のエディタ「calm editor」をアップデートした。

主なアップデート内容はこちら。

  • MarkDownプレビュー
  • ショートカットキー
  • ボタンをアイコン化
  • URLをhttps

1つずつもろもろ書いてく。

MarkDownプレビュー機能

ブログ書いたり、HTMLをサッと確認したい時ある。そん時いちいちプレビューできるエディタにコピペするのが面倒なのでつけた。ちなみにパーサーは「marked」を使用。

参考記事:簡単なMarkdownエディタを作る - Qiita

プレビューのデザインは始め編集中と全く同じにしてみたんだけど、テストしてて今自分が編集中なのかプレビューしてるのか分からなくなることがあったので、自分が今どのモードなのか分かるように差をつけた。

と言っても具体的には、1.文字を小さくして、2.ヘッダーに錠を表示させた、だけ。

背景を変えたりとかも試してみたんだけど、大きく変えると分かりやすくなる代わりに目がビックリしちゃうので、あくまで自然な変化を心がけた、つもり。

ショートカットキー

プレビュー機能をつけたことにより、キーボードから手を離さずにヘッダーのボタンを押したい欲がわいてきたため実装。難しいと思ってたんだけど、ボタンにaccesskey属性をつければいいだけだったので簡単だった。

▼ 実装したショートカット

  • Alt+p でプレビュー切り替え(Mac だと Ctrl+Alt+p)
  • Alt+i でエディタにフォーカス(Mac だと Ctrl+Alt+i)

スクリプト使えばもっといろいろできそうだけど、とりあえずこんだけ。(あ、もちろん「Ctrl+c」などブラウザ標準のは使える。)

他のボタンにはあえてショートカットキーつけなかった。煩雑になるし、そもそも書いてる途中に押したいボタンはプレビューくらいだったので。

ボタンのアイコン化

プレビューボタンが増えてヘッダーがうざったくなりそうだったので、ボタンを文字ではなくアイコンにした。

スマホからだとこんな感じ
f:id:akio6o6:20161122222108j:plain

環境によって表示を変えたくないので「Font Awesome」を利用。あんまり遅くなるようなら絵文字にするつもり。

*ヘッダー関連で言うとTextWellのボタンいらないんじゃないかと思い始めてるけど踏ん切りがつかない。悩み中。。

URLをhttps

一応ね。


以上。またなんかしたら書きます。

蛇足

前にも書いたけど、文章を書くためだけのエディタとして作ったはずなのに、どんどん機能追加してて本末転倒感ある。

でも今は「紙一枚」「書いてる時他の要素見えにくくする」「常に文字数みられるようにする」なんかの自分なりの原則(?)を守ってればいいかなって気持ち :-P