2015年7月29日水曜日

TiddlyWikiでGravizoを使ってグラフを書く

Gravizo はグラフのレンダリングエンジン Graphviz を使った Web サービスです。 DOT 言語で記述したテキストを渡すと画像データを返してくれます。



HTML イメージタグで使う場合

Gravizo のサンプル HTML によると、イメージタグの中に DOT テキストを記述して使います。

このように記述すると

<img src='https://g.gravizo.com/g?
 digraph G {
   main -> parse -> execute;
   main -> init;
   main -> cleanup;
   execute -> make_string;
   execute -> printf
   init -> make_string;
   main -> printf;
   execute -> compare;
 }
'/>

このようにグラフが表示されます。



TiddlyWiki で使う場合

Gravizo を TiddlyWiki で使う場合はどうでしょうか。 Tiddly 記法でグラフを書く場合はイメージ書式を使って、このように記述します。

[img[https://g.gravizo.com/g?
 digraph G {
   main -> parse -> execute;
   main -> init;
   main -> cleanup;
   execute -> make_string;
   execute -> printf
   init -> make_string;
   main -> printf;
   execute -> compare;
 }
]]

実際の実行画面は icm7216.github.io/MyTiddlyWiki/ - Gravizo on tiddler で確認できます。

ところが DOT テキストの内容によってはイメージ書式として正しく認識できない場合があります。これは TiddlyWiki のイメージ書式のパーサーが、クエリ文字列のパースに失敗するのが原因のようです。

例えばこのような DOT テキストです

[img[https://g.gravizo.com/g?
digraph G {
  node [shape=plaintext]
  a [label=<<TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
              <TR><TD PORT="1">one</TD><TD PORT="2" ROWSPAN="2">two</TD></TR>
              <TR><TD PORT="3">three</TD></TR>
            </TABLE>>];
  b [label=<<TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
              <TR><TD PORT="1">one</TD><TD PORT="2">two</TD></TR>
              <TR><TD PORT="3" COLSPAN="2">three</TD></TR>
            </TABLE>>];
  a:1 -> b:2;
  b:1 -> a:2;
  b:3 -> a:3;
}
]]

クエリ文字列のパースに失敗した出力

こんな場合は html タグを使うとうまくいきます。 html タグを使えば tiddler の中に生HTMLを記述することができます。

このように記述します

<html>
<img src='https://g.gravizo.com/g?
digraph G {
  node [shape=plaintext]
  a [label=<<TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
              <TR><TD PORT="1">one</TD><TD PORT="2" ROWSPAN="2">two</TD></TR>
              <TR><TD PORT="3">three</TD></TR>
            </TABLE>>];
  b [label=<<TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
              <TR><TD PORT="1">one</TD><TD PORT="2">two</TD></TR>
              <TR><TD PORT="3" COLSPAN="2">three</TD></TR>
            </TABLE>>];
  a:1 -> b:2;
  b:1 -> a:2;
  b:3 -> a:3;
}
'/>
</html>

このようなグラフが tiddler に表示されます。



tiddler マクロと組み合わせる

以前の投稿 で紹介した便利機能、 tiddler トランスクルージョンを使ってみましょう。

Graphviz 用の tiddler トランスクルージョンを "embed" tiddler に記述します。

!graphviz
<html>
<img src='https://g.gravizo.com/g?$1'/>
</html>
!end


Graphviz 用の tiddler トランスクルージョンの使い方

マクロの引数の DOT テキストを、シングルクオートで囲んで渡してやります。

<<tiddler [[embed##graphviz]] with:'
  ここにDOTテキストを記述します
'>>

記述例

<<tiddler [[embed##graphviz]] with:'
digraph G {
  node [shape=plaintext]
  a [label=< <TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
              <TR><TD PORT="1">one</TD><TD PORT="2" ROWSPAN="2">two</TD></TR>
              <TR><TD PORT="3">three</TD></TR>
            </TABLE> >];
  b [label=< <TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
              <TR><TD PORT="1">one</TD><TD PORT="2">two</TD></TR>
              <TR><TD PORT="3" COLSPAN="2">three</TD></TR>
            </TABLE> >];
  a:1 -> b:2;
  b:1 -> a:2;
  b:3 -> a:3;
}'>>


tiddler マクロで graphviz を使う場合の注意点

マクロ引数の DOT テキストの中に<< ... >>の記述があるとパースに失敗します。

このように表示されます

Tiddly 記法では、例えば<<TABLE ... >>の記述があると TABLE マクロの呼び出しと解釈してしまいます。そこで、このような場合はスペースを追加して< <TABLE ... > >のように記述するとうまくいきます。

2015年7月11日土曜日

Firefox39.0 がリリースされました

2015年07月03日に Firefox39.0 がリリースされました。

デスクトップ版 Firefox のダウンロード
http://www.mozilla.jp/firefox/download/
デスクトップ版 Firefox のリリースノート
http://www.mozilla.jp/firefox/39.0/releasenotes/

新機能では

Firefox Hello のビデオ通話の途中で、通話へのリンクを共有するために、SNS 経由で URL を送って共有できるようになりました。

Web アクセシビリティの仕様 WAI-ARIA 1.1 の switch ロールをサポートしました

そのほかの新機能の詳細はリリースノートをご覧ください。



デスクトップ版 Firefox の開発ツールの更新と追加された機能のまとめ



インスペクタ

インスペクタの HTML ツリーで、要素をドラッグ・アンド・ドロップで移動できるようになりました。


移動するには、要素をクリックした状態で少し待つとハイライトの上側に破線が現れます。 ドラッグに伴って移動する黒い破線は、新しい挿入場所を示します。希望する場所でドロップすると移動完了です。ドラッグ中のオレンジ色の破線は要素の元の場所を示しています。

さらに詳しく:


アニメーションのタイミング関数のプリセット

アニメーションのタイミング関数の設定ツール、3 次ベジェ曲線エディタにタイミングのプリセットが搭載されました。


プリセットは 3 つのグループに分けられており、 Ease-in 10 種類、Ease-out 10 種類、Ease-in-out 11 種類のプリセットを使用できます。

さらに詳しく:


インライン要素のボックスモデルのハイライト機能を改善

複数行に分割されたインライン要素のボックスモデルををハイライトします。 ハイライトの配色はCSSペインのボックスモデルビューと同じです。

この例では、複数行に分割されたインライン要素のコンテンツが水色、左パディングが紫色で表示されていることが分かります。マージンは黄色で表示されています。


セレクタにマッチする要素をハイライトするボタン

CSS ペインのルールビューに、セレクタにマッチする要素をハイライトするボタンが追加されました。

このセレクタにマッチするページ上の要素を、ボックスモデルビューと同じ配色でハイライトします。

この例ではセレクタul.tags-small liにマッチする全ての li 要素がハイライトされています。この機能によって、セレクタにマッチする特定の要素に対して、ページ上のマージンやパディングの状態を簡単に確認できるようになりました。

さらに詳しく:



アニメーションビュー

アニメーションビューにアニメーションの始点、終点の移動ボタンが追加されました。さらに、 タイムラインのバーをドラッグできるようになり、タイムライン上の任意の位置に移動できるようになりました。



Web コンソール

Web コンソールのコマンドライン履歴が、セッションをまたいで保持されるようになりました。


これまでは Web コンソールを閉じるとコマンドライン履歴が消えてしまいましたが、セッションをまたいで保持されるようになりました。別のタブに移動した後に元のタブに戻って再び開発ツールを開いたときや、 Firefox の再起動後も Web コンソールのコマンドライン履歴は残っています。

今回のリリースの Firefox 39 Windows 版では、この機能を確認できませんでしたが、同じリリースの Linux 版でこの機能が動作することを確認できました。 Windows 版への実装は次回のリリースに見送られたのでしょうか?

この機能は Firefox Developer Edition の Windows 版なら、今すぐにでも使用できます。お試しを!


追加されたコンソール支援コマンド

  • $_コマンド
    コンソールのコマンドラインで「最後に評価された式の結果」を表示できるようになりました。

  • clearHistory()コマンド
    コンソールのコマンドライン履歴を消去します。

さらに詳しく:



ネットワークモニタ

ネットワーク要求の詳細ペインのヘッダタブで、リモート IP アドレスとポート番号の表示が追加されました。




WebIDE

Firefox OS デバイスのデバッグを Wi-Fi 経由でできるようになりました。

さらに詳しく:

WebIDE で Apache Cordova をサポートしました


WebIDE で Cordova アプリのビルドや編集、デバッグをできるようになりました。

さらに詳しく: