Hatena::ブログ(Diary)

W&R : Jazzと読書の日々 このページをアンテナに追加 RSSフィード

2017/06/20

WorkFlowyで画像をインライン・プレビューする QuickLook

もっと魅せたい。


QuickLook

HandyFlowy内でYouTubeの動画や画像を表示するスクリプト QuickLook
httpsプロトコル限定。通常のhttp始まりだと表示しません。WorkFlowyはテキスト主体なので画像や動画を扱えません。ただ、URLアドレスはリンクになってSafariで確認できます。ということ...

HandyFlowyに埋め込まれたURLアドレスを簡易表示に切り替えるスクリプト。httpsプロトコルの画像のみ対応します。とても制限がありますよね。そこがWorkFlowyの困ったところ。とりあえず、下記アドレスでインポートしてください。

登録リンクはこちら→ http://tinyurl.com/ydbsa29m


Gyazo対応

Gyazoのアドレスを書けば画像を表示するようにしました。ただし、jpg決めうちなので、うまくいかない場合もあるかも知れません。iPhoneのカメラロールからアップした分は問題なさそうです。画像をプレスすると、ドラッグで移動をすることができます。


YouTube対応

YouTubeは通常のアドレスでも表示します。ただし、短縮URLは対応していません。


ブログカード表示

その他のリンクはブログカードで表示することにしました。これが意外といい感じ。今回一番気に入っているところ。タイトルが出るから可読性が増します。

QuickLookの解除は、別の階層に移ったときに行われます。あるいは、対象のトピックを編集しようとすると、本来のリンク表示に戻ります。


MathJax対応

おまけ機能として、$$で挟めば、その区間をLaTeXと見なします。数式が必要なところはこの方式で記述してください。

$$ \sqrt{b^2-4ac} $$


ブックマークレット版

HandyFlowyがなくても大丈夫。QuickLookはブックマークレットとしても走ります。下記スクリプトをブラウザに登録してください。iPhone/iPadのSafariで動きます。

登録リンクはこちら → http://tinyurl.com/ybbu7nrz


まとめ

HandyFlowy 1.5
分類: 仕事効率化,ユーティリティ
価格: 無料 (Michinari YAMAMOTO)

リンクをイメージしやすくなった。iPhoneに合わせ、どの表示も横幅280pxにしています。CardyやNotyにちょうど収まるサイズです。特にNotyで表示すると、ブログの完成イメージを思い浮かべやすくなります。並行してお使いください。きっと気に入りますよ。

2017/06/18

HandyFlowyを「エディタ」として使うスタイル Noty を考えてみた

WorkFlowyはデザインによって性格を変えます。ベースにあるのは「トピック」と呼ばれるテクスト・データ。けれどスタイルを変えることで、Todoリストにも情報カードにも変身します。用途に応じてデザインを使い分ける。HandyFlowyには、そうした未知の領域が隠されています。デザインが用法を生み出す可能性がある。


エディタとして

HandyFlowy 1.5
分類: 仕事効率化,ユーティリティ
価格: 無料 (Michinari YAMAMOTO)

起動が一瞬になった。一番のネックが解消しました。「書こう」と思ったとき「書く」に移行できる。時間差がないことが発想の展開を促進します。「エディタ」として不都合はなくなりました。となると、文章を書くために最適化したスタイルがほしい。

そこで Noty を考案。しばらくこのテーマを攻めてみます。「書く」とはどんなデザインが隠された行為なのだろう。何が連想の邪魔をし、何が発見の助けとなるのか。

登録リンクはこちら→ http://tinyurl.com/yd2fkdu2


コンセプト

HandyFlowyをエディタに見立て、文章を整えるスタイルです。アウトライナーっぽさを捨て「ノート・アプリ」と言い張る。そういう作戦ですね。本文以外の情報は極力出さない。見た目はメモ帳。なのに階層化できるし、並べ替えもできる。使ううちに「こんなエディタ、見たことない」という気持ちになる。そこを目指しています。


ブログ・ファースト

HandyFlowyの推敲用スタイル「suikou」作った - アキメモ
なんか書くHandyFlowy1.5でスタイル機能がついて簡単に切り替えられるようになったので早速作ってみました。インデントをなくしつつ、段差はブログの見出しっぽく表現してます。見出しの付け方はハサミ...

ブログを書くスタイルでもある。「見出し+内容」の構成に似合うデザインを組んでみました。というか、それ以外の形式に収めようとすると美しくならない。書いただけでは不全感が残るスタイル。Cardyをもとに、あき氏作の suikou CSS を参考にしています。

第一階層は濃赤色で表示します。見出し扱いです。第二階層は本文。ここは明朝体で。第三階層は補注かな。折り畳んで隠せます。文献や背景仮説はノートに埋める。不要な段落はCompletedで一時的に非表示にする。なんだ、推敲の仕掛けも揃っているじゃないか。


まとめ

エディタとして振る舞う。けれど内部には階層構造が秘められている。不思議な「アプリ」です。書きながら、WorkFlowyだということを忘れました。箇条書きのリズムから、段落の展開を考えるリズムに変わっていた。なのに、ネット上に自動保存されている。

今後、このスタイルが何を要求してくるか見当がつきません。常用に値する利点はあるだろうか。しばらくこの Noty に付き合ってみようと思います。

2017/06/15

HandyFlowyに背景画像を付けてみました Cardy(Wall)

カードスタイルに壁紙を。


壁紙Cardy

HandyFlowy 1.5
分類: 仕事効率化,ユーティリティ
価格: 無料 (Michinari YAMAMOTO)

「スタイル」を使えるようになったので、それを生かすデザインを考えてみました。実用性はないですけどね。壁紙を背景に貼り付け、半透明なカードを作っていくスタイルです。まるでアクリル板に書いてある美術館のインフォメーション・パネルみたいです。

登録リンクはこちら → http://tinyurl.com/ydhu8y3n


使い方

カード型なのはCardyと同じ。下位トピックをまとめてカード形式で表示します。バケットにライム色を使っています。目覚まし時計な色合いになりました。配色はご自由に変更してください。CSSを書き換えるだけなので、とても簡単にカスタマイズできます。


背景画像について

モブログの画像はGyazoに任せ、文字はTextwellで捌く
最近ここのブログはGyazo経由で画像を貼っています。フォトライフより手軽ですね。手順が最適化されてきたので、一旦まとめてみます。以前のアクションはGyazoカメラを起動するか尋ねていたのですが、使っ...

ソース内のbackgroud-imageで外部の画像アドレスを指定すると、それが背景画像になります。画像のアドレスはhttpsプロトコルでないと表示しません。Gyazoがhttpsなので、Gyazoにアップロードして画像アドレスを取得するのが手軽です。


まとめ

コルクにメモを貼っていく付箋アプリがあったりするけれど、あれとも違う感触。文字を扱うツールとして、脳髄の普段使わない部分を刺激される。これも悪くないな。

フォントは白色を基調にしているので、明るい壁紙だと読みにくくなります。明度や彩度の高い写真や多色系のイラストは避けたほうが良いと思います。

画像の表示サイズにcoverを使い、可変式にしています。リストが増えてくると画像が拡大していく。これが困る場合はcontainに変更してお使いください。