ノートから複数のユーザースタイルシートとユーザースクリプトを読み込んで #HandyFlowy やモバイルWeb版 #WorkFlowy に適用する機能拡張スクリプト(ブックマークレット)

作成:2016-07-17

最終更新:2016-12-14

追記 2016-12-14

注意) このメモは、HandyFlowyがバージョン1.3で「タブに常時適用する機能拡張スクリプト数の拡大」という機能増強をする前に書いたものです。
現在、この機能拡張スクリプトを使う必要性はほぼ無くなりました。

WorkFlowy内部のComplete日時を変更できないものかと、「HandyFlowy機能拡張スクリプトライブラリ」の中にあるYAMAMOTO氏の「Last changed」のソースを分解して、WindowsのGoogle ChromeのWebインスペクタで動きを見ていたら、偶然、WorkFlowy内の関数

var aNote = project_tree.getProjectReferenceFromUniqueIdentifierWithTruncatedProjectIds("○○○○○○").getNote();

でトピックIDが○○○○○○のノートが読めることに気付いたので、Dropboxを使わない版も作ってみた。(小さな画面での編集は厄介ではあるが)

以前の方法のような余分な読み込みが無いので速いし、下記のようにユーザースタイルシートやユーザースクリプトは他のトピックの下位項目でも構わなくなった。

スタイル＆スクリプト

スタイル
- PostItyの基本スタイル
  /* ---------------------------------------- */
- 三色ボールペンのスタイル
  /* ---------------------------------------- */
- 期限タグ色分けのスタイル
  /* ---------------------------------------- */
- 付箋色付けのスタイル
  /* ---------------------------------------- */
スクリプト
- タグでスタイルを変更するスクリプト
  // ==UserScript==
- インラインイメージを表示するスクリプト
  // ==UserScript==

実際の使い方は、#HandyFlowy タグでトピックのスタイルを変えるを参照。

userStylesScriptsOnNotes3

javascript:(function(){

 var userScript = new Array(),
     userStyle = new Array();

 /*
 トピックのノート部分にユーザースタイルやユーザースクリプトを書き、
  そのトピックのID( https://workflowy.com/#/○○○○○○ の
  ○○○○○○の部分を右辺の""の中に書く
 */

 userStyle[0] = "218b7274d5c3";
 userStyle[1] = "026f11eaccb3";
 userStyle[2] = "ac4e97d947df";
 userStyle[3] = "01a9e7db609b";

 userScript[0] = "1196f3b8a8b1";
 userScript[1] = "11e45502789f";

 /* -------------------- */

 function decodeEntities(encodedString) {
     var textArea = document.createElement('textarea');
     textArea.innerHTML = encodedString;
     return textArea.value;
 }

 function main() {
     var used = document.getElementById("userStyle0") || document.getElementById("userScript0");
     if (used) {
         for (var i = 0; i < 10; i++) {
             var e = document.getElementById("userStyle" + i);
             if (e) {
                 document.head.removeChild(e);
             }
         }
         for (var i = 0; i < 10; i++) {
             var e = document.getElementById("userScript" + i);
             if (e) {
                 document.head.removeChild(e);
             }
         }
     } else {
         for (i = 0; i < userStyle.length; i++) {
             var e = document.createElement("style");
             e.type = "text/css";
             var note = project_tree.getProjectReferenceFromUniqueIdentifierWithTruncatedProjectIds(userStyle[i]).getNote();
             e.textContent = decodeEntities(note);
             e.id = "userStyle" + i;
             document.head.appendChild(e);
         }
         for (i = 0; i < userScript.length; i++) {
             var e = document.createElement("script");
             e.type = "text/javascript";
             var note = project_tree.getProjectReferenceFromUniqueIdentifierWithTruncatedProjectIds(userScript[i]).getNote();
             e.textContent = decodeEntities(note);
             e.id = "userScript" + i;
             document.head.appendChild(e);
         }
     }
 }

 var timerId = setInterval(function() {
     if (!(typeof project_tree.getProjectReferenceFromUniqueIdentifierWithTruncatedProjectIds("") === "undefined")) {
         clearInterval(timerId);
         main();
     }
 }, 500);

})()

スクリプトのインストールは慎重に。
スクリプトのインストール及びご使用は各自の自己責任でご利用ください。
スクリプトの使用によって、利用者および第三者に損害が発生したとしても、当方は一切責任を負わないものとします。

本来なら

Dropbox連携アプリの多くは、初回起動時にDropboxフォルダのルート直下の「アプリ」フォルダ或いは「Apps」フォルダの中に、そのアプリ専用のフォルダを作り、その中に設定ファイルを保存する。
それに倣って、WorkFlowyのHome直下にそういった設定項目をまとめて保存するための「Apps」トピックを作って、その下にこれ用のトピックを作り、その中に各スタイルやスクリプトを書くか、或いはそれらの書かれたトピックのIDを書くようにすればもう少しエレガントなんだろうけど、そういった編集・読み込み操作を実現する為の内部APIのアクセスの仕方がわからないので、このようにスクリプトを一文字も間違えずに自分で書き換えなければならない厄介な仕様になってしまった。

更新2 (2016-08-05)

userStylesScriptsOnNotes3

HandyFlowyで、アウトライン全体が読み込み完了して内部での処理が終わりユーザーが操作できる状態になるタイミングと、タブ設定で自動起動に指定した機能拡張スクリプトが起動されるタイミングの問題なのか？、機種に依っては内部データが整う前に機能拡張スクリプトが起動して、上手く動いてくれなかった。
そこで、データを読み込める事を確認してからスクリプトやスタイルシートを読み込むように変更した。

userStylesScriptsOnNotes2

古いノートの下書を間違えて公開してしまった。消したが、その前にRSSフィードが公開されてしまっていた。

更新1 (2016-07-20)

全ての文字実体参照に対応できるように変更した。