웹상에서 화면 캡쳐하는 플러그인

게시글

웹URL 주소로 캡쳐 하는 프로그램 만들어 보도록 하겠습니다

웹URL 주소로 캡쳐 하는 프로그램 만들어 보도록 하겠습니다 html2canvas 플러그인을 통해서 웹페이지를 캡쳐할수 있습니다 하지만 자신의 홈페이지에서만 가능 하지 다른 URL주소의 내용은 캡쳐할수 없는 단점이 있습니다 해서 URL주소를 입력하면 해당 주소의 내용을 캡쳐후 이미지로 반환해주는 프로그램을 만들어 보려합니다 작동원리 작업전 준비 작업 1)PHP 홈페이지 2)서브서버로 사용할 윈도우 PC 3)공유기 포트포워드 설정 (메인서버에서 가상아이피를 사용하는 서브서버로 접속하기 위함) 4)서브서버에 파이썬 설치 5)서브서버에 파이썬 flask 설치 6)서브서버에 파이썬 selenium 설치 위 순서대로 진행을 하려합니다 핵심은 메인서버에서 서브서버의 특정 프로그램을 실행 시켜주는 것입니다 일반적으로 웹상에서 다른 PC의 프로그램을 컨트롤 하기가 어렵습니다 처음 개발단계에서 웹소켓을 통해 프로그램을 컨트롤 하려 했습니다 실재로 http로는 컨트롤까지 되었습니다 그러나 홈페이지가 https인 경우 ws가 아닌 wss 웹소켓만 사용해야 하는 문제가 있어서 php file_get_contes() 함수와 flask서버를 사용해 컨트롤 하는 방법을 채택하였습니다 처음 계획이 수정되어 편법을 사용한 것이 아닌가 생각되었지만 flask 를 사용해보니 서브서버가 안정적으로 작동하여 오히려 더 나은 방법이라 판단됩니다 유튜브주소 https://www.youtube.com/watch?v=aCWmZplpts0 https://www.youtube.com/watch?v=iE1wAFZmR-w

jquery

jquery.com

jquery을 소개합니다. jquery는 자바스크립트를 편리하게 사용할수 있도록 만들어진 라이브러리 입니다. jquery의 장점은 가장 많이 사용되는 자바스크립트 라이브러리 중 하나 라는 것입니다. 다이나믹한 웹페이지를 제작하기 위해 자바스크립트는 필수 입니다. 물론 CSS나 플래시 등을 통해서 구현 가능하지만 기본적으로 다이나믹한 웹페이지를 위해서는 자바스크립트를 사용합니다. 그러나 만들순 있지만 쉽게 구현하기는 어렵습니다. 그래서 쉽게 만들수 있도록 jquery를 사용합니다. 사용이 간편하고 효과가 좋아 아주 많은 사람들이 사용하고 있습니다. 사람들이 많이 사용하는 것은 그만한 이유가 있습니다. 저 역시 jquery를 많이 사용합니다. 해당 사이트에서는 사용할수 있는 방법 api가 제공되고 https://api.jquery.com 이미 만들어진 plugin도 존재하여 더욱 쉬운 사용을 도와줍니다. https://plugins.jquery.com 메뉴구성은 Dowload, API Documentation, Blog, Plugins, Browser Support등으로 구성되어 있어 다양한 서비스를 이용할 수 있습니다 jquery는 홈페이지뿐 아니라 트위터등의 채널을 통해 고객들과 더 많이 소통하려 노력하고 있습니다. 자세한 정보를 원하신다면 https://jquery.com 주소를 참고 하시면 더많은 정보를 확인 하실 수 있습니다.

챠트를 그릴수 있는 플러그인

www.chartjs.org

Chart.js는 웹 페이지에 차트를 그릴 수 있는 오픈소스 자바스크립트 차트 라이브러리입니다. 공식 사이트에서 라이브러리 소개와 문서, 예제를 제공하며 커뮤니티가 유지·관리하는 프로젝트입니다. 8가지 차트 유형을 지원하고 차트마다 애니메이션과 세부 옵션을 조정할 수 있습니다. HTML5 Canvas로 렌더링해 최신 브라우저에서 동작하고, 창 크기가 바뀌면 차트를 다시 그리는 반응형 기능과 필요한 모듈만 불러와 번들 크기를 줄이는 방법도 안내합니다. 대시보드나 통계 화면에 데이터 시각화 차트를 넣으려는 웹 개발자에게 유용합니다.

블루비

www.blueb.co.kr

웹프로그램 관련 소스를 다운받아 사용할수 있는 블루비(http://www.blueb.co.kr) 사이트를 소개합니다. 블루비는 HTML, 자바스크립트, CSS, Ajax 등 다양한 웹프로그램 코딩을 제공해주는 사이트 입니다. 대부분의 소스는 무료로 이용가능하며 유료로 제공하는 소스도 있습니다. 유료인 경우 그만한 가치가 있는 소스이기 때문에 결제하시는 것이 더 나은 서비스를 위해 좋은 방법이 아닐까 생각합니다. 소스들은 웹상에서 자주 사용되는 기능을 제공하고 있습니다. 트리메뉴, 탭메뉴, 갤러리, 슬라이드쇼 등 웹 상에서 한번쯤 사용해 봤을 만한 소스가 많이 있습니다. 사실 직접 제작해서 사용하려면 많은 시간과 노력이 필요합니다. 그렇지만 블루비를 통해 얻은 소스를 커스트마이징해 자신의 홈페이지에 적용 한다면 쉽고 빠르게 작업 할 수 있습니다. 간혹 소스를 다운받아 단순 업로드 하면 적용될 것이라 생각하시는 분들이 있는데 이는 너무 모르는 소리입니다. 홈페이지에 소스를 적용하려면 그에 맞게 고치는 커스트마이징 작업이 꼭 필요하다는 것을 명심해야 합니다. 홈페이지를 멋지게 꾸미기 원하신다면 블루비를 활용해 보시는 것은 어떨까요?

게시글

주소로 파일 내용을 가져오는 함수

외부의 특정 파일의 내용을 그대로 불러오고 싶을때가 있다 물론 .php 파일같은경우 원본 파일을 불러오는게 아닌 php부분이 실행된 이후의 결과 페이지를 가져올수 있다 .txt파일등 다른 여러파일도 동일하다 $file=file_get_contents("파일명"); 해당 파일명의 내용을 $file로 대입해서 사용할수 있다 그런데 이때 모든 홈페이지의 내용을 사용할수 있는건 아니다 간혹 보안을 목적으로 외부에서 내용을 가져가지 못하도록 막아 놓는 사이트가 있다 그러나 자신의 ftp경로의 있는내용을 별무리 없어 가져와 사용할수가 있다

게시글

페이지 뷰에서 확대 축소할때 확대되거나 축소된 크기를 반환하는 이벤트

브라우저에서 뷰를 확대하거나 축소했을때 해당 크기의 비율을 가져오고 싶을때 사용한다 뷰의 비율을 알아내기 위해서는 window.devicePixelRatio 를 사용하는데 모든 브라우저에서 적용되진 않는다

픽슬러

pixlr.com

웹에서 사용하는 포토샵 픽슬러 https://pixlr.com/editor를 소개합니다 픽슬러는 포토샵과 같이 이미지를 편집할 수 있는 프로그램으로 설치 없이 웹 상에서 바로 사용 가능한 웹 이미지 편지툴 입니다 이미지 편집툴은 여러 가지가 있습니다 윈도우에서 기본적으로 제공하는 그림판도 있고 이미지편집 이라고 검색하면 수많은 프로그램들을 쉽게 찾을 수 있습니다. 그래도 아무리 많다 해도 이미지편집의 대표적인 프로그램은 포토샵일 것입니다. 사용하기도 편리하고 기능도 많기 때문에 많은 디자이너들이 포토샵을 사용합니다. 그런데 웹 상에서 포토샵과 비슷한 프로그램이 바로 픽슬러 입니다. 픽슬러는 프로그램을 특별히 설치하지 않고 사이트(https://pixlr.com/editor)에 들어가시면 바로 사용가능 합니다. 인터페이스가 포토샵과 유사하여 포토샵을 사용 하실 수 있는 분이라면 어렵지 않게 사용 가능합니다. 그런데 인터페이스가 비슷하다고 해서 모든 기능이 동일한 것은 아닙니다. 아무래도 포토샵은 응용프로그램이고 픽슬러는 플래시로 만든 웹프로그램 이다 보니 태생적인 한계를 벗어나지 못하는 부분이 있습니다. 그러나 약간의 디테일만 다를 뿐 포토샵에 있는 기능 대부분을 구현해 놓았습니다. “포토샵과 같이 좋은 프로그램이 있는데 왜 픽슬러를 사용해야 하지?” 라는 의문을 가질 수 있습니다. 틀린 말은 아니지만 그래도 픽슬러 만의 장점이 있습니다. 프로그램을 설치 없이 사용 가능한 장점, 인터넷이 가능한 곳이라면 어느 곳에서도 사용 가능하다는 장점, 업데이트를 별도로 할 필요가 없다는 장점 등 웹프로그램 만의 모든 장점을 가지고 있습니다. 그러기에 포토샵만 사용한다, 픽슬러만 사용한다 라는 이분법적 접근보다 상황에 따라 포토샵 이나 픽슬러를 선택적으로 사용하시는 것이 좋습니다. 디자인을 주업으로 삼고 있으신 분이라면 포토샵을 디자인툴을 자주 사용하지 않고 간혹 디자인 작업을 해야 하시는 분이라면 픽슬러를 사용해보시길 추천해드립니다.

게시글

jquery에서 ajax(아작스)사용하는 방법

$.ajax ({ type: 'post', // POST 로 전송 async: false,//동기화 url: 'http://', // 호출 URL data: {'변수1':'값1','변수2':'값2'}, // 파라메터 정보 전달 success:function(data){ alert(data);//처리된 정보가져오는 부분 }, error:function(e) { // alert(e.responseText); } });