mminky's

in-app-browser 스크롤 허용 방법

열심히 in-app-browser를 이용해서 웹사이트를 띄웠는데

스크롤이 되지 않았습니다.

그래서 구글링을 해보니 ScrollEnabled가 false로 되어있는 것을 발견했습니다.

config.xml에서 true로 변경해줍니다.

<!-- allow scroll -->
    <preference name="ScrollEnabled" value="true" />

[ config.xml ] 전체 코드

<?xml version='1.0' encoding='utf-8'?>
<widget id="io.ionic.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>MyApp3</name>
    <description>An awesome Ionic/Cordova app.</description>
    <author email="hi@ionicframework.com" href="http://ionicframework.com/">Ionic Framework Team</author>
    <content src="index.html" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <!-- _self : allow all website(*) -->
    <allow-navigation href="*" />
    <!-- allow scroll -->
    <preference name="ScrollEnabled" value="true" />
    <preference name="android-minSdkVersion" value="19" />
    <preference name="BackupWebStorage" value="none" />
    <preference name="SplashMaintainAspectRatio" value="true" />
    <preference name="FadeSplashScreenDuration" value="300" />
    <preference name="SplashShowOnlyFirstTime" value="false" />
    <preference name="SplashScreen" value="screen" />
    <preference name="SplashScreenDelay" value="3000" />
    <platform name="android">
        <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
            <application android:networkSecurityConfig="@xml/network_security_config" />
        </edit-config>
        <resource-file src="resources/android/xml/network_security_config.xml" target="app/src/main/res/xml/network_security_config.xml" />
        <allow-intent href="market:*" />
        <icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
        <icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
        <icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
        <icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
        <icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
        <icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
        <splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
        <splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />
        <splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" />
        <splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" />
        <splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" />
        <splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" />
        <splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
        <splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
        <splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
        <splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" />
        <splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" />
        <splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
        <icon height="57" src="resources/ios/icon/icon.png" width="57" />
        <icon height="114" src="resources/ios/icon/icon@2x.png" width="114" />
        <icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
        <icon height="58" src="resources/ios/icon/icon-small@2x.png" width="58" />
        <icon height="87" src="resources/ios/icon/icon-small@3x.png" width="87" />
        <icon height="20" src="resources/ios/icon/icon-20.png" width="20" />
        <icon height="40" src="resources/ios/icon/icon-20@2x.png" width="40" />
        <icon height="60" src="resources/ios/icon/icon-20@3x.png" width="60" />
        <icon height="48" src="resources/ios/icon/icon-24@2x.png" width="48" />
        <icon height="55" src="resources/ios/icon/icon-27.5@2x.png" width="55" />
        <icon height="29" src="resources/ios/icon/icon-29.png" width="29" />
        <icon height="58" src="resources/ios/icon/icon-29@2x.png" width="58" />
        <icon height="87" src="resources/ios/icon/icon-29@3x.png" width="87" />
        <icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
        <icon height="80" src="resources/ios/icon/icon-40@2x.png" width="80" />
        <icon height="120" src="resources/ios/icon/icon-40@3x.png" width="120" />
        <icon height="88" src="resources/ios/icon/icon-44@2x.png" width="88" />
        <icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
        <icon height="100" src="resources/ios/icon/icon-50@2x.png" width="100" />
        <icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
        <icon height="120" src="resources/ios/icon/icon-60@2x.png" width="120" />
        <icon height="180" src="resources/ios/icon/icon-60@3x.png" width="180" />
        <icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
        <icon height="144" src="resources/ios/icon/icon-72@2x.png" width="144" />
        <icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
        <icon height="152" src="resources/ios/icon/icon-76@2x.png" width="152" />
        <icon height="167" src="resources/ios/icon/icon-83.5@2x.png" width="167" />
        <icon height="172" src="resources/ios/icon/icon-86@2x.png" width="172" />
        <icon height="196" src="resources/ios/icon/icon-98@2x.png" width="196" />
        <icon height="1024" src="resources/ios/icon/icon-1024.png" width="1024" />
        <splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
        <splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
        <splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" />
        <splash height="768" src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" />
        <splash height="1125" src="resources/ios/splash/Default-Landscape-2436h.png" width="2436" />
        <splash height="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" />
        <splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" />
        <splash height="1536" src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" />
        <splash height="2732" src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048" />
        <splash height="2048" src="resources/ios/splash/Default-Landscape@~ipadpro.png" width="2732" />
        <splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" />
        <splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" />
        <splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" />
        <splash height="2436" src="resources/ios/splash/Default-2436h.png" width="1125" />
        <splash height="2732" src="resources/ios/splash/Default@2x~universal~anyany.png" width="2732" />
        <icon height="216" src="resources/ios/icon/icon-108@2x.png" width="216" />
        <splash height="2688" src="resources/ios/splash/Default-2688h~iphone.png" width="1242" />
        <splash height="1242" src="resources/ios/splash/Default-Landscape-2688h~iphone.png" width="2688" />
        <splash height="1792" src="resources/ios/splash/Default-1792h~iphone.png" width="828" />
        <splash height="828" src="resources/ios/splash/Default-Landscape-1792h~iphone.png" width="1792" />
    </platform>
    <plugin name="cordova-plugin-whitelist" spec="1.3.3" />
    <plugin name="cordova-plugin-statusbar" spec="2.4.2" />
    <plugin name="cordova-plugin-device" spec="2.0.2" />
    <plugin name="cordova-plugin-splashscreen" spec="5.0.2" />
    <plugin name="cordova-plugin-ionic-webview" spec="^4.0.0" />
    <plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" />
</widget>

우선 해당 파일이 있는 폴더로 이동합니다.

* cd : Change Directory(폴더)

cd 폴더명

ls명령어로 안에 열기를 원하는 파일이 있는지 확인합니다.

* ls : LiSt

-> 즉, 해당 폴더에 있는 파일이나 디렉토리를 나열해주는 명령어입니다.

ls

open : 열어줘

-a : application(응용프로그램)을 이용해서

Xcode : Xcode라는 프로그램!

open -a Xcode 파일이름

[결과]

npm을 시작하려고 다음의 명령어를 입력했습니다.

npm install -g ios-sim

그랬더니 다음과 같이 엄청난 에러가 발생했습니다!

min@minui-Mac appbrowser % npm install -g ios-sim 
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules
npm ERR! code EACCES
npm ERR! syscall access
npm ERR! path /usr/local/lib/node_modules
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
npm ERR!  [Error: EACCES: permission denied, access '/usr/local/lib/node_modules'] {
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
npm ERR!   path: '/usr/local/lib/node_modules'
npm ERR! }
npm ERR! 
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR! 
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/min/.npm/_logs/2020-07-31T01_14_15_512Z-debug.log

자세히 읽어보니 Permission denied라는 단어가 눈에 들어왔습니다.

그래서 앞에 sudo를 붙였습니다.

※ sudo : 관리자권한으로 실행

sudo npm install -g ios-sim

비밀번호를 입력하니 아주 순조롭게 설치되었습니다. :)

VMware 위에 macOS를 설치했습니다.

[문제]

VMware에서는 장치가 연결된 것이 확인되나

mac에서는 연결된 장치가 없다고 하며 확인되지 않았습니다.

[해결책]

오른쪽 마우스를 클릭한 후 Settings를 클릭합니다.

USB Controller를 2.0으로 설치합니다.

그리고 OK 누르고 다시 실행하면 됩니다 :)

------------------------------------------

[결과]

아이폰을 USB케이블을 통해서 컴퓨터에 연결합니다.

그러면 아래와 같은 창이 뜨는데요,

Connect to a virtual machine을 선택합니다.

이제 휴대폰에서 신뢰할 것인지 물어보는 창이 나타납니다.

'신뢰'를 선택합니다.

그리고 비밀번호를 입력합니다.

VMware에서 다음과 같이 iPhone이 연결된 것을 알 수 있습니다.

Finder의 위치에도 ㅇㅇㅇ의 iphone이라는 장치가 나타나는 것을 알 수 있습니다.

* 실제 mac에서 인식이 되지 않는 것이라면 애플 공식 문서를 참조해보세요 :)

https://support.apple.com/ko-kr/HT204095

※ 제 글이 도움이 되었다면 공감 부탁드려요 :)

가상머신 위에 맥을 설치했습니다.

그랬더니 ios 시뮬레이터를 돌리려고 하니 다음과 같은 에러가 나타났습니다.

[sol]

Terminal에 다음의 명령어를 입력합니다.

sudo launchctl limit

그리고 비밀번호를 입력합니다.

입력되는게 안보이더라도 입력되는 것이니

입력 후 Enter 키를 누릅니다.

maxproc의 limit을 재설정 합니다.

sudo launchctl limit maxproc 2000 2500

maxfiles의 limit을 재설정 합니다.

sudo launchctl limit maxfiles 2000 unlimited

※ 이글을 참고하여 작성했습니다.

(문제가 있을 시 즉시 삭제하겠습니다.)

만약 ionic 프로젝트를 처음 해보는 분이라면 아래의 글을 참고한 후

따라와주시면 감사하겠습니다 :)

https://mminky.tistory.com/54

모두 실행할 프로젝트가 있다고 가정하고 진행하겠습니다!

ios platform을 추가하고 build도 진행했기 때문에 다음의 경로에 .xcworkspace 파일이 생성되었을 것입니다.

프로젝트디렉토리\ platforms \ ios

ex) initApp\platforms\ios

더블클릭하면 Xcode로 파일이 열립니다.

Xcode > Preferences...를 클릭합니다.

두 번째 탭인 Accounts를 클릭합니다.

그리고 + 버튼을 클릭합니다.

Apple ID > Continue 클릭합니다.

Apple ID와 비밀번호를 입력한 후 Next를 클릭합니다.

계정 등록이 완료되었으면 나가서

MyApp > Signing&Capabilities > Team을 설정해줍니다.

하지만 아랫부분에 Status! 하는 에러가 나타납니다.

---------------------(성공 후 추가)---------------------------------

위에 에러나는 것은 아이폰이 연결되고

위의 방법대로 Team을 연결해주고

Bundle Identifier를 다른 이름(mmingyy)으로 설정해주니 별 문제 없었습니다.

(아이폰 연결 한 후)

Xcode에서 원하는프로젝트를 엽니다.

그리고 상단에 있는 MyApp>ㅇㅇㅇ의 iPhone을 클릭합니다.

연결된 기계를 선택한 후 재생 버튼을 클릭합니다.

폰에서 앱을 실행하려고 하면 신뢰하지 않는 개발자 메시지가 나타납니다.

설정 > 일반

일반 > 기기관리

Apple Development: ~~를 클릭합니다.

파란 글씨를 클릭합니다.

신뢰 클릭

성공하면 다음과 같이 됩니다.

그리고 앱도 잘 실행이 된답니당 :)

# node, npm 설치

우선 node js와 npm을 설치해야 합니다.

이 링크에 잘 나와있는 것 같아서 첨부합니다.

혹은 아래의 명령어로 설치합니다.

sudo curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash

다음의 명령어로 확인합니다.

(npm은 node 설치하면 같이 되는 것 같아요)

node -v
npm -v

설치가 잘 되었다면 다음과 같은 결과가 나옵니다.

# ionic, codova 설치

sudo npm install -g ionic cordova

sudo : 관리자 권한으로 실행 -> 안붙이면 설치가 제대로 안 될 수 있어요

-g : global(전역)

------------------------------------------------------------------

# 프로젝트 만들기

우선 프로젝트를 만들 디렉토리로 이동합니다.(~/Documents/ionic_project)

Documents 디렉토리로 이동

cd Documents

Documents 안의 ionic_project 디렉토리로 이동(저는 미리 만들어뒀었어요)

(아마 없으면 자동 생성될거에요)

cd ionic_project

그리고 ionic 프로젝트를 시작합니다.

ionic start 앱이름

그리고 프레임워크를 Angular로 설정합니다.

템플릿은 blank로 설정합니다.

• tabs : 기본으로 tab이 생성된 프로젝트

• sidemenu : 기본적으로 sidemenu가 생성된 프로젝트

• blank : 안에 아무 내용 없이 기본 home만 있는 채로 프로젝트 생성됨

설정이 끝났으면 해당 프로젝트 디렉토리로 이동합니다.

cd initApp

ios 플랫폼을 만들어줍니다.

ionic platform add ios

ionic serve로 웹에서 앱 실행해보기

ionic serve

[결과]

# application(앱) 검색

 * mac : Command + Space bar

 * 해킨토시(윈도우에 깐 맥) : Window + Space bar

# 해킨토시 한영변환

Caps Lock 을 누르면 한/영 변환이 됩니다.