*

[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

MemoFlowy ver.1.2のまとめと、HandyFlowyとMemoFlowyの相乗効果

1.MemoFlowy ver.1.2のまとめ MemoFlowy ver.1.2の内容を連載形式で

記事を読む

no image

[具体例]本からの引用を格納した「トピック」は、WorkFlowyの中を、どのように流れていくのか?

1.テキスト情報を格納した「トピック」が、WorkFlowyの中を流れる (1) 「トピック」とい

記事を読む

no image

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

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

記事を読む

no image

「WorkFlowyで本を書いた人からの手紙」

1.はじめに こんにちは。少しずつ暖かくなってきましたが、いかがお過ごしでしょうか。 先日さし上げた

記事を読む

no image

WorkFlowyについて語るときに僕の語ること

走ることについて正直に書くことは、僕という人間について(ある程度)正直に書くことでもあった。途中から

記事を読む

no image

WorkFlowyでプロジェクトを進める

1.はじめに 最近、WorkFlowyをタスク管理に使えないだろうか、と試行錯誤しています。Tood

記事を読む

no image

ウェブ上に存在するWorkFlowyに関する日本語情報を時系列で淡々と整理する(2015年1月〜3月)

先日から、ウェブ上に存在するWorkFlowyに関する日本語情報の整理を試みています。 201

記事を読む

no image

【WorkFlowy問題集】(1)『クラウド時代の思考ツールWorkFlowy入門』の目次に沿った同書の元記事リストを、公開日基準時系列に並べ替える(検索とトピック移動)

問題 次の【元記事リスト(目次構造)】は、『クラウド時代の思考ツールWorkFlowy入門』のベース

記事を読む

no image

「三色ボールペンWorkFlowy」を、何に使うか?

1.「三色ボールペンWorkFlowy」は、初めて出会えた「デジタル三色ボールペン」 (1) 「三

記事を読む

no image

知的生産のフローとWorkFlowy

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

記事を読む

スポンサードリンク

スポンサードリンク

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 ↑