今回はApacheCordovaを使ってiPhoneのカメラを使ったアプリを作ります。
アプリと言ってもプログラムはVue.jsとOnsenUiを使って作りますので、Javascript(Vue.js)の知識があれば簡単に作ることができます。
OnsenUIを使うのはズバリ見た目がアプリっぽいからです。😁
Vue.js＋OnsenUIだけだとWebページとしては動作しますがカメラなどハードウェアを操作することができません。そこでApacheCordovaを利用しアプリ化します。そしてプラグインを利用してカメラ機能をのコントロールします。
プラグインにはカメラだけでなくGPSを使ったものやデータベースの操作など様々なものがありますので、専用に作られたアプリと遜色ないものを作ることができます。
ApacheCordovaのメリットは同一のソースコードでAndroidにも対応できます。iOSとAndroid両対応のアプリが作れるので、効率よく開発することがdきます。
準備
node.jsのインストールは予め済ませておいてください。
インストール方法はこちらです。
node.jsのVersionは10.16.3を使いました。
プロジェクトの作成とプラグインの導入
このあたりはサクッと実行しましょう。
$ npm install -g npm
$ npm install -g cordova
$ npm install -g @vue/cli
$ vue init OnsenUI/vue-cordova-webpack camera_app
// いろいろ質問が出ますがすべてEnterで可
? Project name camera_app
? Project description A Vue.js project
? Author akira-tanaka <Akiraspv0028>
? Vue build standalone
? Install Vuex for state management? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes
$ cd camera_app
$ npm install
// CordovaのIOSの開発環境をインストールします
$ cordova platform add ios
// Cordovaのカメラプラグインをインストールします。
$ cordova plugin add cordova-plugin-cameraconfig.xmlを編集します
<?xml version='1.0' encoding='utf-8'?>
<widget id="io.cordova.helloworld" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>camera_app</name>
<description>
Vue.js + Onsen UI + Cordova sample app
</description>
<author email="dev@cordova.apache.org" href="http://cordova.io">
Vue.js + Onsen UI + Cordova teams
</author>
<content src="index.html" />
<plugin name="cordova-plugin-whitelist" spec="1" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
<!-- ここから下を追加 -->
<edit-config target="NSCameraUsageDescription" file="*-Info.plist" mode="merge">
<string>need camera access to take pictures</string>
</edit-config>
<edit-config target="NSPhotoLibraryUsageDescription" file="*-Info.plist" mode="merge">
<string>need to photo library access to get pictures from there</string>
</edit-config>
<edit-config target="NSLocationWhenInUseUsageDescription" file="*-Info.plist" mode="merge">
<string>need location access to find things nearby</string>
</edit-config>
<edit-config target="NSPhotoLibraryAddUsageDescription" file="*-Info.plist" mode="merge">
<string>need to photo library access to save pictures there</string>
</edit-config>
<!-- ここまで -->
</widget>トップページを以下の内容に差し替えます。
そのまま置き換えてください。
src/components/HomePage.vue
<template>
<v-ons-page>
<section style="margin: 8px">
<v-container text-xs-center>
<v-ons-button modifier="large" v-on:click="takePicture" style="margin: 6px 0">カメラ起動</v-ons-button>
<img v-if="imagePath !== ''" v-bind:src="imagePath" />
{{imagePath}}
</v-container>
</section>
</v-ons-page>
</template>
<script>
export default {
name: 'HomePage',
data () {
return {
pageStack: [top],
imagePath: ''
}
},
methods: {
// camera plugin
takePicture: function () {
if (navigator.camera) {
navigator.camera.getPicture(this.setPicture, this.error, {
quality: 80,
targetWidth: 640,
targetHeight: 480
})
} else {
this.error('カメラの起動に失敗しました')
}
},
setPicture: function (imagePath) {
this.imagePath = imagePath
},
error: function (message) {
alert('エラーが発生しました: ' + message)
}
}
}
</script>Xcodeを使ったアプリの設定
Xcodeの設定
Xcodeを実行しプロジェクトを開きます（テストを行ったのはVersion11.0）
Xcodeのプロジェクトファイルを編集します。
{ProjectDirectory}/camera_app/platforms/iOS/camera_app.xcodeproj を開きます
AppleIDの追加
XcodeのPreference > Account
AppleIDを追加します。
追加したAppleIDをProjectに設定します
中段にあるSettingの中のTeamを自分のTeamを選ぶ
※ない場合はAdd an Accountで追加してください。
Signing & Capabilitiesタブを開きます・
Teamのところで設定sたAppleIDを選択します。
この表示が消えればライセンスは通っています。
しばらく時間がかかる場合があります。気長に☕
IPhoneへのアプリの転送
ターミナルに戻り続けて実行します
コンパイル
$ npm run build
/// 省略 ///
static/js/manifest.37a2ecbb1d1b7e6c9ada.js 856 bytes 2 [emitted] manifest
static/css/app.b346bc87d96a832fd65684a15b330bca.css 283 kB 1 [emitted] [big] app
static/css/app.b346bc87d96a832fd65684a15b330bca.css.map 562 kB [emitted]
static/js/vendor.9ceabf88ca2dfcfd64da.js.map 4.02 MB 0 [emitted] vendor
static/js/app.9936997462f8cd17bd2d.js.map 18 kB 1 [emitted] app
static/js/manifest.37a2ecbb1d1b7e6c9ada.js.map 4.97 kB 2 [emitted] manifest
index.html 713 bytes [emitted]
Build complete.
Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.実機に転送
Build complete.が確認できたらIPhoneとMacをケーブルで接続して以下を実行。
$ cordova run ios --deviceアプリが自動でインストールされます。
アイコンをクリックすると以下のよなメッセージが出ます。
当然信頼されてないので許可してあげます。
設定 ＞ 一般 ＞ プロファイルとデバイス管理 を選び
デベロッパAPPの項目をタッチします。
このデベロッパを信頼するかと聞かれるので「信頼」を選びます。
信頼を選ぶと[camera_app]が信頼されたアプリになります。
トップにもどって再度アイコンをタップします。
カメラ起動ボタンを押すとカメラにアクセスに行くのでOKを押して許可します。
カメラを通して画面が表示されました。
撮影ボタンを押すと写真が取れます。
UsePhotoを選択すると制御がアプリに戻ってきます
撮影したらファイルイメージとPATHが表示されます。
備考
The maximum number of apps for free development profiles has been reached.
というエラーが出ることがあります。
これは無料で利用できるテストは2つまでとなっており、3つ目をデプロイすると
このようなエラーが出ます。
iPhoneに転送したアプリを削除しアプリを減せば正しくインストールできます。
また、数日したらアプリが使えなくなるので再度上記の設定を行い許可します。
以上でカメラアプリの作成を終わります。
時間がとれればAndroid版もやります！ほぼ手順は一緒です。
コメント