BEGIN:VCALENDAR VERSION:2.0 PRODID:-//https://techplay.jp//JP CALSCALE:GREGORIAN METHOD:PUBLISH X-WR-CALDESC:D3.js と reveal.js の紹介 X-WR-CALNAME:D3.js と reveal.js の紹介 X-WR-TIMEZONE:Asia/Tokyo BEGIN:VTIMEZONE TZID:Asia/Tokyo BEGIN:STANDARD DTSTART:19700101T000000 TZOFFSETFROM:+0900 TZOFFSETTO:+0900 TZNAME:JST END:STANDARD END:VTIMEZONE BEGIN:VEVENT UID:452880@techplay.jp SUMMARY:D3.js と reveal.js の紹介 DTSTART;TZID=Asia/Tokyo:20150429T130000 DTEND;TZID=Asia/Tokyo:20150429T150000 DTSTAMP:20260426T174232Z CREATED:20150419T084208Z DESCRIPTION:イベント詳細はこちら\nhttps://techplay.jp/event/45288 0?utm_medium=referral&utm_source=ics&utm_campaign=ics\n\nOffice のいら ない office 環境\nこの資料は じゃいすと LT 第二回で使 用する資料です．\nLT とか言いつつ，絶対ハンズオン レベルの量になっていて恐縮です．\n私の回で話そう と思っていることをすべて書いているので，\n事前に 確認しておく必要はないです．\n\nスライド\ngithub\n\n 注) このイベントは 北陸先端科学技術大学院大学 (JAIST ) の私的内部イベント です.\n そのため，外部の方の 参加はご遠慮ください.\n 多分交通費がもったいない です.\n\n\nアジェンダ\n\nはじめに\nreveal.js の簡単な紹 介\nreveal.js ハンズオン\nD3.js の簡単な紹介\nD3.jjs ハン ズオン\n\nはじめに\nプログラミング言語 Office 環境化 計画の第一弾です．\n私は信仰上の理由から Microsoft が 大嫌いです．\nあの，有料ソフトの癖にどんなパソコ ンにも入っていて，\nみんな使って当たり前感がなん とも．\nなので，その呪縛からの脱却を目指します．\n その手始めとして，Power Point をやっつけます．\nつま り，ここで紹介するハックは基本的に発表資料を作成 する際に，\nPower Point を使用しないでどのように行っ て行くのかという話しをして，\nその結果 better than "pow er point" な部分，みんなが happy になる部分を紹介しま す．\njs とは何か？\njava script というプログラム言語を 聞いたことのないプログラム畑の人は現在では\n相当 減っていると思います．\n比較的簡単にスクリプトが 書け，割と応用範囲が広いので最近特に人気の（そし てその分忌み嫌われる）言語の\n一つかと思います．\n 一般には web ページ，あるいは web app を作成する時に 使用する言語で，web 系の何かを作成するとき以外には \n使い道が... などと思いがちですが（というか私はそ う思っていたのですが），基本的にあれは DOM (HTML の ようにツリー構造でマークした文章) を動的に操作す るツールであることを思えば，別に web で公開せずに ローカルで使用していてもいいんですよね．\nだって D OM って要は装飾のついた文章ファイルで，GUI の実装方 法の一つなわけです．\nOffice とは何か？\n大抵のロー カルアプリだって GUI は xml で指定していますし，いわ ゆるベクター形式のファイルだって DOM の一種です． もっと言ってしまうと例えば Libre office を zip に変換す ると結局は web ページのような構造に\n過ぎないことに 気がつくと思います．\nつまり\,いわゆる office 系のア プリケーションの最終的な出力ファイルって，web ペー ジ用のディレクトリを圧縮した圧縮ファイルそのもの にすぎず， office アプリとはその圧縮ファイルのビュ ワーとエディタがセットになった統合開発環境に過ぎ ないわけです．\n\nhttps://help.libreoffice.org/Common/XML_File_For mats/ja\n\nそこで， js を office 環境として使用するとい う行為を考えるとつまり以下のような要素に分解でき るわけです．\n\nファイル: 圧縮ファイル -> 作業ディレ クトリ\nビュワー: power point -> firefox (chrome)\nコンパイラ ??: power point -> js\nエディタ: power point -> vim (emacs その他) \n\nこう考えてみるとスクリプティングをすることで of fice 環境の機能を再現するという試みが，\nそんなにと んでも無い発想ではないということがお分かりいただ けるかと思います．\nreveal.js の紹介\npower point ででき ること\n今回はアンチパワポなので，まず power point で できる機能を整理してみましょう．\n\nスライドという 枠の作成\nスライドの移動\n文字の表示\n表の表示\nフ ァイルの埋め込み\n\n大体上記のことができれば power po int の機能は再現していると言えるのではないでしょう か？\n実はこれらの機能に関してはすでに js で実装済 みのライブラリが存在します．\nreveal.js とは\nさて， では早速 js + html でスライド作成をしていきましょう ．\nとは言いつつ，ここでは何か js をいじることはし ません．\n単純にそれ用の js を利用します．\nここで は個人的な使用感の違和感のなさから reveal.js を紹介 します．\n\nhttps://help.libreoffice.org/Common/XML_File_Formats/ja\n \n公式サイト自身が leveal.js のデモになっているので面 白いと思います．\nちなみに， html + js でスライドを作 成するという発想は結構普通で，以下のようなライブ ラリもあります．\n\nGoogle Slides Template:\n名前から分か るように google 製です\nhttp://html5slides.googlecode.com/svn/trun k/template/index.html#1\n\n\nSlides: \nこちらは js としては有名 ではないかもですが， R と連携できます\nhttp://www.brianc avalier.com/code/slides/#0\n\n\nimpress:\nこれは prezi 式の資料が 作成できます \nhttp://bartaz.github.io/impress.js/#/bored \n\n\n\nr eveal.js ハンズオン\n\ngithub レポジトリ\nhttps://github.com/ha kimel/reveal.js\n\n\n\nまずは github からソースをダウンロー ドします．\n実は web app 化もしているのですが，なん だかんだでローカルのものを使用したほうが楽かと思 います．\n基本\nソースファイルをダウンロードしたら ，早速 index.html を適当なブラウザ（適当と言った段階 で IE は外します）で開いてみてください．\n大体サン プルファイルがどのようになっているのかが把握でき ると思います．\njs の読み込みとか head 要素に関して は，ここでは省略します．\nとりあえずは， ソースフ ァイルにある index.html を加工する形で使用してくださ い．\n肝心なのは body 要素の記述です．\nスライド本体 は以下のような div 要素で区切られます．\n
\n
\n スライド本体\n
\n< /div>\n\n\n\nまた各スライドは以下の div で区切られます ．\n
\n 何か文章\n
\n\n\n\nこの場合， スライドは横に動くようになります．\n一方スライド クラスの div を二重にすると縦に移動します．\n
\n
\n 何か文章\n
\n< div>\n\n\n\n"何か文章" と書かれている部分には一般的な html の要素を直接書き込めばよいです．\nこれで，スラ イドの作成，スライドの移動，文字の表示\, ファイル の埋め込み(リンク) という機能が使用できることを確 かめました．\nアニメーション\npower point の機能ではあ る文字をアニメーションを使って表示したり消したり できます．\nreveal.js も同様の機能が埋め込まれていま す．\n
\n

Fragment Styles

\n

There's different types of fragments\, like:

\n

grow

\n

shrink

\n

roll-in

\n

fade-out

\n

current-visible

\n

highlight-red

\n

h ighlight-blue

\n
\n\n\n\nとすると使えるアニメーシ ョンの書き方がわかるかと思います．\nシンタックス ハイライト\n特にプログラミング系のスライドを書く と，\nスライド中にシンタックスハイライトでコード を表示したい場合があります．\n以下のようにすると それができます．\n
\n    \n    Reveal.addEventListener( '
 customevent'\, function() {\n        console.log( '"customevent" has fire
 d' )\;  \n    } )\;\n    \n
\n\n\n\nここはへんは power point には無い機能です．\nマークダウンで書いてみる\n html は 表現力の大変優れた記法ですが，\nめんどいで す．\nreveal.js では MarkDown でスライドを書くこともでき ます．\n
\n \n
\n\n \n\n\nmd 形式の場合， class を宣言できなくなります．\n これは section 単位で指定できるので，凝ったことをし たいスライドでは html 形式で，\n 単純なスライドでは md 形式でスライドを作成するとよいです\n\ngithub にポ ストする\n作成したスライドは github 上で直接公開する ことも可能です．\n公開するには， gh-pagesブランチに 作成したファイルをpush します．\ngithub では gh-pages ブ ランチにある index.html ファイルを公開してくれます．\ nこれは以下のページがわかりやすいです．\n\nhttp://qiit a.com/Yuki_Yamashina/items/5d8208c450195b65344c\n\nD3.js\nここまでで ， reveal.js を使えば，大体 power point でできることは再 現できるし，\n論理上，すべての web app で実装されて いることはすべてスライドの表現方法として実行可能 であることが\nお分かりになるかと思います．\nただし ，上記のやり方では，一点問題があります．\nそれが 図です．\nreveal.js のみで図を使用する場合，基本的に は表示したい図のpngファイルを用意することになると 思います．\nこの図をどうやって作成するのかという 問題が出てきます(個人的にはRのggplotライブラリが便 利なのですが，これはまた別の機会にでも)．\nせっか くなら図に関しても js で完結したいと思う場合もある でしょう．\njs を使用して図を作成する方法を紹介す る前に，少し，PC 上の図に関して基本的な事項を\n確 認しておきます．まず， PC 上で図を表現するには 2 通 りの形式があります．\n\nビットマップ (ex. jpg\, png)\nベ クター (ex\, ai\, svg\, ps\, pdf\, css)\n\n前者の実装方法では 描画領域すべての座標に対し，一つ一つのパラメータ が指定されています．\n座標点に対するサンプリング と理解することも出来ますので，ある意味，完全指定 で図を作成する方法です．\n一方後者は，数式で図を 表現する方法です．\nつまり，ある線の開始，終了を 定義し，その線のパラメータを定義します．\nそのた め，後者のやり方では，絶対的な座標軸は存在する必 要がなく，拡大，縮小が自由です．\nまた，事後的に 座標軸を定義してやることによって，アニメーション を作成することも可能です．\nベクター形式は，上記 の通りの方法論なので，一般に DOM で実装されている ことが多いです．\nそのため 当然 js で作成することが 可能です．\nD3.js とは？\njs を使用して図を作成する方 法として今熱いのは D3.js\nだと思います（最近ではこ れをエクセルのプラグインとして使用できたりもしま す．）．\nちなみに D3 の意味は Data-Driven Documents です ね．\nとりあえず公式サイトから面白いデモを引っ張 って来たので見てみてください．\n\nhttp://dataaddict.fr/pre noms/#brigitte\,bruno\,alain\,alban\,albert\,alix-h\nhttp://bl.ocks.org/m bostock/4061961\nhttp://www.jasondavies.com/animated-bezier/\nhttp://mbos tock.github.io/d3/talk/20111116/force-collapsible.html\nhttp://bl.ocks.or g/e-/5244131\n\n楽しいでしょ？\nD3.js は reveal.js との相性 がよく（競合が起きない），\n動的な図を作成するこ とができます．\n一般的には JSON でデータを受け取る ことが多いのですが\, CSV ファイルを読み込むことも可 能です．\nベクター形式にし，HTML と組み合わせること で，発表中に動的に操作可能な作図が可能で，\nしか も，データは抽象化できるので，急なデータ変更があ ってもいちいちスライドを修正する必要がありません( このへん，プロトタイプ言語は強いです)．ある API を 叩いて作図を行う場合，発表中のまさに今起きている 現象を提示することも可能です．\nD3.js ハンズオン\nで は実際に使用してみましょう．\n今回は時間の都合で ，そんなに入り組んだことはせず，単純な例のハンズ オンをお見せします．\nとりあえず，基本的な使い方 として iris のデータを読み込んで散布図をやヒストグ ラムを書いて見ましょう．\nそれが済んだら，次はこ れを動的に動かせるようにしてみます．\nD3.js を読み 込む\nD3.js を読み込みます．\nD3.js のソースコードをダ ウンロードしてもいいのですが，html 内部に直接パス を書いてしまったほうが楽かと思います．\n\n\n\n\nD3.js サンプル</tit le>\n<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> \n</head>\n\n<body>\n<h1>D3.jsサンプル</h1>\n\n<script>\nここに D3 用のコードを記述\n</script>\n\n</body>\n</html>\n\n\n\nD3 で散 布図を書いてみる\nまずは単純にデータを直書きした 上でそのデータを散布図にします．\n以下，サンプル データです．\n/* データの宣言 */\nvar dataset = [\n [ 5\, 150 ]\,\n [ 480\, 300 ]\,\n [ 250\, 400 ]\,\n [ 100\, 330 ]\,\ n [ 330\, 50 ]\,\n [ 410\, 120 ]\,\n [ 475\, 340 ]\,\n [ 25\, 470 ]\,\n [ 85\, 210 ]\,\n [ 220\, 380 ]]\;\n\n/* 描画領域 の指定 */\nvar svg = d3.select("body")\n .append("svg")\n .attr( "width"\, 1000)\n .attr("height"\, 1000)\;\n\n/* データの描画 */ \nsvg.selectAll("circle") // 円を選択\n .data(dataset) // データを当てはめる\n .enter() \n .append("circle ") // 実際に円をhtmlに追加\n .attr({ // 円 の細かい設定は以下の通り\n cx : function(d) {return d[0]}\ ,\n cy : function(d) {return d[1]}\,\n r : 10\,\n })\n\n\n\nvar da taset の部分は単純にデータを作成しているだけです．\ nvar svg では描画する範囲を指定しています．\nbody要素 内部に縦横 1000px の svg を作成しています．\nで，この svg に円(circle) を作成します．ここの点は dataset を利用 します．\nattr() の部分で座標と半径の大きさを指定し ています．\nここで先に円(circle)要素をセレクトしてい ることに注意してください．\n実際に要素が存在しな い状態でも先にデータの宣言をし，あとでその要素をh tmlに追加できます．\ndata(dataset) に関しては説明が必要 かもしれません．これは引数に与えられた数だけ，そ れ以降の処理を\n繰り返し実行します．今回は 10 個の リストが入っているリストを渡しているので， 10 回繰 り返し，以下の処理を\n行います．この際，まさに処 理しているデータ自身は変数 d に格納されます．\nこ の例で D3.js の基本的な流れがつかめるかと思います． \nまず，データを宣言し(今回はベタ書きしましたが，c sv\, json などが読み込めます)\,\n描画領域を作成します ．\nで，その描画領域にのせるものを追加して，デー タを当てはめるわけです．\nデータの読み込み\nD3.js を 使用すれば，いろいろできるのはわかったとして，実 際に使用することを考えると，\nデータの読み込みが 必要です．\nここでは一番一般に流布しているデータ 形式である csv ファイルを読み込んでみます．\n/* デー タの宣言 */\nd3.csv('iris.csv'\, function(dataset) {\n /* 描画 領域の指定 */\n var svg = d3.select("body")\n .append("svg ")\n .attr("width"\, 900)\n .attr("height"\, 500)\;\n\n /* データの描画 */\n console.log(dataset)\n svg.selectAll("ci rcle") // 円を選択\n .data(dataset) // データを当 てはめる\n .enter()\n .append("circle") // 実際に 円をhtmlに追加\n .attr({ // 円の細かい設 定は以下の通り\n cx : function(d){return d["SepalLength"] * 100}\,\n cy : function(d){return d["SepalWidth"] * 100}\,\n r : 3\,\n })\;\n})\;\n\n\n\n\ncsv はこの勉強会用のgithub レポジトリ内に含まれています．\n以下の記述はヘッ ダのついている csv ファイルようです\n\n\n\nD3 で軸を表 示する\n学術的な作図の場合，スケールの表示はとて も重要な問題です．\nD3 でアニメーションを作成して みる\n基本的に，D3 で各要素を作成している部分にい ろいろと細工をしていけば，\n自由にアニメーション が作成できます．\n実際に先ほどの例を利用して最も 単純なアニメーションをつけてみます．\nサンプルは 以下の通りです．\nsvg.selectAll("circle")\n .data(dataset)\n .enter()\n .append("circle")\n .transition()\n .delay(500)\n .att r({\n cx : function(d) {return d[0]}\,\n cy : function(d) {retu rn d[1]}\,\n r : 10\,\n })\n\n\n\n違いは transition と delay の部分のみです．\ntransition はこの要素を変化させると いう意味です．\nそれに対して，どう動かすのかを決 めているのが後続の行です．\nまず，delay() は単純な待 機です．500 msec 待機します．\nその後，各要素の値を 指定しているので，表示されてから 500msec は何も表示 されず，その後\n各点が表示されます．\nもちろん先に circle の変数を決めてしまい後から変更することもで きます．\nsvg.selectAll("circle")\n .data(dataset)\n .enter()\n .append("circle")\n .attr({\n cx : function(d) {return d[0]}\,\n cy : function(d) {return d[1]}\,\n r : 10\,\n })\n\nsvg.tran sition().delay(500).duration(1000)\n .attre("fill"\, "red")\n\n\n\nこ の例の場合，500msec 後に 1sec かけて各点の色を赤くし ます．\nクリックとの連携\n上記の例では読み込まれた あと自動で処理を開始しました．\nしかし，実際の使 用シーンではユーザーの挙動に応じて図を変更したい 場合が多々あるかと思います．\nここでは簡単にクリ ックを取得する方法のみを紹介します．\nsvg.selectAll("ci rcle") // 円を選択\n .data(dataset) // データを当て はめる\n .enter()\n .append("circle") // 実際に円をhtmlに 追加\n .attr({ // 円の細かい設定は以下の通 り\n cx : function(d) {return d[0]}\,\n cy : function(d) {return d [1]}\,\n r : 10\,\n })\n .on("click"\,function(){\n svg.transit ion()\n .duration(1000)\n .attr("fill"\, "red")\n })\n \n\n\nポイントは on の部分です．ここでクリックを取得 した際に以下の処理を行うと宣言できます．\nreveal.js と D3.js を連携してみる LOCATION:北陸先端科学技術大学 石川県能美市旭台１−１ URL:https://techplay.jp/event/452880?utm_medium=referral&utm_source=ics&utm _campaign=ics END:VEVENT END:VCALENDAR