z_blog:2018:181009_ionic4-capacitor-camera
差分
このページの2つのバージョン間の差分を表示します。
次のリビジョン | 前のリビジョン | ||
z_blog:2018:181009_ionic4-capacitor-camera [2018/10/09] – 作成 adash333 | z_blog:2018:181009_ionic4-capacitor-camera [2018/10/09] (現在) – [参考] adash333 | ||
---|---|---|---|
行 1: | 行 1: | ||
====== 181009_Ionic4+Capacitor+Cameraの写経にtryしてみる ====== | ====== 181009_Ionic4+Capacitor+Cameraの写経にtryしてみる ====== | ||
+ | |||
+ | 前回;[[181009_ionic4_firestore_capacitor_camera2]] | ||
もうどうにもならないCapacitor\\ | もうどうにもならないCapacitor\\ | ||
以下のサイトを写経して、動くのだろうか。。。 | 以下のサイトを写経して、動くのだろうか。。。 | ||
- | http:// | + | http:// |
Ionic 4 – Camera with Capacitor | Ionic 4 – Camera with Capacitor | ||
JULY 30, 2018 | JULY 30, 2018 | ||
+ | |||
+ | ===== 参考サイト ===== | ||
+ | https:// | ||
+ | Using Capacitor with Ionic(Capacitor公式サイト) | ||
+ | |||
+ | ===== 写経経過 ===== | ||
< | < | ||
行 16: | 行 24: | ||
npm uninstall --save cordova-plugin-splashscreen | npm uninstall --save cordova-plugin-splashscreen | ||
npm install --save @capacitor/ | npm install --save @capacitor/ | ||
- | npx init camerapp com.example.app | + | npx cap init camerapp com.example.app |
npm run build | npm run build | ||
- | npx cap android | + | npx cap add android |
+ | </ | ||
+ | home.page.htmlと、home.page.tsの変更 | ||
+ | ==== home.page.html ==== | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | Ionic Blank | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | <img [src]=" | ||
+ | < | ||
+ | </ | ||
</ | </ | ||
+ | |||
+ | ==== home.page.ts ==== | ||
+ | < | ||
+ | import { Component } from ' | ||
+ | |||
+ | import { Plugins, CameraSource, | ||
+ | |||
+ | @Component({ | ||
+ | selector: ' | ||
+ | templateUrl: | ||
+ | styleUrls: [' | ||
+ | }) | ||
+ | export class HomePage { | ||
+ | |||
+ | yourImage: any; | ||
+ | |||
+ | constructor() { | ||
+ | |||
+ | } | ||
+ | |||
+ | async captureImage() { | ||
+ | const capturedImage = await Plugins.Camera.getPhoto( | ||
+ | { | ||
+ | quality: 90, | ||
+ | allowEditing: | ||
+ | source: CameraSource.Camera, | ||
+ | resultType: CameraResultType.Uri | ||
+ | } | ||
+ | ); | ||
+ | |||
+ | this.yourImage = capturedImage.webPath; | ||
+ | } | ||
+ | |||
+ | } | ||
+ | </ | ||
+ | |||
+ | ===== npm run build ===== | ||
+ | < | ||
+ | npm run build | ||
+ | npx capacitor sync | ||
+ | npx cap open android | ||
+ | </ | ||
+ | 参考:[[: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | アプリメニュー:Build → Build APK | ||
+ | |||
+ | app/ | ||
+ | |||
+ | => Androidスマホにapkファイルをインストールして、カメラが起動するところまでは行けた。しかし、カメラでとった写真が表示されない。。。 | ||
+ | |||
+ | コードを更新したときは、 | ||
+ | |||
+ | < | ||
+ | npm run build | ||
+ | npx cap copy | ||
+ | </ | ||
+ | |||
+ | この、androidstudioでapkファイルを作成する方法がよく紹介されているが、それなら、Ionic-Native(Cordova)で十分な気がする。 | ||
+ | |||
+ | Capacitorを利用するメリットは、PWAでCameraなどが使えるからだと思う。 | ||
+ | |||
+ | ===== アプリのPWA化 ===== | ||
+ | |||
+ | < | ||
+ | ng add @angular/ | ||
+ | ionic build --prod | ||
+ | </ | ||
+ | GitHub経由でnetlifyでデプロイしてみたが、CAPTURE!!ボタンをクリックしても、カメラは起動しなかった。 | ||
+ | |||
+ | ソースコード | ||
+ | https:// | ||
+ | |||
+ | ===== 参考 ===== | ||
+ | |||
+ | なんとプラグイン無しでpwaとしてカメラが動くionic3ソースコードが紹介されていた | ||
+ | |||
+ | https:// | ||
+ | |||
+ | |||
+ | |||
+ | https:// | ||
+ | @hedrall | ||
+ | 2018年08月07日に更新 | ||
+ | Ionic > カメラロールなどから画像を選択して、アップロードする | ||
+ | ===== 写経元サイト ===== | ||
+ | |||
+ | http:// | ||
+ | Ionic 4 – Camera with Capacitor | ||
+ | JULY 30, 2018 | ||
+ | |||
+ | |||
z_blog/2018/181009_ionic4-capacitor-camera.txt · 最終更新: 2018/10/09 by adash333