カテゴリーアーカイブ iOS

村上 著者:村上

【Cordova】アプリのパーミッションを確認するプラグイン「cordova-diagnostic-plugin」

アプリのパーミッションを確認する必要があったため、プラグインをインストールしました。
Android なら、cordova-plugin-android-permissions というプラグインがあったのですが、名前のとおり、Android のみしか対応していなかったため、iOS でのチェックを行うためにこちらもインストールしました。
しかし、こちらは Android にも対応しているため、cordova-plugin-android-permissions の方をアンインストールして、これのみでチェックしようかと思っています。

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

GitHub – dpa99c/cordova-diagnostic-plugin: Cordova/Phonegap plugin to manage device settings
https://github.com/dpa99c/cordova-diagnostic-plugin

 

使い方ですが、例えばカメラのパーミッションを確認する場合は下記のように記述します。

cordova.plugins.diagnostic.getCameraAuthorizationStatus(
    function(status) {
        // チェック成功
        if(status === cordova.plugins.diagnostic.permissionStatus.GRANTED) {
            // カメラが使用が許可されている
            ......
        } else {
            // カメラが使用が許可されていない
            ......
        }
    }, function(error) {
        // チェック失敗
        console.error("The following error occurred: "+error);
    }, false
);

カメラの使用が許可されている場合は、上記のようにステータスで GRANTED の値が返却されます。
なので、返却値によって適宜処理を変更してください。

なお、上記のコードでは、パーミッションを確認するだけなので、もしなかった場合でも許可/拒否のダイアログの表示はしません。
パーミッションをリクエストしたい場合には、requestCameraAuthorization() を使用してください。
使用例は下記の通りです。

cordova.plugins.diagnostic.requestCameraAuthorization(
    function(status) {
        if (status === cordova.plugins.diagnostic.permissionStatus.GRANTED) {
            // カメラ使用が許可された場合
            ......
        } else {
            // カメラ使用が許可された場合
            ......
        }
    }, function(error) {
        console.error("The following error occurred: "+error);
    }, false
);

使い方としてはこんな感じです。
他にも、位置情報や Bluetooth、プッシュ通知、マイクなど、色々チェックできます。

ただし、位置情報など一部のパーミッションによっては、戻り値のステータスの値が Android と iOS で違っていたりするので、そこだけはご注意ください。

 

以上、アプリのパーミッションをチェックするためのプラグイン「cordova-diagnostic-plugin」のご紹介でした。
戻り値に注意して、便利にお使いください。

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

[WWDC 2019]iOS13発表! ダークモードなどが追加!! 一方iPhone 6以前は非対応に…

前回に引き続き、Appleが開催したWWDC 2019の内容を取り上げたいと思います。

今回のWWDCで、iPhoneなどに搭載されるiOSの新バージョン、iOS 13 が発表されました!

Apple、iOS 13をプレビュー – Apple

主な新機能としては下記の通り。

・ARCore 3 搭載
・ダークモード搭載
・Sign In with Apple
etc…

ダークモードはmacOSやWindows、あとはSNSのTwitterなどを使っている方にとってはかなり馴染みのある機能なのではないかなと思います。
つまるところ、iOSの白基調のデザインのUIを、黒基調のものに切り替えられる機能です。

黒基調にすることで、白基調にあるギラギラした感じが抑えられ、目が痛くならないという点や、有機ELディスプレイの特徴として、黒色の方が表示の際の電池消費が抑えられるといったメリットがあります。

もともと、iOS11からアクセシビティ設定の中に”色を反転”という、単純に色を反転させるだけの機能はできたようですが、今回のiOS13で正式に”ダークモード”として実装されることになったようです。

特にスマートフォンの画面は一日の中でも特に長い時間見るものだと思いますので、iOSにダークモードが来るのはとてもうれしいですね。
#はやくAndroidにもダークモードが搭載されてほしいですw

また、新機能として”Sign in with Apple”が新たに追加されました。

所謂、Appleが提供するSSO(シングルサインオン)サービスで、Appleアカウントを使って、外部の対応サービスにログインすることができるようになります。

Twitterログインなどの仕組みと比較した特徴として、 Sign in with Apple では可能な限りログインしたユーザーにつながる情報を連携先のサービスに提供しないような設計になっている点があります。

Sign in with Apple を使ってサービスにログインした場合、サービス側はランダムな一意の識別情報のみしか受け取ることができず、また、メールアドレスなどを必須とするサービスに対しては、Apple側でランダムな代替えアドレスを生成してサービスに渡すことで、ユーザーの本来のメールアドレスを通知しなくても済むようなシステムとなっています。

また、FaceIDやTouchIDを使用したログインも可能となっていて、Apple外のサービスでも、Appleの認証機構を利用できるようになった点はおもしろいポイントかもしれません。

こんな感じで、今回は少しおとなしめなアップデートとなったiOS13ですが、iPhone 6/6 Plusの世代以前のデバイスを使っている方にとっては悲しいお知らせが。

こちらは英語版のプレスリリースに掲載されている対応機種一覧ですが、iPhone 6/6 PlusやiPhone 5sなどといった機種がサポートから外されており、残念ながらiOS13へアップデートすることができないようです。

これらの非対応機種を利用している方が新しいiOS13を利用するためには、iOSデバイスの買い替えが必要となるので注意が必要です。

一方、iPhone 6s/6s PlusやiPhone SEについてはiOS13も利用できるようなので、少なくとももう1シーズンは現役で使うことができそうです。

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

[WWDC 2019]iPadのOSが専用の”iPadOS”に変更!よりiPadに合ったシステムになる。

昨夜、Appleの開発者向け発表会”WWDC 2019″が開催されました!!!

実質Appleの新製品などを発表する機会となっているので、毎年、WWDCではビッグな発表が行われますが、今回のWWDCでも、なかなか大きな発表がいくつか行われました。

その中でも一番気になったのがこちら。

なんと、iPadのOSがiOSから独立し、専用の”iPadOS”に変更されるそうです!!!

具体的に何が変わるのかというと、主に画面の大きいiPad用にUIが最適化された形になるようです。

流石にmacOSのようなウインドウの概念はありませんが、全画面と縦画面?をうまく使い分けたような、よりマルチタスクに最適化されたUIになるようです。

他にも、USBメモリ、SDカードなどの外部ストレージにも対応し、ファイルアプリから参照可能になるなど、mac(PC)と同じことができる度合いが増えています。

これはiPadユーザーにとってはなかなかうれしい変更ではないでしょうか。

一方で気になるのはiOS向けアプリやWebページの開発について。

画面サイズの違いがあったとはいえ、今までは”iOS”というひとくくりのものになっていましたが、今後は”別OS”ということになってくるので、どれだけiOSと違いが出てくるのか気になるところです。

Apple、iPad用のOS「iPadOS」を今秋リリース – ねとらぼ

こちらの記事によれば、基本的にはiOSベースであることに変わりはないとのことなので、画面の大きさとiPadOSのみに搭載されている機能あたりにさえ気を付けて置けば、さほど大きな違いは出ないのかもしれません。

ただ、

iPadOSのSafariでブラウジングすると、Webサイトが自動的にデスクトップ版として表示されます。かつiPadの画面サイズに合わせてスケーリングされ、最適化されるため、Mac用Safariとは異なり、「タッチ」にも適切に対応しています。

Apple、iPadに特化したiPadOSを発表 – iPhone Mania

とあるので、iPadOSのsafariはレンダリング時に独特な解釈を行う可能性が出てきそうな気がします。

Webページの動作をデバッグする際は、iOS端末に加えて、iPadOSでも表示を確認するようにした方が無難かもしれませんね。

iPadOSは今秋リリース予定となっています。

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

新世代のiPod Touchが突如発表!中身は実質iPhoneなので開発者も要チェック!!

 先日、突然Appleが新しいiPod Touchをリリースしました!

iPod Touch – Apple

“iPod”と銘打たれてますが、iPhoneと同じiOSが使われており、実質”Wi-Fi版iPhone”となっています。
なので、iPod TouchをそのままiPhoneアプリやWebのテスト用端末として使用することも可能です。

また、iPhone 5やiPhoneSEとほぼ同じサイズということで、現行iOS端末内での最小サイズの画面で表示確認ができるというのもアドバンテージかもしれません。

ただし、カメラの性能はiPhoneと比べると低めとなっており、セルラーモデルのiPadとWi-FiのみのiPadとの違いと同様に、GPSが搭載されていないなどの違いがありますので、注意は必要です。
また、今回のiPod TouchにもTouchID/FaceIDは搭載されていないので、生体認証を用いた機能を使用することはできません。

iOSアプリの開発のハード面のハードルとして、必須ではないとはいえ高額な実機を購入しないと実機でデバッグできないというのはなかなか痛いところだったので、そこを従来よりも安く抑えられる選択肢が出てきたことはとてもありがたいですね。

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

【Xcode】「No space left on device Command /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/dsymutil failed with exit code 1」エラーの対処法

今回は、Xcode でアプリを実行した際に遭遇したエラーについて。
ビルドは問題なく通ったので、いざ実機で実行しようとしたところ、タイトルにあるようなエラーが発生しました。

エラー全文はこちら。

IO failure on output stream: No space left on device Command /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/dsymutil failed with exit code 1

 

で、エラーメッセージを検索したところ、ヒットした記事がこちら。


Xcode「fatal error: error in backend: IO failure on output stream」への対処|MaryCore

https://marycore.jp/prog/xcode/clang-file-errors/

こちらの記事によると、ハードディスクの容量が足りなくなっているため、ディスクエラーなどが起こっているとのことでした。
そのため、不要なファイルなどを削除して、ゴミ箱を空にし、念のため使用していないアプリなどを終了して実行したところ、問題なくビルドできました。

 

以上、アプリを実行できなかった時の対処法でした。
解決方法はとても簡単なのですが、エラーメッセージがちょっとわかりにくかったので、今後の自分のためにまとめました。
もし、誰かの参考になれば幸いです。

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

【Cordova】「Current working directory is not a Cordova based project」エラーの対処法

新しいパソコンで現在開発中のプロジェクトを実行しようとしたときに遭遇したエラーです。
初期化されたPCだったので、色々設定などがされておらず、1から設定をし直していました。
で、Cordova アプリだったので、プラットフォームを追加しようと、下記のコマンドを実行した時にこちらのエラーに遭遇しました。

cordova platform add [プラットフォーム名]

エラーは「Current working directory is not a Cordova based project」というもので、要は現在のディレクトリは Cordova プロジェクトではないと言っています。

 

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

“Current working directory is not a Cordova based project”のエラーが表示されたらとりあえずルートにwwwフォルダを作成する。 – overmorrowのコメント / はてなブックマーク
http://b.hatena.ne.jp/entry/306218340/comment/overmorrow

GitHub で全く同じエラーについての投稿があったようで、それに対するコメントでした。
これによると、「Current working directory is not a Cordova based project」エラーに遭遇した場合、プロジェクトのルートディレクトリに「www」というディレクトリを作成すると解決できるとのこと。
そう言えば、このディレクトリが無かったですね…。

ということで、指示に従って www ディレクトリを作成後、再度 cordova platform add [プラットフォーム名] を実行したところ、問題なく実行できました!
…まあ、他のエラーが発生しましたが、これはこのエラーとは無関係なので割愛します。

 

以上、Cordova コマンドが実行できなかった時の対処法でした。
一発解決できる投稿にたどり着けて良かったです。
ご参考になれば幸いです。

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

macOS 10.14.5 でついに令和に対応

本日、公開された最新バージョンのmacOSのアップデートで、macOSの令和への対応が完了したというニュースが流れてきました。

Windows同様、macOSも令和元年を迎えるまでに令和に対応することができていない状況でした。

ちなみに、対応していないmacOSでUTF-8コードの平成の次の年号を表示させようとすると”平成の次”という表示が出ていたとかいないとか。

ちなみのちなみに、Windowsは5/2にWindows10 ビルド1809に対して公開したアップデートで令和に対応しているようですでに利用できるようです。

Microsoft、新元号“令和”対応パッチを「Windows 10 バージョン 1809」にも提供 – 窓の杜

一方Linu系OSがどのようになっているか気になるところですが、主要なディストリビューションの一つであるUbuntuでは、OSのバージョンアップは定期的な間隔でリリースされるようになっていて、時期的に対応されるのでは次のリリースである”19.10″以降になるのではないかという見解になっているようです。

第567回 令和を言祝ぐ – Ubuntu Weekly Recipe

ということでITの世界に令和が浸透するまでにもうしばらく時間がかかりそうです。

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

【Cordova】cordova-plugin-media使用時の音楽ファイルパスの指定について

dちょっとハマりかけたので、備忘録としてまとめ。
昨日ご紹介した、Cordova アプリで音楽ファイルを扱うためのプラグイン「cordova-plugin-media」の音楽ファイルのパスの指定方法についてです。

なお、昨日の記事はこちらから。

【Cordova】音声ファイルを扱うためのプラグイン「cordova-plugin-media」

 

で、ハマりかけたのは、Android での音楽ファイルのパスの指定方法についてです。
単純に、画像ファイルなんかと同じように、www ディレクトリ以下のパスを指定すればOKかと思ったら、それでは動かず、Code: 1 のエラーが発生しました。
なお、エラーコード 1 は、MediaError.MEDIA_ERR_ABORTED というエラーとのことです。
Aborted は「中止」という意味なので、エラーで途中で中断したという感じかな?

で、色々検索したところ、下記の記事がヒットしました。

【Monaca】Mediaプラグインを使う時に気をつけたいこと【Cordova】|webico
https://blog.webico.work/monaca-cordova02

その中で、下記のようにファイルパスを取得している関数があり、それを音楽ファイルの頭につけていたので、それを参考に修正しました。

// パス取得の関数
function getPath() {
    let str = location.href;
    let i = str.lastIndexOf('/');
    return str.substring(0, i+1);
}

私の場合、Android の時は音楽ファイルの頭に file:///android_asset/www/ を付けるようにしたら問題なく動作するようになりました!
なお、iOS の場合、単に www ディレクトリからのパスだけでOKだったので、cordova-plugin-device を利用して、プラットフォームごとに処理を切り替えるようにしましょう。

最終的なコードは下記のようになりました。

playMedia() {
  let src = '[www からの音楽ファイルのパス]';
  if (window.device.platform == 'Android') {
    src = 'file:///android_asset/www/' + src;
  }
  let media = new window.Media(src);
  media.play();
}

なお、前の記事でも書きましたが、Android の場合はリリースの処理をきちんと行いましょう。
私は…今から追加します。

 

以上、cordova-plugin-media の音楽ファイルのパスの指定方法でした。
お困りの方がいましたら、参考にしていただければと思います。

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

【Cordova】アプリのアクセス解析を行えるプラグイン「google-analytics-plugin」

今回は、Google Analytics を Cordova アプリで使うためのプラグイン「google-analytics-plugin」についての紹介です。
そう言えば入れてなかった…と気づき、実装。

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

https://github.com/danwilson/google-analytics-plugin
https://github.com/danwilson/google-analytics-plugin

 

実装方法については、こちらのサイトが分かりやすいかと。

Google Analyticsプラグインを使ってアプリの行動分析を行おう|モナカプレス
https://press.monaca.io/atsushi/447

まず下記のコマンドでプラグインをインストールします。

cordova plugin add https://github.com/danwilson/google-analytics-plugin.git
// または
cordova plugin add cordova-plugin-google-analytics

インストールが終わったら、下記のコードを deviceready イベントのタイミングで実行します。

window.ga.startTrackerWithId('[トラッキングID]');

画面を追跡するには下記のコードを利用します。

window.ga.trackView('[画面名]')

また、ボタンを押したり、検索を実行したタイミングなどでイベントを記録したい場合には、下記のコードを追加します。

window.ga.trackEvent('Category', 'Action', 'Label', Value);

Label と Value はオプションで、Value には数値が入ります。

意外と簡単!と思ったのですが、実は最初のトラッキング ID の指定から躓いております。
Google Analytics のページで、新しいプロジェクトを追加したのですが、モバイルアプリを選択すると、「トラッキングIDの発行」ではなく「アプリの追加」になっていて、ここでは ID が取得できないのかも?
ならどこに?と探しているのですが、未だ見つけられておりません。

で、色々見て調べていたのですが、そもそも、プロジェクト作成時に Firebase のプロジェクトと連携させたんですよね。
…これは、Google Analytics ではなく、Firebase のアナリティクスを使った方が早いのでは…!
ということで、その方向で進めてみたいと思います。

 

以上、Google Analytics を Cordova アプリに導入するためのプラグイン「google-analytics-plugin」のご紹介でした。

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

【Cordova】ソフトウェアキーボードを制御するためのプラグイン「cordova-plugin-keyboard」

現在開発中のCordovaアプリで、iOS のソフトウェアキーボードを制御したくて導入したプラグイン「cordova-plugin-keyboard」についてのご紹介です。
開発中のアプリには、LINE のトーク画面のように入力欄が画面下にぴったり張り付いているようなレイアウトになっているのですが、文字を入力するとき、キーボードのサイズが若干変わったタイミングで、入力欄がキーボードの裏に隠れてしまう不具合が発生しました。
それの対処法として、今回紹介するプラグインを使いました。
なお、この現象が発生するのは iOS のみで、どうやら OS のバグが原因のようでした。
Android だと、全く問題なかったので、気づくのに遅れてしまいました…。

 

さて、では対処法ですが、まず導入したプラグインの GitHub はこちらから。

GitHub – cjpearson/cordova-plugin-keyboard: Keyboard Plugin for Cordova
https://github.com/cjpearson/cordova-plugin-keyboard

他にも、cordova-plugin-ionic-keyboard というよく似たプラグインもありましたが、私の実現したいことにはそぐわなかったので、こちらは使用しませんでした。

インストールは、下記のコマンドを実行してください。

cordova plugin add cordova-plugin-keyboard --save

インストールが終わったら、任意のメソッドを導入します。
私は下記の2つのメソッドを使いました。

  1. cordova.plugins.Keyboard.shrinkView
  2. cordova.plugins.Keyboard.disableScrollingInShrinkView

1つ目のメソッドは、キーボードが表示されたときに、WebView のサイズを縮小するかどうかを指定できます。
指定する方法は下記の通りです。

cordova.plugins.Keyboard.shrinkView(true);

true を指定すると、キーボード出現時に WebView のサイズが縮み、スクロール可能になります。
false だと、キーボードが表示されても WebView のサイズは変わりません。
というか、iOS の場合、こうして指定しないと、キーボードが表示されても WebView のサイズは変わらないんですね…。
それなら、レイアウトが崩れたのも納得です。

次に、キーボードが表示されている間、スクロールを許可するかどうかを指定できるメソッドです。

cordova.plugins.Keyboard.disableScrollingInShrinkView(true);

スクロールを無効にするためには、true を指定します。
本当は、スクロールを有効にしたかったのですが、たまにレイアウトが崩れて謎の余白が発生したりするので、しぶしぶスクロールを禁止にしました。
レイアウト崩れがなんとかなりそうだったら、スクロール許可しようと思います。

なお、このメソッドは iOS しかサポートされていませんので、ご注意ください。
…でも、そもそも Android だと、これを使う必要もないので、これがあってもなくても特になんの影響もないんですけどね。

また、私の環境では、上記で紹介した書き方ではエラーが発生したので、下記のように書き直しました。

// 上記の記述でエラーが発生した場合、下記の記述に変更
window.Keyboard.shrinkView(true);
window.Keyboard.disableScrollingInShrinkView(true);

この対応が正しいのかはわからないのですが、問題なく期待する動作をしたので、これでOKだと思います。

私が使ったメソッドはこの2つですが、他にも、キーボードが表示されているか検知できるプロパティや、キーボードが表示/非表示になったときに実行されるイベントもあります。
イベントには、キーボードが表示/非表示になる前に発火するものもあるので、状況に応じて使い分けてください。

 

以上、ソフトウェアキーボードを制御するためのプラグイン「cordova-plugin-keyboard」のご紹介でした。
Cordovaアプリ開発中に、iOS のソフトウェアキーボードに悩まされた方は、是非ご参考にしていただければと思います。

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