HandyFlowyで推敲するためのスタイル『suikou』

WorkFlowyで書いた文章をツールを変えずに推敲したいとき、ありますよね？

ってことで、HandyFlowyの拡張スクリプトでそれっぽいことしてみました。

参考: アドオン「Stylish」による「推敲用WorkFlowy」（段差フラット＆bullet非表示）

試行錯誤

とりあえず普通のエディタっぽい見た目を目指していろいろいじってみました。

▼ 主な変更点は以下

バレット & 段差無し
- これでグッとエディタっぽく
段落ごとにまとめる
- バレットと段差がないとトピックの変わり目がわかりにくくなるので
見出し化
- 子要素があるトピックを見出し化（ハサミスクリプト準拠）
- 段差の代わりに階層構造を示すため
- サイズ・太字・下線を変更

▼ で、完成したのがこちら

実際のコード

if(document.getElementById("suikou")){
  document.body.removeChild(suikou);
}else{
  e=document.createElement("style");
  e.id="suikou";
  e.innerHTML="#pageContainer{margin-top:0px}.page{left:0 !important;width:91% !important;padding:8px 16px}.children{padding-left:0;margin-left:0;border-left:none}.selected .project>.name,.selected .project>.notes,.selected>.children>.project .project{padding-left:0;margin-left:0}.bullet{background:none}.selected>.name>.content{font-weight:bold;font-size:100%}.selected>.children>.project>.name>.content{font-size:20px;font-weight:bold;line-height:1.6em;margin-bottom:0.2em;padding:0;border-bottom:1px solid silver;border-radius:0}.selected>.children>.project>.children .project>.name>.content{font-size:18px;font-weight:bold;line-height:1.6em;margin-bottom:0.2em;padding:0}.selected>.children>.project>.children .project>.children .project>.name>.content{font-size:16px;font-weight:bold;line-height:1.6em;margin-bottom:0.2em;padding:0}.selected>.children>.project.task>.name>.content,.selected>.children>.project>.children .project.task>.name>.content,.selected>.children>.project>.children .project>.children .project.task>.name>.content{font-size:16px;font-weight:normal;margin-bottom:1em;padding:0;border-bottom:none}";
  document.body.appendChild(e);
}

切り替え式にしたかったのでスクリプトにする際は「HandyFlowyでプレゼン SlideShow - W&R : Jazzと読書の日々」を参考にしました。

これで『suikou』を起動すれば（見た目上の）アウトライナーとテキストエディタを行き来できるようになりました。

＊他の拡張機能でデフォルトのデザインから変更している場合、要素が競合して表示が崩れる場合がありますので細かいところはカスタマイズして使ってくださいませ。

ちなみにスクリプトの登録は「ScriptMaker」が便利です。

推敲用に作り始めたスタイルですが、脳のモードをアウトライナーからエディタに切り替えたいときにも有効だと気づきました。スクリプトが切り替え式なので非常に手軽にスイッチできるのも気に入ってます。

ウラガミ

いわゆるチラ裏

HandyFlowyで推敲するためのスタイル『suikou』

試行錯誤