カテゴリーアーカイブ JavaScript

村上 著者:村上

【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】音声ファイルを扱うためのプラグイン「cordova-plugin-media」

Cordova アプリで効果音を出したいという要望があったので、メディアプラグイン「cordova-plugin-media」をインストールしました。
HTML5 の audio タグを使用する方法もありますが、iOS では動作しない可能性もあるとのことでしたので、プラグイン導入を選択しました。

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

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

 

実装方法ですが、まずプラグインをインストールします。

cordova plugin add cordova-plugin-media

で、下記のように使用したい音声ファイルや、成功/失敗時に実行する関数などを定義します。

const media = new Media('[音声ファイルのパス]', [成功時の処理], [失敗時の処理], [ステータス変化時の処理]);

なお、音声ファイルのパス以外はすべてオプションなので、必要がなければ定義しなくてもOKです。

あとは、呼び出したいメソッドを任意のタイミングで実行するだけ!
私は単に音楽ファイルを再生したいだけだったので、下記を実行しました

media.play();

なお、OS のオーディオリソースを開放する release メソッドもあります。

media.release();

特に Android の場合、メディア再生に割り当てることができるインスタンスの数に限りがあるため、Media リソースが不要になった場合には必ず上記を実行しましょう。

 

以上、メディアを扱うための Cordova プラグイン「cordova-plugin-media」のご紹介でした。
どなたかの参考になれば幸いです。

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

【JavaScript】デザインを崩さずに任意の要素を角丸四角で囲うスニペット

 この記事で紹介するコードで描く角丸四角はあっさり壊れる角丸四角です。とにかく元のデザインを崩さずその場の画面で囲えればよい、という目的の際に有効に使えます。具体的には、テスト結果やwebページの説明で何かを囲って強調したい時です。
 実装は次のコードです。

targetSelector='#hogehoge';// ここに対象のセレクタを代入
// 対象の要素の位置と大きさを取得
targetTop = document.querySelector(targetSelector).getBoundingClientRect().top  + window.pageYOffset;
targetLeft = document.querySelector(targetSelector).getBoundingClientRect().left  + window.pageXOffset;
targetWidth = document.querySelector(targetSelector).getBoundingClientRect().width;
targetHeight = document.querySelector(targetSelector).getBoundingClientRect().height;
// 角丸四角の作成開始
div = document.createElement('div');
// 対象より少し大きめの大きさを指定する
div.style.width = 'calc(' + targetWidth + 'px + 2em)';
div.style.height = 'calc(' + targetHeight + 'px + 2em)';
// 対象より少し左上を要素の開始地点に指定する
div.style.top = 'calc(' + targetTop + 'px - 1em)';
div.style.left = 'calc(' + targetLeft + 'px - 1em)';
// 既にある画面のデザインと関係ないレイヤーに要素を配置すると指定
div.style.position = 'absolute';
// 背景色を完全透過に指定
div.style.background = '#FFF0';
// 境界線を太い赤線にすると指定
div.style.border = 'solid 3px';
div.style.borderRadius = '2em';
div.style.borderColor = 'red';
// モーダルの様なポップアップ相手でも上に乗せられると指定
div.style.zIndex = '100000';
// bodyの末尾に実体化させる
document.querySelector('body').appendChild(div);

 テストコード中にJavaScriptを実行させるようにして、テスト対象のセレクタをtargetSelectorに代入、このコードを実行、それからスクリーンショットを取る。そうするとテスト部分を強調したスクリーンショットが出来上がります。
 ブックマークレットにする場合は次のコードです。先ほどのコードを_surround関数としてグローバルスコープに定義し、グローバルスコープ中の変数targetSelectorを引数にした_surround関数を実行するブックマークレットです。

javascript:
_surround = (targetSelector) => {
targetTop = document.querySelector(targetSelector).getBoundingClientRect().top  + window.pageYOffset;
targetLeft = document.querySelector(targetSelector).getBoundingClientRect().left  + window.pageXOffset;
targetWidth = document.querySelector(targetSelector).getBoundingClientRect().width;
targetHeight = document.querySelector(targetSelector).getBoundingClientRect().height;
div = document.createElement('div');
div.style.width = 'calc(' + targetWidth + 'px + 2em)';
div.style.height = 'calc(' + targetHeight + 'px + 2em)';
div.style.top = 'calc(' + targetTop + 'px - 1em)';
div.style.left = 'calc(' + targetLeft + 'px - 1em)';
div.style.position = 'absolute';
div.style.background = '#FFF0';
div.style.border = 'solid 3px';
div.style.borderRadius = '2em';
div.style.borderColor = 'red';
div.style.padding = '0.5em';
div.style.zIndex = '100000';
document.querySelector('body').appendChild(div);
};
_surround(targetSelector);

 あらかじめコンソールでtargetSelector変数に対象のセレクタを代入してから実行します。例えば次の様に動かせます。

 ブラウザの開発者ツールに要素のセレクタを作ってもらい、コンソールで代入、実行としたわけです。こういったコードを使うとテストや説明書作りが多少は楽になります。

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

【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)
村上 著者:村上

【JavaScript】LocalStorageを扱う上での注意点

うっかり忘れそうなので、自戒も込めてまとめ。
ローカルにデータを無期限に保存できる便利な LocalStorage の注意点です。

 

知っている人には、そんなこと?と思われそうですが、LocalStorage は値は必ず 文字列 で保存されます。
私は、つい Boolean 型をそのまま格納してしまい、若干ハマりかけました。

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

localStorage 使い始めてハマりがちな罠 – #生存戦略 、それは – subtech
http://subtech.g.hatena.ne.jp/secondlife/20091201/1259631283

こちらでも書かれているように、LocalStorage は自動で型変換が行われます。
で、console.log で確認すると、きちんと true または false が格納されているのですが、これは Boolean 型ではなく文字列なので要注意。
ログで見るだけだと、正しい値が保持されているように見えてしまうんですよね…。
なので、if 文等で比較をして結果がおかしい場合は、型の確認までするようにしましょう。

 

以上、LocalStorage を利用する際の注意点についてでした。
皆様もご利用の際はお気を付けください。

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

【JavaScript】JSDocからドキュメントページを作成するJSDoc 3の紹介

jsdoc – npm
jsdoc3/jsdoc: An API documentation generator for JavaScript.
 JSDoc 3はJSDocを読み取り、JSDocに従ってからドキュメントを表すHTMLページを作成してくれます。インストールはnpm installでプロジェクトに追加するだけです。
 実行方法は設定を決めて、コマンドを叩く。コマンドはカレントディレクトリをプロジェクトのルートにして

./node_modules/.bin/jsdoc [対象ファイル、フォルダのパス] -r -d [出力先のパス] -c [設定ファイルのパス]

です。-rはrecursiveのRであり再帰的にフォルダを見るオプションです。
 設定ファイルは必要になることがそれなりあります。これはJavaScriptはJavaScriptそのままで書かれないことがそれなりにあるためです。TypeScriptなどのAltJSやVue.jsなどの独自の形式を持つフレームワークが良く用いられます。そういった素のJavaScriptでない環境のためにプラグインが開発され、それを読み込み、設定するためにjson形式の設定ファイルが必要になります。
 例えばVue.js用の設定ファイルは次になります

{
  "plugins": ["node_modules/jsdoc-vuejs"],
  "source": {
    "includePattern": "\\.(vue|js)$"
  },
}

 読み込むプラグインを決定し、拡張子vueのファイルも読み込むという風に設定しています。
 こうして出来上がったページが次の画像です。

 JSDoc 3にはテンプレートが用意され、拡張されています。テンプレートのうちのいくつかのデモは次のサイトから見ることが出来ます。
jsdoc3 template list examples

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

【javaScript】fetchApiでレスポンスをxmlに変換する方法

ajaxのように手軽に書けつつ早いapiであるfetchApiでxmlを取ってくる方法を探していたのですが、中々見つからなかったので

こんな感じで仕立ててみました。基本的な書き方はJqueryのajaxと変わらないので、ajaxを使ったことのある方ならばすぐに要領を掴め

そうですね。


postfetch() {

//通常のレスポンスを返す
.then(function (response) {
console.log(response);
})
//xmlに変換
//.then(function (response) {
//const text = new DOMParser().parseFromString(response, "text/html")
//console.log(text);
//})
}

レスポンスで受け取ったデータを即座にDOMParserでxmlで変換するだけなので、コンソールで確認できたら後は自由に使うことが
できます。
最後に言うのもアレなのですが、fetchでxmlを扱う場合は、速度にこだわらない場合はajaxでも代用が利きます。

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

【Cordova】カメラプラグイン利用時にOutOfMemoryErrorでアプリが落ちる時の対処法

後輩君がササッと調べてくれました!
Cordova に カメラプラグイン「cordova-plugin-camera」を導入した際、ギャラリーから選択した画像のサイズが大きすぎてアプリが落ちるというバグが発生していました。
今までは、カメラプラグインのオプションの allowEdit を有効にして、画像を正方形にトリミングしていたのですが、Android では、その方法が推奨されていないので、トリミングを行わないように変更しました。
そしたら、画像サイズが大きすぎでアプリがクラッシュ…。
なお、エラーメッセージは「OutOfMemoryError: Failed to allocate a 75497480 byte allocation with 16773216 free bytes and 59MB until OOM」というものでした。

 

で、それについてぼやいたら、後輩君が検索してヒットしたページを送ってくれました。
それがこちら。

Simon Mac Donald: Change to Camera code in PhoneGap 1.9.0
http://simonmacdonald.blogspot.com/2012/07/change-to-camera-code-in-phonegap-190.html

こちらの記事によると、「getPicture メソッドに quality や targetWidth / targetHeight などのいくつかのパラメータを指定すると、メモリ不足エラーが発生する可能性があります」とのこと。
それらを思いっきりやってる…!ということで、記事に掲載されていたサンプルコードを見本に、コードを下記のように修正しました。

const options = {
    quality: 100,
    correctOrientation: true,
    saveToPhotoAlbum: true,
    destinationType: navigator.camera.DestinationType.DATA_URL,
    sourceType: navigator.camera.PictureSourceType.CAMERA,
    encodingType: navigator.camera.EncodingType.JPEG,
};
navigator.camera.getPicture((imageData) => {
    // 成功時の処理
}, (error) => {
    // 失敗時の処理
}, options);

quality は 100 のまま、encodingType を JPEG 形式に変更し、targetWidthtargetHeight は定義しないようにしました。
この状態で実行したところ、アプリが落ちなくなり、無事にカメラで撮影した画像データが取得できました!
また、sourceType を CAMERA から PHOTOLIBRARY に変更しても問題ありませんでした。

 

以上、Cordova のプラグイン「cordova-plugin-camera」利用時に、OutOfMemoryError でアプリが落ちる時の対処法でした。
というか、そもそも写真は PNG ではなく、JPEG で保存すべきでしたね…。
同じような現象にお悩みの方は、是非参考にしていただければと思います。

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

【npm】Error: Cannot find module ‘webpack-cliから抜け出す方法

npm uninstall react-tabsをしたら警告が出てしまいました。found 14 vulnerabilities (5 low, 2 moderate, 7 high)と書いてあったので恐らく非推奨のパッケージだと思いすぐにnpm iでまとめてインストールし直したのですが、インストールしたのにも関わらず存在しないことになっている・・・。よく見ると、npm auditを入力して脆弱性のあるパッケージを調査しろとメッセージがあったので急いでリトライをしました。lowが脆弱性が低くてhighが危険ですよってことですね。vulnerabilitiesと書いてあったのに見落としてしまいました・・・。

auditとは、npm installでnode_modules配下にインストールしたpackageの脆弱性をチェックしてくれるプロパティです。元々liftsecurity.ioという企業の技術でした。が、セキュリティノウハウをnpm側が取得したことによりふろんとpackageの脆弱性のチェックが手軽にできるようになりました。

npm auditで検知されたパッケージは、脆弱性を含んでいると見なされ、これらを解決させない限りはビルドを通すことができない仕組みになっています。

npm auditをして下にスクロールしていくと、画像のようにnpm install 〇〇をインストールしてねというメッセージが表示されます。

このメッセージに従ってnpm install 〇〇を追加していけばhighやmoderateの数が減っていくので、0になったらまたビルドをして通るかどうか確認してみてください。流れとしては、npm run buildをするー>found 〇〇 vulnerabilities(4 low,4,moderate,10high)のようにメッセージが出るー>npm install 〇〇コマンドでメッセージに従ってパッケージをいれていくー>解決

ここで脆弱性について問いただされるとは思いませんでした。ですが直す個所は決まっているのでさくっと修正してしまいましょう。

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

【未解決】「Warning: Material-UI: You cannot call prepareStyles() on the same style object more than once.」警告の対処法

タイトル通り、未解決です。
現在、修正中のアプリで「Warning: Material-UI: You cannot call prepareStyles() on the same style object more than once.」というワーニングが発生しています。
エラーではないので、これが原因でアプリが落ちることは今のところないのですが、コンソール画面で赤文字がちらつくのはやっぱり気になるので、対応している最中です。

警告文の中に Material-UI とあるのと、発生している警告文の数から、Material-UI の Cards コンポーネントのあたりに問題があるのではというところまでは特定できましたが…そこから若干難航しています。

 

なお、Material-UI の GitHub はこちらから。

GitHub – mui-org/material-ui: React components for faster and easier web development. Build your own design system, or start with Material Design.
https://github.com/mui-org/material-ui/

GitHub の issues タブに、今回の警告についての投稿がいくつかあったので、そちらにも目を通している最中です。

が、どうやら Material-UI のバグのようなので、バージョンを更新すれば対処できそう…?
と思ったのですが、現在インストール済みのバージョンは、そのバグ報告があったものよりも新しいので、修正は反映されているはず。
ちなみに、この投稿です。

[CardMedia/SvgIcon] React warning・issue #5128・mui-org/material-ui・GitHub
https://github.com/mui-org/material-ui/issues/5128

…もう少し調べてみます!

 

以上、未解決の警告「Warning: Material-UI: You cannot call prepareStyles() on the same style object more than once.」についてでした。
とりあえず、他の投稿にも目を通して、あとはバージョンの再確認をまず行いたいと思います。
あとは、怪しいと思われる要素を一つずつコメントアウトして実行し、具体的にどこの記述でこの警告が発生しているかを突き止めます。

少し前から格闘していた他のバグについては、今日ようやく対処できたので、やっとこの警告にあてられる時間が捻出できそうです。
何かわかりましたら、また報告します。

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