#daiizメモ

Scrapboxに夢中

SVG ScreenshotのビューワアプリをElectronで作っている

SVG形式でウェブページのスクリーンショットを撮るChrome拡張機能「SVG Screenshot」のデスクトップクライアントをElectronで作っている. いまはGitHubのプライベートリポジトリで管理しながら作っていて,もう少し動作が安定してきたら一般公開にする予定.

https://i.gyazo.com/309b4ceb97f84168a133bfc38e06cc22.gif


SVGファイルをダブルクリックするとアプリが起動して,ウェブページを撮ったものを閲覧できる.SVGなのでリンク部分をクリックすることができて,クリックすると普段使っているブラウザにウェブページが表示される.どこがリンクか忘れてしまった場合は左上のボタンを押すとハイライトしてくれる.まずはMacOS向けのデザインにしようと思い,PhotonKitというものを使った.簡単に画面デザインができてありがたい.

現時点での基本的な機能は拡張機能に搭載されている簡易ビューワと同じだが,今後,必要なものがあれば積極的に機能追加していきたい.

Chrome拡張機能「SVG Screenshot」の方はChromeウェブストアで配布していますので,どうぞご利用ください.

Electron 1.0 が来た

Electron 1.0 が登場したので,さっそく手元の環境もバージョンアップさせた.

これから新たにElectronを始めるときは

$ npm install -g electron-prebuilt
$ npm install -g electron-packager

を実行するだけで必要なものが手に入る.electronのバージョンを調べるには

$ electron -v

を実行すればよい.v1.0.1と表示されたので無事にアップデートできた. 試しに,勉強中で作りかけのものを実行してみる.

$ electron ./app

でアプリを起動.

https://i.gyazo.com/04d0986e391dd4e129299ee40d8677eb.png


エラーが出たけど,言われるがままに https://github.com/electron/electron/tree/v1.0.1/docs にアクセスして調べると簡単に解決する.メインプロセスでconst app = require('app');と書いていたところがconst app = require('electron').app;に変更になった模様.この前ipcを使ったときもこの手の変更作業を対処した記憶がある. browser-windowの方もconst BrowserWindow = require('electron').BrowserWindow;に変更になっていた.

APIドキュメントを読み進めつつ,既存の自作Chromeアプリのうち,特にChromeに依存する必要がないものを順次Electronアプリに置換していきたいと思っている.

f:id:daiiz:20160512011544p:plain:w130

It's easier than you think
http://electron.atom.io/

意外と,だんだんと,本当にこのように思えてきた.

Electron入門メモ 2

前回に引き続き,Electronについての勉強メモです.

f:id:daiiz:20160304003321p:plain:w30 ipcMain, ipcRenderer

MainプロセスとRendererプロセスが通信する部分の書き方を学んだ.Chromeアプリで言うとchrome.runtime.sendMessageで送ったメッセージをchrome.runtime.onMessage.addListenerで受け取るような流れの部分だと思う.

ちょっと調べるとipcというもので実現できるということがわかり,サンプルに傚ってプログラムを書いてみる.実行してみると,実行はできるが「これからはipcではなくてipcMainipcRendererを使ってね」という旨のログが出る.実行時に教えてくれるのは親切でよい.requireの仕方がrequire("ipc")からrequire("electron").ipcMainと変更になったようなのでelectronに特化したipcみたいな感じなのだろうか.

いまのところchromeアプリよりもシンプルに書けている気がしている.BrowserWindowとして開いたアプリ画面は通常の更新ショートカットキー「Cmd + R」で更新できることを知って捗った.

f:id:daiiz:20160304003321p:plain:w30 nedb

アプリ内でデータを保存しておく必要がある場合,Chromeアプリではchrome.storage.*やIndexedDBを使っていた.Electronでは後者に加えて,localStorageを使うという選択肢もある.今回はせっかくなので他の案もさがしてみた.nedbというものを見つけた.

これはJSONストアで,データストアを操作するためのAPI(保存,取得,更新,消去など)がMongoDBと同じになっている.新たにAPIの呼び方を覚えなくて良いことや,導入が簡単であること(npm install するだけ!),将来的にMongoDBに乗り換えやすいことなどを考えると良い選択肢だと思った.

ローカル環境でMongoDBと同じ感覚で触れるストレージがあると安心できる.保存したデータは.dbファイルに書き出される.このファイルの出力場所は

var app = require('app');
var userDataDir = app.getPath('userData');

としておいた.app.getPath('userData')を使うと,OS毎に適切な場所を返してくれるらしい.僕のMacOSでは,userDataDirは

/Users/daiki/Library/Application Support/HelloElectron

だった.

Electron入門メモ 1

ElectronでHTMLファイルを埋め込んだウィンドウを開くところまでやってみた.よくわかっていないけれどとりあえず動いている,といような段階なので,気付いたことをメモしておく程度でまとめてみる.主にRendererプロセスの方の話になる.

https://i.gyazo.com/669055ea3769169486600518c9376050.png

タイトル

  • ウィンドウのタイトルに表示されている文字列はpackage.jsonのnameで指定したものではなくて,表示中のHTMLのtitleタグで指定したもの.
    • サブウィンドウとかでも好きなタイトルを指定できそう

画像表示

  • 画像の読み込みは簡単
  • Chrome Appでは外部リソースを表示させることの制約が厳しくて大変だった部分もあったけれど,こちらではシンプルだった.
  • パッケージ内の画像を表示するときは,メインプロセスを管理するJSからの相対パス表現で書く.場所がわからなくなったらwindow.location.hrefをconsole.logで確認すると良い.
  • 外部サイトの画像を表示するときは,<img>のsrcにURIを書く.
  • JSで画像を操作しようとするとセキュリティの制限がかかってくるかもしれない.今後試す.

リンク先をブラウザで開く

これが結構ハマった.ごく一般的な<a target="_blank">タグをクリックしてもブラウザは開いてくれない.ブラウザが開く代わりにElectronアプリ用のウィンドウパネルみたいなものが新たに開いて表示される.これだとブックマークできなかったりと不便なのでブラウザで開きたい.以下のようなコードを書いて,aタグの挙動定義をopenExternalメソッドで上書きしてしまえば良い.

$(document).on('click', 'a', e => {
    var $a = $(e.target);
    require('shell').openExternal($a.attr('href'));   
    return false;
});

jQueryを使う

上のコードのように,jQueryも使用できる.ただ,scriptタグでの読み込み方法が普段と少し違って.

<script>
    window.jQuery = window.$ = require('jquery.js');
</script>

となる.
requireの引数は,メインプロセスを管理するJSファイルの位置からの相対パス表現で指定する.

Chrome Dev Tools

  • 使用できる
  • 画面を右クリックしてもメニューが表示されないので,Command + Alt + ICtrl + Shift + Iで開く.
  • console.logで値を確認したりブレークポイントを仕掛けたりできるので便利
  • コンソールでchromeやchromiumと打ってみたが,さすがにnot definedだった.(ということは,chrome.*系APIは全部使えないのか...)


ひとまず,こんな感じです!

ゴールデンウィークを使ってElectronに入門してみる

JavaScriptを書くだけでMacOSやWindowsをターゲットとしたネイティブアプリを作ることができる「Electron」というものに,遅ればせながら入門している.

GW中におおまかな雰囲気を掴みたい.同時に「TypeScript」にも入門してる.こちらも前々から気になっていたもの.これを書いてコンパイルするとJavaScriptになる.

https://www.typescriptlang.org/

当面の目標はChromeアプリをElectronアプリに置き換える方法を確立すること.できるかわからないけれど,どちらもChromiumベースで動いているし,開発言語もJavaScriptだし,きっとできるでしょうという気持ち.

「ここをこう書き換えるリスト」ができあがるのも良いけれど,コマンド一発で双方向変換できる,ということが実現できたらなお良い.