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

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

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


Ionic FrameworkをMacにインストール ― はじめてのアプリ制作編 ―

前回、インストールまでは終わった。

 

shigeo-t.hatenablog.com

shigeo-t.hatenablog.com

 

次のステップ

公式ドキュメントにしたがって進めてきた。次は「次のステップ」である。

ionicframework.com

今回はVueを選んだのだが、Vueだけ英語ドキュメントである。

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

 

Start with Vue

そんなに難しいことは書いてないので読んでみる。

ionicframework.com

バイスのカメラで写真を撮り、グリッドに表示して、デバイスに永続的に保存する機能を提供するフォトギャラリーアプリを作成します。

 

GitHubからサンプルダウンロード

GitHubにあるらしい。

Find the complete app code referenced in this guide on GitHub.

GitHub Desktopをインストールしているので開いてみた。

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

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

[Open in Visual Studio Code]をクリックしてみる。

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

確かにTUTORIAL-PHOTO-GALLERY-VUEなので、これで間違いないだろう。

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

 

Download Required Tools

Download Required Toolsセクションを読むと。

Download and install these right away to ensure an optimal Ionic development experience:

と書いてあるがすでに前回までにインストール済のものである。

 

Install Ionic Tooling

コマンドを見ると、native-run、cordova-resはまだインストールしていない。実行してみる。

~ % npm install -g @ionic/cli@latest native-run cordova-res
/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
/Users/shigeo-t/.nodebrew/node/v14.16.1/bin/cordova-res -> /Users/shigeo-t/.nodebrew/node/v14.16.1/lib/node_modules/cordova-res/bin/cordova-res
/Users/shigeo-t/.nodebrew/node/v14.16.1/bin/native-run -> /Users/shigeo-t/.nodebrew/node/v14.16.1/lib/node_modules/native-run/bin/native-run

> sharp@0.27.2 install /Users/shigeo-t/.nodebrew/node/v14.16.1/lib/node_modules/cordova-res/node_modules/sharp
> (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)

info sharp Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.10.5/libvips-8.10.5-darwin-x64.tar.br
+ @ionic/cli@6.13.1
+ cordova-res@0.15.3
+ native-run@1.3.0
added 130 packages from 223 contributors and updated 1 package in 21.589s

 

Create an App

tabスターターテンプレートを使ってIonicVueアプリを作れと書いてある。コマンドを実行する。

~ % ionic start photo-gallery tabs --type vue --capacitor
✔ Preparing directory ./photo-gallery in 1.60ms
✔ Downloading and extracting tabs starter in 232.61ms
> ionic integrations enable capacitor --quiet -- photo-gallery 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 2.212s
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.53s

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

found 0 vulnerabilities

> capacitor init photo-gallery 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 eslint-loader@2.2.1: This loader has been deprecated. Please use eslint-webpack-plugin
npm WARN deprecated html-webpack-plugin@3.2.0: 3.x is no longer supported
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated @hapi/joi@15.1.1: Switch to 'npm install joi'
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 chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated @hapi/address@2.1.4: Moved to 'npm install @sideway/address'
npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/bourne@1.3.2: 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 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 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 fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
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/photo-gallery/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/photo-gallery/node_modules/deasync
> node ./build.js

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

> fsevents@1.2.13 install /Users/shigeo-t/photo-gallery/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/photo-gallery/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/photo-gallery/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/photo-gallery/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/photo-gallery/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"


> ejs@2.7.4 postinstall /Users/shigeo-t/photo-gallery/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/photo-gallery/node_modules/cypress
> node index.js --exec install


Cypress 3.8.3 is installed in /Users/shigeo-t/Library/Caches/Cypress/3.8.3

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-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-scope@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-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-values@4.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 70.441s

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

found 6 vulnerabilities (4 low, 2 moderate)
  run `npm audit fix` to fix them, or `npm audit` for details
> git init
Initialized empty Git repository in /Users/shigeo-t/photo-gallery/.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? No
> git add -A
> git commit -m "Initial commit" --no-gpg-sign
[master (root-commit) 2775ef2] 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 ./photo-gallery
- 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

問題無さそう。cd photo-galleryで生成されたアプリフォルダーに移る。

~ % cd photo-gallery 
photo-gallery % ls -las
total 1352
   0 drwxr-xr-x    18 shigeo-t  staff     576  4 15 11:04 .
   0 drwxr-xr-x+   53 shigeo-t  staff    1696  4 15 11:02 ..
   8 -rw-r--r--     1 shigeo-t  staff      30  4 13 00:55 .browserslistrc
   8 -rw-r--r--     1 shigeo-t  staff     661  4 13 00:55 .eslintrc.js
   0 drwxr-xr-x    12 shigeo-t  staff     384  4 15 11:04 .git
   8 -rw-r--r--     1 shigeo-t  staff     389  4 13 00:55 .gitignore
   8 -rw-r--r--     1 shigeo-t  staff      73  4 13 00:55 babel.config.js
   8 -rw-r--r--     1 shigeo-t  staff     231  4 15 11:02 capacitor.config.json
   8 -rw-r--r--     1 shigeo-t  staff      50  4 13 00:55 cypress.json
   8 -rw-r--r--     1 shigeo-t  staff      92  4 15 11:02 ionic.config.json
   8 -rw-r--r--     1 shigeo-t  staff     216  4 13 00:55 jest.config.js
   0 drwxr-xr-x  1039 shigeo-t  staff   33248  4 15 11:04 node_modules
1272 -rw-r--r--     1 shigeo-t  staff  650597  4 15 11:04 package-lock.json
   8 -rw-r--r--     1 shigeo-t  staff    1231  4 15 11:02 package.json
   0 drwxr-xr-x     4 shigeo-t  staff     128  4 15 11:02 public
   0 drwxr-xr-x     9 shigeo-t  staff     288  4 15 11:02 src
   0 drwxr-xr-x     4 shigeo-t  staff     128  4 15 11:02 tests
   8 -rw-r--r--     1 shigeo-t  staff     687  4 13 00:55 tsconfig.json

 

PWA Elements

Ionic PWAElementsが必要らしい。インストールする。

photo-gallery % npm install @ionic/pwa-elements
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 icss-utils@5.1.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-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-scope@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-values@4.0.0 requires a peer of postcss@^8.1.0 but none is installed. You must install peer dependencies yourself.

+ @ionic/pwa-elements@3.0.2
added 1 package from 1 contributor and audited 1810 packages in 20.886s

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

found 6 vulnerabilities (4 low, 2 moderate)
  run `npm audit fix` to fix them, or `npm audit` for details
photo-gallery % 

 

Run the App

アプリを起動する。

photo-gallery % ionic serve
> vue-cli-service serve
[vue-cli-service]  INFO  Starting development server...
[vue-cli-service]   App running at:
[vue-cli-service]   - Local:   http://localhost:8100/ 
[vue-cli-service]   - Network: http://192.168.28.12:8100/
[vue-cli-service]   Note that the development build is not optimized.
[vue-cli-service]   To create a production build, run npm run build.

[INFO] Development server running!
       
       Local: http://localhost:8100
       
       Use Ctrl+C to quit this process

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

[vue-cli-service] No issues found.

ブラウザにアプリが表示された。

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

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

 

Macにはカメラをつないでいなかった。ということで、続きはMacではなくカメラをつないでいるPCでやってみようと思う。次は「Photo Gallery!!!」というセクションで実際の触り方が書かれている。