z_blog:2018:181009_ionic4-capacitor-camera
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン次のリビジョン両方とも次のリビジョン | ||
z_blog:2018:181009_ionic4-capacitor-camera [2018/10/09] – [181009_Ionic4+Capacitor+Cameraの写経にtryしてみる] adash333 | z_blog:2018:181009_ionic4-capacitor-camera [2018/10/09] – [npm run build] adash333 | ||
---|---|---|---|
行 30: | 行 30: | ||
home.page.htmlと、home.page.tsの変更 | 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 | npm run build | ||
npx capacitor sync | npx capacitor sync | ||
+ | npx cap open android | ||
+ | </ | ||
+ | 参考:[[: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | アプリメニュー:Build → Build APK | ||
+ | |||
+ | app/ | ||
+ | |||
+ | => Androidスマホにapkファイルをインストールして、カメラが起動するところまでは行けた。しかし、カメラでとった写真が表示されない。。。 | ||
+ | |||
+ | この、androidstudioでapkファイルを作成する方法がよく紹介されているが、それなら、Ionic-Native(Cordova)で十分な気がする。 | ||
+ | |||
+ | Capacitorを利用するメリットは、PWAでCameraなどが使えるからだと思う。 | ||
+ | |||
+ | ===== アプリのPWA化 ===== | ||
+ | |||
+ | < | ||
+ | ng add @angular/ | ||
+ | ionic build --prod | ||
</ | </ | ||
z_blog/2018/181009_ionic4-capacitor-camera.txt · 最終更新: 2018/10/09 by adash333