いろいろやってみるにっき

てきとーに生きている奴の日記

https化に伴い、表示できなくなっているリンクについて修復中。
2018年から遡って修正し、2015年分まで修正完了。


Ionic FrameworkをMacにインストール ― インストール編 ―

前回は準備で終わったIonic Frameworkの環境構築。

 

shigeo-t.hatenablog.com

 

CLIのインストール

ドキュメントの手順にしたがってインストールしてみる。

~ % npm install -g @ionic/cli
/Users/shigeo-t/.nodebrew/node/v14.16.1/bin/ionic -> /Users/shigeo-t/.nodebrew/node/v14.16.1/lib/node_modules/@ionic/cli/bin/ionic
+ @ionic/cli@6.13.1
added 212 packages from 156 contributors in 17.8s
~ % 

 

アプリケーションの起動

ドキュメントの手順にしたがってアプリケーションの起動をやってみる。

~ % ionic start myapp tabs

Pick a framework! 😁

Please select the JavaScript framework to use for your new app. To bypass this
prompt next time, supply a value for the --type option.

? Framework: (Use arrow keys)
❯ Angular | https://angular.io 
  React   | https://reactjs.org 
  Vue     | https://vuejs.org 

 

今回はVueを選ぶ。矢印キー[↓]でVueを選べた。IonicはAngularでスタートしているが、ウチの都合はVueやReactなので今回はVue。

~ % ionic start myapp tabs

Pick a framework! 😁

Please select the JavaScript framework to use for your new app. To bypass this
prompt next time, supply a value for the --type option.

? Framework: 
  Angular | https://angular.io 
  React   | https://reactjs.org 
❯ Vue     | https://vuejs.org 

[Enter]を押す。一度Angularにして途中で止めたのでRewriteを聞かれている。

~ % ionic start myapp tabs

Pick a framework! 😁

Please select the JavaScript framework to use for your new app. To bypass this
prompt next time, supply a value for the --type option.

? Framework: Vue
? ./myapp exists. Overwrite? Yes
✔ Preparing directory ./myapp in 14.47ms
✔ Downloading and extracting tabs starter in 217.83ms
> ionic integrations enable capacitor --quiet -- myapp io.ionic.starter
> npm i --save -E @capacitor/core
npm notice created a lockfile as package-lock.json. You should commit this file.
+ @capacitor/core@2.4.7
added 2 packages from 2 contributors and audited 2 packages in 1.832s
found 0 vulnerabilities

> npm i -D -E @capacitor/cli
+ @capacitor/cli@2.4.7
added 55 packages from 91 contributors and audited 57 packages in 4.677s

1 package is looking for funding
  run `npm fund` for details

found 0 vulnerabilities

> capacitor init myapp io.ionic.starter --web-dir dist --npm-client npm


🎉   Your Capacitor project is ready to go!  🎉

Add platforms using "npx cap add":

  npx cap add android
  npx cap add ios
  npx cap add electron

Follow the Developer Workflow guide to get building:
https://capacitorjs.com/docs/basics/workflow

[OK] Integration capacitor added!

Installing dependencies may take several minutes.

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

         Ionic Advisory, tailored solutions and expert services by Ionic

                             Go to market faster 🏆
                    Real-time troubleshooting and guidance 💁
        Custom training, best practices, code and architecture reviews 🔎
      Customized strategies for every phase of the development lifecycle 🔮

                        👉  https://ion.link/advisory  👈

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


> npm i
npm WARN deprecated html-webpack-plugin@3.2.0: 3.x is no longer supported
npm WARN deprecated eslint-loader@2.2.1: This loader has been deprecated. Please use eslint-webpack-plugin
npm WARN deprecated @hapi/joi@15.1.1: Switch to 'npm install joi'
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated @hapi/address@2.1.4: Moved to 'npm install @sideway/address'
npm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated debug@3.2.6: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
npm WARN deprecated request@2.88.0: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated core-js@2.6.12: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated request-promise-native@1.0.9: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated mkdirp@0.5.1: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated left-pad@1.3.0: use String.prototype.padStart()

> fsevents@1.2.13 install /Users/shigeo-t/myapp/node_modules/jest-haste-map/node_modules/fsevents
> node install.js

  SOLINK_MODULE(target) Release/.node
  CXX(target) Release/obj.target/fse/fsevents.o
  SOLINK_MODULE(target) Release/fse.node

> deasync@0.1.21 install /Users/shigeo-t/myapp/node_modules/deasync
> node ./build.js

`darwin-x64-node-14` exists; testing
Binary is fine; exiting

> fsevents@1.2.13 install /Users/shigeo-t/myapp/node_modules/watchpack-chokidar2/node_modules/fsevents
> node install.js

  SOLINK_MODULE(target) Release/.node
  CXX(target) Release/obj.target/fse/fsevents.o
  SOLINK_MODULE(target) Release/fse.node

> fsevents@1.2.13 install /Users/shigeo-t/myapp/node_modules/webpack-dev-server/node_modules/fsevents
> node install.js

  SOLINK_MODULE(target) Release/.node
  CXX(target) Release/obj.target/fse/fsevents.o
  SOLINK_MODULE(target) Release/fse.node

> yorkie@2.0.0 install /Users/shigeo-t/myapp/node_modules/yorkie
> node bin/install.js

setting up Git hooks
can't find .git directory, skipping Git hooks installation

> core-js@2.6.12 postinstall /Users/shigeo-t/myapp/node_modules/babel-runtime/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: 
> https://opencollective.com/core-js 
> https://www.patreon.com/zloirock 

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> core-js@3.10.1 postinstall /Users/shigeo-t/myapp/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"


> ejs@2.7.4 postinstall /Users/shigeo-t/myapp/node_modules/ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)


> cypress@3.8.3 postinstall /Users/shigeo-t/myapp/node_modules/cypress
> node index.js --exec install

Installing Cypress (version: 3.8.3)

 ✔  Downloaded Cypress
 ✔  Unzipped Cypress
 ✔  Finished Installation /Users/shigeo-t/Library/Caches/Cypress/3.8.3

You can now open Cypress by running: node_modules/.bin/cypress open

https://on.cypress.io/installing-cypress

npm WARN vue-jest@3.0.7 requires a peer of vue@^2.x but none is installed. You must install peer dependencies yourself.
npm WARN vue-jest@3.0.7 requires a peer of vue-template-compiler@^2.x but none is installed. You must install peer dependencies yourself.
npm WARN postcss-modules@4.0.0 requires a peer of postcss@^8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN postcss-modules-values@4.0.0 requires a peer of postcss@^8.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN postcss-modules-local-by-default@4.0.0 requires a peer of postcss@^8.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN postcss-modules-extract-imports@3.0.0 requires a peer of postcss@^8.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN postcss-modules-scope@3.0.0 requires a peer of postcss@^8.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN icss-utils@5.1.0 requires a peer of postcss@^8.1.0 but none is installed. You must install peer dependencies yourself.

added 1752 packages from 968 contributors and audited 1809 packages in 126.11s

85 packages are looking for funding
  run `npm fund` for details

found 4 low severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details
> git init
Initialized empty Git repository in /Users/shigeo-t/myapp/.git/

Join the Ionic Community! 💙

Connect with millions of developers on the Ionic Forum and get access to live
events, news updates, and more.

? Create free Ionic account? Yes
> git add -A
> git commit -m "Initial commit" --no-gpg-sign
[master (root-commit) d6acf20] Initial commit
 31 files changed, 17549 insertions(+)
 create mode 100644 .browserslistrc
 create mode 100644 .eslintrc.js
 create mode 100644 .gitignore
 create mode 100644 babel.config.js
 create mode 100644 capacitor.config.json
 create mode 100644 cypress.json
 create mode 100644 ionic.config.json
 create mode 100644 jest.config.js
 create mode 100644 package-lock.json
 create mode 100644 package.json
 create mode 100644 public/assets/icon/favicon.png
 create mode 100644 public/assets/icon/icon.png
 create mode 100644 public/assets/shapes.svg
 create mode 100644 public/index.html
 create mode 100644 src/App.vue
 create mode 100644 src/components/ExploreContainer.vue
 create mode 100644 src/main.ts
 create mode 100644 src/router/index.ts
 create mode 100644 src/shims-vue.d.ts
 create mode 100644 src/theme/variables.css
 create mode 100644 src/views/Tab1.vue
 create mode 100644 src/views/Tab2.vue
 create mode 100644 src/views/Tab3.vue
 create mode 100644 src/views/Tabs.vue
 create mode 100644 tests/e2e/.eslintrc.js
 create mode 100644 tests/e2e/plugins/index.js
 create mode 100644 tests/e2e/specs/test.js
 create mode 100644 tests/e2e/support/commands.js
 create mode 100644 tests/e2e/support/index.js
 create mode 100644 tests/unit/example.spec.ts
 create mode 100644 tsconfig.json

Your Ionic app is ready! Follow these next steps:

- Go to your new project: cd ./myapp
- Run ionic serve within the app directory to see your app in the browser
- Run ionic capacitor add to add a native iOS or Android project using Capacitor
- Generate your app icon and splash screens using cordova-res --skip-config
--copy
- Explore the Ionic docs for components, tutorials, and more:
https://ion.link/docs
- Building an enterprise app? Ionic has Enterprise Support and Features:
https://ion.link/enterprise-edition
~ % 

 

最後、yを答えたらブラウザで下記に飛んだ。 

ionicframework.com

 

f:id:shigeo-t:20210413102940p:plain

GitHubで入ってみる。 

f:id:shigeo-t:20210413103043p:plain

うまくいったようだ。

f:id:shigeo-t:20210413103228p:plain

 

Packeges & CDN

Ionic + Vueのインストールをやる。

~ % npm install @ionic/vue @ionic/vue-router
npm WARN saveError ENOENT: no such file or directory, open '/Users/shigeo/package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open '/Users/shigeo-t/package.json'
npm WARN shigeo-t No README data
npm WARN shigeo-t No license field.

+ @ionic/vue-router@5.6.4
+ @ionic/vue@5.6.4
added 6 packages from 4 contributors and audited 6 packages in 5.136s
found 0 vulnerabilities

~ %

 

次は「次のステップ」だが、長くなったので次回。Vueだけ日本語ドキュメントが無いw

ionicframework.com

Ionicで作る モバイルアプリ制作入門〈Web/iPhone/Android対応〉

Ionicで作る モバイルアプリ制作入門〈Web/iPhone/Android対応〉

  • 作者:榊原 昌彦
  • 発売日: 2018/01/19
  • メディア: 単行本(ソフトカバー)