atomエディタのソースコードを再利用してアプリのカスタマイズ性を高めよう

本記事はElectron Advent Calendar 2016 5日目の記事です。

InkdropというElectron製ノートアプリを作っています。
このアプリにはプラグイン機構による拡張性を備えているのですが、これはatomからコードを拝借して実装しました。
atomはMITライセンスによるオープンソースのテキストエディタです。
その際に得た知見を共有したいと思います。
これをきっかけにあなたのElectronアプリ改善のお役に立てれば幸いです。
atomのパッケージを作ったことのある方ならすんなり理解できると思います。

続きを読む atomエディタのソースコードを再利用してアプリのカスタマイズ性を高めよう

Electronアプリでパスワードを安全に保存する方法

Electronはデスクトップアプリであり、Cookieは使えない。
しかし認証情報をファイルに保存するわけにはいかない。
適切な保管場所は、macOSならKeychain、LinuxならKeyring、WindowsならCredential Vaultだろう。
これらプラットフォームに合わせた方法で保存できるモジュールを紹介する。

node-keytar

node-keytarは、atom製のキーチェーン管理モジュール。
プラットフォームの違いを意識せずに機密情報を読み書きできる。

続きを読む Electronアプリでパスワードを安全に保存する方法

ElectronでデスクトップからD&Dでファイルを受け取る方法

FinderやエクスプローラなどからElectronアプリケーションにファイルをドラッグ&ドロップする操作を実現する方法について説明する。
すごく簡単。

まず以下のようにデフォルトの挙動をキャンセルする。

document.ondragover = document.ondrop = function (e) {
  e.preventDefault()
}

続きを読む ElectronでデスクトップからD&Dでファイルを受け取る方法

ElectronでエラーのStackを正しくsource mapする方法

Electronのrenderer側で、エラーのスタックトレースの位置が変という問題の解決方法。

webpackのコンパイル後の位置が表示される

エラーオブジェクトのstackプロパティをログなどに表示させると、トレース位置が全部コンパイル後のもので不便。
以下のような感じ。

non-source-mapped-stack

これでは使い物にならない。
続きを読む ElectronでエラーのStackを正しくsource mapする方法