최근 애니메이션 GIF를 사용하여 소프트웨어의 작동을 표현하는 경우가 많아지고 있습니다. YouTube 등과 달리 쉽게 반복 보이는 동영상이 만들 수있는 것이 장점입니다. 하지만 GIF 애니메이션 제작시 소재로 동영상에서 변환하는 경우는 많습니다. 이번에 소개하는 오픈 소스 소프트웨어는 mov2gif 동영상을 애니메이션 GIF로 변환 해주는 명령어입니다. mov2gif 사용법 mov2gif은 CLI 소프트웨어이므로 인수로 동영상 파일을 전달합니다. 그 밖에도 몇 가지 옵션이 있습니다. 예를 들면 다음과 같습니다. 최적화 옵션은 숫자를 크게해도 크게 다르지 않았습니다. 프레임 속도를 낮추면 이미지 크기는 작아집니다. 명령을 사용한 예입니다. mov2gif input.movmov2gif --frame=12 ..
업무 시스템이라고하면 그리드 테이블이 요구됩니다. 처음에는 HTML로 쉽게 만들지만, 곧 추가 기능이 요구됩니다. 정렬, 필터링, 머리글과 왼쪽 열을 고정 해 주었으면 한다고도 요청합니다. 그런 귀찮은 요구를 스크래치로 지원하는 것은 매우 시간이 소요됩니다. 그럴 때는 꼭 handsontable을 시도해 봅시다. handsontable 사용법 handsontable에 많은 기능을 제공합니다. 우선 페이지네이션 비밀번호를 숨길 수 있습니다. 새 행을 만들 때 placeholder를 표시합니다. 포커스가있는 셀을 강조. 셀을 세세하게 커스터마이즈. 이미지를 포함할 수 있습니다. 정렬도 물론 있습니다. 입력 검증도 가능합니다. 머리글과 왼쪽의 열을 고정. 아래 오른쪽 방향 카피가능. 셀 병합. handsont..
Web상에서 SVG가 많이 사용되기 시작했습니다. SVG의 장점 중 하나로 꼽히는 것이 벡터이므로 확대해도 깨끗한 것입니다. 확대 나 축소한다는 것은 정보의 입도를 스스로 변경하고 싶은 경우에 유용합니다. 그래서 소개하고 싶은 것이 SVG panzoom입니다. 그 이름과 같이, SVG의 확대 / 축소를 실현하기위한 라이브러리입니다. SVG panzoom 사용 샘플입니다. 많은 정보가 아로 새겨 져 있습니다. 확대했습니다. 마우스로 할 수 있습니다 반대로 빵했습니다. 그래도 깨끗한 선으로 그려지는 SVG의 장점 네요. 실제 움직임입니다. 실제 사용 예입니다. 도서끼리의 관련성을 시각화하고 있습니다. SVG는 JavaScript와 함께 대화 형 콘텐츠를 만드는 데 적합합니다. 또한 벡터이므로 경량이며, 그러..
SVG 콘텐츠는 재미있어, Flash와 같은 애니메이션도 지원하고 있습니다. 콘텐츠를 서서히 그려 나갈 수 있도록 하기만 하면 됩니다. 수작업으로 실현하는 것은 무리가 있을 것입니다. 그래서 사용해보고 싶은 것이 Yarrow입니다. HTML 프리젠 테이션 등과 결합하면 효과적 일 수 있습니다. Yarrow 사용법 실제로 움직이고있는 곳입니다. 나중에 선이 당겨지는 것을 알 수 있습니다. 선에 문자를 올릴 수 있습니다 소스가되는 곳에서 선이 시작한다는 연출도 가능합니다. 섹션의 상자를 향해 뻗어나가는 애니메이션도 가능합니다. 그래프의 포인트를 향해 당겨지는 데모. 이것은 효과가있을 것입니다. D3와 함께합니다. 그래프가 그림에서 단순히 화살표가 그려져있는 것만으로 시선을 끌기 쉽지 않습니다. 그래서 애니메..
프로그래머의 성과는 작성한 코드 대응하는 Issue에 나타납니다. 그런데도 일보를 내면되면 "○○ 시스템 개발 5 시간 '라고 써 버리거나합니다. 이것으로는 구체성이없이 상태의 좋고 나쁨도 모릅니다. 그래서 사용해보고 싶은 것이 github-nippou입니다. GitHub를 사용하여 일상적인 개발을 관리하고 있다면 시도해 보면 좋을 것입니다. github-nippou 사용법 github-nippou 명령을 두드리는 것뿐입니다. 그러면 user_events에 실려있는 정보를 목록에서 구해줍니다. 그리고 난 후, 이 중에서 선택하면됩니다. Issue에서 작업을 관리하고 있으면 매우 사용하기 쉬운 것입니다. 도움말은 다음과 같이되어 있습니다. github-nippou는 Issues을 가져 오기 때문에 Issu..
CSS는 어딘지 모르게 써도 나름대로 표시되어 버리기 때문에 제대로 작동 및 유지가 어려운 기술입니다. 기업에 따라 다양한 규칙이 정답도 좀처럼 찾을 수 없습니다. 오히려 일정한 법칙이 있는 프레임워크가 편하다고 말할 수 있습니다. 이번에 소개하는 RichCSS도 그런 스타일시트 프레임 워크 중 하나입니다. RichCSS의 법칙에 의거하여 작성하여 운용을 완화한다는 개념입니다. RichCSS 사용법 RichCSS 개념에 가까운 것이며, 그것을 보조하는 CLI 도구가 나와 있습니다. 초기화 명령에서 CSS 또는 SCSS에 따른 파일이 생성됩니다. 보고 아는대로 페이지가 아닌 화면 요소에 따라 스타일 시트가 생성되는 느낌이 있습니다. RichCSS는 재사용성을 중시 한 스타일 시트의 짜는 방법을 제창하고 있..
프로그래머의 블로그 (겸 주) 서비스로 알려진 Qiita이지만, 기본은 Web 브라우저상에서 글을 쓰고 그대로 게시합니다. 편집기는 간단하고 사용하기 쉽습니다만, 흰색 배경에서 싫다 글꼴은 자신이 좋아하는 것이 좋은 식으로 세세한 조건이있을 것입니다. 그 래서 소개하고 싶은 것이 자신이 좋아하는 Markdown 편집기를 사용하면서 완성 된 Markdown 파일을 업로드 할 수 qiitactl입니다. qiitactl 명령 옵션입니다. show posts로 게시 한 게시물이 나열됩니다. generate 명령에 기반을 만들고 나면 create 명령으로 파일을 전송하면된다뿐입니다. 매우 간단합니다. qiitactl를 사용하여 자신이 좋아하는 Markdown 편집기를 사용할 수 있습니다. qiitactl는 Go ..
- Total
- Today
- Yesterday
- GitHub
- LGPL
- Web
- javascript
- License MIT
- Web 오픈 소스
- mit license
- GPL
- software
- CMS
- Open Source JavaScript
- HTML5
- 텍스트
- 디자인
- 자바 스크립트
- cui
- node.js
- github에
- GUI
- Web API
- go
- MIT 라이센스
- linux
- Web 오픈 소스 JavaScript
- 오픈 소스
- GPL v3
- 웹 API
- SVG
- Mac OSX
- 소프트웨어
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |