カテゴリーアーカイブ iOS

村上 著者:村上

【Cordova】端末のプラットフォームやバージョン情報を取得できるプラグイン「cordova-plugin-device」

Cordova アプリを開発中に、Android と iOS で処理を分けるなど、端末の情報を取得する必要があるときに便利なプラグイン「cordova-plugin-device」についてのご紹介です。
主に、プラグインによっては、Android でしか動作しないものがあったり、逆に iOS でのみ動作するものもあったりするのでそれの処理をかき分けたい時などに使っています。

GitHub のページはこちらから。

GitHub – apache/cordova-plugin-device: Apache Cordova Plugin device
https://github.com/apache/cordova-plugin-device

 

インストールは下記のコマンドで行います。

cordova plugin add cordova-plugin-device --save

準備は以上で完了です。
あとは、任意の場所でプラットフォームの種類などのデバイス情報を取得できます。

私が主に使うのは下記のコードです。

const device = window.device.platform;

switch (device) {
    case 'Android':
        // 端末が Android だった時の処理
        break;
    case 'iOS':
        // 端末が iOS だった時の処理
        break;
    default:
        // その他の処理
}

上記では、アプリを実行している端末が Android なのか iOS なのか、それ以外のものなのかを判定して、それぞれの処理を実行できます。

他にも、UUID を取得したり、バージョン情報を取得したりすることもできます。
取得できる情報は下記のとおりです。

  • device.model
  • device.platform
  • device.uuid
  • device.version
  • device.manufacturer
  • device.isVirtual
  • device.serial

また、端末の製造元や、現在の実行環境が実機なのかシュミレータなのかを判断することもできます。
使い方は下記のとおりです。

// 製造元を取得
const manufacturer = window.device.manufacturer;
// シュミレータかどうかを取得
const isSimulator = window.device.isVirtual;

なお、シュミレータかどうかの判定については、OS Xブラウザの場合は常に false を返すようです。

 

以上、アプリを実行している端末の情報を取得できるプラグイン「cordova-plugin-device」のご紹介でした。
プラットフォームの取得以外はまだ使ったことはありませんが、それだけでもかなり使えますので、是非ご活用ください。

  • この記事いいね! (0)
村上 著者:村上

【Xcode】「Your app supports Multitasking on iPad, so you must include the UILaunchStoryboardName key in your bundle」の対処法

今回は、Xcode で iOS アプリのリリース準備を行っていた際に発生したエラーについてです。
具体的には、Xcode で アプリを Archive し、Organizer から「Distribute App」でアプリを App Store にアップロードしようとした時ですね。

エラーメッセージは「Your app supports Multitasking on iPad, so you must include the UILaunchStoryboardName key in your bundle」というエラーで、翻訳すると「あなたのアプリはiPad上でマルチタスクをサポートしているので、あなたはあなたのバンドルにUILaunchStoryboardNameキーを含める必要があります。」とのこと。

 

ということでサクッと検索したところ、ヒットした記事がこちら。

iPad Multitaskingに対応したメモ – Qiita
https://qiita.com/jollyjoester/items/c8bb1592d01fdef663f9

上記の記事によると、iPad のマルチタスク機能に対応していないことが問題とのことです。

こちらの対処法は 2つあり、マルチタスク機能を無効にする方法とマルチタスクに対応する方法です。
今回のアプリはマルチタスク機能を無効にする方法を選択しました。

作業としては、下の画像のように、Requires full screen にチェックを入れるだけです!

強制フルスクリーンでマルチタスク自体が無効になるため、対応しなくて済む!という感じみたいです。
参考にした記事にもありましたが、こちらは手抜きの方法。
ですが、フルスクリーンで問題がないのであれば、この方法を採用してもいいと思います。

マルチタスク機能に対応する方法は、参考サイトに記載されていますので、そちらをご確認ください。

 

以上、iOS アプリを App Store にアップロードする際に発生した「Your app supports Multitasking on iPad, so you must include the UILaunchStoryboardName key in your bundle」エラーの対処法でした。
ご参考になれば幸いです。

  • この記事いいね! (0)
村上 著者:村上

【Cordova】写真からExif情報を取得するプラグイン「cordova-exif」

今回は、写真から Exif 情報を取得するためのプラグイン「cordova-exif」について。
以前は JavaScript を使って取得していたのですが、色々修正することになったので併せてこちらも修正しました。

GitHub のページはこちらから。

GitHub – guilhermefarias/cordova-exif: This plugin, is the simplest way to get exif data of images at Cordova platform (Phonegap)
https://github.com/guilhermefarias/cordova-exif

 

実装方法ですが、まず下記のコードを実行します。

cordova plugin add https://github.com/domax/cordova-exif.git --save

なお、このプラグインを使うには cordova-plugin-cameracordova-plugin-file が必要です。
インストールされてない場合は、自動でこれらのプラグインもインストールされます。

ただし、プラグインのバージョンによっては競合が起こる事もあり、私の環境ではカメラプラグインのバージョンが新しすぎたようでエラーになりました。
そのため、最新のカメラプラグインやファイルプラグインを既にインストール済みの場合は、問題がなければ一度削除してから cordova-exif をインストールすることをおすすめします。

インストールが完了したら、あとは下記のコードで Exif 情報を取得できます。

CordovaExif.readData(imageURI, function(exifObject) {
  console.log(exifObject);
});

取得できるデータ一覧は上の GitHub のページに記載されているので、分からなくなった場合はご確認ください。

なお、カメラプラグインと合わせて使う場合は下記のように書きます。

function onSuccess(imageURI) {
  CordovaExif.readData(imageURI, function(exifObject) {
    console.log(exifObject);
  });
}
function onFail(message) {
  alert('Failed because: ' + message);
}
var options = {
  sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
  quality: 50,
  encodingType: Camera.EncodingType.JPEG,
  destinationType: Camera.DestinationType.FILE_URI
}
navigator.camera.getPicture(onSuccess, onFail, options);

なお、上記のプログラムでは、フォトアルバムから写真を選択するようにしています。

気を付けたい点としては、カメラプラグインのオプションで correctOrientationtrue に設定し、画像を正しい向きに直す処理を追加すると、取得できる Exif 情報が減りました。
私は写真から緯度経度を取得したかったので、上記の理由から correctOrientation を追加するのをやめました…。
なお、写真の向きは取得できたので、そちらで正しい向きに直す処理を追加することはできます。

 

以上、写真から Exif 情報を取得するためのプラグイン「cordova-exif」についてのご紹介でした。
インストール時に若干手間取りましたが、便利なプラグインですので是非ご活用ください。

  • この記事いいね! (0)
村上 著者:村上

【Cordova】「phonegap-plugin-csdk-image-editor」プラグインをiOSに実装する時の注意点

先週に引き続き、本日も「phonegap-plugin-csdk-image-editor」プラグインについてです。
結構苦しめられたので、二度と同じ轍を踏みたくない…ということで、未来の私のための備忘録です。

 

今回は、iOS への実装時につまづいた点について。
GitHub のページにも記載がある通り、iOS にこのプラグインを追加する際には、別途 Framework を手動で追加しなければなりません。
が、ページが更新されていないのか、記載されているダウンロード先リンクからは当該の Framework が見つからない!
これがないとプラグインのインストールすらできなくて、phonegap-plugin-csdk-client-authphonegap-plugin-csdk-image-editor を追加しようとしてもエラーが発生しているかと思います。

…ということで、まずは、この Framework のダウンロード方法について。
ダウンロードは下記の URL があったので、こちらからダウンロードしてください。

SDK · 9e4c4586e17b6462eb5e2dd556e91c8698640da9 · AppUnite / aviary · GitLab
https://git.appunite.com/appunite/aviary/tree/9e4c4586e17b6462eb5e2dd556e91c8698640da9/SDK

画面右上の方に、ダウンロードアイコンがあるので、こちらをクリックしてダウンロードしてください。
ダウンロードが完了したら、解凍しておきます。

あとは、「phonegap-plugin-csdk-image-editor」を追加したプロジェクトの plugins ディレクトリの、まずは phonegap-plugin-csdk-client-auth を開きます。
その中の src > ios ディレクトリ内に AdobeCreativeSDKFrameworks という名前でディレクトリを作ってください。
そして、この中に AdobeCreativeSDKCore.framework をコピーします。
残りの AdobeCreativeSDKImage.framework は、plugins > phonegap-plugin-csdk-image-editor > src > ios に AdobeCreativeSDKFrameworks ディレクトリを追加し、そこにコピーします。

作業は以上です。
あとは、再度プラグインのインストールをお試しください。
なお、コマンドには --save オプションを追加してください。
おそらく、これでプラグインのインストールは成功するはずです。

あとは、通常通り cordova prepare ios を実行後、Xcode で Clean → Run をお試しください。
私の環境では問題なく動作しました!

 

以上、iOS に「phonegap-plugin-csdk-image-editor」プラグインを実装する際の注意点でした。
ちょっと手間ですが…機能自体はすごく使いやすくてオススメですので、画像加工機能を実装したいときは、ぜひご検討ください。

  • この記事いいね! (0)
村上 著者:村上

【Cordova】Abobeの画像加工機能を実装できるプラグイン「phonegap-plugin-csdk-image-editor」

本来ならばこちらの記事を先に投稿するべきだったかも…。

昨日の記事で、「phonegap-plugin-csdk-image-editor」というプラグインを導入した際に遭遇したエラーについての対処法について紹介しましたが、今日はそのプラグインの導入方法についてです。

GitHub のページはこちらから。

GitHub – CreativeSDK/phonegap-plugin-csdk-image-editor: A PhoneGap plugin for the Creative SDK Image Editor.
https://github.com/CreativeSDK/phonegap-plugin-csdk-image-editor

 

実装方法ですが、まずは本命のプラグインを導入する前に phonegap-plugin-csdk-client-auth プラグインをインストールする必要があります。
で、その際に、各プラットフォームの クライアントIDクライアントシークレットが必要になるので、下記の URL から登録する必要があります。

Adobe I/O Console
https://console.adobe.io/integrations

あとは上記で登録した ID などを使って、下記のコマンドを実行します。

cordova plugin add --save phonegap-plugin-csdk-client-auth --variable CSDK_CLIENT_ID_IOS="[iOS のクライアントID]" --variable CSDK_CLIENT_SECRET_IOS="[iOS のクライアントシークレット]" --variable CSDK_CLIENT_ID_ANDROID="[Android のクライアントID]" --variable CSDK_CLIENT_SECRET_ANDROID="[Android のクライアントシークレット]"

こちらの実行が完了したら、下記のコマンドを実行し、画像加工用のプラグインをインストールします。

cordova plugin add --save phonegap-plugin-csdk-image-editor

準備はこれで完了です。
あとは、任意の場所で下記のコードを実行すればOKです。

function success(newUrl) {
    // 画像加工が成功した時の処理
    console.log("Success!", newUrl);
}
function error(error) {
    // 画像加工が失敗した時の処理
    console.log("Error!", error);
}

var imageUrl = "[加工したい画像のURI]";
var options = {
    outputType: CSDKImageEditor.OutputType.JPEG,
    tools: [
        CSDKImageEditor.ToolType.EFFECTS,
        CSDKImageEditor.ToolType.CROP
    ],
    quality: 50
};
// エディターを起動
CSDKImageEditor.edit(success, error, imageUrl, options);

メソッドやオプションについてのガイドは下記からご確認頂けます。

API guide
https://github.com/CreativeSDK/phonegap-plugin-csdk-image-editor/blob/master/docs/api.md

 

以上、Adobe Creative SDK の画像加工機能を実装できるプラグイン「phonegap-plugin-csdk-image-editor」のご紹介でした。
ただし、昨日の記事でも書きましたが、別途ライブラリの追加が必要なのでご注意ください。

  • この記事いいね! (0)
村上 著者:村上

【Cordova】アプリをバックグラウンドでも実行するためのプラグイン「cordova-plugin-background-mode」

現在も引き続き開発中の Cordova アプリを iOS で実行した際、アプリがバックグラウンドになるとビーコンが受信できないという現象が発生していました。
ビーコン受信に使っているのは「cordova-plugin-ibeacon」というプラグインです。
で、どうしてもバックグラウンドで受信したい!との要望があったので、その対策に「cordova-plugin-background-mode」というプラグインをインストールしてみました。

GitHub のページはこちらから。

GitHub – katzer/cordova-plugin-background-mode: Keep app running in background
https://github.com/katzer/cordova-plugin-background-mode

なお、結論から言うと、問題なくバックグラウンドでのビーコン受信を行うことができました!
が、バックグラウンドでも実行しているため、当然ですがメモリの消費は増えます。
あまり重い処理を行うと、バッテリーの消費が早くなったり、端末が熱を持つ可能性もありますので、その点ご了承の上で、実装してください。

 

インストール方法は、まず下記のコマンドを実行します。

cordova plugin add cordova-plugin-background-mode

インストールが終わったら、deviceready が発火した後、任意のタイミングでバックグラウンド処理を有効にする記述を追加します。
私はアプリが起動して、メイン画面が表示されるタイミングで実行しています。
そのコードはこちら。

// バックグラウンドを有効にする
window.cordova.plugins.backgroundMode.enable();
// 下記の書き方でもOK
window.cordova.plugins.backgroundMode.setEnabled(true);

バックグラウンド処理を無効にする時はこちらを実行します。

window.cordova.plugins.backgroundMode.disable();
// または
window.cordova.plugins.backgroundMode.setEnabled(false);

バックグラウンド処理が有効かどうか調べたい場合は下記を実行します

const status = window.cordova.plugins.backgroundMode.isActive();

なお、返却される値は true/false です。

基本的な関数は以上です。
他にも、バックグラウンドの ON/OFF を検知したタイミングで、任意の処理を実行したり、Android 限定ですが、プログラム側からアプリをバックグラウンド/フォアグラウンドに移動させたりすることもできます。
このあたりは、ドキュメントをご確認ください。

 

以上、Cordova アプリをバックグラウンドでも実行するためのプラグイン「cordova-plugin-background-mode」のご紹介でした。
是非ご活用ください。

  • この記事いいね! (0)
asaba 著者:asaba

【ios】iosの自動バージョンアップのこと

 

iphoneを使っている方は分かると思うのですが、iosのバージョンアップってほとんど夜中に更新していますよね?

自分も夜間にアップデートをするよう設定したのですが、朝起きてばーじょんを確認をすると何も変わっておらずどうやら何らかの

理由でバージョンアップができなかったのだと思われます。設定も変えていない、アプリを起動している訳でもない、なんだろうと

考えてる内に頭にピンとよからぬことを思い出しました。

 

充電していないじゃん!!!

 

しかも、10%しかない!w夜に充電したので大丈夫かと思ってそのまま寝たのがあかんかったらしく、しかもgoogleMapがバックグラウン

ドで起動中だったみたい。それは是非もないよね!

。んー、iosは省エネモードかつ充電が20%を切ると自動アップデートを行わないみたい

ですね。バージョンアップのタイミングの際には充電をしっかりしてから(ケーブルにぶっ刺してから)寝ましょう。

  • この記事いいね! (0)
村上 著者:村上

【Cordova】「cordova-silent-mode」プラグインで端末がサイレントモードかどうかを取得できない時の対処法

Cordova アプリで、サイレントモードかどうかを検知できるプラグイン「cordova-silent-mode」が正しく動作しない時の対処法です。
ちなみに、iOS のみ対応しています。

GitHub – khevamann/cordova-silent-mode: Simple mute/not mute checked for Cordova and iOS
https://github.com/khevamann/cordova-silent-mode

 

現在開発中のアプリでは、ページを開いたタイミングで通知音を鳴らすとき、もし端末がミュートだったらこの通知音を鳴らさないという処理を実装していました。
が、何故かミュート状態かどうかが取得できず…。
ただ、別のタイミングでも通知音は鳴らしているのですが、こちらは動いているんですよね。

ちなみに、コードは下記のような感じです。

SilentMode.init();
SilentMode.isMuted(
    function() {
        // ミュートの時の処理
    }, function() {
        // ミュートではない時の処理
});

GitHub に記載されていたサンプルコードをそのまま使用しておりますので、間違いはないはず。

で、色々試してみたところ、ページを表示した時に音を鳴らすタイミングを約 1秒間遅延させたところ、問題なく動作しました!
どうやら、ページが開いた直後に実行していたのがよくなかったみたいです。
場合によっては使えない方法かもしれませんが、今回のアプリでは、遅延させても問題なさそうだったので、こちらの方法を使いました。
あまりスマートではありませんが…動いたので良しとしたいと思います。

 

以上、Cordova アプリで 端末がサイレントモードかどうかを取得できるプラグイン「cordova-silent-mode」が使えない時の対処法でした。
ご参考になれば幸いです。

  • この記事いいね! (0)
村上 著者:村上

【Xcode】「Unable to copy symbols from this device」エラーの対処法

先日ご紹介した、Xcode でサポートしていないの iOS のバージョンの端末を実行する方法で、それを行った後に、私の環境で遭遇したエラーです。
タイトルにもあるとおり、「Unable to copy symbols from this device」というエラーメッセージでした。

 

で、今回参考にさせていただいた記事がこちら。

Xcodeがunable to copy symbols from this deviceとか抜かしおる:とりっぴーPの日常
http://ysh-urasoe.seesaa.net/article/427401633.html?seesaa_related=category

全く同じエラーだったので、内容を確認したところ…どうやら Mac の空き容量が問題でした!
よくよくエラーメッセージを読んでみたら、後ろの方に「No space left on device(デバイスにスペースが残っていません)」と書いてありました…。
なので、このエラーについては、Mac からいらないファイルを消して、これを実行できるだけの空き容量を確保すれば OK です。
そのため、もういらないプロジェクトとか、ダウンロードしてきたファイルとか、使っていないアプリとか…ここぞとばかりに消しました。

で、再度アプリを実行したところ、実機で問題なく起動しました!
現在使っている Mac は結構長いこと使っているため、容量不足がなかなか深刻です。
いつか時間をとって、しっかりとファイルの整理を行いたいですね。

 

以上、Xcode で「Unable to copy symbols from this device」というエラーが発生した時の対処法でした。
皆様も Mac の空き容量にはご注意ください。

  • この記事いいね! (0)
村上 著者:村上

【Xcode】実機デバッグ時の「Could not locate device support files.」の対処法

iPhone を不用意にアップデートしたところ遭遇したエラーです。
タイトルにある通り、エラーメッセージは「Could not locate device support files.」で Xcode でサポートしていないバージョンの iOS でアプリを実行しようとすると発生するエラーでした。
以前にも遭遇したことはあったのですが、対処法を忘れてしまっていたので今後のためにまとめ。

 

対処法としては2つあり、1つは Xcode を最新のものにアップデートする方法です。
しかし、今使用している Mac は空き容量に余裕が無いため、この方法は最終手段…。
なので、2番目の方法の「デバイスサポートファイル」をインストールする方法を試してみました。

その方法については、こちらの記事が参考になります。

【Swift】エラー「Could not locate device support files(iOS 12.2)」の対処方法|ぴっぴproject
https://pippi-pro.com/swift-error-could-not-locate-device-support-files-12-2

iOSをアップデートしたために実機でビルドができない – Qiita
https://qiita.com/yamataku29/items/6fdc9e512b42d7f66386

GitHub に iPhoneOSDeviceSupport というものがあるので、こちらからデバイスサポートファイルをダウンロードします。

不足しているファイルをダウンロード出来たら、Finder で下記の場所にアクセスします。

/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/DeviceSupport/

command + shift + g でディレクトリのパスの指定ができるので、上記をコピー&ペーストしてください。

コピーが完了したら、一度 Xcode を完全に終了し、再度開きます。
あとは、通常通りビルド、実行すればOKです。

…が!私の環境では失敗しました…。
書いてある通りにやったのですが…引き続き調査中です。
Simulator も使えるので、何とかなりますが、早めに解決したいと思います。

 

以上、Xcode で「Could not locate device support files.」エラーが発生した時の対処法でした。
皆様、不用意な iOS のアップデートにはご注意ください。

  • この記事いいね! (0)