【Electron】HTMLとJavascriptでデスクトップアプリ開発ことはじめ（クリップボード監視編）

2016/1/22

昨日に引き続いてElectronでデスクトップアプリ開発。今日はクリップボードの内容を監視してURLだったらそのサイトを表示するアプリを作ります。

【Electron】HTMLとJavascriptでデスクトップアプリ開発ことはじめ（Hello, World!編

これからElectronを利用したデスクトップアプリを始めてみようと思います。私はもともと C や C++ を ...

https://blog.itdog.jp/entry/2016/01/21/215323/

Contents

1. 基本構成は前回と同じ
- 1.1. index.html
- 1.2. app.js
2. いざ実行
3. まとめ
- 3.1. おまけ（というかお願い）

基本構成は前回と同じ

ファイル構成は前回と同じですが、html 内の Javascript は別ファイルに分けることにします。

package.json
main.js
index.html
app.js （今回分けたファイル）

index.html

URLを表示するために container という id の div タグを用意します。また、サイトを表示するための webview タグを用意します。また、分けた Javascript を読み込む script タグを記載します。

<html>
  <head>
    <title>Clipboard</title>
  </head>
  <body>
    <div id="container"></div>
    <webview id="webview"></webview>
    <script src="./app.js"></script>
  </body>
</html>

app.js

clipboard の読み込みと、clipboard の内容を監視するためのタイマーを500msでまわします。clipboard の中身が URL だった場合は、container に URL を、webview に clipboard の中身を渡して表示させます。

var clipboard = require('clipboard');

var container = document.getElementById('container');
var webview = document.getElementById('webview');
var current = "";

setInterval(function () {
  var url = clipboard.readText();
  if (url.match(/^https?:\/\//) && current != url) {
    container.innerText = current = url;
    webview.setAttribute("src", url);
  }
}, 500);