カテゴリーアーカイブ JavaScript

著者:杉浦

【Vue.js】vue-cliでElectronとVueによるデスクトップアプリを作る

 Electronはweb開発に同様のコードでデスクトップアプリを作成するためのプラットフォームです。もともとweb系の開発者ならば新たな言語を増やさずにデスクトップアプリを作ることができます。Electronは便利なのですがただ使うだけでもそれなりに設定が必要になります。vue-cliとつなげるとVue用のボイラープレートがそろった段階で開発を始められます。
 Electron | Build cross platform desktop apps with JavaScript, HTML, and CSS.
 vue-cliはVue.js回りの開発を行うための様々なものが詰め込まれたツールです。GUIが備わっているのでなんとなく色々触るだけでも結構使い方がわかります。
Vue CLI
用意されている中で特に便利なのがプラグインです。Vueと何か他の抽象的な大がかりなパッケージ(TypeScript、ESLint、Jestなどなど)を組み合わせる時に面倒になる周辺設定をパパっと済ませてくれます。Electronもこれに含まれます。
 まずはVue.jsが含まれているプロジェクトを開きます(npm i -g @vue/cliでインストール。vue uiでGUIに移動。新しいプロジェクトの作成でもインポート[既存のvueコード読み込み]でもOK)。後はプロジェクトプラグインからvue-cli-plugin-electron-builderを選んでインストールするだけです。

 するとElectronを扱うのに必要な環境設定コードと実行スクリプトがダンプされます。


vue uiの画面を使えばビルドの設定もUIでできます。これでビルドスクリプトを実行すればデスクトップアプリの完成です。

 

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

【JavaScript】Promiseオブジェクトを使った非同期処理

久々に使うことになってほとんど忘れかけていたので、備忘録としてまとめ。
JavaScript で Promise オブジェクトを使った非同期処理の書き方についてです。
現在開発しているプロジェクト内で、データを送信する際に送るデータの一部が壊れるという現象が発生しているため、怪しいところを全部直すところ、非同期処理を実装したほうが良さそうだということで追加しています。

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

【JavaScript】非同期処理/Promise/asyncと聞くとビビっちゃう人を救う – Qiita
https://qiita.com/miyarappo/items/dbe1a9bad36c5e35b623

Promise – JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise

 

プログラムの文法はこちら。

const sample = () => {
  return new Promise((resolve, reject) => {
    // 実行したい処理を記述
    // 正常終了する処理の最後で、resove(); を実行する
    // エラー終了する処理の最後で、reject(); を実行する
  })
}

// 非同期処理関数を呼び出す
sample().then(() => {
    // 正常終了した場合の処理を記述
  }).catch(() => {
    // エラー終了した場合の処理を記述
  });

非同期処理の関数については、下記のように書いてもOKです。

const sample = new Promise(function(resolve, reject) {
  // 実行したい処理を記述
  // 正常終了する処理の最後で、resove(); を実行する
  // エラー終了する処理の最後で、reject(); を実行する
});

sample.then(function() {
    // 正常終了した場合の処理を記述
  }).catch(function(){
    // エラー終了した場合の処理を記述
  });

基本的な書き方は上記のとおりです。
書き方については、特に問題がなければお好きな方をご利用ください。

Qiita の記事によると、async/await と併せて使えば then()catch() を使わない書き方ができるとのことです。
が、今回は特に複雑な記述にはならなかったので使用していません。
今後もっと処理が複雑化したら導入しようと思います。

 

以上、JavaScript の Promise オブジェクトで非同期処理を実行する方法でした。
ご参考になれば幸いです。

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

読み込むだけで簡単にリッチなトーストを表示できるjsライブラリ “iziToast”

アプリ内で通知を表示する際、画面の隅に最前面にポップアップするようなUIを”トースト”と呼びます。

Javascriptで動くライブラリで、こういったトーストのWebアプリ上での実装を簡単にしてくれるものは結構あるのですが、Bootstrapやマテリアルデザイン系フレームワークなどの汎用的なライブラリの一部であったり、複雑な前準備が必要だったりする場合が多く、すぐに単体で使えなかったり、使えるようになるまでの手間がかかったりするものが多いように感じます。

最近、 Laravel の勉強もかねてWebアプリを作っていたのですが、組み込んだライブラリとの相性が悪く、bootstrap標準のトーストがうまく動かなかったため別のトーストが表示できるライブラリを探したところ、iziToastというライブラリを見つけました。

iziToast

iziToastはプログラムをWebアプリのプロジェクトに配置した後、Scriptタグで呼び出すだけで トースト を実装できるという非常に便利なライブラリです。

画像は公式サイトで各種類のトーストを四隅に配置した場合の例です。

タイトルと内容、閉じるボタンとトーストが表示される残り時間が確認できる かなりリッチなトーストを標準で実装することができます。

また、メッセージの内容に合わせて、トーストのメッセージの種類を設定することができます。

設定できる種類は下記の通り

・info
・success
・warning
・error
・question

また、表示をある程度カスタマイズすることも可能なようです。

インストールは、npmコマンドでインストールを行うか、公開されているCDNのURLをscriptタグにセットすることで利用できるようになります。

npmを使用する場合は下記のようにします。

npm install izitoast --save

CDNで簡単に読み込ませる場合は下記のように指定します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/js/iziToast.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/css/iziToast.min.css" crossorigin="anonymous">

※バージョンは適宣変更してください。

あとは、トーストを表示させたいタイミング(例えば$.ajax().doneなど)に次のような一行を追記します。

iziToast.トーストの種類({ title: 'モーダルタイトル', message: 'メッセージ' });

例えは、次のように記述します。

iziToast.success({ title: 'アップロード', message: 'アップロードに成功しました。' });

これだけで、アップロード成功時のトーストを実装することができます。

とても便利なので、トーストを実装したいと考えている方はぜひダメしてみてください。

参考サイト:
jsプラグイン「iziToast」で超簡単にトースト(通知バー)を表示 – Qiita
オシャレなtoastが簡単に実装出来るjsプラグイン「iziToast」 – cupOF
izitoast – cdnjs

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

jQueryのAjaxで通信前に任意の処理をさせる方法

Javascriptで複雑な操作を簡単に記述できるライブラリであるjQueryで、Ajaxの処理を直感的に記述することができる$.ajax()というメソッドがあります。

クライアントサイドのjavascriptで何か作った方であれば恐らく多くの方が使ったことのあるものだと思います。

$.ajax()には、本体の$.ajax()につなげる形で、通信状況に応じた処理を書き分けることができるようになっています。

例えば”.done()”メソッドの中に処理を書けば、通信が成功したときのみ任意の処理をさせることができますし、”.fail()”であれば通信に失敗したときのみ(400,500系のステータスコードの時も含む)に任意の処理を行わせることができます。あるいは、”.always()”を指定すると成功、失敗関係なく通信終了後に任意の処理をさせることができます。

ここまでは多くのサイトでよく紹介されていますが、$.ajaxでは通信終了後だけでなく、通信直前に任意の処理をさせることもできます。

“beforeSend”という指定です。

通信終了後の場合は$.ajax()のあとに.done()のようにドットで繋げていく書き方ですが、beforeSendについては$.ajax()内にオプションとして記述する形になっているので注意が必要です。

 $.ajax(
                {
                    url:'/path/to/api,
                    type:'GET',
                    processData: false,
                    contentType: false,
                    headers: {
                        'X-User-Token': user.token,
                        'X-User-Token-Sec': user.token_sec,
                    },
                    data: {
                        'key': 'value',
                    },
                    beforeSend: function() { // 通信前に実行
                        $('#loading').css('display','block');
                    },
                }
            )
            // Ajaxリクエストが成功した時発動
                .done( 
// 以下省略

ところで、なぜ$.ajax()メソッド内で通信前の処理も記述するのかというと、例えばAjax通信を開始したらローディングアイコンを表示し、通信が終わったらローディングアイコンを消したい、といったことをしたい場合に、実は$.ajaxの外にこういった処理を書いてしまうと、Ajax通信の始まりとアイコンの表示のタイミングがうまく同期してくれない、という現象が発生することがあります。

$.ajaxの中であればちゃんと意図したとおりのタイミングで処理を実行してくれるので、上記のような現象も起きず、安心できます。

jQuery + AjaxをつかったリッチなWebアプリを作る際は、参考にしてみてください。

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

【Cordova】create-react-appコマンドでCordovaアプリの開発環境を作る

今更感はありますが…備忘録としてまとめ。
タイトル通り、create-react-app コマンドと cordova のコマンドを使って、Cordova アプリの開発環境を作る方法です。
色々な記事がありましたが、個人的に一番良いと思ったのがこちらの Qiita の記事です。

Create React App & Cordovaでアプリをつくる環境を整える 2018年4月時点 – Qiita
https://qiita.com/bathtimefish/items/113154e89650b351b5b7

 

作成方法ですが、まずは create-react-appcordova をインストールします。

npm install -g create-react-app
npm install -g cordova

インストールが終わったら、任意の場所で下記のコマンドを実行します。

create-react-app [プロジェクト名]
cd [プロジェクト名]
npm run eject 

こちらのコマンドを実行すると、Create React App プロジェクトが作成できます。

3行目のコマンドは、react-scripts をディレクトリに展開するとのことでしたが…よく分かりませんでした。
なお、こちらを実行すると、? Are you sure you want to eject? This action is permanent. (y/N) と聞かれるので、問題なければ y を入力します。

上記のコマンドが完了したら、config/paths.js を開きます。
こちらのファイルに、appBuild: resolveApp('build') という記述があるので、ここを appBuild: resolveApp('www') に変更します。
次に package.json を開き、"homepage": "./", を追加します。
追加する場所は、"dependencies": { …… }, のすぐ上あたりです。

上記が全て完了したら、一旦一つ上のディレクトリに戻り、下記コマンドで cordova の環境を作成します。

cordova create [ディレクトリ名] [Bundle identifier/アプリケーションID] [プロジェクト名]

なお、ディレクトリ名は create-react-app コマンドで指定したプロジェクト名とは異なるものを指定してください。

こちらを実行したら、このプロジェクト内の config.xml を、上で作成した Create React App プロジェクトのディレクトリの直下にコピーします。

public/index.html を開き、下記の 3行を head 内に追加します。

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">

なお、1行目の meta http-equiv="Content-Security-Policy" は環境にあわせて適宜変更してください。

そして、同じく Create React App プロジェクト の src/index.js を下記のように修正します。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

const startApp = () => {
  ReactDOM.render(<App />, document.getElementById('root'));
  registerServiceWorker();
};

if(window.cordova) {
  document.addEventListener('deviceready', startApp, false);
} else {
  startApp();
}

なおこのままビルドすると、上記のコードにある registerServiceWorker.js がなくてエラーになるので、src ディレクトリ内に下記の内容で作成します。

// In production, we register a service worker to serve assets from local cache.

// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on the "N+1" visit to a page, since previously
// cached resources are updated in the background.

// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
// This link also includes instructions on opting out of this behavior.

const isLocalhost = Boolean(
  window.location.hostname === 'localhost' ||
    // [::1] is the IPv6 localhost address.
    window.location.hostname === '[::1]' ||
    // 127.0.0.1/8 is considered localhost for IPv4.
    window.location.hostname.match(
      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
    )
);

export default function register() {
  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
    // The URL constructor is available in all browsers that support SW.
    const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
    if (publicUrl.origin !== window.location.origin) {
      // Our service worker won't work if PUBLIC_URL is on a different origin
      // from what our page is served on. This might happen if a CDN is used to
      // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
      return;
    }

    window.addEventListener('load', () => {
      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;

      if (isLocalhost) {
        // This is running on localhost. Lets check if a service worker still exists or not.
        checkValidServiceWorker(swUrl);

        // Add some additional logging to localhost, pointing developers to the
        // service worker/PWA documentation.
        navigator.serviceWorker.ready.then(() => {
          console.log(
            'This web app is being served cache-first by a service ' +
              'worker. To learn more, visit https://goo.gl/SC7cgQ'
          );
        });
      } else {
        // Is not local host. Just register service worker
        registerValidSW(swUrl);
      }
    });
  }
}

function registerValidSW(swUrl) {
  navigator.serviceWorker
    .register(swUrl)
    .then(registration => {
      registration.onupdatefound = () => {
        const installingWorker = registration.installing;
        installingWorker.onstatechange = () => {
          if (installingWorker.state === 'installed') {
            if (navigator.serviceWorker.controller) {
              // At this point, the old content will have been purged and
              // the fresh content will have been added to the cache.
              // It's the perfect time to display a "New content is
              // available; please refresh." message in your web app.
              console.log('New content is available; please refresh.');
            } else {
              // At this point, everything has been precached.
              // It's the perfect time to display a
              // "Content is cached for offline use." message.
              console.log('Content is cached for offline use.');
            }
          }
        };
      };
    })
    .catch(error => {
      console.error('Error during service worker registration:', error);
    });
}

function checkValidServiceWorker(swUrl) {
  // Check if the service worker can be found. If it can't reload the page.
  fetch(swUrl)
    .then(response => {
      // Ensure service worker exists, and that we really are getting a JS file.
      if (
        response.status === 404 ||
        response.headers.get('content-type').indexOf('javascript') === -1
      ) {
        // No service worker found. Probably a different app. Reload the page.
        navigator.serviceWorker.ready.then(registration => {
          registration.unregister().then(() => {
            window.location.reload();
          });
        });
      } else {
        // Service worker found. Proceed as normal.
        registerValidSW(swUrl);
      }
    })
    .catch(() => {
      console.log(
        'No internet connection found. App is running in offline mode.'
      );
    });
}

export function unregister() {
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.ready.then(registration => {
      registration.unregister();
    });
  }
}

作成が終わったら、Create React App プロジェクトのディレクトリに移動し、npm run build を実行します。
エラーが出なければビルド成功です!

あとは、任意のプラットフォームを、下記のコマンドを使って追加してください。

cordova platforms add browser
cordova platforms add android
cordova platforms add ios

もちろん全部追加しなくてもOKです。

あとは cordova のコマンドを使ってプロジェクトを実行してください。
下記のコマンドを実行すると、ブラウザで実行できます。

cordova run browser

 

以上、create-react-app コマンドを使って Cordova アプリの開発環境を作る方法でした。
ほぼ Qiita の参考記事そのままなので、こちらを参考にして頂いても大丈夫です。

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

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

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

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

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

 

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

 

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

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

【Vue.js】コンポーネントの持つ値をCSSに伝える

 Vue.jsで小さなコンポーネントを作っていると時折デザインの一部をコンポーネントを呼び出す側で自由に決定させたい時があります。この記事ではそのやり方を紹介します。
 コンポーネントの持つ値をCSSに伝えるために重要な機能はCSSにおける変数であるカスタムプロパティです。
 カスタムプロパティ (–*): CSS 変数 – CSS: カスケーディングスタイルシート | MDN
 CSS カスタムプロパティ (変数) の使用 – CSS: カスケーディングスタイルシート | MDN
 カスタムプロパティは次のように用います。カスタムプロパティの適用対象は定義したHTMLElementの子方向の要素全てです。

div.hoge-box {
    --hoge-box-width: 3em; /* --hogeで宣言 */
    width: var(--hoge-box-width); /* var(--変数名)で使用 */
}

div.hoge-box > div {
    width: calc(var(--hoge-box-width) / 6) /* calcでも使える */
}

html {
    --global--base-color: hsl(0, 0, 0); /* html, :root, bodyの様な広い範囲で指定するとグローバル的に使える */
}

 コンポーネントのルートエレメント上でコンポーネントの持つ値を用いてカスタムプロパティを定義することでCSSへ任意の値を与えます。これは例えば次のようにpropsで与えられた値をcomuputedでまとめ、まとめた値をルートエレメントであるdiv.check-boxのスタイルとして定義、定義した変数をCSS内で扱う、というやり方です。

<template>
  <div
    :style="styleVariables"
    class="check-box"
  >
    <div class="check"/>
  </div>
</template>
<script>
export default Vue.extend({
  props: {
    checkboxWidth: {
      type: String,
      default: '3em',
    },
  },
  computed: {
    /**
     * このコンポーネント中で用いるCSS変数をまとめる.
     * @return {object}
     */
    styleVariables() {
      return {
        '--checkbox-width': this.checkboxWidth,
      };
    },
  },
};
</script>
<style lang="scss" module>
  .check-box {
    --checkbox-width: 3em;// 事故防止のデフォルト値
    border: 2px solid #9e9e9e;
    border-radius: 2px;
    width: var(--checkbox-width);
    min-height: var(--checkbox-width);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .check{
    position: relative;
    top: calc(var(--checkbox-width) / 6); // def=0.5em
    left: calc(var(--checkbox-width) / -20);// def=-0.15em
    transform: rotate(-45deg);
    transform-origin: left top;
    border-left: 2px solid #000;
    border-bottom: 2px solid #000;
    width: calc(var(--checkbox-width) / 2.4 * 1.618); // def=2.0225em
    height: calc(var(--checkbox-width) / 2.4); // def=1.25em
  }
</style>

 上記コードの動作は次のデモの通りです。

 いたるところでサイズをemで指定していますが変数を介しているためデザインを崩さずデザインを容易に変更できます。変数はコンポーネントのプロップで決定しているため、コンポーネントを呼び出す側が安全にデザインを変えられます。この変数渡しのやり方に加えて、アニメーションや状態の定義と変化を用いることで自由に簡単に扱える最小単位のコンポーネントを作りやすくなります。
 余談ですが、カスタムプロパティを用いる際、CSS独立ファイルでは未定義の変数名を呼び出そうとするか、定義セレクタを多量にコピペすることになり辛くなります。SCSSの様な階層構造を定義できるCSS拡張言語を用いると安全に簡潔に記述できます。

// scssコード
div.hoge-box {
    --hoge-box-width: 3em; // --hogeで宣言
    width: var(--hoge-box-width); // var(--変数名)で使用

    div { // div.hoge-box divと同じ意味になる
        width: calc(var(--hoge-box-width) / 6) // calcでも使える
    }
}
  • この記事いいね! (1)
村上 著者:村上

【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 を導入する方法でした。
とりあえず、現時点でのまとめなので、進捗あればまたご紹介します。
ご参考になれば幸いです。

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

【Git】package.json上でコマンドとGitを連携させるためのhusky, lint-staged

 husky – npm
 lint-staged – npm
 huskyはGitのフックのほぼ全てをpackage.json上で定義できるパッケージです。フックできない部分はいずれもGitリポジトリを管理するサーバサイド用フックのみです。huskyのインストールと使い方は次の引用の通りです。

Install

npm install husky --save-dev
// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "npm test",
      "pre-push": "npm test",
      "...": "..."
    }
  }
}

typicode/husky: 🐶 Git hooks made easy#multiple-commands

 複数コマンドを実行するときはtypicode/husky: 🐶 Git hooks made easy#multiple-commandsにある様に、コマンド間を&&で区切るcmd && cmdかhusky個別の設定ファイルを用意します。すべてをpackage.jsonで完結させつつも、コマンドを&&で無理やり繋げない小技にnpm-run-all – npmを用いるやり方があります。次の様にあらかじめ小さいスクリプトを定義してnpm-run-allを介してまとめてhuskyで呼び出します。

{
    "scripts": {
        "php-cs-fix": "./vendor/bin/php-cs-fixer fix -vvv",
        "eslint": "./node_modules/.bin/eslint resources/**/*.{ts,js,vue} --fix",
        "php-unit-test": "php ./vendor/phpunit/phpunit/phpunit --configuration phpunit.xml tests/Unit --teamcity",
        "pre-commit": "npm-run-all eslint php-cs-fix",
        "pre-push": "npm-run-all php-unit-test"
    },
    "husky": {
        "hooks": {
            "pre-commit": "npm run pre-commit",
            "pre-push": "npm run pre-push"
        }
    }
}

 huskyだけでもコミット前のスクリプト起動漏れを防げて楽ですが、コミットのたびにフルでlintが走る上にlintで修正された分はコミット内容に含まれません。lint-stagedでこの問題を解決できます。
 lint-staged – npm
 lint-stagedはコミット用にステージングされたファイルの内、globで特定した対象のファイルについてのみ特定のコマンドを実行するパッケージです。対象ファイルはglob形式で指定します。大体*.{拡張子A,拡張子B}の様に指定するだけです。test絡みで通常のlintの対象にしたくない場合は!(*test).jsの様に!()を使います。!(*test).jsならばhogehoge.jsはlint, hogehoge.test.jsはnot lint。
 lint-staged実例として次のような設定をし、Hoge.jsとFoo.phpファイルをコミットしようとするとします。

{
    "lint-staged": {
        "*.{js,ts,vue}": [
            "eslint --fix",
            "git add"
        ],
        "*.php": [
            "php ./vendor/bin/php-cs-fixer fix -vvv --config .php_cs",
            "git add"
        ],
        "*.{json,css,scss}": [
            "prettier --write",
            "git add"
        ]
    }
}

 その様な場合、まず”*.{js,ts,vue}”の表現にマッチしたHoge.jsを引数として”eslint –fix Hoge.js”, “git add Hoge.js”が実行されます。Hoge.jsがESLintの自動修正によって修正され、Hoge.js全体がコミット対象になるわけです。これでコミット前に自動でlintが走り、lintの修正結果もコミット内に反映されます。Foo.phpでもphp-cs-fixerで同様にlintによる修正がかけられ、両方が終わった後に改めてコミットされます。
 husky, lint-staged, 各Linterを導入してpackage.jsonに次の様な記述を加えるとコミットのたびにLintが便利な形で走ってくれます。

{
    "husky": {
        "hooks": {
            "pre-commit": "lint-staged"
        }
    },
    "lint-staged": {
        "*.{js,ts,vue}": [
            "eslint --fix",
            "git add"
        ],
        "*.php": [
            "php ./vendor/bin/php-cs-fixer fix -vvv --config .php_cs",
            "git add"
        ],
        "*.{json,css,scss}": [
            "prettier --write",
            "git add"
        ]
    }
}
  • この記事いいね! (0)
村上 著者:村上

【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」のご紹介でした。
ご参考になれば幸いです。

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