ドラッグ&ドロップできるTextwell用HTMLプレビュー ReCard

ブログの下書きでスクリーンショットの位置や段落の順番を入れ替えたくなりませんか。それだけのことにアウトライナーを持ち出すのも仰々しいし、素速くTextwell内で済ませたい。手数が増えるのも面倒なのでプレビュー・アクションを作ってみました。


ReCard

Textwell 1.8.1
分類: 仕事効率化,ユーティリティ
価格: \360 (Sociomedia)

テクストを行単位でカード化し、ドラッグで再配置するアクションです。HTMLプレビューも兼ねているので、表示イメージのまま編集できます。ちょっと無かったタイプ。

Import Textwell ActionReCard


カードモード

Textwellの本文が行単位でカード化し、長押しすると順番を入れ替えることができます。WorkFlowyみたいに使える。HTMLタグが有効なので、画像が対象でも構いません。


エディタモード

画面をタップするとカードモードは解除され、エディタモードに入ります。長押ししても行が入れ替わることはありません。この状態はスクロールがしやすい。
もう一回タップするとカードの内容編集になります。プレビューのまま書き換えることができます。スライドすればカーソル移動。二本指でスライドした場合は範囲選択に切り替わります。キーボードを閉じるとカードモードに戻ります。


Sortable.js

Sortable/README.md at master · RubaXa/Sortable · GitHub
Sortable is a minimalist JavaScript library for reorderable drag-and-drop lists.Demo: http://rubaxa....

こちらのスクリプトをお借りしてドラッグ&ドロップを実装しています。JQueryを用いず、タッチパネルに対応している。T.request()で読み込めば指先1つでアイテムを移動できる優れものです。オプションを研究すると、さらに強力な使い方が出来そう。


まとめ

このタイプのアクションはBlogViewやReBlockなど、以前からいろいろな角度で参究してきました。今回はそれらをシンプルな形に収めています。HTMLプレビューでありながらWYSIWYG編集ができ、なおかつ行単位の操作に対応している。機能的には不足が目立つものの、理想のカタチに近い。この方向で進化していくと良いな。

  • Textwellに「プレビュー・エディタ ReCard」というジャンルを作ったかも