カテゴリーアーカイブ JavaScript

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

【Cordova】画像をBase64に変換するプラグイン「cordova-plugin-base64-joewsh」

昨日、JavaScript で画像をBase64に変換する方法について紹介しましたが、Cordova にも似たようなプラグインがあったのでこちらについてもご紹介。
機能を実装したかったのが Cordova アプリなので、結局こちらを採用しました。

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

GitHub – Joewsh/cordova-plugin-base64-joewsh: Plugin to encode image files to base64
https://github.com/Joewsh/cordova-plugin-base64-joewsh

 

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

cordova plugin add https://github.com/Joewsh/cordova-plugin-base64-joewsh.git
// または
cordova plugin add cordova-plugin-base64-joewsh

そうしたら、Base64 に変換したい画像を、下記の関数の引数に指定して、関数を実行します。

window.plugins.Base64.encodeFile([変換したい画像パス], function(base64){
    // 行いたい処理を記述
    // 変換後の画像は、変数 base64 に格納されています。
});

引数には、他にも失敗時のコールバック関数と画像サイズのオプションも指定できましたが、特に必要なさそうだったので、今回は割愛しています。

で、取得した結果を img タグsrc 属性に格納したところ、問題なく画像が表示されました。
画像の変換処理自体は問題なく実装できたようです。

が、結果を API に投げたところエラーに…。
どうやら正しい形式ではないと判断されているみたい?
これはまた別の問題のようですので、引き続き調査します。

 

以上、Cordovaアプリで画像をBase64に変換するプラグイン「cordova-plugin-base64-joewsh」のご紹介でした。
導入も実装も簡単なので、画像の変換を行いたい方は是非ご検討ください。

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

【JavaScript】画像をBase64に変換するパッケージ「base64-img」

canvas を使う方法もあるようですが、パッケージを使った方が簡単そうだったので、試しに導入してみました。
画像ファイルを Base64 に変換する方法です。
今回使用したパッケージはこちらの「base64-img」です。

GitHub – douzi8/base64-img: convert img to base64, or convert base64 to img
https://github.com/douzi8/base64-img

画像を Base64 に変換できますし、その逆の Base64 を画像に変換することもできます。

 

さて、導入方法ですが、まずはパッケージをインストールします。

npm install base64-img --save

そうしたら、パッケージを require します。

const base64Img = require('base64-img');

あとは、実行したい関数を記述すればOKです。
私は画像を Base64 に変換したかったので、下記の関数を使用しました。

base64Img.base64('[変換したい画像パス]', function(err, data) {
  // 行いたい処理
});

正常に処理が完了すれば、変数 data に変換後のデータが格納されるはずです。

が、私の環境では、下記のようなエラーが発生してしまいました。
Uncaught TypeError: a.readFile is not a function.
「a.readFile は関数ではありません」とのことですが…これってどこのことを指しているの?
現在、絶賛調査中です。
コードもとても単純になるので、出来ればこのパッケージを使えるようにしたいですね。

 

以上、画像をBase64に変換するためのパッケージ「base64-img」についての紹介でした。

なお、パッケージを使わずに、JavaScript で書きたい場合は、こちらの記事が参考になります。

[JavaScript] 画像変換:要素 ⇔ Base64(相互変換) – Qiita
https://qiita.com/yasumodev/items/e1708f01ff87692185cd

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

【Cordova】画像をトリミングできるプラグイン「cordova-plugin-crop」

今回は、画像加工のための Cordova プラグインについてご紹介。
画像のトリミングができる「cordova-plugin-crop」というプラグインです。
私はアルバムやカメラで撮影した写真を正方形に切り抜きたかったので、今回導入してみました。

導入にあたって、参考にさせていただいた記事はこちら。

Cordova – カメラを使用してクリックするか画像を選択した後、画像をトリミングします。|cordova tutorial
https://riptutorial.com/ja/cordova/example/23783/カメラを使用してクリックするか画像を選択した後-画像をトリミングします-

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

GitHub – jeduan/cordova-plugin-crop: Crop an image in Cordova
https://github.com/jeduan/cordova-plugin-crop

 

導入方法は、まずプラグインを下記コマンドでインストールします。

cordova plugin add --save cordova-plugin-crop

その後、下記のコードを画像トリミングをしたいタイミングで実行します。

plugins.crop(function success () {
  // トリミング成功時の処理
}, function fail () {
  // トリミング失敗時の処理
}, '[トリミングしたい画像パス]', { quality: 100 });

{ quality: 100 } はトリミングする際のオプションで、下記の3つがあります。

  • quality:画像の品質(Default:100)
  • targetWidth:トリミング後の画像の幅(Default:-1)
  • targetHeight:トリミング後の画像の高さ(Default:-1)

上で紹介した参考サイトでは、カメラプラグインと組み合わせて、撮影した写真を正方形にトリミングしていました。
そのコードはこちら。
一部オプションの値を修正したり、カメラ撮影をアルバムからの写真選択に変更したりしています。

navigator.camera.getPicture(onSuccess, onFail, {
    sourceType: window.navigator.camera.PictureSourceType.PHOTOLIBRARY,
    quality: 100,
    destinationType: Camera.DestinationType.FILE_URI,
    saveToPhotoAlbum: true,
    encodingType: window.navigator.camera.EncodingType.PNG,
});
function onSuccess(imageData) {
    plugins.crop(function success (data) {
        var image = document.getElementById('[撮影した写真を表示するimgタグのID]');
        image.src = data;
    }, 
    function fail () {
        // トリミング失敗時の処理
    }, imageData, {quality: 100, targetWidth: 200, targetHeight: 200});
}
function onFail(message) {
    // 写真撮影失敗時の処理
}

上記を実行したところ、写真選択後、トリミングの処理が実行されました!
が、写真選択からトリミング処理の画面が表示されるまでに少し時間がかかります。
このままだと少々ストレスになるので、ローディング画像を表示したり、そもそも起動を早められないか、調べてみたいと思います。

 

以上、画像のトリミングを行えるプラグイン「cordova-plugin-crop」についての紹介でした。
導入はとても簡単なので、是非ご活用ください。

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

【Vue.js】Vue.jsに関する色々が置かれているリポジトリawesome-vue

vuejs/awesome-vue: 🎉 A curated list of awesome things related to Vue.js
 awesome-vueはVue.jsに関する様々なモノのリストが置かれたリポジトリです。ライブラリはもちろん、教材Vue.jsが使用されたプロジェクトもあります。
 awesome-vueのオーナーは開発の元締めであるvuejsそのものです。そのためか現在もとても活発にリストが更新されており、その多くが有用です。(草の根ライブラリやスニペットを探すと無視できないバグを持っていることがままあります)

 リンクと概要のみを大雑把な分け方で1ページにずらっと並べているの探すのは気持ち手間ですがリンク先は2000を優に超えており、とりあえず何か探したい時に見てみる場所として満足に使えます。

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

【JavaScript】フレームワーク環境付きオンラインエディタCodeSandbox

CodeSandbox: Online Code Editor Tailored for Web Application Development
 CodeSandboxはJsFiddleなどと同じJavaScript用のオンラインエディタです。CodeSandboxの特徴は次の画像の様にフレームワークを使うことを前提とした部分です。

 上画像にある様にJavaScriptのフレームワークを広くカバーしており、サーバサイド用のフィドルにもなれます。

 自分はよくVue.jsの単一ファイルコンポーネントを使うのでJSFiddleでVue.jsを操るのは少々苦手でしたが、CodeSandboxならば簡単です。一度に複数のファイルを扱えるため、単一ファイルコンポーネントを複数集めて一つのページを作る手法がそのまま使えます。

 青色のShareボタンからコードを見せるためのリンクとHTMLコードを発行することもできます。

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

【JavaScript】シンプルな数値のゼロ埋めの処理の書き方

個人的にとても綺麗な書き方だと思ったので、ご紹介したくまとめました。
例えば年月日を、2019/3/22 ではなく、2019/03/22 としたい時があるかと思います。
要は、月や日が一桁の場合は頭に 0 をつけ、二桁だった場合はそのまま表示する場合です。

 

今回参考に…というか、まるっとご紹介させていただきたい記事はこちら。

JavaScriptでゼロ埋め処理 – Qiita
https://qiita.com/cress_cc/items/3e820fe1695f13793df3

この方も冒頭で紹介していましたが、私も今までは、for 文で一月・一日ずつチェックし、10 未満だったら 0 を付けるという処理を行っていました。
が、いかんせん面倒くさい…。
月だけならともかく、日も同じ処理を行うとなると、2つの値をチェックする必要があります。

が、紹介されていた書き方を使えばこんなにスタイリッシュになります。

// 今日の日付を取得
let today = new Date();

// 月、日をそれぞれゼロ埋め
let year = today.getFullYear();
let month = ('0' + (today.getMonth()+1)).slice(-2);
let day = ('0' + today.getDate()).slice(-2);

// ログで確認
// 2019年3月22日の場合、2019/03/22 となります
console.log(year + '/' + month + '/' + day);

ポイントは、.slice() で、マイナス値を指定している点です。
slice メソッドに負の値が指定された場合、最後尾から文字列を取得できます。
今回は、-2 を指定しているので、最後尾から 2桁を取得しています。
そのため、一桁の月・日の場合は、頭に 0 が付いた文字列が変数に代入され、2桁の場合は一番上の桁である0は取得されず、そのままの値が代入されます。

for 文をぐるぐる回すより、はるかに綺麗な書き方ですね!
もっと早くに知りたかったし、もっと早くにこの書き方を思いつきたかった…!

 

以上、JavaScript で数値のゼロ埋め処理を行う方法についてでした。
私自身、とても助かった書き方なので、是非ご参考にしていただければと思います。

  • この記事いいね! (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)
村上 著者:村上

【React】テキスト要素にフォーカスが当たった/外れたときに特定の処理を実行する方法

今後も使いそうな処理なので、備忘録としてまとめ。
React で、テキスト要素にフォーカスが当たった、もしくはフォーカスが外れた事を検知し、そのときに特定の処理を実行する方法です。
なお、タイトルには React とありますが、JavaScript でも使用できます。

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

[JavaScript] フォーカス・アウト イベントを取得する(onBlur) – コピペで使える JavaScript逆引きリファレンス
https://javascript.programmer-reference.com/js-event-onblur/

 

さて、早速コードはこちら。
必要なところだけ抜粋してます。

onFocusFunc() {
  // フォーカスが当たったときの処理
}
onBlurFunc() {
  // フォーカスが外れたときの処理
}

render() {
  return (
    <input type='text' onFocus={() => this.onFocusFunc()} onBlur={() => this.onBlurFunc()} />
  );
}

コードといってもこれだけです。
あとは各関数に、フォーカスが当たった時/外れたときの処理を記述してください。
なお、onFocusonBlur は、全て小文字ではなく、キャメルケースになっているのでお気をつけください。
素の HTML だと全て小文字なので、うっかり間違えそうです。

処理としては全く複雑なことはしていないのですが、フォーカスが外れたときに発火する onBlur を忘れそうだったので、まとめました。
onFocus はそのままの名前なのでわかりやすいのですが、onBlur って少し覚えにくい…。
なお、blur は「ぼかし」という意味があるようです。…ますますわかりにくい気がするのは私だけでしょうか…。
とにかく、忘れないように気をつけます。

 

以上、React でテキスト要素にフォーカスが当たった/外れたときに特定の処理を実行する方法でした。

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