読者です 読者をやめる 読者になる 読者になる

#ToDo 関連のメモ ( #sorashima )

「物の状態が最終的にこうなっていたら良いな一覧と、その為の手順を書き込む」アプリを使う上でのメモなど。(内容が古いまま、間違ったままもあるので注意。)広告が自動で挿入される無料版ブログサービスを利用しているので、PVが増えても一銭の得にもなりませぬ

[ 記事一覧へ ]

#HandyFlowy タグでトピックのスタイルを変える

HandyFlowy CSS

追記 2016-12-14

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

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


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


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);


トピック「重要タグの付いたトピックを赤文字にするスタイル」のURLを、タイトルバーを長押して得る。(設定メニューでURLを取り込めるように設定してある状態で)

例えばトピック「重要タグの付いたトピックを赤文字にするスタイル」のURLが https://workflowy.com/#/5352d83a35de だった場合、5352d83a35deをuserStylesScriptsOnNotesに書き込む。


上は、同様に「タグでスタイルを変更できるスクリプト」のトピックID(この例だと7653e262e238)も書き込んだ後の図。

これを実行すると、


のように重要タグを付けた「買物」が赤文字に変わった。


PostItyもCSSを追加すれば、


付箋の色分けもできる。

広告を非表示にする