*

[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をプレゼン資料として使ってみたことの報告(後編:新たな試行錯誤とそこから得た収穫)

1.はじめに ここしばらくの間、私は、WorkFlowyをプレゼン資料として使うことに取り組んでいま

記事を読む

no image

元記事を時系列で並べるところから見える、本を書くことの醍醐味(『クラウド時代の思考ツールWorkFlowy入門』までの時系列)

1.『クラウド時代の思考ツールWorkFlowy入門』の元記事紹介 2016年1月29日に、『クラウ

記事を読む

no image

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

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

記事を読む

no image

WorkFlowyを共同制作環境として活用する(3) 誰から誰へを表現するシンプルで柔軟な仕組み「ダイナミックタグシステム」

HandyFlowy&MemoFlowyの開発は、主に、WorkFlowyの共有トピックのう

記事を読む

no image

WorkFlowyの同期の基本

1.WorkFlowyの同期 WorkFlowyは、クラウドサービスです。 WorkFlowyのプロ

記事を読む

no image

HandyFlowyの読み込み時間についての原因と対策

1.問題「HandyFlowyは、アウトライン読み込み時間が、長過ぎる」 HandyFlowyは、i

記事を読む

no image

WorkFlowyを使っていく上で大切なこと (WRM:20151221 から着想を得て)

1.はじめに 〜倉下忠憲さんによる問い「Evernoteを使っていく上で、大切なことは何でしょうか。

記事を読む

no image

WorkFlowyを「文章を書き上げるツール」として使うには、どんな課題を解消するとよいか

1.なぜ、「WorkFlowyの役割は、文章の構成を組み立てるところまで」なのか? ウェブ上に存在

記事を読む

no image

進化を続けるMemoFlowyが獲得した3つの新機能(MemoFlowy Ver.1.5)

MemoFlowyはWorkFlowyへのテキスト入力に特化したメモアプリです。MemoFlowyを

記事を読む

no image

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

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

記事を読む

スポンサードリンク

スポンサードリンク

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 ↑