Capacitor를 사용하여 iOS 애플리케이션에 기존 웹 컨텐츠 적용

Qita와 동시 게시→https://qiita.com/items/811ff03397c928fcad7d

개요

Capacitor를 사용한 gawa 로컬 응용 프로그램이 주목합니다.
Capacitor란 웹 콘텐츠를 가웨이 로컬 애플리케이션으로 구축하는 프레임워크Ionic Team로 개발 중이다.
기존 웹 콘텐츠에 캐피톨을 사용하면 응용 후 어떤 느낌으로 구현될지 궁금해서 해봤어요.

적용 대상

이번 응용화는 Ionic Framework 공식 문서 오른쪽에 표시된 시연이다.

Ionic Frame Work도 Ionic Team에서 개발했으며, 이는 로컬 UI와 화면 마이그레이션을 i/css/js로 재현한 프레임워크입니다.
이 프레젠테이션 자체는 iframe 형식으로 표시되며 다음 URL을 통해 프레젠테이션 단일체를 표시할 수 있습니다.
대상
URL
iOS
https://ionic-docs-demo.herokuapp.com/?ionic:mode=ios
Android
https://ionic-docs-demo.herokuapp.com/?ionic:mode=md

시위행진의 GiitHub: https://github.com/ionic-team/docs-demo

상기 창고 fork를 시범화하려고 시도합니다.
fork 뒤의 창고는 여기→https://github.com/katsuyaU/ionic-docs-demo-for-ios

절차.

처음

Capacitor의 Install 문서 →Installing Capacitor - Capacitor

①Capacitor 연결 설치

npm install -D @capacitor/core @capacitor/cli

② npx cap init 실행

응용명, 표지부호와 npm/yarn을 물었기 때문에 대답했다.

③ capacitor.config.json을 만들었기 때문에 웹 Dir를 적당히 편집합니다

예를 들어create-react-app로 만든 프로젝트라면build에서Vue CLI로 만든 프로젝트라면dist입니다.

{
  "appId": "com.example.app",
  "appName": "Ionic Demo",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "www", // ←ここ
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 0
    }
  },
  "cordova": {}
}

④ npx cap add ios 실행

ios 디렉터리에서 로컬 코드 등을 자동으로 생성합니다.

⑤ npx cap open ios를 실행하여 XCode 설정

실제 기기로 동작을 확인하고 싶어 팀과 번들 아이덴티필드를 입력한다.(여기서 자세히 설명하지 않습니다.)

번번이

① 구축 명령을 실행하여 구축 대상 디렉터리에 구축되었는지 확인

② npx cap copy 실행

capacitor.config.json의 웹 Dir는 여기에서 참조되어 [프로젝트]/ios/app/public로 복사됩니다.

③ npx cap open ios 실행

XCode를 엽니다.

④ XCode를 통해 실행 버튼 클릭

이렇게 되면 이미 기존의 웹 내용을 응용화하는 데 성공했다!
상술한 명령을 입력할 때마다 번거롭기 때문에 npm scripts에 로그인합니다.

{
  "scripts": {
    "build:ios": "npm run build && cap copy && cap open ios && echo 'Please click ▶️ in XCode!'",
  },
}

감상

의외로 간단하게 응용할 수 있다!
코도바는 가와 로컬 애플리케이션을 말하자면 오류를 마구잡이로 만들었다는 인상을 주는데, 이전 직장이 ObjC에서 자체적으로 로컬 서버를 만드는 등 실제 앱으로 조작하는 것은 매우 번거로운 인상을 남겼다.
하지만 캐피탈은 공식 docs에 따라 간단하게 실행할 수 있다.
또 Ionic Framework에 대한 이야기는 웹이지만 현지인 같은 UI를 수준 높은 수준으로 재현할 수 있어 감동적이었다.
이런 현지인의 UI 프레임워크Onsen UI가 머릿속에 떠오르지만 Ionic Framework의 완성도가 더 높다고 생각합니다.(구성 요소 자체는 OnenUI가 충실함)
최근 크로스플랫폼 앱을 개발할 때 Flutter가 화제가 됐고 자신도 샘플을 이동해 봤는데 Ionic+Capacitor도 괜찮은 선택이라고 생각해요.