Hatena::ブログ(Diary)

W&R : Jazzと読書の日々 このページをアンテナに追加 RSSフィード

2017/11/19

【Textwell】MarkdownプレビューのReViewで「ことば」が宝石に変わる

「やりすぎ」と言うほかない。


ReView

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

カーソル行をGoogle検索してリンクを取得します。空行ではMarkdownプレビューになる。モブログに必須な機能をまとめたアクションですが、一連のSortableブームに乗ってドラッグ&ドロップも実装してみました。つまり、プレビューのまま段落編集ができます。

Import Textwell ActionReView


ドラッグ&ドロップ対応

空行で実行するとプレビュー表示。[Save]でHTMLに変換します。このMarkdownプレビューでですね、ドラッグ&ドロップできるようになりました。段落や画像を長押しして移動。ダブルタップで内容編集ができます。ここまで来ると訳わかんないですよね。

内容編集ではスライドカーソルが使えます。画面を左右に撫でるとカーソルが移動します。二本指で撫でると範囲指定。三本指だとUndo/Redoになります。これまたやりすぎ。どこも「プレビュー」じゃないやんか、と独りツッコミを入れてます。

変更のキャンセルは「閉じる」を選んでください。またフォントサイズが大きく感じる場合は変数STYLE内のbody{}にあるfont-size:を変更します。mediumをx-smallやsmallに換えてください。直接 16px のようにピクセル指定するのでも構いません。

  • TextwellのMarkdownアクションReViewにmarked.jsが戻ってきた

  • ブログカードの作成

    カーソル行に文字があるときはGoogleで検索し、URLアドレスのときは直接開きます。メニューの[Blog]でブログカードに変換。今まで通りですけど、Twitterで仕様が変わったらしくカード化できずにいました。気づくのが遅れてすみません。

    ブログカードは、YouTubeとTwitter、ニコニコ動画、Gyazoでそれぞれに合わせたリンクを作成します。YouTubeは動画プレーヤーで、Gyazoは画像表示になります。通常のサイトでは、はてなブログのブログカードを作ります。カスタマイズも可能です。

    [Save]は通常のリンク作成ですが、文字選択するとblockquoteでの引用になります。Wikipediaではこちらを活用していただければ幸いです。


    まとめ

    自分で作っておいてなんですが、ここまで必要だろうか? 初めはエディタモード追加のつもりで深く考えてなかったです。でもReCardのソースを流用するときドラッグまでコピーしてしまった。走らせたら面白かった。ので埋め込んだ。これは季節の変わり目ですね。

    外部スクリプトを二重に読み込むので、回線が悪いとドラッグが効かなくなります。アクションを再起動すれば大丈夫なのでキャッシュが効くのでしょうか。

    2017/11/11

    Textwellにコルクボードを付けたら可読性が数段上がりました CorkBoard

    「コルクボード」とは情報カードが並ぶスペースのこと。Scrivenerが実装している、憧れの機能です。全体を俯瞰できる。見渡せる。長い論文を書く場合も、手短にエッセイをまとめるときも、このツールを使えば構成を見失わずに済みます。

    便利だよなあ。Textwellでも使えたら良いなあ。そう思って今日はポッキーの日。


    CorkBoard

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

    ReCardでドラッグ&ドロップを覚えたのが大きかったのでしょうね。はたと閃いた。WorkFlowyで「カード形式」と呼んだアレを視覚化してはどうだろうか、と。モックアップを組んでみる。すると「ああ、これが<カード>なのか」と腑に落ちるところがあった。

    この形式の汎用性は高く、いろんな場面に潜んでいます。今まで気づかず過ぎていた。取り出すと「テクスト」の別の顔を発見できる。そんなツールがあれば愉快じゃないだろうか。

    Import Textwell ActionCorkBoard

    修正: 23:00 書き換えの範囲指定を間違えてました。すみません。

    修正: 11/13 iPhone5や6/7Plusの画面サイズにも対応。


    ドラッグ機能

    空行に挟まれた段落をカードとして扱います。段落の一行目をタイトルと見なし、段落の先頭部分を表示する。コルクボードに付箋メモがペタペタ貼ってあるイメージ。

    カードを入れ替えれば、新しい配列になります。それがこのアクションの機能。今までカット&ペーストで対処した作業を請け負います。短編小説くらいならiPhoneでも簡単。


    目次機能

    カードは目次にもなります。タップすると、そのカードの先頭までカーソルを移動しTextwellの画面に戻ります。章立てされていれば、全体の流れも読み取りやすいでしょう。

    スクリプトを読むのにも使える。ソースはブロック化しやすい。それで、意識しながら空行を挟むようになり、すると更にソースの可読性が増す。こういうのが「構造化」かな。


    まとめ

    結局、将来の自分を信用してないのだと思う。きっとソースを誤読するだろう。論文の文脈を読み間違うだろう。そして、そのほうが今の自分よりも数段面白いだろう。だから、用意した素材を切った貼ったしてほしい。コルクボードは俎板。包丁はそのときの感性で。

    そんな感じのツールになりました。

    2017/11/08

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

    エディタの中にエディタがある。それはこれまでとは異なるジャンルで、そのあるべき姿はまだ見えない。なぜ現れたのだろう。これをどう使えというのか。


    ReCardの真価

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

    前回作ったプレビュー・アクションですが、全然プレビューに使っていません。「見たままエディタ」として活用しています。ダブルタップで編集、キーボードを閉じればドラッグ。Textwellではリーチの足りないところをカバーする孫の手のようなアクションです。

    Import Textwell ActionReCard


    段落編集

    基本は行単位の編集ですが、段落単位も欲しくなって追加。空行でアクションを起動すると段落をカード化します。空行から空行までを1つのカードとして扱う。見出しと内容がセットになって移動する。このほうがブログの推敲に向いてそうです。


    画面構成の変更

    前回はカードごとに区切り線を入れていました。でも見づらいので廃止します。画面上は普通のHTMLプレビューになります。テクストだけならエディタ画面と変わらない。スライドカーソルも効く。カード化したことを忘れます。そんなさり気ない構成にしました。


    ドラッグ範囲の明示

    長押ししたとき、どの範囲が移動対象か不明瞭でした。そこで配色を変えてドラッグ範囲をヴィヴィッド化。デフォルトは黒地にライム色の、少しどぎつめ。これなら見落とさない。慣れてきたらソース内のstyleでいい色合いを探してください。


    まとめ

    作ったときは考えなかったのですが、使うにつれ、この合理に気づかされる。ReCardを使うと、リストやテーブルの編集がわかりやすくなります。HTMLタグは人が読む書式ではありません。それでMarkdownを取り入れ、可読性を上げていた。でもHTML変換してしまうと、また読みづらくなり、そこからの推敲が止まってしまいます。

    この壁を乗り越えるのに、ReCard、なかなか良い仕事をするんじゃないだろうか。


    追記:フォントサイズの変更について

    画面のフォントサイズは、ソースのstyle内にあるbody{}で指定しています。デフォルトは font-size:medium; ですが、もちろんmediumをsmallやlargeに変更することもできます。x-smallやxx-smallも有効ですし、直接 12px のようにピクセル指定することもできます。