레이블이 유틸리티인 게시물을 표시합니다. 모든 게시물 표시
레이블이 유틸리티인 게시물을 표시합니다. 모든 게시물 표시

2019년 5월 9일 목요일

터미널 화면을 녹화하여 동영상으로 만들기 (Asciinema)




asciinema : https://asciinema.org/


asciinema를 이용하면 터미널에서 어떠한 타이핑 작업 내용을 화면 그 자체로 녹화를 할 수 있어 굉장히 유용하다.
또한 asciinema가 터미널 화면을 녹화 후, 자동으로 웹 링크 동영상까지 만들어주기 때문에 동영상을 찍어서 직접 업로드를 하는 번거로운 작업이 없다.  

 이 asciinema를 여러모로 응용할 수가 있는데, 
 녹화된 콘솔 화면 자체를 보여줌으로써 동영상을 보고 이해하고 따라할 수 있는 가이드용으로 쓸 수 있다.  
 즉 솔루션 설치 과정이나 간단히 터미널에서 하는 작업들을 녹화하여 IT 업무상의 고객 응대 혹은 작업기록용으로도 쓰면 좋을 것 같다.



* 설치 환경

CentOS 6 에서 설치를 진행하였다.
또한 asciinema 설치하기 앞서 python3이 필요하다.
python3버전이 이미 설치되어 있다면 이 과정을 건너뛰고 asciinema 만 설치하면 된다.


(1) centos 6 epel repository 설치
yum으로 epel을 설치한다.
yum install -y http://dl.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8.noarch.rpm

(2) yum python 설치
yum install -y python3 python34-devel python34-setuptools   


(3) python 설치 확인
python3 을 입력하면 아래와 같이 보이면 성공이다.

# python3
Python 3.4.10 (default, Apr  8 2019, 02:18:20) 
[GCC 4.4.7 20120313 (Red Hat 4.4.7-23)] on linux>
Type "help", "copyright", "credits" or "license" for more information.
>>> 

(4) pip3 설치
# cd /usr/lib/python3.4/site-packages/ 
# ll
합계 24
drwxr-xr-x 2 root root 4096 2019-05-09 09:43 __pycache__
drwxr-xr-x 3 root root 4096 2019-05-09 09:43 _markerlib
-rw-r--r-- 1 root root  126 2016-01-31 02:43 easy_install.py
drwxr-xr-x 5 root root 4096 2019-05-09 09:43 pkg_resources
drwxr-xr-x 5 root root 4096 2019-05-09 09:43 setuptools
drwxr-xr-x 2 root root 4096 2019-05-09 09:43 setuptools-19.6.2-py3.4.egg-info
 
# python3 easy_install.py pip



(5) asciinema 설치
# pip3 install asciinema
DEPRECATION: Python 3.4 support has been deprecated. pip 19.1 will be the last one supporting it. Please upgrade your Python as Python 3.4 won't be maintained after March 2019 (cf PEP 429).
Collecting asciinema
  Downloading https://files.pythonhosted.org/packages/a7/71/771c859795e02c71c187546f34f7535487b97425bc1dad1e5f6ad2651357/asciinema-2.0.2.tar.gz
Installing collected packages: asciinema
  Running setup.py install for asciinema ... done

Successfully installed asciinema-2.0.2

여기까지 asciinema 설치가 완료되었다.

* asciinema 로 녹화하기
터미널 창에 단지 asciinema rec만 치면 그 후부터 녹화가 시작된다.


# asciinema rec
asciinema needs an ASCII or UTF-8 character encoding to run. Check the output of `locale` command.
혹시 위와 같이 UTF-8이 필요하다고 나오는 경우 아래와 같이 입력한다. 

# export LANG=ko_KR.utf-8



# asciinema rec
asciinema: recording asciicast to /tmp/tmpcyzurpjo-ascii.cast
asciinema: press <ctrl-d> or type "exit" when you're done

# 

asciinema rec 명령어를 친 이후부터 녹화가 진행되고 있는 것이니 녹화하고자하는 명령어등을 입력해본다.


녹화를 끝내고 싶다면 exit 명령어를 입력한다.
exit를 입력하고 asciinema.org에 업로드를 하고 싶다면 enter를 치면 업로드가 되면서 녹화한 동영상의 웹 url이 보이게 된다.
asciinema에 계정이 없이 동영상을 만들었다면 웹에 업로드한 영상은 7일까지만 보관이 된다고 하니 동영상을 웹에 보존하고 싶다면 asciinema에 계정을 만들자.

# exit
exit
asciinema: recording finished
asciinema: press <enter> to upload to asciinema.org, <ctrl-c> to save locally

View the recording at:

    https://asciinema.org/a/xxx 녹화한 동영상의 주소.

This installation of asciinema recorder hasn't been linked to any asciinema.org
account. All unclaimed recordings (from unknown installations like this one)
are automatically archived 7 days after upload.


If you want to preserve all recordings made on this machine, connect this
installation with asciinema.org account by opening the following link:

# 

터미널에서 직접 동영상을 재생할 수도 있다.
또한 동영상이 재생되는 도중에 영상의 텍스트를 복사할 수도 있다.
asciinema usage는 아래의 링크에서 자세히 나와있다. https://asciinema.org/docs/usage


* asciinema.org 계정 생성
asciinema 웹에서 계정을 이메일 생성한다.
그리고 asciinema를 설치한 서버에서 asciinema auth 명령을 입력한다.


# asciinema auth 
Open the following URL in a web browser to link your install ID with your asciinema.org user account:

https://asciinema.org/connect/xxxx

This will associate all recordings uploaded from this machine (past and future ones) to your account, and allow you to manage them (change title/theme, delete) at asciinema.org.

# 

중간에 url로 접속해보면 내 계정과 동영상들이 연결되어 웹에서 보이게 될 것이다.




2019년 1월 20일 일요일

구글 블로그(Blogger)에 소스 코드 깔끔하게 보이기 - highlight.js


구글 블로그에서 소스코드를 올릴 때 깔끔하고 보기 좋게 하기 위한 설정 방법을 찾다가 highlightjs 가 간단하고 편하다길래 공식 사이트에서 보니 맘에 든다.
앞으로 이것을 이용하여 소스들을 보기 좋게 올리려고 한다.

* https://highlightjs.org/  에서 메뉴얼 및 스크립트를 다운로드 할 수 있다.

highlightjs 장점은 185개의 다양한 언어와 89개의 스타일을 지원, 소스 언어 종류를 자동으로 감지, 다국어 코드들을 강조 표시, node.js에서 이용할 수 있고, 모든 js 프레임워크들과 호환이 가능하다고 한다.


  •  구글 Blogger 설정 방법
1. highlight.js 삽입
블로거 메뉴의 테마 > HTML 편집 에서 <head></head> 태그 사이에다가 아래 코드를 삽입하고 저장한다.

<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/solarized-dark.min.css' rel='stylesheet'/>
 <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js'/>
   <script>hljs.initHighlightingOnLoad();</script>


세번째 줄의 initHighlightingOnLoad();를 호출을 해야지만이 css 스타일이 활성화 된다.
다른 코드 스타일로 변경하고 싶다면 highlight 스타일 목록 을 참고하고, 원하는 css 이름을 위의 첫 줄에서 css 명만 수정을 해주면 된다. 여기 게시글의 스타일은 zenburn 스타일이 반영되어있다.
<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/zenburn.min.css' rel='stylesheet'/>



2. 변경할 코드 태그로 감싸기
아래와 같이 <pre><code></pre></code>로 감싸고 이 안에 블로그에 올릴 코드를 적으면 된다.
<pre><code class="html">...</code></pre>

다만 HTML같은 경우  꺽쇠와 같은 특수문자는 코드로 작성해주어야 출력이 된다.

*문자열 이스케이프 자동 변경 사이트 참고
https://www.freeformatter.com/html-escape.html
https://accessify.com/tools-and-wizards/developer-tools/quick-escape/


3. 폰트 바꾸기
2번까지만 세팅했을 때 폰트까지는 변경이 안된다.
보기 좋은 폰트로 변경하려면 위에 <code><pre> 태그에 css 설정을 지정해주면 된다.
테마 > 맞춤 설정 > 고급 > CSS 추가 로 들어가서 아래와 같이 font-family 를 지정해준다.

 pre > code {
    font-family: "Sans Mono", "Courier New", "Courier", monospace;
}

cf) font-family
* family-name : 폰트명. Sans Mono, Courier , 바탕체 등.
* generic-family :  비슷한 폰트 계열들의 명칭. Serif, monospace 등.
monospace 속성은 가로 폭이 동일한 글꼴 속성이며 먼저 폰트명을 나열한 후, 마지막에 generic-family를 적는다.

참고)
https://www.w3schools.com/cssref/pr_font_font-family.asp


홈