*

[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」の2015年

このブログ「単純作業に心を込めて」にとって、2015年がどんな1年だったかといえば、そりゃまあもちろ

記事を読む

no image

「WorkFlowyのURL」の基本

1.「WorkFowyのURL」とは? WorkFlowyはクラウドサービスなので、URLを持ってい

記事を読む

no image

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

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

記事を読む

no image

iPhoneから使うWorkFlowyに対してあなたが感じるその不満、全部まとめて、HandyFlowyが相手にします! #ただしペーストは除く

拝啓 WorkFlowyを愛用するiPhoneユーザーの皆様へ 寒い日が続きますが、いかがお過ごしで

記事を読む

no image

ハサミスクリプトは、何から、何を、切り取るのか?(変化し続けるWorkFlowyから暫定的な作品群を切り取るという、個人の知的生産システム)

1.ハサミスクリプト=WorkFlowyからExportしたOPMLをHTMLに変換するプログラム

記事を読む

no image

WorkFlowyの中核機能「Zoom」の説明(の入口)

1.「ただひとつの巨大なリスト」によるテキスト管理システムを具体化する、WorkFlowyのZoom

記事を読む

no image

WorkFlowyに書いたURLを活用し、WorkFlowyを思考のOSへ

1.WorkFlowyに書き込んだURLは、自動的に、クリックできるリンクになる WorkFlowy

記事を読む

no image

WorkFlowyに『「超」整理法』の時間順原則を取り入れるための、「WorkFlowy押下げトピック法」試案

1.課題:WorkFlowyに『「超」整理法』の考え方を取り入れるために、どんなトピック構造&トピッ

記事を読む

no image

アウトライナーで考えるための3つのコツ(『アウトライン・プロセッシング入門』より)

1.はじめに 『アウトライン・プロセッシング入門: アウトライナーで文章を書き、考える技術』は、「ア

記事を読む

no image

様々な環境からひとつの文書を作成することで、行き詰まりを打開できる_文書作成ツールWorkFlowyの可能性(3)

個人的で主観的な経験なのですが、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 ↑