*

[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のテキスト入力に関するキー操作の基本(3) カーソル移動

WorkFlowyは、テキストを階層構造で管理するシステムです。テキストをトピックに格納し、トピック

記事を読む

no image

【連載】WorkFlowyのテキスト入力に関するキー操作の基本(1) Enterキーの挙動

WorkFlowyは、テキストを階層構造で管理するシステムです。テキストをトピックに格納し、トピック

記事を読む

no image

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

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

記事を読む

no image

WorkFlowyの共有機能を理解するための3つの軸、価値を引き出すためのマトリクス

1.WorkFlowyの共有機能を理解するための3つの軸 WorkFlowyには、共有機能があります

記事を読む

no image

WorkFlowyの文字数を数えるブックマークレット「WorkFlowy_WordCount」

1.WorkFlowyをまた少し「文章エディタ」へと育てる「WorkFlowy_WordCount」

記事を読む

no image

「コンテナ」と「トピック」〜WorkFlowyの中に知的生産のフローを流すシステム〜

1.[はじめに]知的生産のフローと『コンテナ物語』をつなぐもの 次の2つの記事を書きました。 知的

記事を読む

no image

WorkFlowyをプレゼンツールとして使うことのメリット

1.WorkFlowyをプレゼンツールとして使う 仕事などで、プレゼンの機会をいただくことがあります

記事を読む

no image

WorkFlowyのトピック移動機能とは何で、どのような役割を果たすのか?

1.「ただひとつの巨大で流動的なリスト」を実現するWorkFlowyのトピック移動機能 (1) 「た

記事を読む

no image

知的生産のフローとWorkFlowy

1.知的生産のフロー (1) 『知的生産の技術』と、知的生産のフロー 『知的生産の技術』は、知的

記事を読む

no image

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

Tak.さんのTweetに触発されて。 WorkFlowyやOmniOutlinerなどのプロセス型

記事を読む

スポンサードリンク

スポンサードリンク

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 ↑