HandyFlowy上でJavaScriptやCSSの動作確認を手軽に行うスクリプトTester

wineroses氏のScriptMakerStylenoteに触発されまして。

HandyFlowy

HandyFlowy

  • Michinari YAMAMOTO
  • 仕事効率化
  • 無料

HandyFlowyの機能拡張スクリプトiPhoneでぽちぽち作成しようとすると、登録するまで挙動がわからず作成中のテストスクリプトをいくつも登録する事態に陥ります。

Testerはテストスクリプトとして登録することなくJavaScriptCSSの挙動を確認できる機能拡張スクリプトです。

window.onerror = function(mes, src, line, col, err) {
  alert('['+line+'] '+mes);
};
(function(){
  var p = pageContainer.getElementsByClassName("project selected noted")[0];
  if(!p){
    alert("No script in Note.");
    return;
  }
  var s = p.getElementsByClassName("notes")[0].innerText;
  var t =  /\}\s*$/.test(s) ? "style" : "script";
  var e = document.createElement(t);
  e.innerHTML  = s;
  document.body.appendChild(e);
})();

TesterをMemoFlowy経由でインポート

MemoFlowy

MemoFlowy

  • Michinari YAMAMOTO
  • 仕事効率化
  • 無料

使い方

ノートにCSS*1を書いてTesterを実行するとスタイルが反映されます。

ノートにJavaScriptを書いてTesterを実行するとJavaScriptが実行されます。

JavaScriptの変数を初期化したりCSSを適用前に戻したりするには右ペインのリロードボタンで。

ついでにJavaScriptで文法ミスなどエラーがあった場合は行番号とエラー内容を表示するようにしました。Workflowy自体のエラーも拾うので必要なくなったらリロードして解除してください。

Testerで色々試した後にScriptMakerやStylenoteで登録、の流れはいかがでしょう。

あとがき(要望)

HandyFlowyはスクリプトを登録するURLスキームが内部でしか使えず、共有するにしても修正するにしても手間がかかるので

  • handyflowy://importを外部から使える
  • 登録時にスクリプトの内容を確認して保存するかを決められる
  • 登録後もスクリプトの確認や修正が出来る

が実現されたらいいなと思いました。

*1:最後の文字が}である場合CSSと判断します。

広告を非表示にする