구글QR코드제작

구글 챠트 API

developers.google.com

Google Charts는 구글이 제공하는 무료 차트 도구로, 웹사이트와 모바일 브라우저에서 동작하는 대화형 차트를 만들 수 있게 해 줍니다. 이 페이지는 Google Developers에 있는 Google Charts 공식 소개 및 문서 시작 페이지입니다. 간단한 산점도부터 계층형 트리맵까지 다양한 차트 유형을 제공하며, 여러 옵션으로 차트 모양을 사이트 디자인에 맞게 바꿀 수 있습니다. HTML5와 SVG 기반이라 별도 플러그인이 필요 없고, 차트와 컨트롤을 연결한 대시보드 구성과 여러 데이터 연결 도구를 이용한 실시간 데이터 연동도 지원합니다. 웹 페이지에 통계 그래프나 대시보드를 무료로 넣고 싶은 웹 개발자에게 유용합니다.

게시글

네이버에서 환율시세 크롤링해서 활용하기(3)

환율 정보를 크롤링한 내용을 가지고 구글 챠트를 활용해 그래프를 그리는 소스입니다 구글챠트 https://developers.google.com/chart 달러리치 블로그 https://m.blog.naver.com/boot/222430430028 추후에 더 정리해 유용한 보조지표로 사용할 계획입니다​ ​

게시글

04 씨스톡 구글 API를 활용한 지수차트 그리기

1) 반도체 지수 데이터 입력 -SOX 필라델피아 반도체 지수(코드:^SOX) 2) 차트 API 선택 (Chart.js , 구글차트) -https://www.chartjs.org -https://developers.google.com/chart/interactive/docs/gallery?hl=ko 3) 구글 차트 적용하기 -http://cstock.co.kr/program.php?p_code=stockindex&p=read_sox

구글어스

earth.google.com

내 손안에 지구본 구글어스(https://earth.google.com/web/)를 소개합니다. 구글어스는 구글에서 제공하는 지구본 모양의 실사 지도 입니다. 지구본 모양의 지도는 확대 축소 회전이 가능하여 마치 손에 지구본을 올려 놓은듯한 착각을 일으키게 만듭니다. 구글어스는 구글에서 제공하는 서비스이다 보니 구글맵과 스트리트뷰와 같은 다른 서비스와 연동되어 더 많은 정보를 얻을수 있습니다. 구글어스 기능 중에 2D, 3D 기능이 있습니다. 이 기능은 2D평면으로 지도를 볼 것인지, 3D로 입체감 있게 볼 것인지 결정해주는 기능입니다. 우리가 살고 있는 공간은 3D이다 보니 3D기능으로 지도를 확인해보면 직관적으로 지도를 이해 할수 있게 해줍니다. 사실 우리나라 같은 경우는 3D로 보면 사진을 바닥에 붙여놓은 것 같은 아쉬움이 있지만 유럽명소와 같이 유명한 지역인 경우 구조물을 3D 모델링 작업화 해서 입체적으로 해당 지역을 확인할수 있습니다. 구글어스는 구글에서 개발한 크롬브라우저(https://earth.google.com/web/)를 통해 설치 없이 바로 사용 가능합니다. 그러나 IE브라우저 같은 경우는 아직 사용할 수가 없으며 사용을 원하면 구글어스는 프로그램을 다운(https://www.google.co.kr/intl/ko/earth/download/gep/agree.html)받아 별도로 설치해서 사용해야 합니다. 사용방법은 설명이 필요 없을 정도로 너무 잘 만들어 놓았습니다. 마우스로 확대도 해보고 축소해 가다 보면 “아 이렇게 사용하는구나”라는 것을 본능적으로 알수 있을 것입니다. 내 손에 지구본을 올려놓고 이리저리 돌려가며 확인해보고 싶으시다면 구글어스를 활용해보시기 바랍니다. 아마 이곳 저곳 돌려 가다 보면 지구가 참 작구나 라는 생각과 함께 마치 내가 신이 된 것 같은 착각에 빠지기도 할 것입니다.

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

www.chartjs.org

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

구글에서 제공하는 크롬 확장프로그램...

developer.chrome.com

Chrome for Developers에서 제공하는 크롬 확장 프로그램(Chrome Extensions) 개발 문서의 시작 페이지입니다. 구글이 운영하는 공식 문서로, 확장 프로그램을 처음 만드는 방법부터 배포까지 필요한 자료를 모아 두었습니다. 첫 확장 프로그램 만들기 가이드와 동작 원리 설명, API·권한·매니페스트 레퍼런스, 샘플 코드를 제공하며, 사이드 패널과 테마, 탭·북마크·다운로드 관리, 콘텐츠 스크립트 같은 기능별 문서와 Chrome 웹 스토어 게시 가이드로 이어집니다. 크롬 확장 프로그램을 개발하거나 API 사용법을 찾는 웹 개발자에게 유용합니다.

오토드로우

www.autodraw.com

대충 그린 손 그림을 예쁜 일러스트 그림으로 바꿔주는 오토드로우 http://www.autodraw.com 를 소개합니다. 오토드로우는 구글에서 제공해 주는 인공지능 프로그램으로, 대충 그림을 그리면 해당 그림이 어떠한 그림인지 스스로 판단해 인공지능 스스로 그림을 그려주는 프로그램입니다. 내가 하트를 그리고 싶다면 캔버스좌측에 있는 AutoDraw버튼을 클릭하고 위쪽이 움푹 들어가 동그라미만 그려도 하트로 판단해 상단에 하트일러스트를 추천해줍니다. 사실 그림을 대충 그리면 예쁘게 고쳐주는 프로그램은 아니고, 미리 일러스트로 등록한 이미지를 찾아주는 프로그램입니다. 일반적으로 검색을 텍스트로 하게 되지만 오토드로우는 더 발전해 텍스트가 아닌 그림으로 검색을 할수 있다라고 보시면 됩니다 내가 하트를 그리면 미리 등록된 하트를 검색해주고 검색된 하트를 클릭하면 내가 그린 그림과 바꿔주는 것입니다. 누군가 그려놓은 결과물을 사용한다면 저작권 역시 확인해봐야 합니다. 다행스럽게 오토드로우는 구글 답게 무료로 제공 합니다. 저작권 확인방법은 사이트에 좌측메뉴에서 Artists 페이지로 이동해 Creative Commons Attribution 4.0 International License 를 클릭하여 확인하면 됩니다. 클릭하면 Attribution 4.0 International (CC BY 4.0) 를 확인할 수 있는데 의미는 출처만 밝히면 상업적이든 비상업적이든 자유롭게 사용할 수 있다는 뜻입니다. 그림은 못 그리는데 예쁜 일러스트는 이미지가 필요하신 분이라면 오토드로우를 적극 추천합니다.

게시글

웹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