#HandyFlowy タグでトピックのスタイルを変える - メモ・備忘録(設定ファイル・スクリプト類・ブックマーク)

追記 2016-12-14

注意) このメモは、HandyFlowyがバージョン1.3で「タブに常時適用する機能拡張スクリプト数の拡大」という機能増強をする前に書いたものです。

現在は「ノートから複数のユーザースタイルシートとユーザースクリプトを読み込んで #HandyFlowy やモバイルWeb版 #WorkFlowy に適用する機能拡張スクリプト(ブックマークレット)」を使用すること無しに、「HandyFlowyをスタイリッシュにするStylenoteを着脱式にしました - W&R : Jazzと読書の日々」とWorkFlowy Blogに紹介されていたWorkflowyStylableTagsスクリプトだけで、たぶん同じことができるでしょう。
WorkflowyStylableTagsスクリプトの仕組みの解説メモとお考えください。

以前書かれていた方法は動作が遅いので、既に読み込み済みのデータを利用してより動作の早い「ノートから複数のユーザースタイルシートとユーザースクリプトを読み込んで #HandyFlowy やモバイルWeb版 #WorkFlowy に適用する機能拡張スクリプト(ブックマークレット)」を使った方法に差し替えた。

WorkFlowy Blogにてタグによって書体を変える方法が解説されていた。

Different Fonts for Different WorkFlowy Outlines – WorkFlowy Blog

この方法を使えば、書体だけでなく文字色なども変えることができる。

上記アウトラインの「買い物」というトピックの部分のHTMLは以下のようになっている

：
：
<div class="project open" projectid="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX">
  <div class="name">
    <div class="bullet">
      <div></div>
     </div>
     <div class="content">買い物<span class="contentTag" title="Filter @重要">@<span class="contentTagText">重要</span></span>
    </div><span class="parentArrow"></span>
  </div>
  <div class="notes">
    <div class="content">
スーパーで。
    </div>
  </div>
  <div class="children">
    <div class="project task done " projectid="YYYYYYYY-YYYY-YYYY-YYYY-YYYYYYYYYYYYYYYY">
：
：

先ほどのブログで紹介されていたスクリプトを使うと、@重要(プリフィクスは@でも#でも構わない)というタグが付けてあると、

<div class="project open" projectid="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX">

の部分を

<div class="project open 重要-proj" projectid="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX">

に書き換えてくれる。これに、

.project.重要-proj>.name>.content {
    color: red;
}

というスタイルシートを適用するば、重要タグの書かれたトピックの文字が赤色になる。

上記ブログでは、デスクトップWeb版WorkFlowyとTampermonkeyアドオンとStylishアドオンを使った方法が書かれていた。 HandyFlowyでこれをやってみる。

拙作 userStylesScriptsOnNotes という機能拡張スクリプトを使って、先のブログで紹介されていたスクリプトと上記のスタイルシートを読み込む。

例えば、次のような構造のトピックツリーを作り、スタイルのところのトピックのノートに上記スタイルシート、スクリプトのところのトピックのノートにWorkFlowy Blogで紹介されていたスクリプト(WorkflowyStylableTags)をコピペする。

スタイル＆スクリプト

スタイル
- 重要タグの付いたトピックを赤文字にするスタイル
  .project.重要-proj>.name>.content { color: red; }
スクリプト
- タグでスタイルを変更できるスクリプト
  // ==UserScript== // @name WorkflowyStylableTags // @description Gives each tag it's own css style, so you can style them with Stylish. I use Blank Canvas to manage my userscripts in Chrome. // @author Nigel Thorne and LukeMT // @include http*://*workflowy.com/* // @version 1.1 // ==/UserScript== String.prototype.endsWith = function(suffix) { return this.indexOf(suffix, this.length - suffix.length) !== -1; }; var customClasses = function(index, old){ var classes = old.split(" "); var custom = []; for( i = 0; i < classes.length; i++){ if(classes[i].endsWith("-proj")){ custom.push(classes[i]);}; }; return custom.join(" "); } var StylableTagsCounter = 1; setInterval(function(){ StylableTagsCounter ++; if( StylableTagsCounter >= 3){ $('.project').removeClass(customClasses); $('.pageContainer').removeClass(customClasses); StylableTagsCounter = 0; } $('span > .contentTagText').map( function(){ var x = $(this).text(); $(this).parent('.contentTag').parent().parent().parent().addClass(x+"-proj");} ); },1000);