前回、インストールまでは終わった。
次のステップ
公式ドキュメントにしたがって進めてきた。次は「次のステップ」である。
今回はVueを選んだのだが、Vueだけ英語ドキュメントである。
Start with Vue
そんなに難しいことは書いてないので読んでみる。
デバイスのカメラで写真を撮り、グリッドに表示して、デバイスに永続的に保存する機能を提供するフォトギャラリーアプリを作成します。
GitHubからサンプルダウンロード
GitHubにあるらしい。
Find the complete app code referenced in this guide on GitHub.
GitHub Desktopをインストールしているので開いてみた。
[Open in Visual Studio Code]をクリックしてみる。
確かにTUTORIAL-PHOTO-GALLERY-VUEなので、これで間違いないだろう。
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.
ブラウザにアプリが表示された。
Macにはカメラをつないでいなかった。ということで、続きはMacではなくカメラをつないでいるPCでやってみようと思う。次は「Photo Gallery!!!」というセクションで実際の触り方が書かれている。
![Ionicで作る モバイルアプリ制作入門[Angular版]<Web/iPhone/Android対応>](https://m.media-amazon.com/images/I/51w6C7vefvL._SL500_.jpg "Ionicで作る モバイルアプリ制作入門[Angular版]<Web/iPhone/Android対応>")
