Asciinema: Jupyter์—์„œ ์บ์ŠคํŠธ๋ฅผ ์žฌ์ƒํ•˜์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ?

์— ๋งŒ๋“  2018๋…„ 03์›” 27์ผ  ยท  10์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: asciinema/asciinema

Jupyter ์…€ ๋‚ด๋ถ€์—์„œ ์ง์ ‘ ์บ์ŠคํŠธ๋ฅผ ์žฌ์ƒํ•˜๋Š” ๋ฐ ์–ผ๋งˆ๋‚˜ ๋งŽ์€ ๋…ธ๋ ฅ์ด ํ•„์š”ํ• ์ง€ ๊ถ๊ธˆํ•ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ์–‡์€ HTML ๋ด‰ํˆฌ์— ํ…์ŠคํŠธ ์ถœ๋ ฅ์„ ๋ž˜ํ•‘ํ•ด์•ผ _ํ•  ์ˆ˜๋„_ ์žˆ์ง€๋งŒ, ์–ด์ฉŒ๋ฉด ๊ทธ๊ฒŒ ํ•„์š”ํ•˜์ง€ ์•Š์„ ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‚˜๋Š” ์›๋ž˜ asciinema-player์— ๋Œ€ํ•œ ๋ฌธ์ œ๋ฅผ ์—ฌ๊ธฐ์—์„œ ์ œ๊ธฐํ–ˆ์Šต๋‹ˆ๋‹ค: https://github.com/asciinema/asciinema-player/issues/85 ํ•˜์ง€๋งŒ ์ „์ฒด ์—†์ด ์บ์ŠคํŠธ๋ฅผ ์ง์ ‘ ๋ณด์—ฌ์ค„ ์ˆ˜ ์žˆ๋‹ค๋ฉด ์—ฌ๊ธฐ๋„ ์ข‹์€ ๊ณณ์ผ ๊ฒƒ์ž…๋‹ˆ๋‹ค. asciinema ํ”Œ๋ ˆ์ด์–ด ๊ธฐ๊ณ„.

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

@deeplook๋‹˜ , Jupyter ๋…ธํŠธ๋ถ์— ๋‚ด์žฅ ์ฝ”๋“œ๋ฅผ ์‚ฝ์ž…ํ•˜๊ณ  Jupyter ๋…ธํŠธ๋ถ์— asciinema ์บ์ŠคํŠธ๋ฅผ ์ง์ ‘ ์‚ฝ์ž…ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

from IPython.display import HTML
HTML("""<script src="https://asciinema.org/a/1wkyfecyj2qa4t9gm4bank61y.js" id="asciicast-1wkyfecyj2qa4t9gm4bank61y" async></script>""")

image

๋งˆ๋ฒ•์˜ ๊ธฐ๋Šฅ %%html ๋„ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค
image

์ด ๋น„๋””์˜ค๋ฅผ ๋ณด์‹ญ์‹œ์˜ค: https://www.useloom.com/share/e606957f1aa0431399c30c1b95cb5207

๋ชจ๋“  10 ๋Œ“๊ธ€

@deeplook๋‹˜ , Jupyter ๋…ธํŠธ๋ถ์— ๋‚ด์žฅ ์ฝ”๋“œ๋ฅผ ์‚ฝ์ž…ํ•˜๊ณ  Jupyter ๋…ธํŠธ๋ถ์— asciinema ์บ์ŠคํŠธ๋ฅผ ์ง์ ‘ ์‚ฝ์ž…ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

from IPython.display import HTML
HTML("""<script src="https://asciinema.org/a/1wkyfecyj2qa4t9gm4bank61y.js" id="asciicast-1wkyfecyj2qa4t9gm4bank61y" async></script>""")

image

๋งˆ๋ฒ•์˜ ๊ธฐ๋Šฅ %%html ๋„ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค
image

์ด ๋น„๋””์˜ค๋ฅผ ๋ณด์‹ญ์‹œ์˜ค: https://www.useloom.com/share/e606957f1aa0431399c30c1b95cb5207

@zodiacfireworks ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค! asciinema.org์—์„œ ํ˜ธ์ŠคํŒ…๋˜๋Š” ์›๊ฒฉ ์Šคํฌ๋ฆฐ์บ์ŠคํŠธ๋ฅผ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์€ ํ™•์‹คํžˆ ๋ฉ‹์ง„ ์ผ์ž…๋‹ˆ๋‹ค.

๋‚ด ์งˆ๋ฌธ์„ ๋‹ค์‹œ ์ฝ์œผ๋ฉด ๊ทธ๋ ‡๊ฒŒ ๋ถ„๋ช…ํ•˜์ง€ ์•Š๋‹ค๋Š” ๊ฒƒ์„ ์ธ์ •ํ•˜์ง€๋งŒ asciinama-player๊ฐ€ ์žˆ๋Š” "์ผ๋ฐ˜" Jupyter ์…€์—์„œ ๋กœ์ปฌ ์Šคํฌ๋ฆฐ์บ์ŠคํŠธ๋ฅผ ์‹คํ–‰ํ•˜๋Š” ๊ฒƒ์— ๋Œ€ํ•ด ๋” ์ƒ๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค. ํ˜„์ง€ ์บ์ŠคํŠธ์—์„œ asciinama-player๋ฅผ ์‚ฌ์šฉํ•ด ๋ณด์•˜์ง€๋งŒ ํ—›์ˆ˜๊ณ ์˜€์Šต๋‹ˆ๋‹ค. ๋กœ์ปฌ ํŒŒ์ผ์— ๋Œ€ํ•ด ์นœ์ˆ™ํ•œ asciinama-player ์ธํ„ฐํŽ˜์ด์Šค๋กœ ์ด ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜๋Š” ๊ฒƒ๋„ ๋งค์šฐ ์ข‹์Šต๋‹ˆ๋‹ค.

ํ•˜์ง€๋งŒ, ์Œ... ์ €๋Š” ๊ฐ€์žฅ ๊ฐ€๋Šฅ์„ฑ์ด ๋‚ฎ์€ ์ผ์„ ์‹œ๋„ํ–ˆ๊ณ  ๋†€๋ž๊ฒŒ๋„ ์ด๊ฒƒ์ด ํšจ๊ณผ ๊ฐ€ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค! ๋‚˜๋Š” ๋‹จ์ˆœํžˆ ์ฝ”๋“œ ์…€์— ! /my/path/asciinema play demo.cast ๋ฅผ ์ž…๋ ฅํ–ˆ์Šต๋‹ˆ๋‹ค! ๊ทธ๋ฆฌ๊ณ  ์†”์งํžˆ ๋งํ•ด์„œ, ๋‚˜๋Š” ์ด๊ฒƒ์ด ํšจ๊ณผ๊ฐ€ ์žˆ์„ ๊ฑฐ๋ผ๊ณ  ๊ธฐ๋Œ€ํ•˜์ง€ ์•Š์•˜์ง€๋งŒ, ํšจ๊ณผ๊ฐ€ ์žˆ๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค! ์ถœ๋ ฅ์€ ํƒ€์ด๋ฐ ์ •๋ณด ๋ฐ ANSI ์ด์Šค์ผ€์ดํ”„ ์ฝ”๋“œ์— ๋”ฐ๋ผ ํ‰์†Œ์™€ ๊ฐ™์ด ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ํ„ฐ๋ฏธ๋„์˜ ๋„ˆ๋น„์™€ ๋†’์ด์— ๋Œ€ํ•ด ๊ธฐ๋ก๋œ ๊ฐ’์„ "๋ฌด์‹œ"ํ•˜์—ฌ ์ „์ฒด ์…€ ๋„ˆ๋น„๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์ˆ˜์ง ์ฐฝ์€ ์ˆ˜ํ–‰ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ด๋ด, ์ด๊ฒƒ์€ ๋†€๋ž๋‹ค!

๊ทธ๋Ÿผ ๋‹ซ์•„๋ณผ๊นŒ์š”? ;)

Asciinema ํ”Œ๋ ˆ์ด์–ด ๋น„ํŠธ๋ฅผ Jupyter์— ์ถ”๊ฐ€ํ•˜์—ฌ ๋กœ์ปฌ ์บ์ŠคํŠธ๋„ ์‹คํ–‰ํ•˜๋„๋ก ํ•˜๋Š” ์ž˜ ์ •์˜๋œ ๋ฐฉ๋ฒ•์ด ์žˆ๋‹ค๋ฉด ๊ทธ๋ ‡๊ฒŒ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ฒ˜์Œ์— ์‹œ๋„ํ–ˆ์ง€๋งŒ ์šด์ด ์—†์Šต๋‹ˆ๋‹ค.

์•„, ์—ฌ๊ธฐ์—์„œ ํ”Œ๋ ˆ์ด์–ด๋ฅผ ํฌํ•จํ•˜๋Š” 3๊ฐ€์ง€ ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์ด์•ผ๊ธฐํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

  1. ํ•˜์œ„ ๋ช…๋ น์„ ํ†ตํ•ด: ! /my/path/asciinema play demo.cast
  2. ํฌํ•จ์„ ํ†ตํ•ด <script> : HTML("""<script src="https://asciinema.org/a/1wkyfecyj2qa4t9gm4bank61y.js" ...
  3. asciinema-player.js + ๋กœ์ปฌ .cast ํŒŒ์ผ์˜ ๋กœ์ปฌ ์‚ฌ๋ณธ์„ ํ†ตํ•ด

2ํŽธ์€ ์ด๋ฏธ ํ’€๋ฆฐ๊ฑฐ ๊ฐ™์€๋ฐ ๋งž๋‚˜์š”?

@deeplook 3์„

@sickill ๋งž์Šต๋‹ˆ๋‹ค. (2)๋Š” asciinema-player๊ฐ€ ์„ค์น˜๋œ ๋‹ค๋ฅธ ์‚ฌ์ดํŠธ์—์„œ๋„ ์ž‘๋™ํ•œ๋‹ค๊ณ  ๊ฐ€์ •ํ•ฉ๋‹ˆ๋‹ค.

์‹ค์ œ๋กœ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ž์ฒด ํฌํ•จ๋œ HTML ํŒŒ์ผ์„ ๊ฐ€๋ฆฌํ‚ฌ ์ˆ˜ ์žˆ๋Š” TermRecord ๋ฅผ ๋”ฐ๋ผ์žก๋Š” ๋ฐ ๋„์›€์ด ๋ฉ๋‹ˆ๋‹ค.

from IPython.display import IFrame
IFrame('http://theonewolf.github.io/TermRecord/hello-static.html', 800, 300)

TermRecord์˜ ํŒŒ์ผ์— ๋ชจ๋“  ๊ฒƒ์ด ์ธ๋ผ์ธ์œผ๋กœ ํฌํ•จ๋˜์–ด ์žˆ์Šต๋‹ˆ๊นŒ? js/data ํŒŒ์ผ์ด ์—†๋Š” ๋‹จ์ผ html ํŒŒ์ผ๋งŒ ์žˆ์Šต๋‹ˆ๊นŒ?

์นœ๊ตฌ๋“ค์ด ์•Œ๋ ค์ค€ ์ด์•ผ๊ธฐ๋ผ ์ž˜ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค. HTML์— JS/CSS๊ฐ€ ํฌํ•จ๋˜์–ด ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค...

CSS/JS ๋ฐ ๋ฐ์ดํ„ฐ๋ฅผ ํฌํ•จํ•˜์—ฌ ๋…๋ฆฝ์ ์ธ HTML blob์„ ์ƒ์„ฑํ•˜๊ธฐ ์œ„ํ•ด asciinema-player์— ์˜ต์…˜์„ ์ถ”๊ฐ€ํ•˜๋Š” ๊ฒƒ์ด ์‰ฌ์šธ ๊ฒƒ์ด๋ผ๊ณ  ๊ฐ€์ •ํ•ฉ๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰