ionic [거짓말이었습니다] 2019년부터 App Store에서 Xamarin, PhoneGap(Cordova) 앱이 거부된다는 풍평에 대해 (이 기사는 의 12/21 항목입니다) 아래의 트윗이 화제를 모았습니다. "Apple로부터 2019년부터 Xamarin이나 PhoneGap으로 만든 앱은 거부될 계획이 있다는 메시지를 받았다" A friend of mine received today this email from . 그것을 받고, 일본어 트윗에서도 「이미 리젝트 축제는 행해지고 있다」 「Xamarin로 만들면 OK라고 생각하고... iOSPhoneGapXamarinionic코르도바 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 Windows 환경의 Ionic 로컬 개발에서 SSL 사용 다음 환경에서 개발 PC에 openSSL 데이터 설치 PC 환경 변수 설정 npm에서 모듈을 추가하여 SSL 생성 package.json에서 SSL 사용 1.PC에 openSSL 데이터 설치 아래 GoogleCode에서 다운로드하여 "C :/OpenSSL-Win32/"에 설치 어떤 디렉토리라도 좋다. 2. PC 환경 변수 설정 환경 변수 패널 열기 설정이나 「Windows 키+Pause|Br... SSLionic-generateionic Ionic Native Plugin을 설치하면 vendor.js 오류로 Plugin을 사용할 수 없습니다. 이번 기사는, Ionic 이나 Cordova 의 개발을 길게 실시하고 있는 사람이면 빠지지 않는 문제라고 생각하기 때문에, 초보자용의 것이 되고 있습니다. 의 플러그인을 설치하고 가끔 사용하려고하면 아래와 같은 오류가 발생하여 빠졌습니다 필요한 Library 정보를 요약합니다. Library 버전 typescript @angular/core @ionic-native/core iOS 앱에서 버... Angularionic 【AR】Vuforia Studio의 화면 부품에 Ionic framework의 서비스를 추가해 사용한다. 항상 신세를지고 있습니다. 마지막으로 에서 Vuforia Studio에 Ionic을 사용하여 화면을 장식하는 방법에 대해 썼습니다. 요 전날 Vuforia Studio에서 AR 경험을 만들었을 때, 그 외에도 Ionic의 JAVASCRIPT를 결합하여 화면을 만들었으므로 이번에는 그 내용이됩니다. 사용한 환경은 다음과 같습니다. Vuforia Studio : Version 8.4.7 (8.4... ionicvuforiastudio 【AR】Vuforia Studio로 만든 화면을 조금 장식하고 싶다 항상 신세를지고 있습니다. 요 전날 Vuforia Studio를 사용하여 뷰어 (Vuforia View)에서 볼 수있는 AR 경험을 만들 수있었습니다. 시도해 보면 여러가지 할 수 있었으므로, 향후의 힌트가 되면(자)라고 생각 메모를 남깁니다. Vuforia Studio : Version 8.4.7 (8.4.7.4459) Vuforia View : Version 8.4.60(1729) Vuf... ionicvuforiastudio cordova에서 스마트 폰 앱 개발 6 라고 말하면 바코드 리더를 사용해 보자. 카메라는 네이티브의 기능이므로 할 수 있는 거야? 그리고 궁금해서, 조사해 보면 cordova에서 플러그인이 제공되고있는 모습 샘플 코드에서는 실제 거동을 모르기 때문에 구현하고 움직여 보겠습니다. 우선, 환경을 확인 병아리가 되는 애플리케이션 만들기 새 블랭크로 애플리케이션 만들기 바코드 리더를 실행하는 페이지도 작성합니다. 이전 은 링크 태그로 무... ionic cordova에서 스마트 폰 앱 개발 5 cordova, ionic 및 html5로 앱 같은 앱 만들기 환경은 이런 느낌 이전 에서 ionic 버전이 약간 올랐습니다. paper 좌절했습니다. 전혀 움직이지 않는 원인도 깔끔하게 그림 그리기 갑자기 시원한 일을 시도하지 마십시오. 하나씩 통합하고 확인하는 것이 중요합니다 (계명 그래서 1. canvas 표시 2. 캔버스에 선 그리기 3. 에뮬레이터에서 확인 순서대로 구현 canvas... ionic cordova에서 스마트 폰 앱 개발 4 ionic만의 기능을 몇 가지 픽업해 작성해 본다 슬라이드 마지막으로 만든 tab4에 슬라이더를 포함해보십시오. \src\app\tab4\tab4.page.ts style="width:100%;height:100%"를 지정하지 않으면 이상하게 좁거나, 2 페이지째가 보이고 버리거나 하므로 주의 initialSlide: 0 으로 초기 페이지를 지정할 수 있다 reorder 새로 tab5를 만들... ionic cordova에서 스마트 폰 앱 개발 3 작성한 애플리케이션의 폴더 구성은 다음과 같습니다. [C:\cordova_app\helloIonic] ├─e2e ├─node_modules ├─플랫폼 ├─plugins ├─resources ├─src └─www 기능을 추가하려면/src 다음을 편집하십시오. 마지막으로 응용 프로그램을 만들 때 템플릿으로 tab을 선택했기 때문에/src/app 아래에 TAB 구성이 만들어졌습니다. [C:\cor... ionic ionic의 ion-split-pane 사용법 ionic을 사용하는데 보통의 사이드 메뉴를 사용하는 것보다 사용한 적이 없는 기술을 사용하고 싶은 노리로 ion-split-pane을 사용해 보았으므로 모처럼이므로 기사로합니다. 일단 문서를 붙여 둡니다만 깊게는 파고들 수 없습니다 w app.component.html에 쓰면 모든 페이지에 반영된다. 숨기고 싶은 페이지도 MenuController를 사용하면 숨기기 설정 가능. ion-sp... HTMLCSSAngularionic cordova에서 스마트 폰 앱 개발 nodejs 설치 npm에서 cordova, ionic 설치를 위해 nodejs 설치 cordova 설치 애플리케이션 만들기 만든 프로젝트의 환경 확인 애플리케이션 빌드 플랫폼을 추가하면 화가 나므로 android 추가 다시 빌드 ANDROID_HOME 및 android 명령 경로가 없으면 화가납니다. 플랫폼과는 별도로 android SDK를 별도로 준비해야하는 것 같습니다. ※ios용이라면... ionic @ionic/react를 Parcel로 이동 전작 : 지난번 스스로 Webpack의 설정을 써서 @ionic/react를 움직였습니다. 이번에는 이미 Parcel에서 만들고 있는 프로젝트에 @ionic/react를 도입하고 싶었으므로, Parcel에서 @ionic/react를 움직일 수 있는 설정에 대해 알아보았습니다. 우선 설정입니다. 다음은 애플리케이션 코드입니다. src/index.html src/index.js 우선 솔직하게 움... parcelReactionic 최소 구성으로 시작 @ionic/react 올해 초 Ionic 4가 출시되었습니다. Ionic 4에서는 UI 컴포넌트가 WebComponents에서 다시 구현되어 React와 Vue에서도 Ionic을 사용할 수 있습니다. 그래서 React 버전의 을 빠르게 실행하고 싶습니다. (버전 4.8.0-rc.0에서 동작 확인했습니다.) @ionic/react를 사용하려면 Webpack에서 몇 가지 설정이 필요합니다. Ionic CLI나 cre... webpackReactionic Angular란? Google이 개발하고 있는 JavaScript의 프레임워크입니다. 현재(2020/02/20)는 Version9까지 릴리스 되고 있는 것 같습니다. Angular(앵귤러)는 Google과 개인 및 기업 커뮤니티가 개발한 TypeScript 기반 오픈 소스 프런트 엔드 웹 애플리케이션 프레임워크이다. 라고 기재되어 있습니다. 그 밖에도 「Vue」나 「React」등 있습니다만, 제일 큰 차이는 ... Angular초보자TypeScriptionic 스마트 폰 앱을 만들었기 때문에 만들고 싶었습니다. 해본 적 없는 일을 하고 싶어서 스마트폰 앱을 만들어 보기로 했다. 참고 자료:토라 랩! Vol.2(by 기술서전6) Ionic으로 간단하게 만들 수 있는 것들이 쓰여 있었으므로 이것을 시도해 보자. 이 가장자리 참조. 우선 환경 구축. 설치 대상 단말기의 환경은 다음과 같습니다. Node.js의 HP에서 설치 프로그램을 다운로드하여 설치합니다. 라고 생각했지만, 이미 인스톨 하고 있었다. ... ionic ionic/vue도 베타 버전이 되었기 때문에 만져 보았다. 이번은 ionic/vue가 β판이 되었다고 하는 것으로 실제로 사용해 본 감상 등 여러분에게 전해 가면 좋을까라고 생각하고 있습니다. 슬라이드는 에 있으므로, 원하시면 참조하십시오. 이전, ionic/vue가 α판이었을 때에 한 번 에 기재했으므로 꼭 봐 주세요! Node.js 8.11.3 Vue Router를 사용할 수있게되었습니다 α판에서는 사용할 수 없었던 Ionic의 컴퍼넌트를 사용할... iOSVue.jsionic4ionic Java도 Swift도 모르는 아마추어가 Ionic으로 스마트폰 앱을 만든다(그 1 개발 준비와 테스트 앱 작성편) 그래서 웹사이트뿐만 아니라 이 스마트폰 앱이 만들고 싶은 것이다. Android 앱의 경우 Java, iOS 앱의 경우 Swift와 왜 2개 언어도 공부해야 하는가. 기술을 닦는 것이 아니라 앱을 만들고 싶다면 Android 앱과 iOS 앱을 만들어야한다면, Ionic은 HTML5로 만든 앱을 웹뿐만 아니라 iOS 앱이나 Android 앱으로도 출시할 수 있다. 처럼 지금까지 Ruby로 WE... ionic 블로그나 기술서용으로 스크린샷을 찍기 위한 사이트를 만들어 보았다 집필은 처음이므로 고생하면서 즐겁게 하고 있습니다만, 하나만 불만이 있습니다. 보시다시피 테두리가 없기 때문에 어쩐지 불편하네요. 이렇게 하지 않기 위해 테두리를 붙이는 등의 방법이 있습니다만, 개인적으로 제일 깨끗하다고 생각하는 것은 Mac의 디폴트의 box-shadow를 붙여 스쿠쇼를 취하는 방법입니다. 하지만 , 이 스쿠쇼를 취하기 위해서는 흰색 배경을 준비하거나 불필요한 윈도우를 닫거... 기술서개인 개발Stencilionic Ionic4로 색상 추가 Ionic Japan UserGroup보다 일본어 번역이 나왔으므로 이것을 읽으면 좋다! Ionic4에서 색상을 추가하는 방법입니다. Ionic3과 방법이 바뀌었기 때문에 메모. variable.scss의 colors에 추가하면 OK였습니다. /theme/variable.scss $colors에 추가하면 Ionic 구성 요소에서 사용할 수 있습니다. 클래스에 추가하면 사용할 수 있게 됩니다.... CSSionic4ionic Ionic 3 및 AWS Amplify를 사용해 봅니다(2: Cognito Userpool을 사용한 인증) Cognito 설정 이번에는 Amplify를 사용하여 AWS Cognito의 Userpool을 설정하고 Cognito를 사용하여 Ionic 앱에서 Sign Up/Sign In을 수행하는 부분을 실험해 보겠습니다. 여기에서는 기본 설정 사용을 선택합니다. 디폴트란 Cognito Userpool을 사용한 인증에 "email/password를 사용""본인 확인을 위한 난수 코드는 등록한 메일 주소... amplifycognitoionicAWS Ionic3에 Angular-material을 도입해 본다. 현장에서 Ionic3을 사용하여 앱을 만들고 있습니다만, webview에서 표시되는 페이지에서 Angular-material을 사용하고 있어, 네이티브와 web페이지에서 디자인이 바뀌어 버리는 것으로 네이티브측 즉 Ionic측에 심지어 Angular-material을 도입하자는 것으로 시도해 보았습니다만 곳곳에 빠진 부분이 있었기 때문에, 기록도 겸해 공유합니다😃 ionic start 명령이... AngularangularMaterialionic Ionic에서 핀치 인 아웃으로 글꼴 크기를 변경해보십시오 (iOS safari 지원) 제가 개인 개발하고 있는 AA 정리 zip 전달의 서비스(AAHub)에서 요망이 있던 내용입니다. 스마트 폰으로 핀치 인 아웃의 조작을했을 때에 폰트 사이즈의 변경을 실시할 수 있도록(듯이) 했습니다. 본 기사에서는 그 때의 구현을 되돌아 보겠습니다. 기본적으로 핀치 인 아웃을 할 때 글꼴 크기를 변경하려면 다음 단계가 있습니다. 핀치 인 아웃을 리스팅하는 Directive를 만든다 개방 상... AsciiArt아스키 아트ionicShift_JISArt @ionic/vue + Capacitor로 크로스 플랫폼의 미래를 들여다 봅니다. 요 전날 열린 Frontend Conference Fukuoka 2018에서 이라는 내용으로 발표했습니다. 그 중에서도 주목하고 있는 Ionic입니다만, Vue에서도 사용할 수 있게 된다고 하는 것으로, 간단합니다만 움직여 봅니다. 게다가 그것을 Capacitor에서 iOS 앱으로 움직이려고합니다. node 8.12.0 vue ^2.5.17 (vue cli) 이제 초기 화면이 브라우저에서 표... Vue.jsionicCapacitor Vue.js를 지원하는 Ionic을 만져보세요. Ionic 라는 Web과 ios , Android , Electron 등의 네이티브 앱을 같은 코드로 만들 수 있는 프레임워크의 Vue.jsIonic 을 사용한 적이 없기 때문에 자세한 것은 모릅니다만, React 로 말하는 곳의 React Navive 지금까지는 angular 에만 대응하고 있었는데, Vue.js 에 대응했다고 하는 것으로 화제에 오르고 있는 것 같습니다. Ionic, Vu... Vue.js자바스크립트ionic window.open() 의 기억 1. 옵션 2. 외부 pdf 파일 표시 잘 잊기 쉽기 때문에 메모 메모 주소 표시줄 숨기기 URL만 숨기기 Done 버튼 문장 변경 네비게이션 버튼 숨기기 확대/축소 iOS의 경우 옵션 없음 소스 코드 실행 결과 옵션 있음 소스 코드 실행 결과 Android의 경우 옵션 없음 소스 코드 실행 결과 옵션 있음(PDF 표시 시 GoogleDocView 사용) 소스 코드 실행 결과 이상입니다.... 자바스크립트Optioninappbrowserionic바람 w. 오펜 Ionic/Angular에서 GoogleMaps (AGM) Angular Google Maps라는 라이브러리를 사용하여 Ionic에서 Google Maps를 사용해 보았습니다. Angular에서 쉽게 Google Maps JS API를 사용할 수있는 라이브러리입니다. 설치 Angular 5에서는 beta.2를 사용하지 않으면 떨어집니다 app.module.ts 에서 AgmCoreModule.forRoot() 를 import app.module.ts ... Angularangular-google-mapsionic Tabs의 작성・추가【Ionic】 개발 환경(ionic info의 결과)은 다음과 같지만 Ionic3에서 실행했다. 템플릿에 있는 3개의 탭이 아니라, 다음과 같은 5つのタブ를 작성·추가하고 싶다. Terminal에서 ionic g tabs를 입력합니다. 그 탭 세트의 이름을 결정한다 (What should the name be?) 탭 개수 입력(How many tabs?) 각 탭의 이름 입력(Name of this tab:... ionic super 템플릿을 이용한 「튜토리얼 페이지」의 작성 방법【Ionic】 이 기사의 튜토리얼 페이지란, 다음과 같은 페이지를 말한다. 개발 환경( ionic info의 결과)은 다음과 같지만 Ionic3 에서 실행했다. super 템플릿은 Ionic에 원래 포함되어있는 템플릿입니다. 자세한 내용은 다음 기사를 참조하십시오. 참고 : 다음과 같은 명령을 실행(Mac의 경우)해 간다. ( [ApplicationName] 에 실제 앱의 이름을 입력) ionic star... ionic 이전 기사 보기
[거짓말이었습니다] 2019년부터 App Store에서 Xamarin, PhoneGap(Cordova) 앱이 거부된다는 풍평에 대해 (이 기사는 의 12/21 항목입니다) 아래의 트윗이 화제를 모았습니다. "Apple로부터 2019년부터 Xamarin이나 PhoneGap으로 만든 앱은 거부될 계획이 있다는 메시지를 받았다" A friend of mine received today this email from . 그것을 받고, 일본어 트윗에서도 「이미 리젝트 축제는 행해지고 있다」 「Xamarin로 만들면 OK라고 생각하고... iOSPhoneGapXamarinionic코르도바 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 Windows 환경의 Ionic 로컬 개발에서 SSL 사용 다음 환경에서 개발 PC에 openSSL 데이터 설치 PC 환경 변수 설정 npm에서 모듈을 추가하여 SSL 생성 package.json에서 SSL 사용 1.PC에 openSSL 데이터 설치 아래 GoogleCode에서 다운로드하여 "C :/OpenSSL-Win32/"에 설치 어떤 디렉토리라도 좋다. 2. PC 환경 변수 설정 환경 변수 패널 열기 설정이나 「Windows 키+Pause|Br... SSLionic-generateionic Ionic Native Plugin을 설치하면 vendor.js 오류로 Plugin을 사용할 수 없습니다. 이번 기사는, Ionic 이나 Cordova 의 개발을 길게 실시하고 있는 사람이면 빠지지 않는 문제라고 생각하기 때문에, 초보자용의 것이 되고 있습니다. 의 플러그인을 설치하고 가끔 사용하려고하면 아래와 같은 오류가 발생하여 빠졌습니다 필요한 Library 정보를 요약합니다. Library 버전 typescript @angular/core @ionic-native/core iOS 앱에서 버... Angularionic 【AR】Vuforia Studio의 화면 부품에 Ionic framework의 서비스를 추가해 사용한다. 항상 신세를지고 있습니다. 마지막으로 에서 Vuforia Studio에 Ionic을 사용하여 화면을 장식하는 방법에 대해 썼습니다. 요 전날 Vuforia Studio에서 AR 경험을 만들었을 때, 그 외에도 Ionic의 JAVASCRIPT를 결합하여 화면을 만들었으므로 이번에는 그 내용이됩니다. 사용한 환경은 다음과 같습니다. Vuforia Studio : Version 8.4.7 (8.4... ionicvuforiastudio 【AR】Vuforia Studio로 만든 화면을 조금 장식하고 싶다 항상 신세를지고 있습니다. 요 전날 Vuforia Studio를 사용하여 뷰어 (Vuforia View)에서 볼 수있는 AR 경험을 만들 수있었습니다. 시도해 보면 여러가지 할 수 있었으므로, 향후의 힌트가 되면(자)라고 생각 메모를 남깁니다. Vuforia Studio : Version 8.4.7 (8.4.7.4459) Vuforia View : Version 8.4.60(1729) Vuf... ionicvuforiastudio cordova에서 스마트 폰 앱 개발 6 라고 말하면 바코드 리더를 사용해 보자. 카메라는 네이티브의 기능이므로 할 수 있는 거야? 그리고 궁금해서, 조사해 보면 cordova에서 플러그인이 제공되고있는 모습 샘플 코드에서는 실제 거동을 모르기 때문에 구현하고 움직여 보겠습니다. 우선, 환경을 확인 병아리가 되는 애플리케이션 만들기 새 블랭크로 애플리케이션 만들기 바코드 리더를 실행하는 페이지도 작성합니다. 이전 은 링크 태그로 무... ionic cordova에서 스마트 폰 앱 개발 5 cordova, ionic 및 html5로 앱 같은 앱 만들기 환경은 이런 느낌 이전 에서 ionic 버전이 약간 올랐습니다. paper 좌절했습니다. 전혀 움직이지 않는 원인도 깔끔하게 그림 그리기 갑자기 시원한 일을 시도하지 마십시오. 하나씩 통합하고 확인하는 것이 중요합니다 (계명 그래서 1. canvas 표시 2. 캔버스에 선 그리기 3. 에뮬레이터에서 확인 순서대로 구현 canvas... ionic cordova에서 스마트 폰 앱 개발 4 ionic만의 기능을 몇 가지 픽업해 작성해 본다 슬라이드 마지막으로 만든 tab4에 슬라이더를 포함해보십시오. \src\app\tab4\tab4.page.ts style="width:100%;height:100%"를 지정하지 않으면 이상하게 좁거나, 2 페이지째가 보이고 버리거나 하므로 주의 initialSlide: 0 으로 초기 페이지를 지정할 수 있다 reorder 새로 tab5를 만들... ionic cordova에서 스마트 폰 앱 개발 3 작성한 애플리케이션의 폴더 구성은 다음과 같습니다. [C:\cordova_app\helloIonic] ├─e2e ├─node_modules ├─플랫폼 ├─plugins ├─resources ├─src └─www 기능을 추가하려면/src 다음을 편집하십시오. 마지막으로 응용 프로그램을 만들 때 템플릿으로 tab을 선택했기 때문에/src/app 아래에 TAB 구성이 만들어졌습니다. [C:\cor... ionic ionic의 ion-split-pane 사용법 ionic을 사용하는데 보통의 사이드 메뉴를 사용하는 것보다 사용한 적이 없는 기술을 사용하고 싶은 노리로 ion-split-pane을 사용해 보았으므로 모처럼이므로 기사로합니다. 일단 문서를 붙여 둡니다만 깊게는 파고들 수 없습니다 w app.component.html에 쓰면 모든 페이지에 반영된다. 숨기고 싶은 페이지도 MenuController를 사용하면 숨기기 설정 가능. ion-sp... HTMLCSSAngularionic cordova에서 스마트 폰 앱 개발 nodejs 설치 npm에서 cordova, ionic 설치를 위해 nodejs 설치 cordova 설치 애플리케이션 만들기 만든 프로젝트의 환경 확인 애플리케이션 빌드 플랫폼을 추가하면 화가 나므로 android 추가 다시 빌드 ANDROID_HOME 및 android 명령 경로가 없으면 화가납니다. 플랫폼과는 별도로 android SDK를 별도로 준비해야하는 것 같습니다. ※ios용이라면... ionic @ionic/react를 Parcel로 이동 전작 : 지난번 스스로 Webpack의 설정을 써서 @ionic/react를 움직였습니다. 이번에는 이미 Parcel에서 만들고 있는 프로젝트에 @ionic/react를 도입하고 싶었으므로, Parcel에서 @ionic/react를 움직일 수 있는 설정에 대해 알아보았습니다. 우선 설정입니다. 다음은 애플리케이션 코드입니다. src/index.html src/index.js 우선 솔직하게 움... parcelReactionic 최소 구성으로 시작 @ionic/react 올해 초 Ionic 4가 출시되었습니다. Ionic 4에서는 UI 컴포넌트가 WebComponents에서 다시 구현되어 React와 Vue에서도 Ionic을 사용할 수 있습니다. 그래서 React 버전의 을 빠르게 실행하고 싶습니다. (버전 4.8.0-rc.0에서 동작 확인했습니다.) @ionic/react를 사용하려면 Webpack에서 몇 가지 설정이 필요합니다. Ionic CLI나 cre... webpackReactionic Angular란? Google이 개발하고 있는 JavaScript의 프레임워크입니다. 현재(2020/02/20)는 Version9까지 릴리스 되고 있는 것 같습니다. Angular(앵귤러)는 Google과 개인 및 기업 커뮤니티가 개발한 TypeScript 기반 오픈 소스 프런트 엔드 웹 애플리케이션 프레임워크이다. 라고 기재되어 있습니다. 그 밖에도 「Vue」나 「React」등 있습니다만, 제일 큰 차이는 ... Angular초보자TypeScriptionic 스마트 폰 앱을 만들었기 때문에 만들고 싶었습니다. 해본 적 없는 일을 하고 싶어서 스마트폰 앱을 만들어 보기로 했다. 참고 자료:토라 랩! Vol.2(by 기술서전6) Ionic으로 간단하게 만들 수 있는 것들이 쓰여 있었으므로 이것을 시도해 보자. 이 가장자리 참조. 우선 환경 구축. 설치 대상 단말기의 환경은 다음과 같습니다. Node.js의 HP에서 설치 프로그램을 다운로드하여 설치합니다. 라고 생각했지만, 이미 인스톨 하고 있었다. ... ionic ionic/vue도 베타 버전이 되었기 때문에 만져 보았다. 이번은 ionic/vue가 β판이 되었다고 하는 것으로 실제로 사용해 본 감상 등 여러분에게 전해 가면 좋을까라고 생각하고 있습니다. 슬라이드는 에 있으므로, 원하시면 참조하십시오. 이전, ionic/vue가 α판이었을 때에 한 번 에 기재했으므로 꼭 봐 주세요! Node.js 8.11.3 Vue Router를 사용할 수있게되었습니다 α판에서는 사용할 수 없었던 Ionic의 컴퍼넌트를 사용할... iOSVue.jsionic4ionic Java도 Swift도 모르는 아마추어가 Ionic으로 스마트폰 앱을 만든다(그 1 개발 준비와 테스트 앱 작성편) 그래서 웹사이트뿐만 아니라 이 스마트폰 앱이 만들고 싶은 것이다. Android 앱의 경우 Java, iOS 앱의 경우 Swift와 왜 2개 언어도 공부해야 하는가. 기술을 닦는 것이 아니라 앱을 만들고 싶다면 Android 앱과 iOS 앱을 만들어야한다면, Ionic은 HTML5로 만든 앱을 웹뿐만 아니라 iOS 앱이나 Android 앱으로도 출시할 수 있다. 처럼 지금까지 Ruby로 WE... ionic 블로그나 기술서용으로 스크린샷을 찍기 위한 사이트를 만들어 보았다 집필은 처음이므로 고생하면서 즐겁게 하고 있습니다만, 하나만 불만이 있습니다. 보시다시피 테두리가 없기 때문에 어쩐지 불편하네요. 이렇게 하지 않기 위해 테두리를 붙이는 등의 방법이 있습니다만, 개인적으로 제일 깨끗하다고 생각하는 것은 Mac의 디폴트의 box-shadow를 붙여 스쿠쇼를 취하는 방법입니다. 하지만 , 이 스쿠쇼를 취하기 위해서는 흰색 배경을 준비하거나 불필요한 윈도우를 닫거... 기술서개인 개발Stencilionic Ionic4로 색상 추가 Ionic Japan UserGroup보다 일본어 번역이 나왔으므로 이것을 읽으면 좋다! Ionic4에서 색상을 추가하는 방법입니다. Ionic3과 방법이 바뀌었기 때문에 메모. variable.scss의 colors에 추가하면 OK였습니다. /theme/variable.scss $colors에 추가하면 Ionic 구성 요소에서 사용할 수 있습니다. 클래스에 추가하면 사용할 수 있게 됩니다.... CSSionic4ionic Ionic 3 및 AWS Amplify를 사용해 봅니다(2: Cognito Userpool을 사용한 인증) Cognito 설정 이번에는 Amplify를 사용하여 AWS Cognito의 Userpool을 설정하고 Cognito를 사용하여 Ionic 앱에서 Sign Up/Sign In을 수행하는 부분을 실험해 보겠습니다. 여기에서는 기본 설정 사용을 선택합니다. 디폴트란 Cognito Userpool을 사용한 인증에 "email/password를 사용""본인 확인을 위한 난수 코드는 등록한 메일 주소... amplifycognitoionicAWS Ionic3에 Angular-material을 도입해 본다. 현장에서 Ionic3을 사용하여 앱을 만들고 있습니다만, webview에서 표시되는 페이지에서 Angular-material을 사용하고 있어, 네이티브와 web페이지에서 디자인이 바뀌어 버리는 것으로 네이티브측 즉 Ionic측에 심지어 Angular-material을 도입하자는 것으로 시도해 보았습니다만 곳곳에 빠진 부분이 있었기 때문에, 기록도 겸해 공유합니다😃 ionic start 명령이... AngularangularMaterialionic Ionic에서 핀치 인 아웃으로 글꼴 크기를 변경해보십시오 (iOS safari 지원) 제가 개인 개발하고 있는 AA 정리 zip 전달의 서비스(AAHub)에서 요망이 있던 내용입니다. 스마트 폰으로 핀치 인 아웃의 조작을했을 때에 폰트 사이즈의 변경을 실시할 수 있도록(듯이) 했습니다. 본 기사에서는 그 때의 구현을 되돌아 보겠습니다. 기본적으로 핀치 인 아웃을 할 때 글꼴 크기를 변경하려면 다음 단계가 있습니다. 핀치 인 아웃을 리스팅하는 Directive를 만든다 개방 상... AsciiArt아스키 아트ionicShift_JISArt @ionic/vue + Capacitor로 크로스 플랫폼의 미래를 들여다 봅니다. 요 전날 열린 Frontend Conference Fukuoka 2018에서 이라는 내용으로 발표했습니다. 그 중에서도 주목하고 있는 Ionic입니다만, Vue에서도 사용할 수 있게 된다고 하는 것으로, 간단합니다만 움직여 봅니다. 게다가 그것을 Capacitor에서 iOS 앱으로 움직이려고합니다. node 8.12.0 vue ^2.5.17 (vue cli) 이제 초기 화면이 브라우저에서 표... Vue.jsionicCapacitor Vue.js를 지원하는 Ionic을 만져보세요. Ionic 라는 Web과 ios , Android , Electron 등의 네이티브 앱을 같은 코드로 만들 수 있는 프레임워크의 Vue.jsIonic 을 사용한 적이 없기 때문에 자세한 것은 모릅니다만, React 로 말하는 곳의 React Navive 지금까지는 angular 에만 대응하고 있었는데, Vue.js 에 대응했다고 하는 것으로 화제에 오르고 있는 것 같습니다. Ionic, Vu... Vue.js자바스크립트ionic window.open() 의 기억 1. 옵션 2. 외부 pdf 파일 표시 잘 잊기 쉽기 때문에 메모 메모 주소 표시줄 숨기기 URL만 숨기기 Done 버튼 문장 변경 네비게이션 버튼 숨기기 확대/축소 iOS의 경우 옵션 없음 소스 코드 실행 결과 옵션 있음 소스 코드 실행 결과 Android의 경우 옵션 없음 소스 코드 실행 결과 옵션 있음(PDF 표시 시 GoogleDocView 사용) 소스 코드 실행 결과 이상입니다.... 자바스크립트Optioninappbrowserionic바람 w. 오펜 Ionic/Angular에서 GoogleMaps (AGM) Angular Google Maps라는 라이브러리를 사용하여 Ionic에서 Google Maps를 사용해 보았습니다. Angular에서 쉽게 Google Maps JS API를 사용할 수있는 라이브러리입니다. 설치 Angular 5에서는 beta.2를 사용하지 않으면 떨어집니다 app.module.ts 에서 AgmCoreModule.forRoot() 를 import app.module.ts ... Angularangular-google-mapsionic Tabs의 작성・추가【Ionic】 개발 환경(ionic info의 결과)은 다음과 같지만 Ionic3에서 실행했다. 템플릿에 있는 3개의 탭이 아니라, 다음과 같은 5つのタブ를 작성·추가하고 싶다. Terminal에서 ionic g tabs를 입력합니다. 그 탭 세트의 이름을 결정한다 (What should the name be?) 탭 개수 입력(How many tabs?) 각 탭의 이름 입력(Name of this tab:... ionic super 템플릿을 이용한 「튜토리얼 페이지」의 작성 방법【Ionic】 이 기사의 튜토리얼 페이지란, 다음과 같은 페이지를 말한다. 개발 환경( ionic info의 결과)은 다음과 같지만 Ionic3 에서 실행했다. super 템플릿은 Ionic에 원래 포함되어있는 템플릿입니다. 자세한 내용은 다음 기사를 참조하십시오. 참고 : 다음과 같은 명령을 실행(Mac의 경우)해 간다. ( [ApplicationName] 에 실제 앱의 이름을 입력) ionic star... ionic 이전 기사 보기