*

最強のブログ原稿創造システム「WorkFlowy×ハサミスクリプト」に、画像機能を追加する方法

公開日: : WorkFlowy

目次

1.「単純作業に心を込めて」のブログエントリに画像が増えた理由

ここ最近、「単純作業に心を込めて」のブログエントリは、ちょっと変わりました。

これまでは、こんな感じでした。

画像なしのブログ画面

ここ最近は、こんな感じになりました。

画像ありのブログ画面

つまり、画像が増えました。

これまで私は、ブログエントリを作るときに、画像をあまり使っていませんでした。「文章だけで説明する練習をするため」という気持ちもなくはありませんでしたが(参考:メロンパンナちゃんの描き方)、それよりもずっとずっと大きかったのは、「めんどうだったから」です。画像を入れるための手間暇をかけるくらいなら、それよりも文章を書くことに時間とエネルギーを使いたい、と感じていました。

そんなわけで、たとえば「クラウドアウトライナーWorkFlowyの説明」のような、クラウドサービスの取扱説明書のようなエントリですら、これまでの私は、画像を使っていませんでした。

ところが、ここ最近のエントリでは、画像が増えました。読書ノートやマンダラートの実例を説明するエントリなので画像があった方がいい、という理由もありますが、それよりも大きな理由があります。

それは、私が愛用しているブログ原稿創造システムである「WorkFlowy×ハサミスクリプト」に、画像機能が追加されたからです。

このエントリでは、「WorkFlowy×ハサミスクリプト」に画像機能を追加する方法を解説します。もちろん、画像機能を使って、です。

2.私史上最強のブログ原稿創造システム「WorkFlowy×ハサミスクリプト」に画像機能を追加する

(1) 私史上最強のブログ原稿創造システム「WorkFlowy×ハサミスクリプト」

今、私は、WorkFlowyでブログ原稿を書いています。これができるのは、マロ。さん作成の「ハサミスクリプト」のおかげです。

マロ。さん作成の「ハサミスクリプト」のおかげで、WorkFlowyで文章を書き上げれば、それをすぐにブログで公開できるようになりました。「WorkFlowy×ハサミスクリプト」は、私史上最強のブログ原稿を創り出すシステムです。

(2) [Thumbnail Zoom Plus]または[Picture Zoom Plus]で、画像機能を追加する

とはいえ、WorkFlowyは、テキストデータしか扱えません。(公式Helpの「What features are coming up for WorkFlowy? 」に「 Image attachments 」と書いてあるので、そのうち画像を扱えるようになる可能性はあると思うのですが、少なくとも現段階では、)WorkFlowyで画像を扱うことはできません。

そのため、画像入りのブログエントリを書くためには、「WorkFlowy×ハサミスクリプト」で原稿を書いた後で、ブログエディタなどの別アプリケーションで、画像の配置やタグの調整など、いくつかの作業をしなければいけませんでした。

ところが、今から約1週間前の2015年3月18日、WorkFlowyについての有益な情報を提供し続けているあきさんのブログに、こんなエントリが公開されました。

Firefoxアドオン『Picture Zoom Plus』でWorkFlowyに画像を! – mmkns

ポイントは、以下のとおりです。

  • 『Picture Zoom Plus(+)』とは?
    • Firefoxアドオンのひとつ
    • 画像や画像のURLにカーソルをあわせると、拡大画像をポップアップ表示できる
  • WorkFlowyと組み合わせると、何に使えるのか?
    • WorkFlowyで画像が扱いやすくなる
    • 項目やノート内に画像のURLを置くことによって、画像を閲覧できるようになる
      • カーソルを画像のURLに合わせると、画像がポップアップ表示されるから
    • この機能は、たとえば、画像を多用するブログ記事を書くときに役立つ。
    • URLだけだと「この画像はどこに挿入するやつだっけ?」と混乱したりするので、手軽にプレビューを見られるこのアドオンがあると便利。

Twitterでこれを知った私は、狂喜しました。

早速やりました。

ただ、私の環境では、なぜだか[Picture Zoom Plus]がうまく動きませんでした。そこで、似たようなアドオンである[Thumbnail Zoom Plus]を使いました。

Thumbnail Zoom Plus

この結果、私史上最強のブログ原稿創造システムである「WorkFlowy×ハサミスクリプト」に、画像機能が追加され、ますます最強になりました。

(3) 何ができるか? どう役に立つか?

[Thumbnail Zoom Plus]または[Picture Zoom Plus]で、何ができるのでしょうか。また、どう役に立つのでしょうか。

基本的には、全部あきさんのブログ記事に書いてありますので繰り返しなのですが、こんな感じです。

a.何ができるのか?

WorkFlowyに画像のURLを書いておけば、WorkFlowyの画面上で、画像を確認できる。

たとえば、このスクリーンショットの真ん中辺りにあるURLは、ウェブ上にアップロードした画像のURLです。このURLにカーソルを合わせてみます。

画像リンクにカーソルを合わせると

すると、こんな感じで、画像がぬぬっと出てきます。

画像のURLにカーソルを合わせると、ぬぬっと、拡大された画像が出てくる。WorkFlowyの画面上で。

ブラウザで開いたWorkFlowyタブから移動することなく、画像を確認できます。

b.どう役に立つのか?

WorkFlowyで画像入りのブログ原稿を書くときに、とても役立ちます。ほんとうに役立ちます。

なぜなら、画像の配置に、WorkFlowyのトピック移動機能を使えるからです。WorkFlowyの強みのひとつは、キーボードショートカットでトピックを移動するのがとても簡単なところです。この機能は、文章の並び替えや構成に大きな力を発揮するのですが、画像機能が追加されると、このWorkFlowyの強みが、画像の配置に、そのまま発揮されます。

ブログ原稿の中に画像を配置する作業が、とても捗ります。

また、画像の配置までWorkFlowy上でできるので、ブログ原稿執筆作業のほぼ最終段階までを、全部、WorkFlowyの上で済ますことができます。WorkFlowyとブログ公開の間にある作業は、ハサミスクリプトによる書き出しと、ブログエディタやWordPress投稿画面による投稿作業だけです。

これにどんな意味があるかといえば、投稿済みエントリの修正や加筆にもWorkFlowyを使える、ということです。このフローでブログエントリを公開すると、いったん投稿したブログを柔軟に編集する道がひらけます。このことは、ブログエントリというアウトプットの位置づけを、ちょっと変える可能性を持っています。

参考:ノート、Evernote、ブログ、そして……

3.画像機能付き「WorkFlowy×ハサミスクリプト」の使い方(概要)

画像機能がついたことによって、「WorkFlowy×ハサミスクリプト」でブログ原稿を書く手順は、こんな感じになりました。(Macでの手順ですが、Windowsでも、だいたい同じです。)

  • (1) Evernoteのひとつのノートに、画像を集める
  • (2) MarsEditで、画像だけを先にまとめてアップロードし、画像タグを取得する
  • (3) 画像タグを、WorkFlowyに貼り付ける
  • (4) 画像を確認しながら、WorkFlowyで原稿を執筆する
  • (5) WorkFlowyからハサミスクリプトでHTMLを切り取り、MarsEditでアップロードして公開する

(1) Evernoteのひとつのノートに、画像を集める

ひとつのエントリに使う画像を、ひとつのEvernoteノートにまとめます。

私がこのブログで使う画像のほとんどはスクリーンショットなので、

  • control+shift+⌘+4で選択箇所をクリップボードにコピーする
  • Evernoteのノートに貼り付ける

という操作をします。

(2) MarsEditで、画像だけを先にまとめてアップロードし、画像タグを取得する

次に、EvernoteのノートからMarsEditに貼り付け、画像だけをアップロードして、HTMLの画像タグを取得します。手順は、以下のとおりです。

a.MarsEditで「New Post」作成

最初に、MarsEditで「New Post」を作成します。

b.EvernoteのノートとMarsEditの新しいポストのエディタを並べる

次に、MarsEditの新しいポストのエディタと、Evernoteの画像を集めたノートを、同じ画面に2つ並べます。

Evernoteのノートと、MarsEditのエディタ画面を、並べて表示する

c.EvernoteからMarsEditへ、画像をドラッグ&ドロップ

そして、Evernoteのノートから、MarsEditの新しいポストのエディタへ、画像をドラッグ&ドロップします。

d.画像のファイル名とAltを入力する

MarsEditにドロップすると、「Upload Utility」というボックスが出てきます。

先に画像をアップロードする。Altなど。

このボックスに、画像のファイル名とAltを入力します。

e.Upload now

ファイル名とAltを入力したら、「Upload Now」をクリックして、画像をアップロードします。

「Upload Now」で、とりあえずアップロードしておく

画像のアップロードが完了すると、MarsEditのエディタ部分に、こんな感じで、HTMLの画像タグが追加されています。

先に全部の画像をアップロードしておくと、こんな感じで、タグを取得できる

これで、HTML画像タグを取得することができました。

(3) 画像タグを、WorkFlowyに貼り付ける

次は、取得したHTML画像タグを、WorkFlowyに貼り付けます。

取得した画像タグのリストが出来上がる。

ひとつのブログエントリに使う画像タグを全部コピーして、WorkFlowyの原稿トピックに貼り付けます。

マンダラ「個人のための知的生産システムを構成するウェブサービスの画像一覧をWorkFlowyで

こんな感じです。

(4) 画像を確認しながら、WorkFlowyで原稿を執筆する

あとは、いつもと同じように、WorkFlowyでブログ原稿を執筆します。

画像タグのトピックは、中身はいじらず、移動のみにしておきます。(ほんとうは、Altはいじっても大丈夫なのですが、私は、念のため、いじらないことにしています。)

画像タグトピックを移動するときは、リンクにカーソルを合わせて、画像の中身を確認することもできます。

画像表示の例。WorkFlowyで画像確認ができる。

また、同じ画像を複数箇所で使うなら、画像タグトピックをコピーして、該当の場所に貼り付けるだけです。

(5) WorkFlowyからハサミスクリプトでHTMLを切り取り、MarsEditでアップロードして公開する

こんな感じでWorkFlowyでブログ原稿を書き上げます。

ハサミスクリプトで切り取ってMarsEditに貼り付けます。

すると、画像まで全部きちんと配置されています。当たり前ですが、WorkFlowy上で配置した場所に、思い通りに配置することができています。

4.おわりに

画像機能が追加されたことによって、「WorkFlowy×ハサミスクリプト」は、ますます強力なブログ原稿創造システムに育ちました。

今回のことに関連して、2つのことを感じます。

(1) 作品とツールの関係

ひとつは、作品とツールの関係です。

今回、画像機能が追加されたことによって、私が公開する暫定的な作品群としてのブログエントリに含まれる画像の数は、突然、増えました。けっこう増えました。

ここから、「作品を生み出す使うツールによって、生み出される作品の中身が大きな影響を受ける」ということを痛感しました。

また、逆に、「自分が生み出したい作品を生み出しやすいツールを使うことが大切なんじゃないか」ということを感じました。

知的生産にとって、知的生産の治具が果たす役割の大きさを実感した、ともいえます。

今後は、自分が生み出したい作品から逆算して、どんなツールがあるといいんだろうか、という観点を、いままで以上に、意識したいと思います。

(2) WorkFlowy専用機としての「WorkFlowy専用Firefox」強化の可能性

もうひとつは、「Firefoxアドオンすごいな」という興奮です。

「WorkFlowy専用Firefox」を、アドオン「Easy Copy」で強化することについて書いたとき、私は、「「WorkFlowy専用Firefox」は専用機だ」と書きました。

「WorkFlowy専用Firefox」は、この優秀な汎用機であるFirefoxを、WorkFlowyだけのために使います。WorkFlowy専用なので、いわば専用機です。しかし、本来汎用機であるFirefoxを専用機として使うのは、もったいないことではありません。Firefoxに蓄積されたノウハウやアドオンを、専用機の機能をカスタマイズすることに特化して使うことができるからです。

「WorkFlowy専用Firefox」を、アドオン「Easy Copy」で強化する

Firefoxに蓄積したアドオンやノウハウは、本当に豊富です。ひとつめの点ともからむのですが、自分が生み出したい作品から逆算した理想のツールを思い描いたとして、それを助けてくれるアドオンは、かなり豊富に存在しているのかもしれません。

これからも、「WorkFlowy専用Firefox」を育てることによって、ブログ原稿創造システムを育てていこうと思います。

【関連】

(1) WorkFlowyでブログ原稿を書く、ということ

WorkFlowyで「ずっと完成しないで変化し続ける有機体」を育てる

WorkFlowyと自分のブログによる知的生産システムと、ハサミスクリプト「WFtoHTML_irodrawEdition」が果たす役割

WorkFlowyによる「ブログ原稿を育てる畑」から、見出しタグで構造化されたHTMLを収穫するための、知的生産の治具(Mac・AppleScript)

(2) マロ。さんによる、WorkFlowyをブログ原稿創造システムとして使うことを支援する、各種知的生産の治具

ブックマークレット

html

WorkFlowyのexportをブログ用のタグに変換するbookmarklet|マロ。|note

WorkFlowyのexportをブログ用のタグに変換するbookmarklet(引用を使う人向け)|マロ。|note

マークダウン記法

WorkFlowyのexportをブログ用のMarkdownに変換するbookmarklet(noteを使わない人向け)|マロ。|note

WorkFlowyのexportをブログ用のMarkdownに変換するbookmarklet|マロ。|note

はてな記法

WorkFlowyのexportをはてな記法に変換するbookmarklet|マロ。|note

iPhone用

WorkflowyからiPhoneでtumblrに投稿するbookmarklet|マロ。|note

AppleScript

Workflowyで選択したアウトラインにhタグを付けて書き出すAppleScript|マロ。|note

WF2HTMLのirodrawさん専用バージョンWFtoHTML irodrawEdithion|マロ。|note

(3) WorkFlowyとは

【WorkFlowyまとめ】WorkFlowyを育てる

スポンサードリンク

関連記事

no image

WorkFlowy抜き書き読書ノート

1.なぜ、抜き書き読書ノートにWorkFlowyを使うのか? (1) 抜き書き読書ノートの意義

記事を読む

no image

データベースとリスト(ひとつの秩序でいろんな役割を果たすための、WorkFlowyの発想)

1.データベースのようなデジタルツール (1) Toodledoはデータベース 現在、私は、自分のタ

記事を読む

no image

ウェブ上に存在するWorkFlowyに関する日本語情報の時系列整理(〜2014年12月)

1.はじめに 2015年1月にWorkFlowyを使い始めたとき、ウェブ上に存在するWorkFlow

記事を読む

no image

「WorkFlowy専用Firefox」に追加しているアドオンとその役割の整理(2015/08段階)

1.はじめに この記事では、現時点で、私が「WorkFlowy専用Firefox」に追加しているア

記事を読む

no image

WorkFlowyに書き込んだ内容を自動的にEvernoteに蓄積し続ける仕組み(差分メール転送とRSS&IFTTT)

1.フローのWorkFlowy、ストック&アーカイブのEvernote たとえばブログなどに

記事を読む

no image

WorkFlowyのExportの基本(テキストファイル、Word、Evernote、Gmail)

1.WorkFlowyを他のツールへと「開く」Export機能 WorkFlowyを他のツールへと「

記事を読む

no image

MacのキーボードショートカットでWorkFlowyのトピックを自由に操り、WorkFlowyをテキスト管理システムとしてうまく機能させるための、MacOS基本設定

1.問題:Macのキーボードから、WorkFlowyのキーボードショートカットを自由に操るには、どう

記事を読む

no image

なぜ、WorkFlowyという道具は、「やりたい」のつまみ食いの集積を完成文書へ統合することを可能にするのか?

1.はじめに 昨日、これを書きました。 そのときどきの「やりたい」のつまみ食いを、文書の完成へと統

記事を読む

no image

WorkFlowy検索の基本と応用

1.WorkFlowyの検索機能 WorkFlowyは、検索機能を持っています。 検索機能は、アナロ

記事を読む

no image

WorkFlowyのトピック折りたたみ機能とは何で、どんな役割を果たすのか?

1.巨大なリストの認識を助ける、WorkFlowyのトピック折りたたみ機能 WorkFlowyは、テ

記事を読む

スポンサードリンク

スポンサードリンク

no image
お待たせしました! オフライン対応&起動高速化のHandyFlowy Ver.1.5(iOS)

お待たせしました! なんと、ついに、できちゃいました。オフライン対応&

no image
「ハサミスクリプト for MarsEdit irodrawEdition」をキーボードから使うための導入準備(Mac)

諸事情により、Macの環境を再度設定しています。 ブログ関係の最重要は

no image
AI・BI・PI・BC

AI 『〈インターネット〉の次に来るもの 未来を決める12の法則』を読

no image
[『サピエンス全史』を起点に考える]「それは、サピエンス全体に存在する協力を増やすか?」という評価基準

1.「社会派」に対する私の不信感 (1) 「実存派」と「社会派」 哲学

no image
[『サピエンス全史』を起点に考える]サピエンス全体に存在する協力の量と質は、どのように増えていくのか?

『サピエンス全史』は、大勢で柔軟に協力することがサピエンスの強みだと指

→もっと見る

  • irodraw
    彩郎 @irodraw 
    子育てに没頭中のサラリーマンです。1980年代生まれ、愛知県在住。 好きなことは、子育て、読書、ブログ、家事、デジタルツールいじり。
    このブログは、毎日の暮らしに彩りを加えるために、どんな知恵や情報やデジタルツールがどのように役に立つのか、私が、いろいろと試行錯誤した過程と結果を、形にして発信して蓄積する場です。
    連絡先:irodrawあっとまーくtjsg-kokoro.com

    feedlyへの登録はこちら
    follow us in feedly

    RSSはこちら

    Google+ページ

    Facebookページ

PAGE TOP ↑