tDiaryのプレビュー画面を横並びで表示

tDiaryのプレビュー画面をリアルタイムで更新するpreviewプラグインを、横並びでいい感じに表示できるようにした。これでまた、日記が書きやすくなったよ。

以前は縦に並んでいたので、更新するたびに画面がずれてちょっと使いにくかった。@NextSTEP2OSX さんの成果を参考にしながら、CSS3のflexboxを使って画面を揃えている。画面幅が狭い環境では、これまでどおりに縦に並べて表示されるなど、flexboxのいい勉強にもなった。

やったー! tDiary のリアルタイムプレビュー横並びできたよー! 編集画面で preview プラグインを使ったとき、プレビューが上にあると再読込みで編集中のtextareaが上下に移動して不便だったんで満足 #tDiary pic.twitter.com/goOWKuQc0I

— Nyoho (@NeXTSTEP2OSX) 2016年4月29日

ついでに更新間隔も設定画面から変更できるようにした。更新間隔を0秒にすると本当にリアルタイムで更新されていく…がサーバに負荷がかかるのでローカルで試すだけにしたほうがいいね。

contribパッケージに入れているので、contribを最新にしてpreviewプラグインを有効にするだけで使えます。