Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

プレゼン用の図を自動生成する話

3,841 views

Published on

第4回 エンジニアのためのプレゼン技術研究会「みんなの自由研究発表」と「前佛さんのスライドの作り方」(http://infrapre.connpass.com/event/20313/)の発表資料です。

Published in: Software
  • Be the first to comment

プレゼン用の図を自動生成する話

  1. 1. プレゼン用の図を 自動生成する話 4第 回 エンジニアのためのプレゼン技術研究会 @furandon_pig
  2. 2. 第4回「エンジニアのためのプレゼン 技術研究会」もさることながら… 「ご注文はうさぎですか??」の 第1羽 放映開始日 今日は何の日? http://www.gochiusa.com
  3. 3. プレゼンの図を作成する話 スライドを作成する際、以外と図の 作成は手間がかかる 〆切直前駆動でのスライド作成  → 図の作成は後回しになりがち   → 箇条書きonlyのスライド爆誕 なんとかラクに図を作成できれば… 本日の発表内容
  4. 4. 本日のスライドはSlideShareで公開 しています このスライドについて http://www.slideshare.net/furandon_pig/ss-53761102 http://bit.ly/1Qftt1i
  5. 5. 図の作成時に時間がかかる項目? 意外と図の位置調整で時間を費やし てしまう…  例)この線をあと1px細くしたら    見栄えが良くなるかも…    (これが延々とループ) ラクに図を作成したい(1/2)
  6. 6. 図の配置は全部自動で処理する どうしても気に入らない場合のみ 配置や線の太さ、色などを調整する 図作成用のテキストを解釈して図を 生成する感じにしたい  あと、できればeps形式のような  ベクター形式での図が欲しい ラクに図を作成したい(2/2)
  7. 7. テキストから図を生成するツール  graphviz   http://www.graphviz.org  mermaid   http://knsv.github.io/mermaid/ 今回はmermaidを使ってみました 図を自動生成するツール
  8. 8. AT&Tベル研究所謹製のツール DOT言語(データ記述言語)を使用 dotコマンドで図を生成する graphviz digraph gochiusa { "ご注文は" -> "うさぎですか?" }
  9. 9. 独自の記述言語で図を定義する mermaidAPI.jsを利用すると、Web ブラウザ上で図が生成できる mermaid graph TB ご注文は-->うさぎですか
  10. 10. mermaidAPI.jsのサンプルプログラム WebブラウザからmermaidAPI.jsを使ってみる http://furandon_pig.bitbucket.org/sample/officeui/mermaid/ http://bit.ly/1Oqfmcc
  11. 11. mermaidAPI.jsで図を作成する  先ほどのサンプルプログラムでは  リアルタイムに図を生成できます 出力されたSVGをInkscape等で編集 eps形式でエクスポート PowerPointやKeynodeにepsを挿入 mermaidAPI.jsで図作成→スライドに図を挿入 デモを兼ねて上記の手順を試してみます
  12. 12. サブグラフも描画できます ちなみに、サブグラフも描けます graph TB subgraph ラビットハウス ココア チノ リゼ end subgraph 甘 庵 千夜 end subgraph フルールドラパン シャロ end subGraph2 フルールドラパン subGraph1 甘兎庵 ラビットハウス シャロ 千夜 ココア チノ リゼ
  13. 13. mermaidAPI.jsで図をラクに作成  SVG生成→Inkscapeで微調整  →eps保存→プレゼンツールに挿入 サンプルプログラム側に少し制限あり  一部文字の入力を弾いている等  mermaidのSVGをInkscape側で  読み込めないケースへの対応 地味に修正していこうと思います まとめ

×