Ionic3 Ionic의 커스텀 컴퍼넌트로 페르소나 5의 UI를 재현해 보았다 이 기사에서는 사용자 정의 컴포넌트에서 신 게임 인 페르소나 5의 프레임 UI를 재현합니다. Ionic Ionic CLI : 4.1.0 Ionic Framework : ionic-angular 3.9.2 @ionic/app-scripts : 3.2.1 상정으로서는, 프레임 안은 ion-card 와 같은 사용법을 하고 싶습니다. 페이지의 sass 파일을 더럽혀 버리는 것은 싫기 때문에 커스텀 ... AngularIonic3ionicSVG Ionic3에 입문해 본다~그 9 Angular4 튜토리얼 ⑦~ Angular 자체의 라우팅은 Ionic에서 사용하지 않으므로 Angular 튜토리얼의 라우팅에 대해서는 생략합니다. Ionic2 기사이지만 아래를 참조하십시오. 기본적으로 Ionic에서는 라우팅이 필요하지 않은 것 같습니다. 그러나 물론 그러한 동작도 지원됩니다. Ionic3에서는 IonicPageModule을 사용합니다! (Ionic2까지와 정보가 혼재되어 꽤 어렵습니다만…) 예로서 이번... Angular자바스크립트Ionic3ionicAngular4 Ionic3에 입문해 본다~그 8 Angular4 튜토리얼⑥~ HeroService.getHeroes()(이 기사에서 말하면 heroProvider.getHeroes() 입니다)는 동기적인 메소드입니다. 현재, HeroesComponent에서도 동기적으로 취득할 수 있다는 상정으로 쓰여져 있습니다. 그러나 실제로는 이것으로는 안됩니다. 왜냐하면 HeroService.getHeroes는 서버 측에서 일부 데이터를 검색한다고 가정하기 때문입니다. 튜토리얼에... Angular자바스크립트Ionic3ionicAngular4 Ionic3에 입문해 본다~그 7 Angular4 튜토리얼⑤~ HeroesComponent로부터 데이터를 분리하여 유닛 테스트 등을 쉽게 할 수 있도록 한다. 컴포넌트 내에서 직접 데이터를 얻거나 저장해서는 안됩니다. 물론 고의로 임시 데이터를 전달해서는 안됩니다. 컴퍼넌트는 데이터의 전달에 집중해, 그 외의 처리는 서비스 클래스에 위양해야 합니다. 그래서 실제로 표시되는 데이터 자체는 독립시켜 봅시다! 그 서비스는 new 로 생성하는 것이 아니라 An... Angular자바스크립트Ionic3ionicAngular4 【Ionic】 PeerJS를 사용하여 P2P 영상 채팅 만들기 실행 환경은 홈 네트워크 내에서 가정합니다. 이 기사는 의 응용 프로그램입니다. PeerJS를 사용하여 P2P 영상 채팅을 할 수 있는 앱을 Ionic에서 만들었습니다. 베이스는 그래서, 도입부의 설명은 생략합니다. 동영상의 표시 영역 만들기 Angular가 ViewChild를 사용하여 제어할 수 있도록 합니다. 통신 처리 다른 피어로부터 접속을 받았을 때의 처리와, 자신으로부터 접속해 갈 ... Ionic3PeerJSWebRTCionic 【Ionic】 PeerJS를 사용하여 P2P 채팅 앱 만들기 실행 환경은 홈 네트워크 내에서 가정합니다. PeerJS는 WebRTC를 일반적으로 사용하는 것보다 쉽게 처리에 통합 할 수 있도록 개발 된 JavaScript 라이브러리입니다. 이번에는 Node.js를 사용하여 간단한 시그널링 서버를 자전으로 준비하고, PeerJS를 사용해 그 서버에 액세스해, 브라우저간의 시그널링을 행합니다. 평소 PeerJS 유형 정의 설치 PeerJS 로딩 "src/... PeerJSIonic3ionic 개인적으로 자주 사용하는 Ionic 사용법 편집에 편집을 이어서 지식을 늘려 가고 싶다 코드 이미지 src/theme/variables.scss에 설정 작성 이런 식으로 사용할 수 있게 된다... Ionic3ionic [Ionic3] 하나의 앱 아이콘 이미지에서 여러 크기의 아이콘 크기를 일괄 적으로 만드는 방법 ionic v3.20.0 resources/icon.png 및 resources/splash.png 에서 Android/iOS에 필요한 아이콘을 일괄 생성합니다. (1) 이하의 사이즈의 화상을 준비한다 resources/icon.png : 1024x1024 [px] resources/splash.png : 2732x2732 [px] (2) 다음 명령을 실행합니다. 이 프로세스는 ionic 서... Ionic3ionic Ionic3에 입문해 본다~그 6 Angular4 튜토리얼④~ mock-heroes.ts 파일을 src/app/폴더 아래에 만듭니다. 여기서하고 싶은 것은 HeroesComponent에서 mock-heroes.ts에서 선언 한 영웅들의 목록을 표시하는 것입니다. src/app/heroes/heroes.component.ts는 src\components\heroes\heroes.ts입니다. 아래와 같이 변경합니다. HTML 측은 아래와 같이 합니다. 어쩐... Angular자바스크립트Ionic3ionicAngular4 Ionic3에 입문해 본다~그 5 Angular4 튜토리얼③~ 전회까지로 만든 코드를 변경해 갑니다. 이것은 그대로 튜토리얼대로. import의 경로가 다르므로 조심한다. 지금 입니다만, NgModule는 사용하지 않기 때문에 import 하지 않아도 됩니다. 빌드해 보면 이런 느낌이 듭니다. 특히 고생하지 않고 튜토리얼이 그대로 움직입니다. input 태그로부터 받은 캐릭터 라인을 어플리케이션 측에서 받습니다. 또한, 튜토리얼에서는 에러가 나오는 말과... Angular자바스크립트Ionic3ionicAngular4 Ionic3에 입문해 본다~그 4 Angular4 튜토리얼②~ Angular의 명령은 다음과 같습니다. ng generate component heroes 이것에 대응하는 ionic 커맨드는 아래와 같다. ionic generate component heroes 실행해 보면 아래와 같이 heroes 폴더가 되어 있는 것을 알 수 있다. heroes.component.ts가 아니라 heroes.ts라는 파일 이름으로 작성되는 것 같습니다. CLI는 세 가... Angular자바스크립트Ionic3ionicAngular4 Ionic3에 입문해 본다~그 3 Angular4 튜토리얼①~ 그래서 Angular4의 튜토리얼을 읽고 Ionic에서 실행해 본다. 튜토리얼 페이지는 이쪽. 일본어화되어 있기 때문에 (오랜만에) 일본어로 읽을 수 있어! 전제로 ionic의 blank 프로젝트를 만들어 둡니다. 투어 오브 히어로즈 튜토리얼은 Angular의 기초를 다룹니다. 이 튜토리얼에서는 인재 파견 회사가 영웅 집합을 관리하는 응용 프로그램을 개발합니다. 요소를 표시하고 은폐하고 영웅... Angular자바스크립트Ionic3ionicAngular4 Ionic 앱에 D3 Liquid Fill Gauge를 통합해 보았습니다! 만든 샘플의 리포지토리는 다음과 같습니다. 구현 해설에는 다음과 같은 내용이 포함됩니다. Ionic 앱에 Component를 추가하고 사용하는 경우 작성 방법 ngx-d3-liquid-fill-gauge 는 README의 순서를 실시해도 아래 그림과 같이 ngx-d3-liquid-fill-gauge が見つかりません。 라는 에러가 나와 빌드할 수 없었기 때문에, component로서 카피해 사... Ionic3ionic Ionic3에 입문해 보자~그 1 환경 구축~ 공식 HP에서 인용 The top open source framework for building amazing mobile apps. Ionic is the beautiful, free and open source mobile SDK for developing native and progressive web apps with ease. 구글 선생님의 일본어 번역 놀라운 모바일 응용 프로그램을... Angular자바스크립트Ionic3ionicAngular4 c3에서 하이브리드 앱을 만들어 보자. - 데이터 지속성 편 앱 내에서 데이터를 보관하고 싶을 때가 있습니다. 앱에서 설정이라든지 할 때라든가. 그런 때 cordova-sqlite-storage 를 사용해 갑니다. 이번에는 쉽게 버튼을 누르면 현재 시간을 저장하고 다른 페이지에서 표시해 봅시다. 명령으로 플러그인 설치 루트 모듈 추가 설정 그래도 했는데 모듈을 추가했으면 루트 모듈에 설정이 필요했습니다. src/app/app.module.ts 이상 추... iOSIonic3안드로이드코르도바하이브리드 앱 c3에서 하이브리드 앱을 만들어 보자. - 페이지 전환 편 의 계속입니다. 우선은 화면 천이의 트리거가 되는 버튼을 설치합니다. src/page/home/home.html 이제 한 번 실행해 봅시다. next 라고 표시된 버튼이 표시되었습니다. 지금은 표시되었을 뿐이므로, 반응은 합니다만 천이는 하지 않습니다. 다음은 천이처의 페이지를 만들어 갑니다. ionic에는 generate 라는 편리한 명령이 준비되어 있어 페이지의 추가도 간단하게 할 수 있... iOSIonic3안드로이드코르도바하이브리드 앱 c3에서 하이브리드 앱을 만들어 보자. - 도입편 macOS High Sierra 위의 설치 등은 할애. Ionic CLI 설치 프로젝트에 맞는 cordova와 ionic을 설치합니다. 설치가 완료되면 확인합니다. 지정한 것이 들어 있으면 OK. 이번에는 버전을 지정하고 있지만 @이후를 생략하면 최신판이 설치됩니다. 새로운 ionic 프로젝트를 시작하려면 다음 명령으로 한 번만 진행됩니다. 이번에는 'myapp'이라는 프로젝트를 만들어 봅시... iOSIonic3안드로이드코르도바하이브리드 앱
Ionic의 커스텀 컴퍼넌트로 페르소나 5의 UI를 재현해 보았다 이 기사에서는 사용자 정의 컴포넌트에서 신 게임 인 페르소나 5의 프레임 UI를 재현합니다. Ionic Ionic CLI : 4.1.0 Ionic Framework : ionic-angular 3.9.2 @ionic/app-scripts : 3.2.1 상정으로서는, 프레임 안은 ion-card 와 같은 사용법을 하고 싶습니다. 페이지의 sass 파일을 더럽혀 버리는 것은 싫기 때문에 커스텀 ... AngularIonic3ionicSVG Ionic3에 입문해 본다~그 9 Angular4 튜토리얼 ⑦~ Angular 자체의 라우팅은 Ionic에서 사용하지 않으므로 Angular 튜토리얼의 라우팅에 대해서는 생략합니다. Ionic2 기사이지만 아래를 참조하십시오. 기본적으로 Ionic에서는 라우팅이 필요하지 않은 것 같습니다. 그러나 물론 그러한 동작도 지원됩니다. Ionic3에서는 IonicPageModule을 사용합니다! (Ionic2까지와 정보가 혼재되어 꽤 어렵습니다만…) 예로서 이번... Angular자바스크립트Ionic3ionicAngular4 Ionic3에 입문해 본다~그 8 Angular4 튜토리얼⑥~ HeroService.getHeroes()(이 기사에서 말하면 heroProvider.getHeroes() 입니다)는 동기적인 메소드입니다. 현재, HeroesComponent에서도 동기적으로 취득할 수 있다는 상정으로 쓰여져 있습니다. 그러나 실제로는 이것으로는 안됩니다. 왜냐하면 HeroService.getHeroes는 서버 측에서 일부 데이터를 검색한다고 가정하기 때문입니다. 튜토리얼에... Angular자바스크립트Ionic3ionicAngular4 Ionic3에 입문해 본다~그 7 Angular4 튜토리얼⑤~ HeroesComponent로부터 데이터를 분리하여 유닛 테스트 등을 쉽게 할 수 있도록 한다. 컴포넌트 내에서 직접 데이터를 얻거나 저장해서는 안됩니다. 물론 고의로 임시 데이터를 전달해서는 안됩니다. 컴퍼넌트는 데이터의 전달에 집중해, 그 외의 처리는 서비스 클래스에 위양해야 합니다. 그래서 실제로 표시되는 데이터 자체는 독립시켜 봅시다! 그 서비스는 new 로 생성하는 것이 아니라 An... Angular자바스크립트Ionic3ionicAngular4 【Ionic】 PeerJS를 사용하여 P2P 영상 채팅 만들기 실행 환경은 홈 네트워크 내에서 가정합니다. 이 기사는 의 응용 프로그램입니다. PeerJS를 사용하여 P2P 영상 채팅을 할 수 있는 앱을 Ionic에서 만들었습니다. 베이스는 그래서, 도입부의 설명은 생략합니다. 동영상의 표시 영역 만들기 Angular가 ViewChild를 사용하여 제어할 수 있도록 합니다. 통신 처리 다른 피어로부터 접속을 받았을 때의 처리와, 자신으로부터 접속해 갈 ... Ionic3PeerJSWebRTCionic 【Ionic】 PeerJS를 사용하여 P2P 채팅 앱 만들기 실행 환경은 홈 네트워크 내에서 가정합니다. PeerJS는 WebRTC를 일반적으로 사용하는 것보다 쉽게 처리에 통합 할 수 있도록 개발 된 JavaScript 라이브러리입니다. 이번에는 Node.js를 사용하여 간단한 시그널링 서버를 자전으로 준비하고, PeerJS를 사용해 그 서버에 액세스해, 브라우저간의 시그널링을 행합니다. 평소 PeerJS 유형 정의 설치 PeerJS 로딩 "src/... PeerJSIonic3ionic 개인적으로 자주 사용하는 Ionic 사용법 편집에 편집을 이어서 지식을 늘려 가고 싶다 코드 이미지 src/theme/variables.scss에 설정 작성 이런 식으로 사용할 수 있게 된다... Ionic3ionic [Ionic3] 하나의 앱 아이콘 이미지에서 여러 크기의 아이콘 크기를 일괄 적으로 만드는 방법 ionic v3.20.0 resources/icon.png 및 resources/splash.png 에서 Android/iOS에 필요한 아이콘을 일괄 생성합니다. (1) 이하의 사이즈의 화상을 준비한다 resources/icon.png : 1024x1024 [px] resources/splash.png : 2732x2732 [px] (2) 다음 명령을 실행합니다. 이 프로세스는 ionic 서... Ionic3ionic Ionic3에 입문해 본다~그 6 Angular4 튜토리얼④~ mock-heroes.ts 파일을 src/app/폴더 아래에 만듭니다. 여기서하고 싶은 것은 HeroesComponent에서 mock-heroes.ts에서 선언 한 영웅들의 목록을 표시하는 것입니다. src/app/heroes/heroes.component.ts는 src\components\heroes\heroes.ts입니다. 아래와 같이 변경합니다. HTML 측은 아래와 같이 합니다. 어쩐... Angular자바스크립트Ionic3ionicAngular4 Ionic3에 입문해 본다~그 5 Angular4 튜토리얼③~ 전회까지로 만든 코드를 변경해 갑니다. 이것은 그대로 튜토리얼대로. import의 경로가 다르므로 조심한다. 지금 입니다만, NgModule는 사용하지 않기 때문에 import 하지 않아도 됩니다. 빌드해 보면 이런 느낌이 듭니다. 특히 고생하지 않고 튜토리얼이 그대로 움직입니다. input 태그로부터 받은 캐릭터 라인을 어플리케이션 측에서 받습니다. 또한, 튜토리얼에서는 에러가 나오는 말과... Angular자바스크립트Ionic3ionicAngular4 Ionic3에 입문해 본다~그 4 Angular4 튜토리얼②~ Angular의 명령은 다음과 같습니다. ng generate component heroes 이것에 대응하는 ionic 커맨드는 아래와 같다. ionic generate component heroes 실행해 보면 아래와 같이 heroes 폴더가 되어 있는 것을 알 수 있다. heroes.component.ts가 아니라 heroes.ts라는 파일 이름으로 작성되는 것 같습니다. CLI는 세 가... Angular자바스크립트Ionic3ionicAngular4 Ionic3에 입문해 본다~그 3 Angular4 튜토리얼①~ 그래서 Angular4의 튜토리얼을 읽고 Ionic에서 실행해 본다. 튜토리얼 페이지는 이쪽. 일본어화되어 있기 때문에 (오랜만에) 일본어로 읽을 수 있어! 전제로 ionic의 blank 프로젝트를 만들어 둡니다. 투어 오브 히어로즈 튜토리얼은 Angular의 기초를 다룹니다. 이 튜토리얼에서는 인재 파견 회사가 영웅 집합을 관리하는 응용 프로그램을 개발합니다. 요소를 표시하고 은폐하고 영웅... Angular자바스크립트Ionic3ionicAngular4 Ionic 앱에 D3 Liquid Fill Gauge를 통합해 보았습니다! 만든 샘플의 리포지토리는 다음과 같습니다. 구현 해설에는 다음과 같은 내용이 포함됩니다. Ionic 앱에 Component를 추가하고 사용하는 경우 작성 방법 ngx-d3-liquid-fill-gauge 는 README의 순서를 실시해도 아래 그림과 같이 ngx-d3-liquid-fill-gauge が見つかりません。 라는 에러가 나와 빌드할 수 없었기 때문에, component로서 카피해 사... Ionic3ionic Ionic3에 입문해 보자~그 1 환경 구축~ 공식 HP에서 인용 The top open source framework for building amazing mobile apps. Ionic is the beautiful, free and open source mobile SDK for developing native and progressive web apps with ease. 구글 선생님의 일본어 번역 놀라운 모바일 응용 프로그램을... Angular자바스크립트Ionic3ionicAngular4 c3에서 하이브리드 앱을 만들어 보자. - 데이터 지속성 편 앱 내에서 데이터를 보관하고 싶을 때가 있습니다. 앱에서 설정이라든지 할 때라든가. 그런 때 cordova-sqlite-storage 를 사용해 갑니다. 이번에는 쉽게 버튼을 누르면 현재 시간을 저장하고 다른 페이지에서 표시해 봅시다. 명령으로 플러그인 설치 루트 모듈 추가 설정 그래도 했는데 모듈을 추가했으면 루트 모듈에 설정이 필요했습니다. src/app/app.module.ts 이상 추... iOSIonic3안드로이드코르도바하이브리드 앱 c3에서 하이브리드 앱을 만들어 보자. - 페이지 전환 편 의 계속입니다. 우선은 화면 천이의 트리거가 되는 버튼을 설치합니다. src/page/home/home.html 이제 한 번 실행해 봅시다. next 라고 표시된 버튼이 표시되었습니다. 지금은 표시되었을 뿐이므로, 반응은 합니다만 천이는 하지 않습니다. 다음은 천이처의 페이지를 만들어 갑니다. ionic에는 generate 라는 편리한 명령이 준비되어 있어 페이지의 추가도 간단하게 할 수 있... iOSIonic3안드로이드코르도바하이브리드 앱 c3에서 하이브리드 앱을 만들어 보자. - 도입편 macOS High Sierra 위의 설치 등은 할애. Ionic CLI 설치 프로젝트에 맞는 cordova와 ionic을 설치합니다. 설치가 완료되면 확인합니다. 지정한 것이 들어 있으면 OK. 이번에는 버전을 지정하고 있지만 @이후를 생략하면 최신판이 설치됩니다. 새로운 ionic 프로젝트를 시작하려면 다음 명령으로 한 번만 진행됩니다. 이번에는 'myapp'이라는 프로젝트를 만들어 봅시... iOSIonic3안드로이드코르도바하이브리드 앱