오픈소스모음

액세스 해석을 사용하면 사용자가 어떻게 방문하고 있는지 알 수 있습니다. 그러나 페이지에서 어떤 식으로 움직이는 지 모릅니다. 거기에 뭔가 문제가있어 페이지를 닫아 버리고있는 가능성도 있습니다. 그런 사용자의 작업을 기록, 재현 해주는 것이 Spy입니다. 액세스 해석과 함께 사용해 보면 재미있을 것입니다. Spy 사용법 Spy의 움직임입니다. 자신이 한 마우스 조작이 그대로 재현됩니다. Spy 페이지를 표시하는 순간부터 기록이 이루어지고 있습니다. 그리고 데이터를 순차적으로 업로드 할 수 있습니다. 이 데이터를 합쳐서 사용자가 수행 한 작업 (클릭 스토 등)을 재현 할 수있는 구조입니다. 프라이버시에 대한 배려는 필요하지만, Web 사이트의 테스트와 함께 사용해도 좋을 것입니다. Spy는 JavaScri..

텍스트만으로 모든 것을 설명하고자한다 무심코 글이 많아지는 경향이있다. 그러나 단축시키면 너무 전해지지 않게되어 버립니다. 균형이 중요하지만, 그것은 종이와 같은 정적 텍스트의 경우라고 할 수 있습니다. Web이면 더 동적으로 사용자 조작에 따라 콘텐츠를 제공 할 수도있을 것입니다. 그래서 사용해보고 싶은 것이 Expounder입니다. Expounder 사용법 Expounder 데모입니다. 밑줄이있는 문자를 클릭하면 내용이 추가됩니다. 주로 단어의 설명이거나 보충하는 내용을 표시 할 수 있습니다. 단어를 이미 알고있는 사람에게하면 중복적인 설명은 필요 없으며 툴팁처럼 마우스를 맞추고 않아도되는 것이 편리합니다. 문장은 다음과 같이 준비합니다. In the land of Mordor, in the fire..

지금은 클라우드 스토리지 서비스가 다수 존재합니다. 몇개의 서비스를 이용하거나, 회사와 개인 프로젝트 등 스토리지 서비스가 다른 분도 많은 것은 아닐까요. 그런 분들에게 추천하는 것이 rclone입니다. 여러 클라우드 스토리지를 명령 줄에서 조작 할 수있는 편리한 도구입니다. rclone 사용법 예를 들어 Dropbox 경우 다음과 같이 명령을 치면 내포하고있는 파일 목록이 있습니다. $ rclone ls Dropbox:/2016/05/24 11:42:42 Transferred: 0 Bytes ( 0.00 kByte/s)Errors: 0Checks: 0Transferred: 0Elapsed time: 1m0.9s 2925 .emacs.d/elisp/el-get/.loaddefs.el 25 .emacs.d..

메모하는 것은 중요한 것으로, 축적 된 메모는 후일 큰 의미를 가지고 있습니다. 따라서도 쉽게 할수 있어야 하며 한 곳에 모아 쓸 수있게해야합니다. 산재되어 있는 메모는 검색에 크게 도움이되지 않습니다. 회사라면 메모는 모두 한 곳에 담아 두어야 합니다. 이를 통해 몰랐던 새로운 지식으로 갈 수도 있습니다. 그것을 가능하게하는 것이 Crowi입니다. Crowi 사용법 먼저 로그인합니다 여기가 주 화면에서 뷰어에 해당합니다. 여기에는 프로필 화면. 이 화면을 편집 할 수 있습니다. 오른쪽 상단의 아이콘을 클릭하면 새 메모를 작성할 수 있습니다. 편집 화면입니다. Markdown을 사용합니다. 이미지 업로드는 드래그 앤 드롭 할 수 있습니다. 자동으로 URL이 바뀌어 미리보기도 업데이트됩니다. 업데이트 내역..

HTML5에 의해 UI 주위는 크게 개선되었습니다만, 그래도 아직 부족하다고 느끼는 것이 많습니다. 그 결과 외부 라이브러리를 도입하지 않을 수 없어 호환성이나 조합에 의한 문제가 발생할 수 있습니다. 이번에는 많은 풍부한 UI 라이브러리를 제공하는 Zebra를 소개합니다. Zebra 절대로 다른 라이브러리를 사용 않고도 풍부한 Web 응용 프로그램을 개발할 수있을 것입니다. Zebra 사용법 샘플입니다. 대각선으로되어있는 부분도 구성 요소입니다 탭을 클릭하고 표시를 전환 할 수 있습니다. 곡선 그래프. 키보드 단축키 설정, 해제가 전환되는 구성 요소입니다. 구성 요소의 선택을 전환하는 데모. 드래그 앤 드롭 할 수있는 그래프. 세세한 표시 위치 제어. 마우스 추적. 복잡한 모양 안에 텍스트 상자. 이쪽..

Swagger는 Web API 표준 기술 포맷으로 알려지고 있습니다. 표준이있는 것은 그것을 사용하고 있으면 동일한 데이터를 사용하여 다른 형식이나 서비스에서 사용할 수있게합니다. 이미 코드 생성 라이브러리 등이 만들어져 있습니다 만, 이번은 Swagger 용 문서를 만들 Swagger Editor를 소개합니다. Swagger Editor의 사용법 이쪽이 메인 화면입니다. 왼쪽이 편집기 오른쪽에 결과가 표시됩니다. JSON을 붙여로드 할 수 있습니다. 설정이 다수 준비되어 있습니다. 클라이언트와 서버 측 코드 생성이 가능합니다. 그 결과는 Zip 파일로 다운로드 할 수 있습니다. 예를 들어 Ruby 코드는 이렇게됩니다. Swagger Editor는 Web API 문서 작성은 물론, 그대로 클라이언트 라이..

지금도 개인적으로 좋아하는 소프트웨어가 Skitch입니다. Evernote에 인수되어 버렸 습니다만, 가장 간단하고 사용하기 쉬웠던 버전 1.x 대를 아직도 사용하고 있습니다. 무엇보다 마우스로 선을 그려도 부드러운 곡선으로 대체 해주는 기능입니다. 그런 Skitch를 방불케하는 소프트웨어가 atrament.js입니다. JavaScript이므로 Web 브라우저상에서 간편하게 사용할 수 있습니다. atrament.js 사용법 데모입니다. 큰 노트가 표시되어 있으며,이 위에 자유롭게 쓸 수 있습니다. 적당히 썼습니다 만, 부드러운 라인임을 알 수있을 것입니다. 두께를 바꿀 수 있습니다. 쓰고있는 상황입니다. 다듬기 위한 계산이 들어가 있어 그리고 있을 때 약간 느리다는 것이 느껴집니다. 농도를 바꿀 수 있습..

프로그래머라면 당연 합니다만, 1kB는 1,000 byte가 아닙니다. 1,024 byte 편의상 알기 쉽게 1kB로 표기하고 있습니다. 마찬가지로 1GB도 1,024MB이며, 바이트에서 변환은 매우 복잡합니다. 여러분도 사람에게 설명하거나 문서로 작성할 때 1024로 나누어 계산한 경험이 있을 것입니다. 그런 귀찮은 계산을 피하기 위해 pretty-bytes-cli를 사용합시다. pretty-bytes-cli 사용법 사용법은 간단하고 명령 후 바이트 수를 넘겨 주면됩니다. $ pretty-bytes 1000010 kB$ pretty-bytes 1020010.2 kB$ pretty-bytes 39018390183.9 GB 같은 느낌으로 알기 쉬운 표시로 변환 해줍니다. pretty-bytes-cli를 넣..

최근 애니메이션 GIF를 사용하여 소프트웨어의 작동을 표현하는 경우가 많아지고 있습니다. YouTube 등과 달리 쉽게 반복 보이는 동영상이 만들 수있는 것이 장점입니다. 하지만 GIF 애니메이션 제작시 소재로 동영상에서 변환하는 경우는 많습니다. 이번에 소개하는 오픈 소스 소프트웨어는 mov2gif 동영상을 애니메이션 GIF로 변환 해주는 명령어입니다. mov2gif 사용법 mov2gif은 CLI 소프트웨어이므로 인수로 동영상 파일을 전달합니다. 그 밖에도 몇 가지 옵션이 있습니다. 예를 들면 다음과 같습니다. 최적화 옵션은 숫자를 크게해도 크게 다르지 않았습니다. 프레임 속도를 낮추면 이미지 크기는 작아집니다. 명령을 사용한 예입니다. mov2gif input.movmov2gif --frame=12 ..

업무 시스템이라고하면 그리드 테이블이 요구됩니다. 처음에는 HTML로 쉽게 만들지만, 곧 추가 기능이 요구됩니다. 정렬, 필터링, 머리글과 왼쪽 열을 고정 해 주었으면 한다고도 요청합니다. 그런 귀찮은 요구를 스크래치로 지원하는 것은 매우 시간이 소요됩니다. 그럴 때는 꼭 handsontable을 시도해 봅시다. handsontable 사용법 handsontable에 많은 기능을 제공합니다. 우선 페이지네이션 비밀번호를 숨길 수 있습니다. 새 행을 만들 때 placeholder를 표시합니다. 포커스가있는 셀을 강조. 셀을 세세하게 커스터마이즈. 이미지를 포함할 수 있습니다. 정렬도 물론 있습니다. 입력 검증도 가능합니다. 머리글과 왼쪽의 열을 고정. 아래 오른쪽 방향 카피가능. 셀 병합. handsont..