*

[HandyFlowy機能拡張スクリプトの基礎知識]ウェブ上で公開されているWorkFlowy向けのブックマークレットをHandyFlowy機能拡張スクリプトとして登録する手順

公開日: : 最終更新日:2016/05/09 WorkFlowy

HandyFlowyは、機能拡張スクリプトという機能を持っています。

機能拡張スクリプト – HandyFlowyユーザーTips

機能拡張スクリプトは、とても便利で強力な機能です。機能拡張スクリプトを駆使すれば、HandyFlowyを自分の好きなようにカスタマイズできるようになります。

しかし、機能拡張スクリプトを自分で作るには、JavaScriptでコードを書く必要があるので、難しいと感じる方も多いと思います。といいますか、HandyFlowy開発チームの一員である私自身、自分で機能拡張スクリプトを作ることができず、それもあって、多少のハードルを感じています。

そこで、(私自身が感じているハードルを解消するためにも、)[HandyFlowy機能拡張スクリプトの基礎知識]と題して、HandyFlowyの機能拡張スクリプトについてのごく基本的なところを、少しずつ整理していきます。

今回は、「ウェブ上で公開されているWorkFlowy向けのブックマークレットをHandyFlowy機能拡張スクリプトとして登録する手順」です。

1.WorkFlowy向けブックマークレットとHandyFlowy機能拡張スクリプトの関係

ブックマークレットをご存知でしょうか。ブラウザのブックマークに登録して使うプログラムで、JavaScriptというものでできています。

世の中の多くのウェブサービスには、そのウェブサービスに機能を追加するためのブックマークレットが、たくさん生み出されています。WorkFlowyも、例外ではありません。

トピック数や文字数を数えるブックマークレット。WorkFlowyからのexportを拡張するブックマークレット。CSSを書き換えて見た目を変えるブックマークレット。

これらのブックマークレットを使えば、WorkFlowyに、もともとWorkFlowy自体が持っていない機能を追加することができます。

ところで、HandyFlowy機能拡張スクリプトは、JavaScriptでできています。ブックマークレットと同じです。

そのため、WorkFlowyのために生み出されたブックマークレットのほとんどは、HandyFlowy機能拡張スクリプトとして活用することができます。

ただ、このためには、多少の作業が必要です。この記事では、これを確認します。

(これより簡単な手順があるかもしれませんし、何らかのツールを作ればもっと簡単になるのかもしれません。ただ、この手順でも、ちゃんとできます。)

2.ウェブ上で公開されているWorkFlowy向けのブックマークレットを、一旦JavaScriptにデコードして、ScriptMakerで機能拡張スクリプトとして登録する手順

次の3ステップです。

  • (1) ウェブ上で公開されているブックマークレットのコードを取得する
  • (2) JavaScriptへURLデコードする
  • (3) ScriptMakerでHandyFlowy機能拡張スクリプトとして登録する

(1) ウェブ上に公開されているWorkFlowy対応のブックマークレットのコードを取得する

最初の手順は、ウェブ上に公開されているWorkFlowy対応のブックマークレットを取得することです。

ウェブ上には、WorkFlowy対応のブックマークレットが、たくさん公開されています。

たとえば、マロ。さんは、WorkFlowyに機能を追加したり、WorkFlowyを他のツールにつなげるためのブックマークレットを、多数、公開しています。

マロ。 (maro_draft)|note

私が常用しているのは、

などです。

また、rawbytzさんという、WorkFlowyに関連するツールをたくさん開発されている方がいますが、彼は、ブックマークレットも公開しています。

rawbytz

これらブックマークレットのコードをテキストデータとして取得することが、ひとつめの手順です。

実例として、rawbytzさんのWFcountを使います。

WFcountは、WorkFlowyのトピック数などを数えることができるブックマークレットです。これをHandyFlowyに登録してみましょう。

Count Stuff in WorkFlowy | rawbytz

まず、WFcountのブログ記事から、WFcountブックマークレットのコードを、ペーストボートにコピーします。

rawbytzのブログ記事

(2) JavaScriptの形式へURLデコードする

次の手順は、URLデコードです。

ブックマークレットは、もともとのJavaScriptのコードを、ブックマークレットとして使えるよう、一定のルールに従って、文字コードを置き換えています。これをURLエンコードといいます。

そこで、ブックマークレットをHandyFlowy機能拡張スクリプトにするには、URLエンコードを元に戻す必要があります。これを、URLデコードといいます。

URLデコードには、次のページが便利です。

UrlEncode.net URLエンコード

URLエンコードのウェブサイト

この「URLエンコード」は、iPhoneからでも使えます。(レイアウトなどはスマートフォン向けではありませんが、使えます。)

左側の入力欄上のタブで「デコード」を選択して、左側入力欄にブックマークレットのコードをペーストし、

URLエンコード、左側欄

真ん中の「デコード」ボタンを押せば、右側に、URLデコードされたコードが出力されます。

URLエンコードのサイト

出力されたURLデコード結果をコピーすれば、2番めの手順が完了です。

(3) ScriptMakerでHandyFlowy機能拡張スクリプトとして登録する

最後の手順は、「ScriptMaker」という機能拡張スクリプトによって、HandyFlowyに登録することです。

JavaScriptをHandyFlowy機能拡張スクリプトとして登録するには、「ScriptMaker」という機能拡張スクリプトが便利です。「ScriptMaker」は、HandyFlowy機能拡張スクリプトを登録するためのHandyFlowy機能拡張スクリプトです。

ScriptMaker – WorkFlowy

「ScriptMaker」を使えば、簡単に、JavaScriptを機能拡張スクリプトとして登録できます。

まず、WorkFlowyの中にひとつトピックを作り、トピック本文に登録する機能拡張スクリプトのタイトルを入力し、トピックのnoteにURLデコードしたJavaScriptのコードをペーストします。

ScriptMakerでトピックを作る

そして、そのトピックにZoomした状態で、「ScriptMaker」を実行します。

Scriptmakerを実行する

すると、機能拡張スクリプトを登録するかを確認するダイアログが出ます。

登録確認ダイアログ

ここで「登録」を選べば、JavaScriptをHandyFlowyの機能拡張スクリプトとして登録することができます。

これで、「WFcount」をHandyFlowyに登録できました。

「WFcount」を実行すれば、Zoom対象リストに存在するトピック数など数えることができます。

WFcountを実行したところ

■補足(「document.open()」について)

JavaScriptの「document.open()」は、HandyFlowyでは使えません(セキュリティなどの事情により)。

そのため、URLデコード後、(3)のプロセスなどで、「document.open()」がないか、検索によって確認しておくとよいかと思います。

「document.open()」以外は、たいてい動くはずです。

3.先人の蓄積、全部活かせます!

以上が、ウェブ上に公開されているWorkFlowy用のブックマークレットを、HandyFlowy機能拡張スクリプトとして登録する手順です。

  • (1) ウェブ上で公開されているブックマークレットのコードを取得する
  • (2) JavaScriptへURLデコードする(「UrlEncode.net URLエンコード」が便利。)
  • (3) ScriptMakerでHandyFlowy機能拡張スクリプトとして登録する(ScriptMaker – WorkFlowy

これと同じ手順で、WorkFlowyのためのブックマークレットの大部分を、HandyFlowyに取り込むことができます。(実際、HandyFlowyのデフォルト機能拡張スクリプトとして登録されている「三色ボールペン」「WordCount2」は、いすれも、HandyFlowyが生まれる前から存在していたWorkFlowy用ブックマークレットをベースにしています。)

WorkFlowyには、多くの方の手によって生み出された、たくさんのブックマークレットが存在しています。HandyFlowy機能拡張スクリプトは、これら先人による蓄積を、すべて活かすことを可能にする機能でもあるのです。

スポンサードリンク

関連記事

no image

WorkFlowyに存在する秩序は、順番と深さからなる二次元の階層構造ただひとつ(「ただひとつ」というWorkFlowyの思想その3)

1.WorkFlowyの「ただひとつ」という思想 WorkFlowyは、思想を持ったツールです。これ

記事を読む

no image

磯野家の家系図版「WorkFlowy用語の基礎知識」(2)トピック群を特定したり表現したりするための用語

1.はじめに 「私家版WorkFlowy用語の基礎知識(β版)」を、スクリーンショットや具体例を用い

記事を読む

no image

『クラウド時代の思考ツールWorkFlowy入門』の詳細目次と元記事の紹介

『クラウド時代の思考ツールWorkFlowy入門』は、このブログのWorkFlowy記事全体の中から

記事を読む

no image

磯野家の家系図版「WorkFlowy用語の基礎知識」(3)アウトライン・リスト・トピックの操作に関する用語

1.はじめに 「私家版WorkFlowy用語の基礎知識(β版)」を、スクリーンショットや具体例を用い

記事を読む

no image

【ご報告とお礼】WorkFlowyで、WorkFlowyの本(の原稿)を書きました。

いつも「単純作業に心を込めて」をお読みいただき、ありがとうございます。おかげさまで、毎日楽しく好きな

記事を読む

no image

『知的生産の技術』のカード・システムと、WorkFlowy

前回は、シゴタノ!の倉下忠憲さんの記事を下敷きにして、『知的生産の技術』の各章を、WorkFlowy

記事を読む

no image

ブラウザのブックマークによって、WorkFlowyに、2ペイン方式のちょっといいところを取り込む(試案・私案)

1.WorkFlowyに、2ペイン方式のちょっといいところを取り込むには? (1) 1ペインアウト

記事を読む

no image

WorkFlowyのトピック折りたたみ機能の基本

1.WorkFlowyのトピック折りたたみ機能とは? WorkFlowyは、テキストを階層構造で管理

記事を読む

no image

2016年2月段階でWorkFlowyに期待している3つの機能追加

2016年2月現在、私は、現状のWorkFlowyに、おおむね満足しています。 ただ、これ以上改善の

記事を読む

no image

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

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

記事を読む

スポンサードリンク

スポンサードリンク

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

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

no image
AI・BI・PI・BC

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

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

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

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

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

no image
WorkFlowyを「書き上げる」ための道具として機能させるための、2つの条件・3つのイメージ

Tak.さんのTweetに触発されて。 WorkFlowyやOmniO

→もっと見る

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

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

    RSSはこちら

    Google+ページ

    Facebookページ

PAGE TOP ↑