投稿日:

dragイベントのドラッグフィードバック画像の消す

要素をドラッグすると、対象の画像がコピーされマウスに追随するように表示されます。

これはどこにドロップする場所を決めるのに、視覚的に便利なのですが、要素が重なって表示されている場合に、重なり部分も表示されてダサいことになります。

調べてみたところ、根本的な対処法はなく、空の要素を無理やりあてがい、無効とする方法がありました。

let dummy = documentByElement('span')
event.dataTransfer.setDragImage(dummy, 0, 0)

ここではspanにしていますが、表示されなければどんな要素でも構いません。

本当にここドキュメントは参考になります。

https://developer.mozilla.org/ja/docs/DragDrop/Drag_Operations

投稿日:

electron-vueでscss, sassを使う

ドキュメントがありました。
https://github.com/SimulatedGREG/electron-vue/blob/master/docs/en/using_pre-processors.md

簡単にまとめるとこうです。

yarn add --save-dev sass-loader node-sass

.electron-vue/webpack.renderer.config.jsを編集します。

すでに記述されているので、コメントアウトするか上書きします。
この例ではsrc/renderer/globals.scssになります。

loaders: {
  sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1&data=@import "./src/renderer/globals"',
  scss: 'vue-style-loader!css-loader!sass-loader?data=@import "./src/renderer/globals";'
}
投稿日:

Javascriptでスクロールを制御する

自分で実装しようと思ったのですが、すでにそういうスクリプトを書いている人がいました。

誰しもがやっているような処理なので、特に人気があるわけでもなさそうです。

https://github.com/jamesplease/prevent-scroll

投稿日:

HTMLでユーザーの操作を無効にする

pointer-eventsというプロパティがあります。

これをnoneにすることでユーザーの操作を無効にすることができます。

style="pointer-events: none"

有効にするときはautoにします。（デフォルト値です）

style="pointer-events: auto"

使い方としては、例えば、ローディング中はユーザーが操作できないようにして、無駄な処理を避けたりすることが考えられます。

トップのエレメントに設定しておけば、全画面の適用も簡単です。

投稿日:

JSZipでcanvasのファイルを追加する

canvasはtoDataURL()を使えば、リンクを使ってのダウンロードが可能になりますが、JSZipなどでzipファイルにしてダウンロードするにはblobのほうが便利です。

blobにするにはtoBlob()メソッドを使うだけです。

    let canvas = document.getElementById('canvas')
        let zip = JSZip()
    canvas.toBlob((blob) => {
      zip.file(
        'filename.png',
        blob
      )
    })
投稿日:

JSZipでzipを作成して速攻でダウンロードする

    let zip = new JSZip()
    zip.generateAsync({ type: 'blob' }).then(function (content) {
      let link = document.createElement('a')
      link.href = window.URL.createObjectURL(content)
      link.download = 'test.zip'
      link.click()
    })

zipファイルの追加処理が重たい場合、非同期処理にするなどの工夫が必要です。

投稿日:

Electronでネイティブモジュールをインストールする

ElectronでCamanJSを試そうとしたら次のようなエラーが発生しました。
（一部省略してます）

...was compiled against a different Node.js version using
NODE_MODULE_VERSION xx. This version of Node.js requires
NODE_MODULE_VERSION xx. Please try re-compiling or re-installing
the module (for instance, using `npm rebuild` or`npm install`).

どうやらビルドしているNodeのバージョンが違うらしく、エラーの指示通り再ビルドを行いますが、うまくいきません。

最初はElectronのエラーだとは思ってなかったのですが、調べてみると次のようなドキュメントがありました。

https://electronjs.org/docs/tutorial/using-native-node-modules

手順としては以下の通り。

yarn add electron-rebuild
yarn 
./node_modules/.bin/electron-rebuild

肝は./node_modules/.bin/electron-rebuildです。

パッケージを入れるたびに行う必要があります。