Electron 의 장점은 엄청 많은대요. 그 중 하나가 "공통된 브라우저 환경을 가질 수 있다" 입니다. 따라서.. 이것을 이용하여 Electron 으로 웹뷰 만 만든다 하더라도 사용자에게 공통된 경험을 하게 해 줄수 있다는 장점이 되게 되는데요. 여기서는 Electron의 Webview 를 이용하여 페이지를 iframe 과 같이 표시하는 방법을 알려 드리겠습니다. github 소스코드 : https://github.com/TutorialBook/electron-webview-example * Electron의 Webview 는 Iframe 과 다르게 여러가지 규칙들에 대한 옵션을 끄거나 켤 수 있는 기능을 제공합니다. Electron Webview 사용의 이유 ( 개인 ) 우선 제가 웹 서비스 페이지..
이전 포스트에서 간단히 Electron 에 관해 설명 드렸으며 이번 포스트에서는 간단히 앱을 개발해 보겠습니다. 2017/02/05 - [Dev Platform/Electron] - Electron 이란? 우선 개발전 개발 환경은 nodejs 를 기반으로 하기때문에 PC 에 nodejs 개발 환경이 설정 되어 있어야 합니다. NodeJS 설치 2015/03/02 - [Dev Languages/NodeJS] - Windows 에 NodeJS 설치하기 맥은 그냥 node js 홈페이지에서 다운받으셔서 까시거나 Homebrew 를 이용하여 설치 하시면 됩니다.관련 정보 : https://changelog.com/posts/install-node-js-with-homebrew-on-os-x Electron 시작..
Electron 이란? Electron 이란 NodeJS 와 Chromium ( 일반적으로 Chrome 의 소스 로 이해하시면 편함 : 정보 ) 을 조합하여 웹 서버 없이도 PC 에서 웹 서버 + 브라우저 인 것 처럼 구동하는 데스크탑 앱을 만들수 있는 툴을 말합니다. Chromium 기반으로 하기때문에 Chromium 지원하는 OS 들을 지원하는 크로스 데스트탑 앱 플렛폼 이라고 생각하시면 편합니다. 대표적으로 Slack, Jandi, discord, Atom, Visual Studio Code 와 같은 앱들의 데스크탑 버전들이 Electron 을 이용하며 지금도 수 많은 앱들이 개발되고 있습니다. - 정보 : http://electron.atom.io/apps/ - 특징 1. 데스크탑 앱을 웹 서비스..
Phonegap 하이브리드 앱에서 각각 플렛폼마다 mp3 의 스트리밍 플레이시 화면이 꺼지더라도 플레이가 계속 진행되게 하는 방법입니다. IOS IOS 의 경우 우선 Resource -> plist 에 아래와 같이 Required background modes -> App plays audio or streams audio/video using AirPlay 를 추가하여 주도록합니다. 아래와 같은 옵션 추가 IOS 7 기준 그리고 Classes 에서 AppDelegate.m 파일에서 아래의 부분을 찾아서 수정해 주도록합니다. - (BOOL)application:(UIApplication*)application didFinishLaunchingWithOptions:(NSDictionary*)launchOp..
1. 플러그인 추가 방법 Phonegap 3.0 에서 플러그인을 추가하는 방법입니다. 추가 방법은 간단합니다.프로젝트가 생성된 폴더로 이동하여 $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git 위와 같은 명령어로 설치하여 주시면 됩니다. 외에도 추가된 플러그인을 확인하기 위하여 $ phonegap local plugin list 를 이용하여 설치된 플러그인의 id를 확인하실수 있으시며 $ phonegap local plugin remove org.apache.cordova.core.console 위와 같은 remove 명령어로 플러그인의 삭제역시 가능합니다. 2. 명령어 정리 설치 $ p..
오늘 설명드릴 팁은 Webview 창인상태에서 스크롤 오버지 아래와 같이 창이 통째로 움직이는 현상을 없에는 방법입니다. Phonegap 3.0 기준입니다. 방법은 간단합니다. 프로젝트에서 아래와 같이 config.xml 에서 UIWebViewBounce 를 false 로 수정하여 줍니다. 위와 같이 false 로 수정하여 주면 스크롤이 오버 되더라도 추가로 Bounce 되지 않는것을 확인하실수 있습니다.
Phonegap 은 HTML 과 Javascript 로 모바일 앱을 하이브리드 앱으로( 안드로이드, 아이폰 겸용 HTML 기반 앱 ) 만들수 있게 해주는 말합니다. 여기서는 Phonegap 3.0 부터 새롭게 적용된 The Command-line Interface + Node.JS 를 이용한 프로젝트 관리 방법에 관해서 간단하게 설명드리겠습니다. 우선 Phonegap 3.0 을 이용하기 위해서 Node.js 를 설치하도록합니다. ( 다운로드 ) 이제 터미널을(MAC 기준 Windows 는 아직 테스트를 해보지 않았습니다.) 이용할 차례입니다. Phonegap 3.0 의 경우 터미널의 Node.js 를 이용한 설치를 이용합니다. ( 그래서 홈페이지에 3.0 에 대한 프로젝트 다운로드가 없습니다. ) 이제 ..
IOS 7 의 개봉과 함께 드디어 XCode 5 가 나왔는대요. 확실히 가면갈수록 깔끔해지는 모습이 보이내요. 문제는 오늘 네이티브 어플이 아닌 어플을 테스트 해보다가 아래와 같은 현상을 발견하게 되었습니다. 바로 상태 표시줄이 앱의 상단부분을 덮어 버리는 현상 입니다. 해결 방법은 info.plist 에 아래와 같이 View controller-based status bar appearance 를 No 로 설정해 주시면 됩니다. 아래와 같이 No 로 설정하여 주시면 다음앱 실행시 상태 표시줄이 사라진것을 보실수 있습니다.
보통 안드로이드 책의 맨앞부분을 장식하는 개발환경 만들기 입니다. 어렵지 않으니 간단하게 따라하시기 바랍니다. 우선 Eclipse 가 설치되어 실행되고 있다는 가정하에 Help -> Install new software ... 을 선택하여 줍니다. 그리고 아래의 주소를 Add 를 클릭하여 아래와 같이 기입하여 주시기 바랍니다. http://dl-ssl.google.com/android/eclipse/ 위의 그림과 같은 창에서 Add 를 누르시면 아래와 같이 Add Repository 가 뜨게 됩니다. 위에서 알려드린 주소를 입력하시면 아래와 같이 플러그인 리스트가 뜨게 됩니다. 마지막 부분에서 따로 골라 설치하실 것이 아니라면 전부 설치하시면 됩니다. 이제 이클립스를 재시작하여 주시기 바랍니다. 재시작을..
Newsstand ( 가판대 ) 개발시 어플이 Newsstand ( 가판대 ) 어플이 되도록하는 설정방법입니다. 1. Icon files (IOS 5)에 Newsstand Icon 을 추가2. Application presents content in Newsstand - YES 추가3. Required background modes 추가 위와 같이 설정하신후 어플리케이션을 테스트 하신다면 뉴스스텐드로 들어간 아이콘을 보실수 있으실 것 입니다. 이제 가판대 앱을 개발 하시면 됩니다. ^^
처음 등록된 맥에서 다른 맥으로 인증서를 복사하여 같은 환경으로 만든 후 개발을 하는 방법입니다. 1. 키체인 접근 우선 키체인에 접근을 합니다. 키체인은 위와 같이 응용프로그램 -> 유틸리티 혹은 기타( 로켓독 ) -> 키체인 접근 에 서 찾으실수 있습니다. 2. 필요한 인증서 내보내기 이제 찾아야할 인증서는 (1) Apple Worldwide Developer Relations Certification Authority(2) iPhone Developer : (사용자이름) (고유번호)(3) iPhone Distribution : (사용자이름) (고유번호) 위의 3개 파일 입니다. 우선 1번은 시스템 키체인 관리에 있을것입니다. 그리고 2번 3번은 로그인 에서 찾으실수 있습니다. 이제 인증서를 내보내야..
개발을 하기전 알아 두실것이 Windows Phone 8 의 경우 Windows 8 이상의 윈도우즈 에서만 개발이 가능함을 알려 드립니다. 개발을 하기전에 간단히 말해 드릴것이 있는대요. 예전에 제가 7.1 로 테스트 할때는 분명 Visual Studio 2012 랑 같이 합쳐지는 형태로 되어 있었는대 이번에 제가 새로 깔아본 Windows Phone 8 SDK 는 따로 설치되는 형태로 되어 있더군요. 위와 같이 VS2012 에서 새로운 프로젝트로 Windows Phone 을 확인하여 보면 설치 페이지로 이동하게끔 되어 있습니다. 일단 간단하게 설치하여 보겠습니다. http://www.microsoft.com/ko-kr/download/details.aspx?id=35471 언어가 다를경우 설치가 되지 ..
Phonegap 의 프로젝트 생성기능을 이용해서 프로젝트를 생성하는 방법입니다. 1. 프로젝트 생성 $phonegap create 폴더이름 Identifier 프로젝트명 으로 써주시면됩니다. 2. 프로젝트 빌드 Phonegap 은 멀티 플렛폼 솔루션으로 플렛폼별로 프로젝트를 따로 빌드하는 방식을 사용합니다. ( 물론 IOS 를 빌드하기위해서는 XCode, Android 를 빌드하기위해서는 Android SDK, 그리고 Windows Phone를 빌드하기위해서는 WP 관련 개발킷이 필요합니다. ) $ cd 프로젝트폴더이름 $ phonegap build ios | android | wp ( | = 또는 ) 각 프로젝트의 PATH 설정이 모두 되어있다는 가정하에 위와 같이 명령을 실행하시면 프로젝트가 생성됩니..
Phonegap 의 경우 NodeJS 를 기반으로한 페키지로 변한뒤로 OS에 대한 의존성이 사라졌습니다. 대신 NodeJS 를 설치해주셔야 되는대요. 이것은 NodeJS 윈도우에 설치하기 링크를 참고하시기 바랍니다. 또 패키지를 받기위해서 Git 을 설치해 주셔야 되는대요. Git 의 설치는 Windows 에 Git 설치하기 를 참고하시기 바랍니다. 혹은 버전별로 찾아 보시기 바랍니다. 1. Phonegap 설치하기 $npm install -g phonegap 위와 같이 phonegap 이 설치 가 완료 됩니다. 2. Phonegap 버전 체크하기 $phonegap -version 버전이 체크된 모습입니다.
- Total
- Today
- Yesterday
- 개발
- Developer
- JavaScript
- 맥
- Laravel
- Nodejs
- 웹
- SNS
- 튜토리얼북
- html
- 웹 개발
- 서버 개발
- php
- cocos2d-x
- 인터넷
- 우분투
- 게임 개발
- Database
- 게임
- 서버
- 데이터베이스
- 웹 서버
- ubuntu
- Tutorialbook
- 개발자
- 설치
- 웹 개발자
- it
- 에러
- mac
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 31 |