#ToDo 関連のメモ ( #sorashima )

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

[ 記事一覧へ ]

#HandyFlowy で画像表示は可能?

ノート作成: 2016-03-23
最終更新: 2016-08-09


という、デスクトップWeb版WorkFlowyで画像を表示させる試みを読んだので、HandyFlowyの機能拡張スクリプトでも可能なのか試してみた。

記事に書かれているGitHub上のスクリプトを見ると、$で始まる行がある。デスクトップWeb版のWorkFlowyのソースを見るとjQueryを読み込んでいる行があるので、もしかしたらモバイル版も読み込んでいるのではないか?、もしそうならHandyFlowyでも使えるのではないか?

スクリプトをそのまま(念の為、上部のコメント行とstrictと書かれた行は消して)ScriptMakerでHandyFlowyに登録し、CSSはTesterで読み込ませたところ、なんとネット上の画像ファイルも難なく表示してくれた。

Google Chart APIを使えば数式も表示可能。

イメージの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スクリプトを一度実行しておけば、![title](画像ファイルのアドレス)というMarkdownの書式で書かれたインラインイメージが、そのトピックをズームした途端に読み込まれる。

広告を非表示にする