著者アーカイブ 村上

村上 著者:村上

【iOS】iPhoneのホーム画面でアプリアイコンが一瞬チラつく時の対処法

アプリ検証用の社用端末(iPhone)でたまーに発生していたアイコンのちらつきとその対処法についてです。
今までも発生しておりましたが、支障はないので放置していました。
でも、メモリ不足とかだったら早めに対処したほうがいいか…と思い、調べてみました。
なお、端末は iPhone 6 Plus で、ソフトウェアバージョンは 12.3.1 です。

今回参考にさせていただいたサイトはこちらから。

iPhoneのアプリが勝手に点滅する!?壊れた!?よくあるご相談 | iPhone修理大阪 豊中市 吹田市 | スマートクール エトレとよなか店・イオン吹田店
https://smartcool-toyonaka.com/blog/7393/

 

で、上記の参考サイトによると、アイコンが勝手に点滅する原因は、iPhone の仕様とのこと。
アップデートがあるアプリを自動更新しようとしているため、一瞬アイコンが点滅するようです。
特にメモリ不足とか端末の不具合とかではないので、特に気にしなくてOKとのことでした。

ただ、どうしても気になる!という場合は、アプリの自動更新を OFF にしてください。
iPhone の設定の 一般 > Appのバックグラウンド更新 から設定ができます。
念のためスクリーンショットも載せておきます。

こちらの自動更新は、アプリごとに設定することもできます。
また、更新タイミングも「オフ」「Wi-Fi」「Wi-Fiとモバイルデータ通信」から選ぶことができますので、お好みで変更してください。

 

以上、iPhone のホーム画面のアプリアイコンが一瞬チラつく時の原因とその対処法でした。
端末自体に特に問題があるわけではなくて一安心でした。

村上 著者:村上

【Cordova】アプリのログをファイルに保存する方法

実際には使わなかったのですが、もしかしたらいつか使うこともあるかもということで、簡単にではありますがまとめ。
Cordova アプリのログをスマホのファイルに保存する方法です。

参考にさせていただいたサイトはこちらから。

ログをファイルに記録する – アシアルブログ
https://blog.asial.co.jp/960

 

サンプルコードは参考サイトに掲載されているので割愛しますが、JavaScript の FileReader を使っているようです。
なお、取得できたログデータはアプリ終了時に書き出すようにしています。
…が、実際に触っていないので、書き出したファイルが作成できているかなどは確認できていません。
そちらに関しては、今後使ったらまたまとめたいと思います。

 

以上、Cordova アプリのログをスマホのファイルに保存する方法です。
少し古い記事ですが、ご参考になれば幸いです。

村上 著者:村上

【PHP】「PCDATA invalid Char value XX」エラーの対処法

PHP で生成した XML で「PCDATA invalid Char value 15」というエラーが発生したのでその対処法について。
特に大きな変更を加えてはいなかったので、急に発生してちょっと心臓に悪かった…。

 

で、エラーメッセージで検索し、今回は下記の記事を参考にさせていただきました。

PHPエラー対処方法「RSSをXML取得時に不正文字が存在する場合」
https://deaimobi.com/mbnk-264/

いくつかコードがありましたが、今回は不正文字列を正規表現で削除する方法を選択しました。
こちらのコードは、CData section not finished エラーや、今回の PCDATA invalid Char value XX in エラーの場合に解決できるかも、とのことでした。
コードは下記のとおりです。

$str = preg_replace('/[\x00-\x1f]/','',$str);

実際にコードに実装したところ、パースエラーが発生しなくなりました!
ただ、上記の方法だと改行も削除されてしまうようですので、場合によっては別の方法を使うほうが良さそうです。

 

以上、PHP で発生したパースエラー「PCDATA invalid Char value XX」の対処法でした。
不正文字列だけ削除し、改行は残す方法があればまたまとめたいと思います。
ご参考になれば幸いです。

村上 著者:村上

【AndroidStudio】「File ‘root/res/drawable-hdpi/sym_keyboard_feedback_delete.png’ uses reserved file or directory name ‘res’.」エラーの対処法

今回遭遇した Android Studio のエラーについてです。
リリースを行う際に、「Android App Bundle」を作成しようとしたら、「File ‘root/res/drawable-hdpi/sym_keyboard_feedback_delete.png’ uses reserved file or directory name ‘res’.
」というエラーが発生しました。
なお、こちらのエラーは APK を作成した時には発生しませんでした。
なので、Android App Bundle ではなく APK を使ってアプリをリリースするという方法もありますが、Android App Bundle だとアプリのサイズが小さくなって最適化されるので、なるべく Android App Bundle を作成したいところ。

 

エラーメッセージだけでは解決方法が分からなかったので検索したところ、下記の記述を削除するという方法が多数ヒットしました。

exclude group: 'com.google.android'

が、自分の環境を確認してみても、該当する記述がなく…。

色々検索ワードを変えてみたところ、下記の記事がヒットしました。

android – uses reserved file or directory name ‘res’ – Stack Overflow
https://stackoverflow.com/questions/57400384/uses-reserved-file-or-directory-name-res

こちらの投稿では、Fasebook SDK をアップデートする方法と、build.gradle に下記の記述を追加する方法がありました。

// Facebook SDK を更新
implementation 'com.facebook.android:facebook-android-sdk:5.0.0'
// 下記の記述を build.gradle に追加
android {
    configurations {
        compile.exclude group: 'com.google.android'
    }
}

私の環境では、既に Facebook SDK は最新になっていましたので、2番目の記述を追加しました。
build.gradle に上記の記述を追加し、Sync Now を実行してからビルドを実行。
その後、再度 Android App Bundle を作成したところ、問題なく作成することができました!

 

以上、Android Studio で発生したエラー「File ‘root/res/drawable-hdpi/sym_keyboard_feedback_delete.png’ uses reserved file or directory name ‘res’.」の対処法でした。
参考になれば幸いです。

村上 著者:村上

【Xcode】「Error: Multiple commands produce」エラーの対処法

今回は Xcode で遭遇したエラーについて。
諸事情あって、Cordova で開発した iOS アプリを一度削除して、再度 iOS プラットフォームを追加し直したのですが、その際に「Error: Multiple commands produce」というエラーが発生しました。
GoogleService-Info.plist のファイルパスがエラーメッセージに含まれていたので確認したところ、またこのファイル内容がおかしくなっていたため正しいファイル内容と置き換えたのですが、やはり解決できず。

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

Xcode10 Error: Multiple commands produceを解決する – Qiita
https://qiita.com/SatoTakeshiX/items/047a313f564879e290ec

 

こちらの記事によると、古いビルドシステムに戻すことで解決できるとのことでした。
他のエラーでもお世話になった方法ですね。

Xcode のヘッダメニュー「File」から、「WorkSpace Settings…」をクリックします。
そうすると、下記のウィンドウが表示されるので、「Build System」を「Legacy Build System」に変更します。

あとは、通常通り Build > Run を実行します。
私の環境では、こちらの方法でエラーが解消できました!

なお、この方法はちょっと…という場合は、上で紹介した Qiita の記事に、新しいビルドシステムのままでエラーを解決する方法も掲載されているので、そちらを参考にしていただければと思います。

 

以上、Xcode で「Error: Multiple commands produce」エラーが発生した場合の対処法でした。
こちらの古いビルドシステムを使う方法は、他のエラーの解決方法としても紹介されていることがあるので、覚えておいて損はないはず。
また、少し古いプロジェクトを実行する場合は、先に変更しておいてもいいかもしれませんね。
ご参考になれば幸いです。

村上 著者:村上

【Google】ハングアウトで音声が聞こえない時に確認する事

今日遭遇した機材トラブルについてです。
Web 会議でハングアウトを利用したのですが、接続先の方の音声が聞こえず、30分くらい奮闘しました。
ので、次回こうなったときの確認事項をまとめ。

公式のサポートページもありますので、基本的にはこちらを参考にすればOKです。

音声通話やビデオハングアウトの問題を解決する – ハングアウト ヘルプ
https://support.google.com/hangouts/answer/1355579?hl=ja

 

まず確認する事項は、マイク、スピーカーなどの機材と接続している場合はそれが ON になっているかです。
もし、PC 内臓のマイク、スピーカーを使用している場合は、それらが OFFミュートになっていないかを確認します。
また、ハングアウト以外のプログラムでマイク、カメラ、スピーカーが使用中になってる場合、可能であれば一旦終了します。

上記を確認して問題がなかった場合は、ハングアウトの設定を確認します。
画面上に歯車アイコンがあると思うので、そちらから各種設定が正しいかを確認します。
今回はスピーカーに問題ありだったので、スピーカーの出力先を確認し、「テストサウンドを再生」します。これでスピーカーが正しく設定されているかが確認できます。

それでもだめな場合は、ハングアウトの再接続とパソコンの再起動を試してください。
また、接続先の方にも上記の確認をしてもらうと良さそうです。
ここまで確認してもトラブルが解決しないなら、相手側の問題も疑った方が良いですね。

なお、今回の場合は、どうやら接続先の方のマイクトラブルが原因だったようでした。
音声のみスマートフォンで接続していただいたら解決できました!

 

以上、ハングアウトで音声が聞こえない場合に確認する事の一覧でした。
参考になれば幸いです。

村上 著者:村上

【Cordova】「cordova-plugin-firebase-crashlytics」でFirebaseのCrashlyticsを導入

タイトル通り、Cordova で開発しているアプリに Google Firebase の Crashlytics を導入する方法です。
最初、Fabric がいいかな?と思ったのですが、こちらのサービスは Firebase と統合されるとのことでしたので、Firebase を使うことにしました。

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

GitHub – ReallySmallSoftware/cordova-plugin-firebase-crashlytics: Google Firebase Crashlytics Cordova plugin
https://github.com/ReallySmallSoftware/cordova-plugin-firebase-crashlytics

 

インストールのコマンドは下記のとおり。

cordova plugin add cordova-plugin-firebase-crashlytics

GitHub に載っていたコマンドは cordova plugin add cordova-plugin-firebase-crashlytics --variable ANDROID_FIREBASE_CORE_VERSION=16.0.0 だったのですが、バージョンを指定しないとデフォルト値が指定されるとのことだったので省略しました。
特にインストール時にエラー等は発生しなかったので問題ないかと。

あとは、導入手順にそって下記のコードを追加すれば OK です。
下記のサンプルコードでは、キャッチされた例外をログに記録することができます。

var crashlytics = FirebaseCrashlytics.initialise();
crashlytics.logException("my caught exception");

なお、Firebase の導入には google-services.jsonGoogleService-Info.plist を設置する必要があります。
こちらについては、下記の Firebase 公式ドキュメントにリンクがありますので、そちらをご参考ください。

Firebase Crashlytics を使ってみる|Firebase
https://firebase.google.com/docs/crashlytics/get-started

また、iOS については Podfile に use_frameworks! を手動で追加する必要があるとのことでしたので、対応ください。
が、それだけでは連携できなかったので、上記の Firebase のドキュメントについても参考にしました。
でもなんか正しくない気がするので、要調整でしょうか。
一度設定をリセットしてからもう一度やり直そうかと思っています。

Android については、エラーは発生しないものの、アプリを実行しても Firebase と連携できず…。
一体何が悪いのか…判明したらまたまとめたいと思います。

 

以上、Cordova アプリに Firebase の Crashlytics を導入する方法でした。
とりあえず、現時点でのまとめなので、進捗あればまたご紹介します。
ご参考になれば幸いです。

村上 著者:村上

【Cordova】画像をリサイズできるプラグイン「cordova-plugin-image-resizer」

カメラプラグインで取得した画像をリサイズするときに使ったプラグイン「cordova-plugin-image-resizer」のご紹介です。
以前は違う方法でリサイズ処理を行っていたのですが、プラグインを探したらこちらの方が簡単!ということで乗り換えました。

今回使用したプラグインの GitHub はこちらから。

GitHub – JoschkaSchulz/cordova-plugin-image-resizer
https://github.com/JoschkaSchulz/cordova-plugin-image-resizer

 

インストールは下記のコマンドを使います。
が、こちらのプラグインはカメラプラグインの導入が必要とのことでしたので、インストールする前に、先にカメラプラグインをインストールしてください。

// カメラプラグイン
cordova plugin add cordova-plugin-camera
// 画像リサイズプラグイン
cordova plugin add https://github.com/protonet/cordova-plugin-image-resizer.git

あとは、下記のコードを追加すればOKです。
なお、サンプルコードはカメラプラグインで画像を取得するところから記述しています。

// カメラプラグインでアルバムから画像取得
var cameraoptions = {
  sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
  quality: 50,
  encodingType: Camera.EncodingType.JPEG,
  destinationType: Camera.DestinationType.FILE_URI
}
navigator.camera.getPicture(function(imageURI) {
  // 画像リサイズ
  let resizeoptions = {
    uri: imageURI,
    folderName: "[任意のフォルダ名]",
    quality: 70,
    width: 1000,
    height: 1000,
    base64: true,
    fit: false
  };
  window.ImageResizer.resize(resizeoptions,
    function(image) {
       // 画像リサイズ成功時の処理
    }, function() {
      // 画像リサイズ失敗時の処理 
    });
}, function(error) {
  // 画像取得失敗時の処理
}, cameraoptions);

10行目からのリサイズオプションで、画像 URI やリサイズ後の高さや幅、画質などを決定しています。
リサイズ後の画像パスは 20行目のファンクションの引数 image で取得できます。

また、環境の都合上、上記のコードでは リサイズ後の画像は base64 形式になっています。
こちらは 16行目で指定しています。

17行目の fit は、リサイズ後の画像を指定した幅・高さに合わせるかどうかを指定します。
こちらは Android のみに反映される設定です。

 

以上、画像のリサイズを行えるプラグイン「cordova-plugin-image-resizer」のご紹介でした。
ご参考になれば幸いです。

村上 著者:村上

【Cordova】iframeで指定した外部サイトが表示されないときの対処法【iOS】

Cordova で iframe を使った際に遭遇した不具合についてまとめ。
外部サイトを iframe で表示しようとしたのですが、iOS でだけ表示ができなかったので、その対処法についてです。
なお、Android では問題なく表示できていました。

参考にしたサイトはこちらから。

ionic3 – iframe内に外部サイトが表示できない – memorandum-plus
https://memorandum-plus.com/2018/12/21/ionic3 – iframe内に外部サイトが表示できない(ios不具合)/

なお、外部サイトを開く方法としては、「cordova-plugin-inappbrowser」プラグインを使うという手もあったのですが、レイアウト的な問題で、iframe を使いました。

 

さて、こちらの対処法ですが、config.xml ファイルに下記の一文を追加するだけでした。

<allow-navigation href="*" />

こちらを使うと、WebView 上で使用できる URL を制御することができます。
* を指定すると、全ての URL を許可します。

上記を追加したら、あとは再ビルドして実行してください。
私の環境では、問題なく表示されました。

 

以上、Cordova の iOS アプリで、iframe で指定した外部サイトが表示されないときの対処法でした。
参考になれば幸いです。

村上 著者:村上

【Cordova】「Refused to load gap://ready because it does not appear in the frame-src directive of the Content Security Policy」エラーの対処法

Cordova で開発中のアプリを iOS で実行したところ、「Refused to load gap://ready because it does not appear in the frame-src directive of the Content Security Policy.」というエラーが発生しました。
Google翻訳にかけてみたところ、「コンテンツセキュリティポリシーの frame-src ディレクティブに表示されないため、gap:// ready の読み込みを拒否しました。」とのことでした。
HTML の Meta タグで指定している Content Security Policy に関する記述のところかとあたりをつけつつ、念のため検索。

こちらの記事がヒットしました。

iOSでRefused to load gap://ready because it appears in neither the child-src directive nor the default-src directive of the Content Security Policy. エラー
https://ufirst.jp/memo/2016/09/16/ios%E3%81%A7refused-to-load-gapready-because-it-appears-in-neither-the-child-src-directive-nor-the-default-src-directive-of-the-content-security-policy-エラー/

 

上記の記事によると、やはり Content Security Policy に関する記述に抜けがあったようで、frame-src の項目に gap://ready file: を追加し、再度実行したところ、今度は問題なくページが表示されました!
なお、記事内には default-src に追加とありましたが、私の環境では、frame-src の項目があったため、こちらに追加しました。
というか、frame-src がある状態で、default-srcgap://ready file: を追加してもこの設定は frame-src には反映されないので、今回のエラーは解決できません。

なので、gap://ready file: の記述は frame-src がある場合は frame-src に、frame-src がない場合は default-src に記述するようにしてください。

 

以上、Cordova アプリを iOS で起動した際に「Refused to load gap://ready because it does not appear in the frame-src directive of the Content Security Policy」エラーが発生するときの対処法でした。