swchrm logs

妄想技術録

Ionic環境構築時の覚書

はじめに

個人メモです。

なにをしたか

インストールしてプロジェクトを作り、プロジェクトの起動をWeb、iOSの実機、Androidの実機で確認するまで。

環境

インストール

npm i -g ionic実行。
Ionicをnpmでグローバルインストールした。

MyMacBookAir:MyProject swchrm$ npm i -g ionic
/Users/swchrm/.nodebrew/node/v10.15.0/bin/ionic -> /Users/swchrm/.nodebrew/node/v10.15.0/lib/node_modules/ionic/bin/ionic
+ ionic@4.6.0
added 266 packages from 153 contributors in 20.866s

新規プロジェクト作成

ionic start VNavi tabs実行。

プロジェクトに名前をつけて新規作成している。
このときIonic Appflow SDKと連携させるかの問にYesと答えたが、標準はNoになっているためNoでもよい。 このへんはまだよくわかっていないので要調査。

またgitのmasterブランチともなにか関わり合ってやってくれるみたい。 初回のgit pushには特に影響は及ぼさないように思えた。
これも要調査だが、いまは後回し。

MyMacBookAir:MyProject swchrm$ ionic start VNavi  tabs
[INFO] You are about to create an Ionic 3 app. Would you like to try the release candidate for Ionic 4?

       Ionic 4 uses the power of the modern Web and embraces the Angular CLI and Angular Router to bring you the best
       version of Ionic ever. See our blog announcement[1] and documentation[2] for more information. We'd love to hear
       your feedback on our latest version!

       [1]: https://blog.ionicframework.com/ionic-framework-4-0-rc-shipped-paving-way-for-final
       [2]: https://beta.ionicframework.com/docs/
? Try Ionic 4? No
✔ Preparing directory ./VNavi - done!
✔ Downloading and extracting tabs starter - done!

Installing dependencies may take several minutes.

     ✨   IONIC  DEVAPP   ✨

 Speed up development with the Ionic DevApp, our fast, on-device testing mobile app

  -  🔑   Test on iOS and Android without Native SDKs
  -  🚀   LiveReload for instant style and JS updates

 -->    Install DevApp: https://bit.ly/ionic-dev-app    <--

────────────────────────────────────────────────────────────

> npm i
npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.

> fsevents@1.2.4 install /Users/swchrm/Documents/MyProject/VNavi/node_modules/fsevents
> node install

[fsevents] Success: "/Users/swchrm/Documents/MyProject/VNavi/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile

> node-sass@4.11.0 install /Users/swchrm/Documents/MyProject/VNavi/node_modules/node-sass
> node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.11.0/darwin-x64-64_binding.node
Download complete  ⸩ ⠋ :
Binary saved to /Users/swchrm/Documents/MyProject/VNavi/node_modules/node-sass/vendor/darwin-x64-64/binding.node
Caching binary to /Users/swchrm/.npm/node-sass/4.11.0/darwin-x64-64_binding.node

> uglifyjs-webpack-plugin@0.4.6 postinstall /Users/swchrm/Documents/MyProject/VNavi/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js


> node-sass@4.11.0 postinstall /Users/swchrm/Documents/MyProject/VNavi/node_modules/node-sass
> node scripts/build.js

Binary found at /Users/swchrm/Documents/MyProject/VNavi/node_modules/node-sass/vendor/darwin-x64-64/binding.node
Testing binary
Binary is fine
npm notice created a lockfile as package-lock.json. You should commit this file.
added 754 packages from 639 contributors and audited 6150 packages in 69.556s
found 0 vulnerabilities

> git init
Initialized empty Git repository in /Users/swchrm/Documents/MyProject/VNavi/.git/

     🔥   IONIC  APPFLOW   🔥

 Supercharge your Ionic development with the Ionic Appflow SDK

  -  ⚠️   Track runtime errors in real-time, back to your original TypeScript
  -  📲  Push remote updates and skip the app store queue

 Learn more about Ionic Appflow: https://ionicframework.com/appflow

────────────────────────────────────────────────────────────

? Install the free Ionic Appflow SDK and connect your app? Yes
> npm i --save -E @ionic/pro
npm WARN @ionic/pro@2.0.4 requires a peer of cordova-plugin-ionic@^5.0.0 but none is installed. You must install peer dependencies yourself.

+ @ionic/pro@2.0.4
added 1 package from 1 contributor and audited 6151 packages in 25.655s
found 0 vulnerabilities

> ionic link --name VNavi
Log into your Ionic Appflow account

If you don't have one yet, create yours by running: ionic signup
? Email: swchrm@gmail.com
? Password: ***********
? What would you like to do? Link an existing app on Ionic Appflow
✔ Looking up your apps - done!
? No apps found. Would you like to create a new app on Ionic Appflow? Yes

[INFO] Ionic Appflow uses a git-based workflow to manage app updates.

       You will be prompted to set up the git host and repository for this new app. See the docs[1] for more
       information.

       [1]: https://ionicframework.com/docs/appflow/basics/git/

? Which git host would you like to use? GitHub

[INFO] GitHub OAuth setup required.

       To continue, we need you to authorize Ionic Appflow with your GitHub account. A browser will open and prompt you
       to complete the authorization request. When finished, please return to the CLI to continue linking your app.
? Open browser: Yes
? Authorized and ready to continue: Yes

[INFO] In order to link to a GitHub repository the repository must already exist on GitHub.
[INFO] If the repository does not exist please create one now before continuing.

       If you're not familiar with Git you can learn how to set it up with GitHub here:

       https://help.github.com/articles/set-up-git/

       You can find documentation on how to create a repository on GitHub and push to it here:

       https://help.github.com/articles/create-a-repo/
? Does the repository exist on GitHub? No
[ERROR] Repo must exist on GitHub in order to link. Please create the repo and run ionic link again.
MyMacBookAir:MyProject swchrm$ ls
VNavi                   VRMViewer               traveling_jirorian_problem_flutter
MyMacBookAir:MyProject swchrm$ ionic link
[ERROR] Sorry! ionic link can only be run in an Ionic project directory.

        If this is a project you'd like to integrate with Ionic, create an ionic.config.json file.
MyMacBookAir:MyProject swchrm$ cd VNavi/
MyMacBookAir:VNavi swchrm$ ionic link
? What would you like to do? Link an existing app on Ionic Appflow
✔ Looking up your apps - done!
? Which app would you like to link VNavi (6113f65e)
✔ Looking up app 6113f65e - done!

[INFO] Ionic Appflow uses a git-based workflow to manage app updates.

       You will be prompted to set up the git host and repository for this new app. See the docs[1] for more
       information.

       [1]: https://ionicframework.com/docs/appflow/basics/git/

? Which git host would you like to use? GitHub

[INFO] In order to link to a GitHub repository the repository must already exist on GitHub.
[INFO] If the repository does not exist please create one now before continuing.

       If you're not familiar with Git you can learn how to set it up with GitHub here:

       https://help.github.com/articles/set-up-git/

       You can find documentation on how to create a repository on GitHub and push to it here:

       https://help.github.com/articles/create-a-repo/
? Does the repository exist on GitHub? Yes
✔ Looking up your GitHub repositories: 16 found - done!
? Which GitHub repository would you like to link? SWCHRM / VNavi

[INFO] By default Ionic Appflow links only to the master branch.
[INFO] If you'd like to link to another branch or multiple branches you'll need to select each branch to connect to.

       If you're not familiar with on working with branches in GitHub you can read about them here:

       https://guides.github.com/introduction/flow/


? Which would you like to do? Link to master branch only
[OK] App 6113f65e connected to https://github.com/SWCHRM/VNavi
> ionic config set id "6113f65e" --json
[OK] id set to "6113f65e"!
[OK] Project linked with app 6113f65e!
[INFO] Here are some additional links that can help you with you first push to GitHub:

       Adding GitHub as a remote:
        https://help.github.com/articles/adding-a-remote/

       Pushing to a remote:
        https://help.github.com/articles/pushing-to-a-remote/

       Working with branches:
        https://guides.github.com/introduction/flow/

       More comfortable with a GUI? Try GitHub Desktop!
        https://desktop.github.com/
[INFO] You can now push to one of your branches on GitHub to trigger a build in Ionic Appflow!

       If you haven't added GitHub as your origin you can do so by running:

       git remote add origin https://github.com/SWCHRM/VNavi

       You can find additional links above to help if you're having issues.
MyMacBookAir:VNavi swchrm$ git add .
MyMacBookAir:VNavi swchrm$ git commit -m "first commit and ionic link done"
[master (root-commit) 12b88be] first commit and ionic link done
 30 files changed, 6892 insertions(+)
 create mode 100644 .editorconfig
 create mode 100644 .gitignore
 create mode 100644 ionic.config.json
 create mode 100644 ionic.starter.json
 create mode 100644 package-lock.json
 create mode 100644 package.json
 create mode 100644 src/app/app.component.ts
 create mode 100644 src/app/app.html
 create mode 100644 src/app/app.module.ts
 create mode 100644 src/app/app.scss
 create mode 100644 src/app/main.ts
 create mode 100644 src/assets/icon/favicon.ico
 create mode 100644 src/assets/imgs/logo.png
 create mode 100644 src/index.html
 create mode 100644 src/manifest.json
 create mode 100644 src/pages/about/about.html
 create mode 100644 src/pages/about/about.scss
 create mode 100644 src/pages/about/about.ts
 create mode 100644 src/pages/contact/contact.html
 create mode 100644 src/pages/contact/contact.scss
 create mode 100644 src/pages/contact/contact.ts
 create mode 100644 src/pages/home/home.html
 create mode 100644 src/pages/home/home.scss
 create mode 100644 src/pages/home/home.ts
 create mode 100644 src/pages/tabs/tabs.html
 create mode 100644 src/pages/tabs/tabs.ts
 create mode 100644 src/service-worker.js
 create mode 100644 src/theme/variables.scss
 create mode 100644 tsconfig.json
 create mode 100644 tslint.json
MyMacBookAir:VNavi swchrm$ git push
fatal: No configured push destination.
Either specify the URL from the command-line or configure a remote repository using

    git remote add <name> <url>

and then push using the remote name

    git push <name>

MyMacBookAir:VNavi swchrm$ git remote add origin https://github.com/SWCHRM/VNavi
MyMacBookAir:VNavi swchrm$ git push
fatal: The current branch master has no upstream branch.
To push the current branch and set the remote as upstream, use

    git push --set-upstream origin master

MyMacBookAir:VNavi swchrm$ git push --set-upstream origin master
Counting objects: 43, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (36/36), done.
Writing objects: 100% (43/43), 99.14 KiB | 2.48 MiB/s, done.
Total 43 (delta 2), reused 0 (delta 0)
remote: Resolving deltas: 100% (2/2), done.
To https://github.com/SWCHRM/VNavi
 * [new branch]      master -> master
Branch 'master' set up to track remote branch 'master' from 'origin'.

アプリ実行

Webで表示

cd VNaviのあと、ionic serveを実行。
http://localhost:8100/でアクセスできる。

f:id:swchrm:20181228052718p:plain
webでの表示

iOSAndroid

実機での確認はIonic DevAppを利用して行う。 アプリ落としてきて開いたあと開いて(、Ionicのアカウントが未登録なら登録し)、その後ionic serve -cを実行。

実行ログは下記の通り

^CMyMacBookAir:VNavi swchrm$ ionic serve -c
> ionic-app-scripts serve --address 0.0.0.0 --port 8100 --livereload-port 35729 --dev-logger-port 53703 --consolelogs --nobrowser
[app-scripts] [04:54:04]  ionic-app-scripts 3.2.1
[app-scripts] [04:54:04]  watch started ...
[app-scripts] [04:54:04]  build dev started ...
[app-scripts] [04:54:04]  clean started ...
[app-scripts] [04:54:04]  clean finished in 99 ms
[app-scripts] [04:54:04]  copy started ...
[app-scripts] [04:54:04]  deeplinks started ...
[app-scripts] [04:54:04]  deeplinks finished in 61 ms
[app-scripts] [04:54:04]  transpile started ...
[app-scripts] [04:54:13]  transpile finished in 8.69 s
[app-scripts] [04:54:13]  preprocess started ...
[app-scripts] [04:54:13]  preprocess finished in 1 ms
[app-scripts] [04:54:13]  webpack started ...
[app-scripts] [04:54:13]  copy finished in 9.24 s
[app-scripts] [04:54:23]  webpack finished in 10.00 s
[app-scripts] [04:54:23]  sass started ...
[app-scripts] [04:54:25]  sass finished in 2.67 s
[app-scripts] [04:54:25]  postprocess started ...
[app-scripts] [04:54:25]  postprocess finished in 15 ms
[app-scripts] [04:54:25]  lint started ...
[app-scripts] [04:54:26]  build dev finished in 21.78 s
[app-scripts] [04:54:26]  watch ready in 21.93 s

[INFO] Development server running!

       Local: http://localhost:8100
       External: http://192.168.1.7:8100, http://192.168.2.1:8100, http://192.168.3.1:8100
       DevApp: VNavi@8100 on MyMacBookAir.local

       Use Ctrl+C to quit this process

[INFO] Browser window opened to http://localhost:8100!

[app-scripts] [04:54:31]  console.log: Angular is running in the development mode. Call enableProdMode() to enable the production
[app-scripts]             mode.
[app-scripts] [04:54:32]  console.warn: Ionic Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to
[app-scripts]             a) run in a real device or simulator and b) include cordova.js in your index.html
[app-scripts] [04:54:32]  console.warn: Ionic Native: tried calling SplashScreen.hide, but Cordova is not available. Make sure to a)
[app-scripts]             run in a real device or simulator and b) include cordova.js in your index.html
[app-scripts] [04:54:34]  lint finished in 8.77 s
[app-scripts] [04:55:07]  console.log: Angular is running in the development mode. Call enableProdMode() to enable the production
[app-scripts]             mode.
[app-scripts] [04:55:08]  console.log: Ionic Native: deviceready event fired after 1343 ms
[app-scripts] [05:01:31]  console.log: deviceready has not fired after 5 seconds.
[app-scripts] [05:01:31]  console.log: Channel not fired: onDOMContentLoaded
[app-scripts] [05:01:31]  console.warn: Ionic Native: deviceready did not fire within 5000ms. This can happen when plugins are in an
[app-scripts]             inconsistent state. Try removing plugins from plugins/ and reinstalling them.
[app-scripts] [05:01:32]  console.log: Angular is running in the development mode. Call enableProdMode() to enable the production
[app-scripts]             mode.
[app-scripts] [05:01:33]  console.log: Ionic Native: deviceready event fired after 13819 ms

スクショ

所感

モバイル端末での動作確認もアプリをインストールすれば簡単にできる。