Ionic-Vue を試してみる

Ionic-Vue を試してみる

2020年10月15日に、IonicVueが正式リリースされました。
Ionic-Angularしか使っていなかったので、早速試してみました。

実行環境

  • macOS Catalina 10.15.6
  • ionic cli 6.12.0
  • npm 6.14.4
  • node v10.20.1
    今回、centos7系のdockerコンテナ上で検証しました。

Quickstartページをやってみる

まずは、以下ページを上から進めてみる。

Ionic Vue Quickstart – Ionic Documentation
https://ionicframework.com/docs/vue/quickstart

# npm install -g @ionic/cli@latest

/usr/bin/ionic -> /usr/lib/node_modules/@ionic/cli/bin/ionic + @ionic/cli@6.12.0 added 206 packages from 152 contributors in 15.95s

# ionic start myApp blank –type vue

✔ Preparing directory ./myApp in 6.62ms
✔ Downloading and extracting blank starter in 754.61ms
... 省略 ...
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

問題なくionicのプロジェクトが作成された。myApp配下は、以下のようなファイル、フォルダが作成されていた。

# cd myApp/
# ls
babel.config.js        cypress.json       jest.config.js  package-lock.json  public  tests
capacitor.config.json  ionic.config.json  node_modules    package.json       src     tsconfig.json

# ionic serve

アプリを起動してみた。
Blankスターターテーマだったので、これだけ。

ひとまず、これで開発はできそう。

iosへデプロイ

次は、以下の手順に沿って、iosのデプロイをやってみる。

Deploying to iOS and Android – Ionic Documentation
https://ionicframework.com/docs/vue/your-first-app/6-deploying-mobile

# ionic build

$ ionic build
> vue-cli-service build
⠋  Building for production...
 WARNING  Compiled with 1 warnings                                                                                                                      15:26:33
 warning  
entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  app (258 KiB)
      css/chunk-vendors.190e707f.css
      js/chunk-vendors.d2114e7a.js
      css/app.086e8234.css
      js/app.6e0c82ca.js
  File                                      Size                                                    Gzipped
  dist/js/chunk-vendors.d2114e7a.js        223.79 KiB                                               74.46 KiB
... 省略 ...
  Images and other types of assets omitted.
 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

# ionic cap add ios

これは、Ionic3では使っていなかったコマンド。
Cordovaの代替となるCapacitor。これも上手く進んだ。

> capacitor add ios
ℹ Installing iOS dependencies – Skipping: already installed
✔ Adding native xcode project in: /Users/rhinonolike/works/danroo/dra-vue/myApp/ios in 20.06ms
✔ add in 21.30ms
✔ Copying web assets from dist to ios/App/public in 51.25ms
✔ Copying native bridge in 2.05ms
✔ Copying capacitor.config.json in 1.57ms
✔ copy in 63.78ms
✔ Updating iOS plugins in 2.76ms
  Found 0 Capacitor plugins for ios:
✔ Updating iOS native dependencies with "pod install" (may take several minutes) in 7.25s
✔ update ios in 7.27s
Now you can run npx cap open ios to launch Xcode

Tips – 再実行するとエラーが発生した

このコマンドを再実行すると、以下のエラーが表示された。
フォルダを自動で削除してくれないようなので、手動で作成してから再実行する。

$ ionic cap add ios
> capacitor add ios
[error] "ios" platform already exists.
      To add a new "ios" platform, please remove "/Users/rhinonolike/works/danroo/dra-vue/myApp/ios" and run this command again.
      WARNING! your native IDE project will be completely removed.
[ERROR] An error occurred while running subprocess capacitor.
        
        capacitor add ios exited with exit code 1.
        
        Re-running this command with the --verbose flag may provide more information.

# ionic cap open ios

このコマンドでXCodeが起動される。
Dockerコンテナ上で、コマンド実行しても、Xcodeが起動しなかったので、
これはmac上で実行した。

> capacitor open ios
✔ Opening the Xcode workspace... in 3.01s

XCodeでプロジェクトを開くと、以下のエラーが表示されていた。


/Users/rhinonolike/works/danroo/dra-vue/myApp/ios/App/App.xcodeproj The file “Pods-App.debug.xcconfig” couldn’t be opened because there is no such file. (/Users/rhinonolike/works/danroo/dra-vue/myApp/ios/App/Pods/Target Support Files/Pods-App/Pods-App.debug.xcconfig)
/Users/rhinonolike/works/danroo/dra-vue/myApp/ios/App/App.xcodeproj The file “Pods-App.release.xcconfig” couldn’t be opened because there is no such file. (/Users/rhinonolike/works/danroo/dra-vue/myApp/ios/App/Pods/Target Support Files/Pods-App/Pods-App.release.xcconfig)

調べていくと、cocoapodがセットアップされていないことが原因だったので、セットアップを行う。

CocoaPod セットアップ

$ sudo gem install -n /usr/local/bin cocoapods

Fetching activesupport-5.2.4.4.gem
Fetching fuzzy_match-2.0.4.gem
Fetching nap-1.1.0.gem
...
Installing ri documentation for cocoapods-1.10.0
Done installing documentation for activesupport, nap, fuzzy_match, httpclient, algoliasearch, ethon, typhoeus, netrc, cocoapods-core, claide, cocoapods-deintegrate, cocoapods-downloader, cocoapods-plugins, cocoapods-search, cocoapods-trunk, cocoapods-try, molinillo, atomos, colored2, nanaimo, xcodeproj, escape, fourflusher, gh_inspector, ruby-macho, cocoapods after 14 seconds
26 gems installed

セットアップする

$ pod setup

Setup completed

セットアップ後、ionic build から再実行したら、成功した。

やってみて

Ionic3,4を触っていたこともあり、思い出しながら、進めることができた。
次は、コンポーネントを使ってみたり、Vuejsの実装方法について、違いがあるのかをみてみたい。
また、画像アップロードアプリ(https://ionicframework.com/docs/vue/your-first-app)も試してみようと思う。

参考リンク

【Swift】CocoaPods導入手順 – Qiita
https://qiita.com/ShinokiRyosei/items/3090290cb72434852460

【xcode CocoaPods エラー】 *.debug.xcconfig: unable to open – Mjeld Technologies xcode cocoapod ios
https://mjeld.com/xcodecocoapodsinstall/

アプリ開発カテゴリの最新記事