re viewのリアルタイムプレギュー機能をつくってみたよ
TRANSCRIPT
![Page 1: Re viewのリアルタイムプレギュー機能をつくってみたよ](https://reader034.vdocuments.net/reader034/viewer/2022042607/55a2b7e51a28abe70c8b480a/html5/thumbnails/1.jpg)
ReVIEWのリアルタイムプレギュー機能つくってみたよ
2013/8/10 ReVIEWによる書籍制作フローを勉強する会
ビ
13年8月10日土曜日
![Page 2: Re viewのリアルタイムプレギュー機能をつくってみたよ](https://reader034.vdocuments.net/reader034/viewer/2022042607/55a2b7e51a28abe70c8b480a/html5/thumbnails/2.jpg)
自己紹介
name:八木俊広twitter:@sys1yagiblog:http://visible-true.blogspot.jp/
以前本を書いた時にReVIEWを使った事があるけどもう大体忘れた。ムトゥさんにはお世話になりました。ありがとうございました!
13年8月10日土曜日
![Page 3: Re viewのリアルタイムプレギュー機能をつくってみたよ](https://reader034.vdocuments.net/reader034/viewer/2022042607/55a2b7e51a28abe70c8b480a/html5/thumbnails/3.jpg)
もくじ経緯
つくった
デモ
仕組み
今後の展望とか
13年8月10日土曜日
![Page 4: Re viewのリアルタイムプレギュー機能をつくってみたよ](https://reader034.vdocuments.net/reader034/viewer/2022042607/55a2b7e51a28abe70c8b480a/html5/thumbnails/4.jpg)
経緯7/11にvvakameにテクブ本執筆者に追加される(初稿締め切り2日前)
執筆はReVIEWを使って行われていた
最初google drive、途中でgithubも追加
LaTexこわい
売りに出されるひつじ
13年8月10日土曜日
![Page 5: Re viewのリアルタイムプレギュー機能をつくってみたよ](https://reader034.vdocuments.net/reader034/viewer/2022042607/55a2b7e51a28abe70c8b480a/html5/thumbnails/5.jpg)
経緯
13年8月10日土曜日
![Page 6: Re viewのリアルタイムプレギュー機能をつくってみたよ](https://reader034.vdocuments.net/reader034/viewer/2022042607/55a2b7e51a28abe70c8b480a/html5/thumbnails/6.jpg)
つくった1,2時間程度で概ねリアルタイムプレビューWebアプリファイルは1個同時編集すると壊れるエクスポートとかはない。githubで公開
13年8月10日土曜日
![Page 7: Re viewのリアルタイムプレギュー機能をつくってみたよ](https://reader034.vdocuments.net/reader034/viewer/2022042607/55a2b7e51a28abe70c8b480a/html5/thumbnails/7.jpg)
デモ
13年8月10日土曜日
![Page 8: Re viewのリアルタイムプレギュー機能をつくってみたよ](https://reader034.vdocuments.net/reader034/viewer/2022042607/55a2b7e51a28abe70c8b480a/html5/thumbnails/8.jpg)
仕組みサーバ: Node.js
DB: 今のところ使ってない
Node.js
ReVIEW
エディタ(ブラウザ)
①変更を送信
②reファイルを書き換えてreview呼び出し
③終わったでー
④出来たHTMLのデータを返す
13年8月10日土曜日
![Page 9: Re viewのリアルタイムプレギュー機能をつくってみたよ](https://reader034.vdocuments.net/reader034/viewer/2022042607/55a2b7e51a28abe70c8b480a/html5/thumbnails/9.jpg)
導入の仕方nodejs, npm, bower, rubyを入れる
git clone https://github.com/sys1yagi/PreVIEW.gitcd PreVIEW./setup./run.shhttp://localhost:3000/にアクセス
ファイルの場所
PreVIEW/tmp/index.re (編集されるファイル)
PreVIEW/index.html (ビルド後のファイル)
13年8月10日土曜日
![Page 10: Re viewのリアルタイムプレギュー機能をつくってみたよ](https://reader034.vdocuments.net/reader034/viewer/2022042607/55a2b7e51a28abe70c8b480a/html5/thumbnails/10.jpg)
今後の展望ReVIEWプロジェクトを作成してファイル管理する機能差分ビルドプレビューのカスタマイズ(CSS適用)
エクスポート(HTML, PDF)
githubとの連携コラボレータの追加エディタをリッチに(行番号とか自動補完)
チートシート表示ショートカットキーエラー表示(ビルドエラー等)
バグフィックス ( //list[][]{が死ぬ)
etc...
13年8月10日土曜日
![Page 11: Re viewのリアルタイムプレギュー機能をつくってみたよ](https://reader034.vdocuments.net/reader034/viewer/2022042607/55a2b7e51a28abe70c8b480a/html5/thumbnails/11.jpg)
今後の展望ReVIEWプロジェクトを作成してファイル管理する機能差分ビルドプレビューのカスタマイズ(CSS適用)
エクスポート(HTML, PDF)
githubとの連携コラボレータの追加エディタをリッチに(行番号とか自動補完)
チートシート表示ショートカットキーエラー表示(ビルドエラー等)
バグフィックス ( //list[][]{が死ぬ)
etc...
エンジニアじゃなくても使えるサービスへ?
13年8月10日土曜日
![Page 12: Re viewのリアルタイムプレギュー機能をつくってみたよ](https://reader034.vdocuments.net/reader034/viewer/2022042607/55a2b7e51a28abe70c8b480a/html5/thumbnails/12.jpg)
おわりにソースとか: https://github.com/sys1yagi/PreVIEW
とりあえず触る(動いてない時もある):
http://ec2-54-214-204-32.us-west-2.compute.amazonaws.com:3000/
pull requestを待ち続ける
13年8月10日土曜日