ノート作成: 2016-03-23
最終更新: 2016-08-09
という、デスクトップWeb版WorkFlowyで画像を表示させる試みを読んだので、HandyFlowyの機能拡張スクリプトでも可能なのか試してみた。
記事に書かれているGitHub上のスクリプトを見ると、$で始まる行がある。デスクトップWeb版のWorkFlowyのソースを見るとjQueryを読み込んでいる行があるので、もしかしたらモバイル版も読み込んでいるのではないか？、もしそうならHandyFlowyでも使えるのではないか？
スクリプトをそのまま(念の為、上部のコメント行とstrictと書かれた行は消して)ScriptMakerでHandyFlowyに登録し、CSSはTesterで読み込ませたところ、なんとネット上の画像ファイルも難なく表示してくれた。
イメージのmarkdown()をノートの2行目以降に書けば「…」になってゴチャゴチャしない。
更新2 (2016-08-09)
WorkFlowyにDATA URIスキームを書いて画像を表示するのはあまり実用的でないので、Google Chart APIで数式表示に差し替えた。
更新3 (2016-08-15)
以下の手順を踏まなくても、HandyFlowy機能拡張スクリプトライブラリの、Inline Images （画像を表示）をインストールすればOK。
更新1 手順を追記 (2016-04-23)
d.hatena.ne.jp
機能拡張スクリプト「ScriptMaker」がHandyFlowyにインストールされていることが前提。
blog.workflowy.com
で最初に紹介されているスクリプトではなく、上から2/3辺りの
And not to forget Dan Rosenstark, who “discovered” Wizmann’s hack for us and got busy tinkering and testing. He has a “fork” here.
で触れられているDan Rosenstark氏のforkを使った。
こちらは、元のスクリプトに加えて、title属性やalt属性に対応している。
そのページのコードボックス内に書かれている43行のスクリプト全行をコピー。
WorkFlowyに、例えば「ImageFlowy」等の適当な名前でトピックを作り、そのノートに先程コピーしたコードをペースト。
PCに比べて画面の狭いモバイル機器に合わすために、34行目のmax-width: 400pxを例えばmax-width: 85%とかにして調整する。
HandyFlowyでこのトピック(この例でいえば「ImageFlowy」というトピック)をズームインし、ScriptMakerスクリプトを実行して機能拡張スクリプトとして登録。
ImageFlowyスクリプトを一度実行しておけば、というMarkdownの書式で書かれたインラインイメージが、そのトピックをズームした途端に読み込まれる。