Slide 1

Slide 1 text

Electronでおれおれマークダ ウンエディタを作った話2 0yu@yud0uhu

Slide 2

Slide 2 text

自己紹介 0yu(ゼロユー) @denham95173179 公立千歳科学技術大学B3 LOCAL学生部・cistLTサークル所属 最近はRustにお熱です

Slide 3

Slide 3 text

ことのはじまり 最近サークル内のLT大会で Electronでおれおれマークダウンエディタをつくった話 のLTをした →CompotisionAPI寄りにお話した →今回はElectron寄りお話をします

Slide 4

Slide 4 text

テキストエディタ、何つかってますか?

Slide 5

Slide 5 text

Electronを知る

Slide 6

Slide 6 text

Electronって? - GitHub社製のクロスプラットフォームアプリ開発フレームワー ク - Webの技術(JS,HTML,CSS)でデスクトップアプリを開発できる

Slide 7

Slide 7 text

Electronの特徴 - Chromiumエンジンを利用して、WEBページをネイティブアプリ として動かす - OSネイティブのAPIを扱うメインプロセス と、ブラウザで表示さ れる画面(htmlファイル)の数だけレンダリングを行うレンダラー プロセスが存在する - プロセス間通信はIPC通信(基本的には非同期)で行う

Slide 8

Slide 8 text

- メインプロセスは CommonJSで記述され、 レンダラプロセスは ECMAScriptで記述され る - レンダラプロセス間は通 信できない →プロセス間通信(IPC)が 必要 Electronの特徴

Slide 9

Slide 9 text

やりたいこと - レンダラプロセスからのファイル操作を実装する - Electronでファイル操作を扱うdialogモジュールをレンダラ プロセス側からIPC通信で呼び出す - ファイルの読み書きをレンダラプロセスのNode.jsで行なう

Slide 10

Slide 10 text

レンダラプロセスからファイル操作を実装する Electronでは、ファイル操作を扱 うようなGUI関連モジュールはメイ ンプロセスのみに提供されている レンダラプロセス(ウェブページ) 側からこれらを操作するには、IPC 通信でメインプロセスオブジェクト のメソッドを呼び出す必要がありま す.

Slide 11

Slide 11 text

レンダラプロセスからファイル操作を実装する 下記のようにNode.jsのfsモジュー ルを用いてファイル操作を行ないま す. const fs = require("fs");

Slide 12

Slide 12 text

レンダラプロセスからファイル操作を実装する 例えばファイルの書き込みを行なう ためには、 fs.writeFileSync(result, this.source); で、第一引数に dialog.showSaveDialogSync(o ptions); で受け取ったローカルに保存したい ファイル名の情報を渡し、第二引数 に書き込みたい情報を渡します.

Slide 13

Slide 13 text

レンダラプロセスからファイル操作を実装する fs.writeFileSync(file, data[, options]) # History ● file | | | filename or file descriptor ● data | | | | ● options | ○ encoding | Default: 'utf8' ○ mode Default: 0o666 ○ flag See support of file system flags. Default: 'w'. Returns undefined . If data is a plain object, it must have an own (not inherited) toString function property. The mode option only affects the newly created file. See fs.open() for more details. For detailed information, see the documentation of the asynchronous version of this API: fs.writeFile() .

Slide 14

Slide 14 text

余談: プロセス間通信について ・remote moduleはセキュリティの問題からElectron 10.0.0からデ フォルトで無効化され、14.0.0から完全に削除された ・メインプロセス側で nodeIntegration: true と設定することにより、CommonJSのrequire文のみでプロセス間 通信が可能となる(セキュリティ上は非推奨)

Slide 15

Slide 15 text

Electronのセキュリティ 意識すべきこと ・現行バージョンを使う ・信頼できるサードパーティライブラリを採用する ・セキュアなコーディングを心掛ける etc

Slide 16

Slide 16 text

Electronのセキュリティ 意識すべきこと ・現行バージョンを使う ・信頼できるサードパーティライブラリを採用する ・セキュアなコーディングを心掛ける etc JavaScriptがファイルシステム、ユーザシェルにアクセスできる →質の高いネイティブアプリを作成できる反面、コードの権限に応じて固 有のセキュリティリスクが増加するということ

Slide 17

Slide 17 text

Electronのセキュリティ

Slide 18

Slide 18 text

More ・コンテキストの分離 →メインプロセスで行なうべきこととレンダラプロセスで行なうべき コンテキストを分離し、セキュリティを向上させる ・remoteモジュールに依存しないセキュアなIPC通信を実装する (アドカレのネタにするかも) →しました

Slide 19

Slide 19 text

作ったもの (GitHub)

Slide 20

Slide 20 text

使用したライブラリ - vue3-markdown-it - highlight.js - TailWindCSS

Slide 21

Slide 21 text

ご清聴ありがとうございました🤲