著者:村上
【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-src に gap://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」エラーが発生するときの対処法でした。
著者:村上
【Cordova】「cordova-plugin-socket-tcp」プラグインでサーバーとの接続が失敗する
原因は完全に私のミスですが、再発防止の意味も込めてまとめ。
先日投稿した「【Cordova】TCPプロトコルを介してサーバーと通信するためのプラグイン「cordova-plugin-socket-tcp」」という記事で紹介したプラグイン「cordova-plugin-socket-tcp」でサーバーとの接続が一定時間後に何故か切れてしまう時の対処法です。
GitHub のページはこちら。
GitHub – kitolog/sockets-for-cordova: Cordova plugin for socket network communication
https://github.com/kitolog/sockets-for-cordova
発生していた現象は、メソッド .open() を使って、指定したサーバーに接続した際、一定時間が経過すると、onError と onClose ハンドラが呼ばれるという物でした。
なお、その際のエラーは「Read timed out」でした。
また、後輩君のアドバイスで、数秒間隔でデータを送り続ければ途切れないのでは？とのアドバイスも頂きましたが、実装しても意味はなかったです…。
で、こちらの対処法ですが、プラグインを入れ直すことで解決できました…！
プラグインインストール時に、ドキュメントに記載されているコマンドではなく、下記のコマンドを実行してしまったことが原因でした。
cordova plugin add https://github.com/kitolog/sockets-for-cordova.git
正しいコマンドはこちら。
cordova plugin add cz.blocshop.socketsforcordova
以前、他のプラグインで上記のようにドット区切りのプラグインを指定したところ、インストールに失敗したので、GitHub のURLを指定したんですよね。
で、今回も失敗するかもしれないと考えて、最初から URL を指定したところ、バグに遭遇しました…。
謎のアレンジを効かせた私が悪いということでした。
プラグインを正しいコマンドで入れ直したところ、問題なく動作するようになりました。
以上、Cordova のプラグイン「cordova-plugin-socket-tcp」が正常に動作しない時の対処法でした。
参考になれば幸いです。
あと、私のように変な修正はしないようにしてください。
著者:村上
【Cordova】「Peripheral null not found」エラーの対処法
今日遭遇したエラーの対処法についてです。
記事でまとめるほどでもないかな…とも思ったのですが、念のため。
なお、こちらのエラーは Cordova のプラグイン「cordova-plugin-ble-central」の stopNotification() メソッド実行時に発生しました。
こちらのプラグインの GitHub のページは下記からご確認ください。
GitHub – don/cordova-plugin-ble-central: Bluetooth Low Energy (BLE) Central plugin for Apache Cordova (aka PhoneGap)
https://github.com/don/cordova-plugin-ble-central
さて、原因ですが、大体このエラーメッセージの次の行に詳細が書かれているので、こちらを確認します。
私の場合は、メソッドの引数に指定する device_id、service_uuid、characteristic_uuid の値が正しく指定できていなかったために発生していました。
引数に指定する値の取得を修正し、正しい値を代入して実行したところ、問題なく動作しました。
なお、エラーメッセージを検索した際にヒットした記事はこちら。
Android BLE connection crashes after 15-25 seconds · Issue #129 · don/cordova-plugin-ble-central · GitHub
https://github.com/don/cordova-plugin-ble-central/issues/129#issuecomment-210252678
上記のリンク先の投稿にエラーメッセージのログが載っていますが、こちらでも2行目にエラーの詳細が表示されているのが分かるかと思います。
以上、「Peripheral null not found」エラーの対処法でした。
最初、エラーメッセージの意味が分からなかったので、とりあえず検索にかけてしまいましたが、エラーメッセージを冷静に読み直せば別に難しくもなんともなかったですね。
ご参考になれば幸いです。
著者:村上
【Cordova】TCPプロトコルを介してサーバーと通信するためのプラグイン「cordova-plugin-socket-tcp」
Cordova アプリで「tcp://」から始まる URL にアクセスするために追加したプラグイン「cordova-plugin-socket-tcp」のご紹介です。
最初、勘違いをしていて React での実装方法について調べていたのですが、後輩君にアドバイスをもらったところ、Cordova で調べた方がいいとのご意見を貰いました。
で、「cordova tcp client」のキーワードで調べたところ、1発でこちらのプラグインにヒットしました。
GitHub のページはこちらから。
GitHub – kitolog/sockets-for-cordova: Cordova plugin for socket network communication
https://github.com/kitolog/sockets-for-cordova
インストールには下記のコマンドを実行してください。
cordova plugin add https://github.com/kitolog/sockets-for-cordova.git
インストールが完了したら、ドキュメントを参考にサーバーに接続し、データ通信等を行います。
サンプルコードは下記のとおりです。
var socket = new window.Socket();
socket.open(
"[接続先]",
[ポート番号],
function() {
console.log('success');
},
function(errorMessage) {
console.log('error');
console.log(errorMessage);
});
1行目で socket を定義して、2行目以降でサーバーとの接続を行っています。
このコードでは接続しか行っておりませんが、成功すると 5行目からの関数が呼び出され、失敗した場合は 8行目からの関数が呼び出されます。
また、失敗時は引数としてエラーメッセージが渡されるので、デバック時にはこちらの内容を確認してください。
メソッドは、上記で紹介した .open() 以外にも、データを送るための .write() や、データ送信完了を通知し、送信処理を終了する .shutdownWrite()、接続を解除する .close() があります。
以上、サーバーと通信するためのプラグイン「cordova-plugin-socket-tcp」のご紹介でした。
ご参考になれば幸いです。
著者:村上
【未解決】Cordova自体をアップデートできない
以前、「【Windows】npmがアップデートできない時の対処法」という記事を投稿しましたが、今回は、Cordova の更新についてです。
ずっと古いバージョンのままだったので、いい加減に更新しよう！と思ったのですが、タイトルにもある通りトラブルが発生したため、更新できませんでした…。
とりあえず、試してみたのは下記の記事です。
cordova not updating to latest version – Stack Overflow
https://stackoverflow.com/questions/37914824/cordova-not-updating-to-latest-version
こちらの記事だと、一度 cordova をアンインストールしてからキャッシュを削除し、再度インストールするという方法があるそうです。
コマンドは下記のとおりです。
// Cordova をアンインストール npm uninstall -g cordova // キャッシュを削除 npm cache clean // Cordova をインストール npm install -g cordova
が、キャッシュを削除する際にエラーが発生したので、実際には npm install --cache /tmp/empty-cache というコマンドを実行しました。
一見エラーもなく、問題なく実行出来たように見えたのですが… cordova -v コマンドでバージョンを確認してみると、アップデートできておりませんでした。
通常だと、単に npm install -g cordova@latest か npm update -g cordova を実行すれば、アップデートできるようなのですが…。
npm の時のように古いファイルが残っているのかもしれませんね。
とりあえず、色々探してみたいと思います。
以上、Cordova 自体がアップデートできない現象の紹介でした。
解決したら、改めてその方法について紹介します！
著者:村上
npmでインストールしたパッケージのセキュリティチェックと修正をする方法
以前、「【Windows】npmがアップデートできない時の対処法」についての記事を投稿しましたが、若干それに関係する記事です。
というのも、npm を更新したかった理由が、npm 6.1.0 でリリースされた npm audit fix コマンドを使いたかったからなんです。
こちらは、npm でインストールしたパッケージのセキュリティチェックと、それで判明した脆弱性のある箇所を自動修正してくれるコマンドです。
こう言った管理が苦手なのですごく助かりますね！
詳しくはこちらのサイトを参考にしました。
脆弱性の警告を受けたnpmパッケージの依存関係を力技で直す – Qiita
https://qiita.com/hibikikudo/items/0af352acac85fce28ec2
こちらのコマンドは、npm のバージョンを 6.1.0 にアップデートすると使用できます。
使用する際は、パッケージをチェックしたいプロジェクトのルートディレクトリに移動し、npm audit fix を実行するだけです。
問題がなければ、問題のあるパッケージをチェックし、脆弱性を修正してくれます。
が、場合によっては、手動で修正を行わなければいけないこともあります。
その場合は、上記の Qiita の記事を参考にして問題を解決してください。
私の環境では、運良く？ npm audit fix コマンドだけで問題が解決できました。
以上、npm でインストールしたパッケージのセキュリティチェックと脆弱性を自動修正する方法でした。
ご参考になれば幸いです。
著者:村上
【PHP】exec()関数で非同期処理を行う方法
ちょっとハマったので備忘録も兼ねてまとめ。
…まあ、結局別の方法を使っちゃったんですけどね。
使用する関数は、タイトルにもある通り exec() 関数です。
PHP マニュアルのページは下記からご確認ください。
PHP: exec – Manual
https://www.php.net/manual/ja/function.exec.php
サンプルコードは下記のとおりです
exec('[実行するコマンド] > /dev/null &');
> /dev/null & を追加すると戻り値がなくなります。
また、末尾に & を付けると、バックグラウンド処理で実行するという意味になります。
基本的にはこんな感じですが、個人的に覚えておきたいのはパラメータを渡す方法です。
例えば、ただコマンドを実行するだけでなく、$_GET や $_POST のように値を渡したい時があるかと思います。
そんなときのコードの書き方がこちら。
まず、呼び出すときの書き方。
exec("php [実行したいPHPファイル] [値1] [値2] > /dev/null &");
で、こちらが呼び出されるときの書き方です。
$value1 = $argv[1]; // 値1 $value2 = $argv[2]; // 値2
$argv を使うと、渡されたパラメータを呼び出される側で受け取ることができます。
なお、$argv[0] には実行されたコマンド、今回のサンプルでは php [実行したいPHPファイル] が入ります。
以上、PHP の非同期処理の書き方でした。
他にもライブラリを使う方法なんかもありましたが、開発環境の都合上、自由にライブラリの追加が出来なかったので、こちらの方法を試してみました。
ご参考になれば幸いです。
著者:村上
【Windows】npmがアップデートできない時の対処法
npm をアップデートしようとしたところ、更新コマンドは問題なく動くのですが、その直後にバージョンを調べても前のバージョンのままという現象が発生していたので、その対処法についてまとめ。
いくつかサイトを見たところ、下記2つのコマンドのどちらかを実行すれば、npm をアップデートできるとのことでしたが、何度実行してもアップデートできませんでした。
npm install -g npm npm update -g npm
なお、teratail にも全く同じ現象で悩んでいる方がいらっしゃいました。
npm – npm 自身のアップデートができない｜teratail
https://teratail.com/questions/152620
さて、こちらの現象の対処法ですが、上の teratail の回答で紹介されている Qiita の記事に詳しく掲載されていました。
“npm update -g npm”（npm自身のアップデート）が適用できないのは、実行元のnpmが複数存在するため – Qiita
https://qiita.com/itsumoonazicode/items/ae61c5787064bce3eff8
こちらの記事によると、「npm がアップデートできない原因は、実行元となる npm が複数存在するため」だとか。
…これだけだとわからないので、まずコマンドプロンプトで下記へ下記のディレクトリを確認してみてます。
C:\Program Files (x86)\Nodist\bin
で、このディレクトリ内に、npm、npm.cmd、npm.exe があるので、こちらのバージョンをそれぞれ下記のコマンドで確認します。
npm -v npm.cmd -v npm.exe -v
私の環境では、npm と npm.exe が以前のバージョンのままでした。
バージョンが確認できたら、バージョンが古い npm をリネームして、実行されないようにします。
コマンドは下記のとおりです。
move npm npm-orig move .\npm.exe npm-orig.exe
上記を実行したら、npm -v でバージョンを確認してみてください。
バージョンが無事に上がっていたら成功です！
以上、npm のアップロードができない時の対処法でした。
何となくしっくりこない対処法でしたが、バージョン更新は無事できたので良しとします。