まるっと、ソースをアップしておく。

ここにアップしたソースから、レンダラープロセスの頭の方に追加するのと、開くボタンをクリックした時の処理をあげとく。

import {remote} from "electron";
import * as fs from "fs";


const dialog = remote.dialog;

// ファイルオープンダイアログを表示する
dialog.showOpenDialog(remote.getCurrentWindow(), {
    filters:[
        { name: "Text File", extensions:["txt"]},
        { name: "All Files", extensions: ["*"]}
    ],
    properties: ["openFile"]
}, filePaths=>{
    if(filePaths.length != 0) {
        // ファイル読み込み
        fs.readFile(filePaths[0], { encoding:"utf-8"}, (err, data)=>{
            if(err) {
                alert(err);
            } else {
                this.setState({text:data});
            }
        });
    }
});

まず、import部分の説明。

dialogはメインプロセスでしか使えないのでremoteをインポートしてる。Electronでは、Node.jsのAPIが使用できるので、ファイルを読み込むためにfsをインポートしている。

クリックした時の処理。

dialog.showOpenDialogでファイルオープンダイアログを表示する。

第1引数は、親ウインドウを指定する。remote.getCurrentWindow()でレンダラープロセスで表示しているページのウインドウが取得できる。

第2引数は、ダイアログのオプションを指定する。
よく使いそうなのをピックアップして書いとく。詳細はドキュメントを見ればいいじゃんｗ

• defaultPath:デフォルトのディレクトリ
• filters:表示するや選択できるファイルの種類を配列で指定する。

filters:[
    { name: "Text File", extensions:["txt"]},
    { name: "All Files", extensions: ["*"]}
],

• proprties:配列で使用する機能を指定する。
  • openFile:ファイル選択を可能にする。
  • openDirectory:ディレクトリ選択を可能にする。
    macOSの場合、openFile、openDirectoryの両方を指定すると、ファイルまたはディレクトリを選択できる。Windows、Linuxの場合はディレクトリのみ選択できる。
  • multiSelections:複数選択を可能にする。

第3引数は、コールバック関数。
選択したファイル名(フルパス)の配列が渡される関数を指定する。
上に載せたソースでは、Node.jsのfs.readFileを使って読み込んで最終的にTextAreaに設定している。(TextAreaに設定するあたりはRectを使っている)

たとえば、

npm install typescript -g

で、TypeScriptをインストールすると、コマンドラインでtscというコマンドが使えるようになる。

これと同じようなことを自分のプログラムでも行うには、package.jsonに"bin"を次のように追加する。

"bin": {
  "hoge":"index.js"
},

hogeはコマンド名で、index.jsは実行するJavaScriptになる。

index.jsの先頭行に

#!/usr/bin/env node

を書いておく必要がある。

Node.jsのモジュールmarkdown-itをちょっと触ってみたんだが、個人的にはだけどオプション設定だけでケッコーいい感じのhtmlを出力できるな。(コマンドラインツールみたいなのは用意されていないと思うからプログラミングしないといけないはず)

pandocよりも好みの出力される。pandocカスタマイズって簡単にできるんかな？
オープンソースだからソースいじくれって話なんだろがｗ