ionic 이미지로 아는 「템플릿 조견표」【Ionic】 개발 환경 (ionic info의 결과)은 다음과 같지만 Ionic3에서 실행했다. 템플릿 이름 개요 tabs 탭이 붙은 것 blank간단한 홈 화면 전용 sidemenu 토글 메뉴가 붙은 것 super 다양한 기능이 가득한 것 tutorialsidemenu와 기본적으로 같은 것 aws aws에 대응한 것 초기 화면(튜토리얼 화면) 사이드 메뉴 튜토리얼을 마치면 로그인하기위한 화면 (Welc... ionic 배포가 실패했을 때의 대처법【Ionic】 자신의 경험담의 디버그 기사입니다. 누군가의 도움이 되시면 다행입니다. 터미널에서 다음과 같은 명령을 실행하면 배포할 수 있습니다. ( [UserName] 부분은 사용자 이름) debugMethod.txt Ionic 앱을 ionic cordova build ios --prod에서 iOS 배포를 시도했지만 잘 작동하지 않았습니다. 그때 나온 명령의 대답은 다음과 같습니다. bug.txt 이 중... ionic Ionic4(stencil)로 폭속으로 Lighthouse 100점의 사이트를 시작한다 아무래도 입니다. Ionic을 자주 사용합니다. 이번, 폭속으로 Lighthouse의 퍼포먼스 100점의 사이트를 시작하는 방법을 알았으므로 써 둡니다. 다음 명령을 두드리자. 몇 초 안에 프로젝트가 생성됩니다. 스타터는 "ionic-pwa"를 선택합시다. 프로젝트 이름은 임의. Confirm은 "y"를 선택합시다. 만든 프로젝트를 GitHub로 푸시하세요. 프로젝트를 Netlify에 배포합... StencilNetlifyWebComponentsionic 라면집 메뉴 카탈로그 앱 라면 가게 메뉴 카탈로그 앱은 나와 후 혼자 친구와 함께 처음 개발한 모바일 앱입니다.이 프로젝트에서 나는 UI의 디사인과 와이어 프레임 후 개발 담당했습니다. 에서이 응용 프로그램의 목적은 방문하는 고객을위한 요리 메뉴를 표시합니다. 표시 언어는 현재 영어와 일본어를 전환할 수 있습니다. (1) 메뉴 타입 선택 화면 (Menu Type) 앱이 시작된 후 표시되는 첫 번째 화면입니다. 사용자... Angular디자인ionicMobile안드로이드 ionic에서 *ngFor가 작동하지 않을 때의 해결 방법 처음으로 ionic을 사용해 앱 개발을 실시하고 있는데, *ngFor 가 동작하지 않고 넘어졌던 적이 있었으므로, 메모가 떠난다. macOS HighSierra 10.13.6 ionic 4.1.2 npm 6.4.1 Node v10.10.0 단지 메모이므로 ionic의 설치 등은 기재하지 않으므로 양해 바랍니다. 페이지 안에 있는 기능을 다른 컴포넌트 파일로 나누어 코드를 깨끗이 시킨다! 우선... ionic Ionic 4에서 Vue.js를 사용해 보았습니다. 최근 뭔가 앞 프레임 워크에서 인기있는 Vue.js 이번에는 모바일 애플리케이션 개발에서 인기 ionic을 사용하여 Vue.js를 만져 간다. Vue CLI가 설치되었습니다 그렇다면 다음과 같이 입력합니다. i-vue 프로젝트로 이동하여 프로젝트 아래에서 npm을 설치하고 dev 환경을 달리기 아래와 같이 표시되면 두어! 뭔가 텍스트 편집기로 방금 만든 [i-Vue]를 엽니 다. index.... Vue.jsionic Ionic > Rating Star 구현하기 (별을 붙이는 사람) iOS 앱의 평가 등에 사용되는 Rating Star(아래 그림의 녀석)를 구현했지만, Ionic 표준의 컴포넌트에 그와 같은 것이 없었기 때문에, 무리하게 구현해 보았습니다. 도움이 되면. ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 사용하는 것은 ionic-range + CSS html css CSS는 assets에 파일을 추가하고 index.html에서 읽었습니다. ( host... ionic ionic으로 검색 양식을 만들어 보았습니다. 우선 먼저 어떤 것을 만들 것인가라고 하는 곳입니다만 밑그림입니다. 검색 조건이 추가되어 가는 느낌의 폼입니다. ionic이 자동으로 생성하는 프로그램 부분은 생략하고, 이번에 추가한 코드만 기재하고 있습니다. home.ts home.html home.scss... ionic 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 ionic에서 aws appsync를 사용해보십시오. 여러분은 GW는 무엇을 하고 지내십니까? 4/13의 AWS로부터의 알림 아시다시피, ionic의 aws starter는 Amplify에 대응하고 있으므로, aws starter로부터 프로젝트를 생성해 시작하려고 하면… 빨리 에러가 나온다 오늘은 그런 에러 대책입니다. 오류 제거 콘솔 의 조치대로 를 가져옵니다. 콘솔 그런 다음 다른 버그를 fix합니다. aws의 라이브러리가 업데이트 되었기 ... AppSyncionicAWS 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 【Ionic】 Cards Component의 우측 상단에 라벨을 붙이고 싶었다 Todo 앱 등에서 자주 보는 오른쪽 상단에 라벨이있는 카드를 사용하고 싶었기 때문에 만들어 보았습니다. 아티팩트는 이런 느낌입니다. ios md Ionic의 테마가 가지는 컬러맵 「theme/variables.scss」의 「$colors」와 사이좋게 할 수 있는 것을 의식했습니다. 「primary」 「secondary」 「danger」를 지정하는 것으로 외형의 구분을 할 수 있습니다. 끝에... ionic 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 Ionic 개발 환경 구축 모바일 앱을 만들고 싶다고 생각하며 Ionic 공부하기 시작했다. 내 Windows10PC에서 개발 환경을 만들어 보았다. OS:Windows10 Node: v8.9.4 npm:5.8.0 git : 2.13.2.windows.1 편집기: Visual Studio Code 참고. Node.js 넣으면 자동으로 npm도 들어갑니다. 설치 절차는 참고. 에서 설치할 수 있습니다. 이 왼쪽 메뉴 아... npmWindowsionicNode.js Angular 및 Ionic에서 VSCode에서 개발 효율성을 높이는 Angular Switch 사용법 Xcode에서 헤더 파일과 소스 코드를 전환하는 바로 가기가 있습니다.Cmd + Ctrl + ↓ or ↑ 그것을 VSCode에서 소스 코드 .ts와 .html를 빨리 전환하고 싶네요. 여기로 전환하고 Install 버튼을 눌러 설치를합시다. 인스톨을 하면 command + Shift + P >keyb 를 입력하면 위로 이동합니다. 다음 명령을 키 바인딩으로 설정합시다. 예를 들어 list.h... AngularVSCodeionic 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 IonicPage 채용시 HTML 태그 확장 (Custom Components) 구현 (2/2) 이 기사는 8일째 기사가 됩니다. 마지막으로, 그럼, IonicPage에 따라 새로운 페이지를 만드는 방법까지 게시했습니다. 후반부에서는 HTML 태그 확장(이하 커스텀 태그)을 Ionic Page에 도입하는 부분을 살펴보겠습니다. 우선 새로운 커스텀 태그가 되는 「커스텀 컴퍼넌트」를 생성합니다. component의 신규 작성을 실시하면(자), 다음과 같은 폴더나 파일이 생성됩니다. basi... iOSionic안드로이드코르도바하이브리드 앱 IonicPage 채용시 HTML 태그 확장 (Custom Components) 구현 정보 (1/2) Ionic - Build Amazing Native Apps and Progressive Web Apps with Ionic Framework and Angular UI의 톤마나가 통일되어 누구나 세련된 인터페이스를 가지는 어플리케이션을 만들 수 있습니다. 톤마나는 '톤 & 매너'의 약자로 광고에서 디자인의 일관성을 갖게 하는 것을 말합니다. 그렇다고는 해도, 표준 컴퍼넌트로 할 수 있는 것... iOSionic안드로이드코르도바하이브리드 앱 ionic에서 cordova plugin을 그대로 사용 (non-native) 의 showOpenWithDialog() 를 사용하고 싶었지만 ionic-native화되고 있는 녀석( )에는 메소드가 없었다 그래서 조사했다 declare const cordova; 을 작성하는 것만 오징어처럼 사용 나쁜 노하우 (웃음)... 코르도바ionic ionic native로 repro cordova 플러그인의 TypeScrip 래퍼 만들기 최근 Repro라는 애널리틱스 도구의 존재를 알았습니다. 뭐든지, 이벤트 뿐만이 아니고 동영상도 잡힐 수 있다고 하는 것. 조속히 ionic에서도 시도하려고 생각했습니다만, Repro의 Cordova 플러그인에 d.ts가 없었기 때문에, 모처럼이므로 ionic-native로 Repro의 TypeScript 래퍼를 만들어 보기로 했습니다. 작성한 래퍼는 github에 올려 있습니다. 사용법은 ... 코르도바ReproTypeScriptionic 이전 기사 보기
이미지로 아는 「템플릿 조견표」【Ionic】 개발 환경 (ionic info의 결과)은 다음과 같지만 Ionic3에서 실행했다. 템플릿 이름 개요 tabs 탭이 붙은 것 blank간단한 홈 화면 전용 sidemenu 토글 메뉴가 붙은 것 super 다양한 기능이 가득한 것 tutorialsidemenu와 기본적으로 같은 것 aws aws에 대응한 것 초기 화면(튜토리얼 화면) 사이드 메뉴 튜토리얼을 마치면 로그인하기위한 화면 (Welc... ionic 배포가 실패했을 때의 대처법【Ionic】 자신의 경험담의 디버그 기사입니다. 누군가의 도움이 되시면 다행입니다. 터미널에서 다음과 같은 명령을 실행하면 배포할 수 있습니다. ( [UserName] 부분은 사용자 이름) debugMethod.txt Ionic 앱을 ionic cordova build ios --prod에서 iOS 배포를 시도했지만 잘 작동하지 않았습니다. 그때 나온 명령의 대답은 다음과 같습니다. bug.txt 이 중... ionic Ionic4(stencil)로 폭속으로 Lighthouse 100점의 사이트를 시작한다 아무래도 입니다. Ionic을 자주 사용합니다. 이번, 폭속으로 Lighthouse의 퍼포먼스 100점의 사이트를 시작하는 방법을 알았으므로 써 둡니다. 다음 명령을 두드리자. 몇 초 안에 프로젝트가 생성됩니다. 스타터는 "ionic-pwa"를 선택합시다. 프로젝트 이름은 임의. Confirm은 "y"를 선택합시다. 만든 프로젝트를 GitHub로 푸시하세요. 프로젝트를 Netlify에 배포합... StencilNetlifyWebComponentsionic 라면집 메뉴 카탈로그 앱 라면 가게 메뉴 카탈로그 앱은 나와 후 혼자 친구와 함께 처음 개발한 모바일 앱입니다.이 프로젝트에서 나는 UI의 디사인과 와이어 프레임 후 개발 담당했습니다. 에서이 응용 프로그램의 목적은 방문하는 고객을위한 요리 메뉴를 표시합니다. 표시 언어는 현재 영어와 일본어를 전환할 수 있습니다. (1) 메뉴 타입 선택 화면 (Menu Type) 앱이 시작된 후 표시되는 첫 번째 화면입니다. 사용자... Angular디자인ionicMobile안드로이드 ionic에서 *ngFor가 작동하지 않을 때의 해결 방법 처음으로 ionic을 사용해 앱 개발을 실시하고 있는데, *ngFor 가 동작하지 않고 넘어졌던 적이 있었으므로, 메모가 떠난다. macOS HighSierra 10.13.6 ionic 4.1.2 npm 6.4.1 Node v10.10.0 단지 메모이므로 ionic의 설치 등은 기재하지 않으므로 양해 바랍니다. 페이지 안에 있는 기능을 다른 컴포넌트 파일로 나누어 코드를 깨끗이 시킨다! 우선... ionic Ionic 4에서 Vue.js를 사용해 보았습니다. 최근 뭔가 앞 프레임 워크에서 인기있는 Vue.js 이번에는 모바일 애플리케이션 개발에서 인기 ionic을 사용하여 Vue.js를 만져 간다. Vue CLI가 설치되었습니다 그렇다면 다음과 같이 입력합니다. i-vue 프로젝트로 이동하여 프로젝트 아래에서 npm을 설치하고 dev 환경을 달리기 아래와 같이 표시되면 두어! 뭔가 텍스트 편집기로 방금 만든 [i-Vue]를 엽니 다. index.... Vue.jsionic Ionic > Rating Star 구현하기 (별을 붙이는 사람) iOS 앱의 평가 등에 사용되는 Rating Star(아래 그림의 녀석)를 구현했지만, Ionic 표준의 컴포넌트에 그와 같은 것이 없었기 때문에, 무리하게 구현해 보았습니다. 도움이 되면. ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 사용하는 것은 ionic-range + CSS html css CSS는 assets에 파일을 추가하고 index.html에서 읽었습니다. ( host... ionic ionic으로 검색 양식을 만들어 보았습니다. 우선 먼저 어떤 것을 만들 것인가라고 하는 곳입니다만 밑그림입니다. 검색 조건이 추가되어 가는 느낌의 폼입니다. ionic이 자동으로 생성하는 프로그램 부분은 생략하고, 이번에 추가한 코드만 기재하고 있습니다. home.ts home.html home.scss... ionic 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 ionic에서 aws appsync를 사용해보십시오. 여러분은 GW는 무엇을 하고 지내십니까? 4/13의 AWS로부터의 알림 아시다시피, ionic의 aws starter는 Amplify에 대응하고 있으므로, aws starter로부터 프로젝트를 생성해 시작하려고 하면… 빨리 에러가 나온다 오늘은 그런 에러 대책입니다. 오류 제거 콘솔 의 조치대로 를 가져옵니다. 콘솔 그런 다음 다른 버그를 fix합니다. aws의 라이브러리가 업데이트 되었기 ... AppSyncionicAWS 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 【Ionic】 Cards Component의 우측 상단에 라벨을 붙이고 싶었다 Todo 앱 등에서 자주 보는 오른쪽 상단에 라벨이있는 카드를 사용하고 싶었기 때문에 만들어 보았습니다. 아티팩트는 이런 느낌입니다. ios md Ionic의 테마가 가지는 컬러맵 「theme/variables.scss」의 「$colors」와 사이좋게 할 수 있는 것을 의식했습니다. 「primary」 「secondary」 「danger」를 지정하는 것으로 외형의 구분을 할 수 있습니다. 끝에... ionic 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 Ionic 개발 환경 구축 모바일 앱을 만들고 싶다고 생각하며 Ionic 공부하기 시작했다. 내 Windows10PC에서 개발 환경을 만들어 보았다. OS:Windows10 Node: v8.9.4 npm:5.8.0 git : 2.13.2.windows.1 편집기: Visual Studio Code 참고. Node.js 넣으면 자동으로 npm도 들어갑니다. 설치 절차는 참고. 에서 설치할 수 있습니다. 이 왼쪽 메뉴 아... npmWindowsionicNode.js Angular 및 Ionic에서 VSCode에서 개발 효율성을 높이는 Angular Switch 사용법 Xcode에서 헤더 파일과 소스 코드를 전환하는 바로 가기가 있습니다.Cmd + Ctrl + ↓ or ↑ 그것을 VSCode에서 소스 코드 .ts와 .html를 빨리 전환하고 싶네요. 여기로 전환하고 Install 버튼을 눌러 설치를합시다. 인스톨을 하면 command + Shift + P >keyb 를 입력하면 위로 이동합니다. 다음 명령을 키 바인딩으로 설정합시다. 예를 들어 list.h... AngularVSCodeionic 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 IonicPage 채용시 HTML 태그 확장 (Custom Components) 구현 (2/2) 이 기사는 8일째 기사가 됩니다. 마지막으로, 그럼, IonicPage에 따라 새로운 페이지를 만드는 방법까지 게시했습니다. 후반부에서는 HTML 태그 확장(이하 커스텀 태그)을 Ionic Page에 도입하는 부분을 살펴보겠습니다. 우선 새로운 커스텀 태그가 되는 「커스텀 컴퍼넌트」를 생성합니다. component의 신규 작성을 실시하면(자), 다음과 같은 폴더나 파일이 생성됩니다. basi... iOSionic안드로이드코르도바하이브리드 앱 IonicPage 채용시 HTML 태그 확장 (Custom Components) 구현 정보 (1/2) Ionic - Build Amazing Native Apps and Progressive Web Apps with Ionic Framework and Angular UI의 톤마나가 통일되어 누구나 세련된 인터페이스를 가지는 어플리케이션을 만들 수 있습니다. 톤마나는 '톤 & 매너'의 약자로 광고에서 디자인의 일관성을 갖게 하는 것을 말합니다. 그렇다고는 해도, 표준 컴퍼넌트로 할 수 있는 것... iOSionic안드로이드코르도바하이브리드 앱 ionic에서 cordova plugin을 그대로 사용 (non-native) 의 showOpenWithDialog() 를 사용하고 싶었지만 ionic-native화되고 있는 녀석( )에는 메소드가 없었다 그래서 조사했다 declare const cordova; 을 작성하는 것만 오징어처럼 사용 나쁜 노하우 (웃음)... 코르도바ionic ionic native로 repro cordova 플러그인의 TypeScrip 래퍼 만들기 최근 Repro라는 애널리틱스 도구의 존재를 알았습니다. 뭐든지, 이벤트 뿐만이 아니고 동영상도 잡힐 수 있다고 하는 것. 조속히 ionic에서도 시도하려고 생각했습니다만, Repro의 Cordova 플러그인에 d.ts가 없었기 때문에, 모처럼이므로 ionic-native로 Repro의 TypeScript 래퍼를 만들어 보기로 했습니다. 작성한 래퍼는 github에 올려 있습니다. 사용법은 ... 코르도바ReproTypeScriptionic 이전 기사 보기