2016년 6월 29일 수요일
2015년 10월 1일 목요일
JINGO !!!
JINGO !!!
개요
- 깃허브 홈페이지 : https://github.com/claudioc/jingo
- 한 줄 소개 : node.js로 작성한 Git 기반 위키엔진. 봐줄만한 디자인, 검색기능, 미려한 폰트.
Introduction
- Git과 Markdown을 중심으로 한 문서작성체계를 가지고 싶은 사람을 위해 만들어졌음.
- 복잡하고 과잉기능의 도구에 질려버린 사람에게 좋음.
- Github 자체 위키 엔진인 Gollum의 영향을 강하게 받았음.
- 다만, Gollum 보다는 좀 더 독립실행에 유리하도록 완결성을 주었음.
- "Github 없이도 쓸 수 있는 좀 더 강력한 Github 위키"
- Jingo = Jingo is not Gollum
- 데모 홈페이지 : http://jingo.cica.li:6067/wiki/home
Features
- 데이타베이스 사용하지 않음 : 대신 Git 레포지토리 기능을 활용함
- 사용자 관리 불필요 : 구글계정,깃허브 계정으로 간단히 로그인하는 기능 지원
- 완벽한 마크다운 문법 지원 : 깃허브향 마크다운도 지원
- Codemirror 또는 Markitup 사용 : 훌륭한 ajax 보여주기 (설정 파일 참조)
- 전화면 에디터 모드 지원 : 집중력 강화
- Gollum 위키에서 만든 문서와 호환
- 모든 문서에 버전 관리 지원
- 상이한 버전의 문서간에 비교 기능 지원
- 모든 문서에 페이지 매기기 기능 지원 : 버전 간에 변화된 부분을 빨리 찾을 수 있음
- 내용 및 제목 검색 지원
- Sidebar, Footer 레이아웃 설정 가능
- Gravatar(개인 아바타) 지원
- IFRAME 삽입 가능 (예 : 구글 드라이브 문서를 embed할 수 있음)
- 커스텀 CSS 및 Javascript 적용 가능
- 문서를 읽고 쓸 때 권한을 줄 수 있는 화이트리스트 지원
- 빈 페이지 검출 기능 (붉은 색으로 나타남)
- Remote로 자동 Push 기능
- 모바일 대응 (Bootstrap 3.X 기반)
- 간편한 설정
Installation
node.js 및 npm 설치
- 우분투 리눅스 14.04 기준. Git이 설치되어 있을 것.
sudo apt-get install nodejs nodejs-legacy npm
Jingo 설치
sudo npm install jingo
Git 설정하기
mkdir /home/홈폴더/jingo
cd /home/홈폴더/jingo
git init
git config --global user.name "아이디"
git config --global user.email "이메일"
Jingo 기본형 설정파일 만들기
jingo -s > config.yaml
Jingo 로그인 비밀번호 해쉬코드 만들기
jingo -# 비밀번호
- 위의 명령을 치면 해쉬코드가 나온다. 그걸 긁어서 복사해 둔다.
config.yaml 편집하기
- 편집기로 config.yaml을 열어서 다음의 내용을 손 봐준다.
---
# Configuration sample file for Jingo (YAML)
application:
title: Jingo
repository: '/home/홈폴더/jingo' <--- Git 저장소로 설정한 디렉토리 절대경로
docSubdir: ''
remote: ''
pushInterval: 30
secret: change me
git: git
skipGitCheck: false
loggingMode: 1
pedanticMarkdown: true
gfmBreaks: true
staticWhitelist: "/\\.png$/i, /\\.jpg$/i, /\\.gif$/i"
authentication:
google:
enabled: false <--- Google 로그인은 일단 비활성화 해 두자.
clientId: replace me with the real value
clientSecret: replace me with the real value
github:
enabled: false <--- Github 로그인도 일단 비활성화 해 두자.
clientId: replace me with the real value
clientSecret: replace me with the real value
local:
enabled: true <--- 로컬 로그인만 활성화 해 두자.
accounts:
- username: '아이디' <--- 아이디
passwordHash: '해쉬코드' <--- 아까 만들어서 복사해 둔 해쉬코드를 넣어준다.
email: '이메일' <--- 이메일
features:
markitup: false
codemirror: true
server:
hostname: localhost
port: 6067
localOnly: false
baseUrl: ''
authorization:
anonRead: true
validMatches: .+
pages:
index: Home
title:
fromFilename: true
fromContent: false
asciiOnly: false
lowercase: false
itemsPerPage: 10
customizations:
sidebar: _sidebar.md
footer: _footer.md
style: _style.css
script: _script.js
Jingo 첫 실행
jingo -c /home/홈폴더/jingo/config.yaml
- 잘 되나? 잘 되면 설정해 둔 아이디와 패스워드로 로그인 한 후, 첫번째 home 문서부터 작성해 보자.
남은 일들
- Github와 연동시키기 : 나중에 천천히 하자.
- Google 및 Github 계정으로 간편 로그인 기능 설정하기 : 나중에 천천히 하자.
- 다른 Javascript 스크립트 먹이기 : 나중에 천천히 연구해 보자.
- 서버에 올려서 서비스하기 : 나중에 천천히 연구해 보자.
2015년 6월 24일 수요일
개인 위키를 어디다 만들까?
개인 위키를 어디다 만들까?
블로그에다가 각종 테스트한 것들을 계속 올려보니 문서들의 조직화가 안되기 때문에 한계성을 느끼게 되었다. 또 html을 직접 건드리면서 편집하는것도 이제는 염증이 생긴다.
그래서 위키 쪽으로 생각을 해 보았는데, 집에다가 서버 돌릴 생각하니 너무 끔찍해서 그냥 공짜로 위키를 쓸 수 있는 방안을 모색해 보기로 했다.
* 첫번째 시도
일단 맨 처음에는 호스팅 업체 쪽에서 제공하는 무료 플랫폼을 알아봤는데, 고르고 골라 본 게 호스팅어(Hostinger) 였다.무료계정 신청하고 들어가 보니, 온갖 패키지들을 원클릭으로 설치해서 사용할 수 있도록 엄청나게 잘 되어 있었다. 미디어위키 역시 그냥 누르고 설정만 몇 개 해 주니까 그냥 쨔잔 하고 되는게 아닌가!!!
다만 서버가 영국에 있다고 나오는지라 반응 속도는 조금 느린 편이지만 못 쓸 수준은 아니고 상당히 좋았다. 제공 용량도 충분하고...
하지만 문제점은, 처음 셋팅하고 이것저것 건드려보다 보니 갑자기 접속이 끊어져 버리는 현상이 나타났다. CPU 점유율이 올라가면 서버쪽에서 트리거링 되어서 자동으로 접속 끊어버린다고 하던데 이것도 그런 경우인가 싶기도 한데, 이런 현상이 자주 나타난다면 신뢰성 측면에서 도저히 안심이 되질 않는다. 데이타가 통째로 날아가 버리는 사태가 발생할 확률이 아무래도 무시 못할 듯 하다.
또 호스팅 형식으로 한다면 패키지 버전 관리다 뭐다 해서 골치아픈 일이 많을 것 같다.
결국 보류해 두기로 했다.
* 두번째 시도
꼭 개인 계정으로 꽁꽁 숨겨둘 필요는 없으므로, 다른 관점에서 접근해 보기로 했다.바로 위키독스(WikiDocs)로 온라인 책을 써 보는 거다.
위키독스 만든 분도 꽤 괜챦은 개념인 같아 보여서 믿음도 가고, 또 내용이 풍부해지면 공개해서 기여도 할 수 있을 것 같아서 좋아 보인다.
게다가 마크다운 태그 기반으로 먹일 수 있어서 더 좋다. 세심하게 개발되어 있어서, 그림을 업로드해서 붙여주는게 거의 원클릭으로 된다.
단점은 위키독스 같은 서비스는 거의 전부 소프트웨어 개발자들 위주의 것들이다보니 기계공학 쪽 주제로 하면 왠지 혼자만 튈 것 같아 좀 쪽팔린다.
또 너무 퍼블릭한 서비스라서 완성도가 낮은 결과물일 경우에도 쪽팔림이 있을까 두렵네... 책을 쓴다는 느낌은 아무래도 부담스럽다.
또하나 치명적인 단점은, 데이타를 내 쪽으로 통째로 백업받는 기능이 안 보인다. 그냥 전부 온라인에서 작업하는 것만 가능한 것 같다. 이렇게 하는게 간단하긴 한데 그래도 뭔가 안되는게 있으니 찜찜한 느낌이다.
* 세번째 시도
깃허브(GitHub)에서도 위키가 있으니 그걸 써 볼까 싶은 생각이 들었다. 실제로 그런식으로 쓰는 사람도 있다고 하니...이걸 쓰면 부수적인 효과로 Git 공부도 되고 좋겠다 싶다.
그림 올리는 건 Issues 기능에다가 그림 올린 다음에 그걸 퍼다 쓰면 되는 꼼수가 있는 것도 알았다. 또 자체 홈페이지 운영도 가능하므로 웹을 잘 다룰 수 있게 된다면 그것도 좋을 듯 하다. 일단 최고로 간단하게 설정해서 만들어 봤는데, 나름대로 봐줄만 하긴 하다. 문제는, 나는 웹개발에 별 관심이 없다는 거다. 앵귤라, 부트스트랩, 지킬 등 온갖 자바스크립트 프레임웍들을 이용해서 뭔가를 만들거나 다뤄야 하는데 영 자신도 없고 의지도 없다. 이거 공부해서 팔 거면 진작에 웹 개발자 했겠지... ㅋㅋ
그냥 있는거 갖다 써서 운영하는 것도 가능하므로 욕심만 안 내면 되긴 되겠다.
확실한 건 깃허브가 요즘 대세이고, 그게 아주 오래 갈 것 같다.
대세에 편승한다는 점에서는 장점이 있을지도 모른다.
이상 세가지 경우에 대해서 시험삼아 기본적인 셋팅은 전부 다 해 봤다.
전부 다 운영하는건 미친 짓이므로 하나를 골라야 될 텐데, 어느쪽이 좋을지 아직 확실히 잘 모르겠지만 현재까지는 깃허브 쪽으로 마음이 기우는 듯 하다.
마크업 태그는 사용해 본지 얼마되진 않았는데, 사내 자료 축적용으로 운영하는 미디어위키에다가 자료들을 작성해 보니 꽤 좋다는 느낌이 들었다.
위키독스 및 깃허브 쪽은 미디어위키의 것보다 좀 더 발전된 마크다운을 사용하도록 되어 있는데, 써보니까 좀 더 간결해서 더 좋다는 느낌이 들었다.
아무튼 점수를 내 보니까, 첫번째 호스팅 서비스 쓰는것은, 확장성이나 자유도 면에서는 우월하지만, 유지관리에 들어가는 리소스가 너무 많을 것이므로 아무래도 피하는게 맞는 것 같다.
위키독스는 내용작성 그 자체에만 집중하는데는 좋겠지만 부수적 효과는 기대하기 어렵다.
깃허브는 이왕 하는 김에 Git도 좀 다뤄보고 하면 일석이조가 될 것 같다. 신뢰성도 가장 월등하고 용량제한도 없고... 또 clone 해서 오프라인으로 작업해도 무방하고...
어차피 독자를 염두에 두고 기록을 남기는 것도 아니므로, 깃허브로 가는게 맞지 않나 하는 생각이 든다.
2014년 11월 22일 토요일
*.dwg viewing on Web
*.dwg viewing on Web
웹에서 *.dwg 파일 보기
https://www.sharecad.org/ko
이곳에서 제공해 주는 서비스를 이용해 본다.
아래와 같은 코드를 html상에 넣어준다.
<iframe src="//sharecad.org/cadframe/load?url=http://www.cadsofttools.com/dwgviewer/floorplan.dwg" scrolling="no"></iframe>
그러면 아래와 같은 창이 삽입되어 나온다.
즉 *.dwg 파일이 위치한 URL 주소만 있다면 웹에서 볼 수 있다!!
만세!!
그런데 프레임 사이즈가 너무 작아서 맘에 안든다.
이렇게 바꿔 써 보자.
<iframe width="700px" height="500px" scrolling="no" src="//sharecad.org/cadframe/load?url=http://www.cadsofttools.com/dwgviewer/floorplan.dwg"></iframe>
아무래도 해외 서비스라 그런지 속도가 좀 버벅대는 건 있다....
하지만 되는 거 자체로 감지덕지..
그럼 이제 내가 그린 dwg 파일을 올려보자.
호환성을 고려하여 Autocad 2000 버전의 dwg로 저장하였고,
구글드라이브에 올려서 웹공유 상태로 설정 한다음, 그 주소를 추출해서 넣었다.
<iframe width="700px" height="600px" scrolling="no" src="//sharecad.org/cadframe/load?url=https://www.googledrive.com/host/0B3VzdmodvgcIb0M3d2pGVm1uVmM/hrd1_tube_conduit.dwg"></iframe>
나의 구글드라이브에 올린 파일이라 그런지 일단 반응 속도가 훨씬 나은 것 같다.
쓸만 하네!!
게다가 호환 파일은 다음과 같다.
AutoCAD DWG, DXF; HPGL PLT, SPL; STEP STP, IGES IGS, SAT, CGM, SVG
2014년 11월 18일 화요일
언어별 계산 수행 시간 비교
언어별 계산 수행 시간 비교
V8 JIT를 사용한 JavaScript의 위엄이 역시 단연 돋보인다.그리고 Julia는 예전부터 계속 봐 왔는데 이놈의 비밀은 대체 뭘까..
from http://julialang.org/
https://drive.google.com/open?id=1whbZwP4ijG0mBxqIDO0gHdWYIOsZzB9GxVGnWpZvmLQ&authuser=0
2014년 11월 6일 목요일
Including some JavaScripts into my Google Blogger (2)
Including some JavaScripts into my Google Blogger (2)
내 구글 블로그에 몇가지 자바스크립트 기능 추가하기 (2)
기존에 구글 블로거 템플릿의 <head> 안에 추가한 JavaScript들은, 모두 해당 JS들의 원래 제공처 위치를 링크시킨 것이었다.
그래서 그것들을 전부 다운로드 받아, 나의 구글 드라이브에 저장하고 웹공유를 하도록 설정한 다음 다시 고쳐써서 적용하여 보았다.
<link href='https://www.googledrive.com/host/0B3VzdmodvgcINEMtRTA3SVVUM28/highlight/styles/monokai_sublime.css' rel='stylesheet'/>
<script src='https://www.googledrive.com/host/0B3VzdmodvgcINEMtRTA3SVVUM28/highlight/highlight.pack.js'/>
<script>hljs.initHighlightingOnLoad();</script>
<script src='https://www.googledrive.com/host/0B3VzdmodvgcINEMtRTA3SVVUM28/MathJax/MathJax.js' type='text/javascript'>
MathJax.Hub.Config({
HTML: ["input/TeX","output/HTML-CSS"],
TeX: { extensions: ["AMSmath.js","AMSsymbols.js"],
equationNumbers: { autoNumber: "AMS" } },
extensions: ["tex2jax.js"],
jax: ["input/TeX","output/HTML-CSS"],
tex2jax: { inlineMath: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
processEscapes: true },
"HTML-CSS": { availableFonts: ["TeX"],
linebreaks: { automatic: true } }
});
</script>
<script src='https://www.googledrive.com/host/0B3VzdmodvgcINEMtRTA3SVVUM28/ProcessingJS/processing.min.js' type='text/javascript'/>
Highlight 잘 먹는거 확인 되었고..
$\frac{1}{2x_k^2+3x_k-7}$
$\frac{\partial y}{\partial x}$
$\sum_{i=1}\frac{\partial y}{\partial x}^{n}{X_i^2}$
$\sum_{i=1}^{n}{X_i^2}$
$\begin{pmatrix} a_{11} & a_{12} & a_{13}\\ a_{21} & a_{22} & a_{23}\\ a_{31} & a_{32} & a_{33} \end{pmatrix}$
$\begin{pmatrix} a_{11} & \cdots & a_{1n}\\ \vdots & \ddots & \vdots\\ a_{m1} & \cdots & a_{mn} \end{pmatrix}$
$\overrightarrow{AB}$
$\vec{F}=m\vec{a}$
$e=m c^2 $
$\vec{F}=m \frac{d \vec{v}}{dt} + \vec{v}\frac{dm}{dt}$
MathJax 역시 잘 먹는다.
다만 상당히 무겁다는게 느껴진다.
가볍게 하려면 옵션을 이리저리 만져줘야 할텐데, 일단 머리아프니깐 생략.
마지막으로 Processing.js는....?
Processing Script는 아래의 것을 사용해 본다.
<script type="application/processing">
// 2-links arm
// for test of pushMatrix() & popMatrix()
// by dongkim
int arm1_length = 70;
int arm1_width = 20;
int arm2_length = 70;
int arm2_width = 20;
void setup()
{
size(300,300);
}
void draw()
{
background(0);
pushMatrix();
translate(width/2,height/2);
rotate(PI*mouseX/(width/2)+2*PI);
rect(-arm1_width/2,0,arm1_width,arm1_length);
pushMatrix();
translate(0,arm1_length);
rotate(PI*mouseY/(height/2)-PI);
rect(-arm2_width/2,0,arm2_width,arm2_length);
popMatrix();
popMatrix();
}
</script>
<canvas></canvas>
이걸 집어넣고 돌려보면....
안나오네.. 쩝. 망했다.
뭐가 잘못된거지... ㅠㅠ
음. 구글 드라이브 동기화가 아직 덜 됐구나..
동기화 다 되고 나서 확인해 봐야겠음.
---> 동기화 되어서 파일 다 올라간 후에 확인해 보니 잘 되넹.
이전에 github에서 제공하는 URL을 script로 링크시켰을 때는 파이어폭스 이외에는 작동이 안 되던데, 구글 드라이브에 설치하고 해 보니깐 잘 된다.
이유는 모르겠....
* 확인해 본 환경
1.윈도우7 : 파폭,크롬,IE
2. 리눅스 : 파폭,크롬
3. 안드로이드 : 파폭, 크롬, 돌핀
--> 안드로이드에서는 마우스 대신 터치 인터페이스라서, 마우스와는 미묘하게 다른 것 같다.
Processing.js를 심어넣고 위에 걸 해 보니깐 브라우저의 마우스 입력과 겹쳐서 제대로 동작이 안 되는 것 처럼 보인다. 하지만 sketchpad.cc에서 제공하는 Processing.js 서비스에서는 팽팽 날아다닌다. 똑같은 스크립트인데 뭐가 다른 거지....
어설프게 뭘 해 보려니깐 제대로 되는게 없다. 쩝.
Including some JavaScripts into my Google Blogger (1)
Including some JavaScripts into my Google Blogger (1)
내 구글 블로그에 몇가지 자바스크립트 기능 추가하기 (1)
구글 블로거에 외부의 자바스크립트 기능을 추가하기 위해서는 다음의 절차를 따른다.
우선 (1)번의 '디자인' 버튼을 누른다.
그러면 위의 화면으로 들어가 지는데, (2)번의 '템플릿' 버튼을 눌러서 들어간 후에, (3)번의 'HTML 편집' 버튼을 누른다.
그러면 템플릿의 소스코드가 나오는데, 여기의 <head>...</head> 안에 (4),(5),(6)번 내용을 써 넣어 준다.
그러면 모든 블로그의 페이지들에 해당 자바스크립트 기능이 먹어들어간다.
여기서 시도한 (4),(5),(6)번의 내용은 아래의 3가지 기능을 작동하게 해 준다.
- 소스코드 하일라이팅 기능 추가
- 수식 편집 및 표현 기능 추가
- Processing 스크립트 실행 기능 추가
각 기능을 구현하기 위해 선택한 자바스크립트들은 다음과 같다.
들어간 태그의 내용은 다음과 같다.
<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/styles/zenburn.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>
<script src='http://cdn.mathjax.org/mathjax/latest/MathJax.js' type='text/javascript'>
MathJax.Hub.Config({
HTML: ["input/TeX","output/HTML-CSS"],
TeX: { extensions: ["AMSmath.js","AMSsymbols.js"],
equationNumbers: { autoNumber: "AMS" } },
extensions: ["tex2jax.js"],
jax: ["input/TeX","output/HTML-CSS"],
tex2jax: { inlineMath: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
processEscapes: true },
"HTML-CSS": { availableFonts: ["TeX"],
linebreaks: { automatic: true } }
});
</script>
<script src='https://raw.githubusercontent.com/processing-js/processing-js/v1.4.8/processing.min.js' type='text/javascript'/>
적용후 확인을 해보니...
Highlight.js 는 위와 같이 잘되고 있다.
이때 사용된 <pre><code>...</code><pre> 태그를 사용해서 그 안에 내용을 넣으면 된다고 한다.
다만 html 소스 내용을 넣을 때, 각괄호 '<' 같은 것들 때문에 제대로 안 될 때는...
http://www.jeremymartin.name/projects.php?project=asciible
요기 들어가서 소스코드 자체를 특수문자 시스템으로 변환해 준 후에 복사해서 퍼 넣어주면 된다.
MathJax.js 역시 확인을 해 보면
$\frac{1}{3x^2 +2x-1}$
위 내용은 아래와 같이 html에서 집어 넣어준 것이다.
<span style="font-size: x-large;">
$\frac{1}{3x^2 +2x-1}$
</span>
잘 나온다.
사이즈는 블로거 온라인 편집기상에서 그냥 조절해 준 것이다.
위의 MathJax.js를 활성화시켜주는 트리거링 코드가
,
같은 것들로 설정되어 있으므로 가급적 이 블로그에서는 이 문자들을 사용하지 않는 것이 좋겠다.하지만 Processing.js는 크롬/IE에서 안된다.
Firefox에서는 되기도 하고 안되기도 한다. (이리저리 바꿔본 결과)
나중에 시간 나면 고쳐 봐야징...
그나저나 구글 블로거는 아무리 봐도 뭔가 어설프게 만들다 만 것 같다.
구글플러스 연계된 모바일 중심의 다른 구글 서비스들과는 완성도 면에서 왠지...
모르긴 몰라도 구글 내부적으로도 아마 힘없는 개발팀에 속할 듯...
******** Ref.
*** Highlight.js 관련 참고
https://highlightjs.org/
http://istudy.tistory.com/255
*** MathJax.js 관련 참고
* 참고
http://holdenweb.blogspot.kr/2011/11/blogging-mathematics.html
http://docs.mathjax.org/en/latest/start.html#mathjax-cdn
http://webapps.stackexchange.com/questions/47428/mathjax-setting-in-blogger
http://dlimpid.tistory.com/entry/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%97%90%EC%84%9C-Markdown%EA%B3%BC-MathJax-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0
피드 구독하기:
글 (Atom)