ElectronのAPIをいろいろと使ってみる

はじめに

• 前回、electronの環境を構築したので、せっかくなので、何かデモアプリを作成してみる。

• electronにはいろいろなAPIがあるので、さっくと簡単にいろいろな機能がつくれる。 www.electronjs.org

サンプルコード

ドラック＆ドロップでファイルの情報を取得する

<div id="holder">
  ファイルをここにドラッグ
</div>

<script>
  document.addEventListener('drop', (e) => {
    e.preventDefault();
    e.stopPropagation();

    for (const f of e.dataTransfer.files) {
      console.log('File(s) you dragged here: ', f.path)
    }
  });
  document.addEventListener('dragover', (e) => {
    e.preventDefault();
    e.stopPropagation();
  });
</script>

クリップボードにテキストを保存する

const { clipboard } = require('electron')

clipboard.writeText('Example String', 'selection')
console.log(clipboard.readText('selection'))

外部通信

• こちらのコードはエラーが出て、原因がわかりませんでした。

const {app} = require('electron')
  app.on('ready', () => {
    const {net} = require('electron')
    const request = net.request('https://github.com')
    request.on('response', (response) => {
      console.log(`STATUS: ${response.statusCode}`)
      console.log(`HEADERS: ${JSON.stringify(response.headers)}`)
      response.on('data', (chunk) => {
        console.log(`BODY: ${chunk}`)
      })
      response.on('end', () => {
        console.log('No more data in response.')
      })
    })
    request.end()
  })

オンラインかオフラインかの判定

const alertOnlineStatus = () => { window.alert(navigator.onLine ? 'online' : 'offline') }

window.addEventListener('online', alertOnlineStatus)
window.addEventListener('offline', alertOnlineStatus)

alertOnlineStatus()

slackのような通知

const myNotification = new Notification('Title', {
  body: 'Notification from the Renderer process'
})

myNotification.onclick = () => {
  console.log('Notification clicked')
}

ローカルのファイルを取得する

const fs = require('fs');
const path = require('path');

const showFiles = (dirpath, callback) => {
  fs.readdir(dirpath, (err, files) => {
    if (err) {
      console.error(err);
      return;
    }

    for (const file of files) {
      const fp = path.join(dirpath, file);
      fs.stat(fp, (err, stats) => {
        if (err) {
          console.error(err);
          return;   
        }
        if (stats.isDirectory()) {
          showFiles(fp, callback);
        } else {
          callback(fp);
        }
      });
    }
  });
}
console.log(__dirname);

showFiles(__dirname, console.log);

セキュリティ関連にはいろいろと制限があるらしい

• 外部通信がうまくいかなかったのでセキュリティの問題かと思いましたが、調査しきれず。 www.electronjs.org

感想

• いろいろな機能があるのでローカルの業務専用アプリなどを開発することができそう。