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

WorkFlowyのアイテムノートに書き込んだCSSを読み込む以前の方法は、結構込み入った処理をしてる為、WorkFlowyに書き込んだアイテム数が増えると比例してCSSを得るためのデータ読み込みにも時間がかかる。

どうせオンラインでないとアウトラインを読み込めないのだから、Dropboxからユーザースタイルシート(CSS)とユーザースクリプト(javascript)を読み込むようにすれば良いのじゃないか？読み込みが早くなるし、編集・管理も楽になるはず。

ということで、ユーザースタイルをたった一つといわず、ユーザースタイルとユーザースクリプトをそれぞれ最大10個読み込める機能拡張スクリプト(ブックマークレット)を作ってみた。(もちろん着脱式)

ユーザースタイルは、userStyle[0] ～ userStyle[9]
ユーザースクリプトは、userScript[0] ～ userScript[9]

に、「Dropboxリンクをコピー」でリンクを得て、末尾の?dl=0の部分を?dl=1に変えて代入する。

userStyleScript機能拡張スクリプト(ブックマークレット)

javascript:(function(){
    var userScript = new Array(), userStyle = new Array();

    userStyle[0] = "https://www.dropbox.com/s/○○○○/postity3.css?dl=1";
    userStyle[1] = "https://www.dropbox.com/s/△△△/3colorsBallpointpen.css?dl=1";
    userStyle[2] = "https://www.dropbox.com/s/□□□□□□/due.css?dl=1";
    userStyle[3] = "https://www.dropbox.com/s/＃＃＃＃＃/fusenColor.css?dl=1";

    userScript[0] = "https://www.dropbox.com/s/＄＄＄＄/WorkflowyStylableTags_slim_version.js?dl=1";
    userScript[1] = "https://www.dropbox.com/s/％％％/workflowy-with-image_mod.js?dl=1";

    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("link");
            e.href  = userStyle[i];
            e.rel = "stylesheet";
            e.type= "text/css";
            e.id = "userStyle" + i;
            document.head.appendChild(e);
        }

        for (i = 0; i<userScript.length; i++) {
            var e = document.createElement("script");
            e.src  = userScript[i];
            e.type= "text/javascript";
            e.id = "userScript" + i;
            document.head.appendChild(e);
        }

    }
})()

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

この機能拡張スクリプト(ブックマークレット)を起動することで、

PostItyの基本スタイル
三色ボールペンのスタイル
期限タグ色分けのスタイル
付箋色付けのスタイル

の、4ユーザースタイルシートと、

タグでスタイルを変更出来るようにするユーザースクリプト
インラインイメージを表示できるようにするユーザースクリプト

の、2ユーザースクリプトを一気に現在表示しているタブに適用できる。(もう一度起動するとそれらを解除できる)

ただこれだと、スクリプトやスタイルの管理(追加・差し替え・削除)をする度にスマホの小さな画面で機能拡張スクリプト(ブックマークレット)を一文字も間違えないように書き換えないといけない。結構神経を使うし厄介だ。

そこで、これを更に発展させて、この管理スクリプト自体もDropboxに保存し、それを機能拡張スクリプト(ブックマークレット)から読み込ませるようにしてみた。

ユーザースタイル・ユーザースクリプト管理スクリプト「userStyleScriptSV.js」

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

    userStyle[0] = "https://www.dropbox.com/s/○○○○/postity3.css?dl=1";
    userStyle[1] = "https://www.dropbox.com/s/△△△/3colorsBallpointpen.css?dl=1";
    userStyle[2] = "https://www.dropbox.com/s/□□□□□□/due.css?dl=1";
    userStyle[3] = "https://www.dropbox.com/s/＃＃＃＃＃/fusenColor.css?dl=1";

    userScript[0] = "https://www.dropbox.com/s/＄＄＄＄/WorkflowyStylableTags_slim_version.js?dl=1";
    userScript[1] = "https://www.dropbox.com/s/％％％/workflowy-with-image_mod.js?dl=1";

    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("link");
            e.href  = userStyle[i];
            e.rel = "stylesheet";
            e.type= "text/css";
            e.id = "userStyle" + i;
            document.head.appendChild(e);
        }

        for (i = 0; i<userScript.length; i++) {
            var e = document.createElement("script");
            e.src  = userScript[i];
            e.type= "text/javascript";
            e.id = "userScript" + i;
            document.head.appendChild(e);
        }

    }

    document.head.removeChild(document.getElementById("userStyleScriptSV"));

この、各スタイル・各スクリプトの読み込み／削除をしたら自身を消すスクリプトをDropboxに保存しておいて、

userScriptOnDropbox機能拡張スクリプト(ブックマークレット)

javascript:(function(){

    var src = "https://www.dropbox.com/s/○□△/userStyleScriptSV.js?dl=1";
    var e = document.createElement("script");
    e.src  = src;
    e.type= "text/javascript";
    e.id = "userStyleScriptSV";
    document.head.appendChild(e);

})()

この機能拡張スクリプト(ブックマークレット)でDropboxに保管した管理スクリプトを読み込むようにした。

これなら、スクリプトやスタイルの追加・差し替え・削除をするときは、Dropbox上のuserStyleScriptSV.jsを書き換えるだけだ。

DropboxだからPC環境から楽に編集できる。

スッキリして取り回しし易くなったし、念願だった一つのタブに対して同時に複数のスタイルやスクリプトを適用できるようになった。やれやれである。

追記１ @2016-07-17

余分なparseInt()が付いていた。toString()と間違えたのか？文字列と足し算すれは文字列になるので削除。