Electronで作るおれおれマークダウンエディタ2

Electronでマークダウンエディタを自作した話
cistLT by Dec 15, 2021

Transcript

1. Electronでおれおれマークダ ウンエディタを作った話2 0yu@yud0uhu
2. 自己紹介 0yu(ゼロユー) @denham95173179 公立千歳科学技術大学B3 LOCAL学生部・cistLTサークル所属 最近はRustにお熱です
3. ことのはじまり 最近サークル内のLT大会で Electronでおれおれマークダウンエディタをつくった話 のLTをした →CompotisionAPI寄りにお話した →今回はElectron寄りお話をします
4. テキストエディタ、何つかってますか？
5. Electronを知る
6. Electronって？ - GitHub社製のクロスプラットフォームアプリ開発フレームワー ク - Webの技術(JS,HTML,CSS)でデスクトップアプリを開発できる
7. Electronの特徴 - Chromiumエンジンを利用して、WEBページをネイティブアプリ として動かす - OSネイティブのAPIを扱うメインプロセス と、ブラウザで表示さ れる画面(htmlファイル)の数だけレンダリングを行うレンダラー プロセスが存在する - プロセス間通信はIPC通信（基本的には非同期）で行う
8. - メインプロセスは CommonJSで記述され、 レンダラプロセスは ECMAScriptで記述され る - レンダラプロセス間は通 信できない →プロセス間通信(IPC)が 必要 Electronの特徴
9. やりたいこと - レンダラプロセスからのファイル操作を実装する - Electronでファイル操作を扱うdialogモジュールをレンダラ プロセス側からIPC通信で呼び出す - ファイルの読み書きをレンダラプロセスのNode.jsで行なう
10. レンダラプロセスからファイル操作を実装する Electronでは、ファイル操作を扱 うようなGUI関連モジュールはメイ ンプロセスのみに提供されている レンダラプロセス（ウェブページ） 側からこれらを操作するには、IPC 通信でメインプロセスオブジェクト のメソッドを呼び出す必要がありま す.
11. レンダラプロセスからファイル操作を実装する 下記のようにNode.jsのfsモジュー ルを用いてファイル操作を行ないま す. const fs = require("fs");
12. レンダラプロセスからファイル操作を実装する 例えばファイルの書き込みを行なう ためには、 fs.writeFileSync(result, this.source); で、第一引数に dialog.showSaveDialogSync(o ptions); で受け取ったローカルに保存したい ファイル名の情報を渡し、第二引数 に書き込みたい情報を渡します.
13. レンダラプロセスからファイル操作を実装する fs.writeFileSync(file, data[, options]) # History • file <string> | <Buffer> | <URL> | <integer> filename or file descriptor • data <string> | <Buffer> | <TypedArray> | <DataView> | <Object> • options <Object> | <string> ◦ encoding <string> | <null> Default: 'utf8' ◦ mode <integer> Default: 0o666 ◦ flag <string> 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() .
14. 余談: プロセス間通信について ・remote moduleはセキュリティの問題からElectron 10.0.0からデ フォルトで無効化され、14.0.0から完全に削除された ・メインプロセス側で nodeIntegration: true と設定することにより、CommonJSのrequire文のみでプロセス間 通信が可能となる（セキュリティ上は非推奨）
15. Electronのセキュリティ 意識すべきこと ・現行バージョンを使う ・信頼できるサードパーティライブラリを採用する ・セキュアなコーディングを心掛ける etc
16. Electronのセキュリティ 意識すべきこと ・現行バージョンを使う ・信頼できるサードパーティライブラリを採用する ・セキュアなコーディングを心掛ける etc JavaScriptがファイルシステム、ユーザシェルにアクセスできる →質の高いネイティブアプリを作成できる反面、コードの権限に応じて固 有のセキュリティリスクが増加するということ
17. Electronのセキュリティ
18. More ・コンテキストの分離 →メインプロセスで行なうべきこととレンダラプロセスで行なうべき コンテキストを分離し、セキュリティを向上させる ・remoteモジュールに依存しないセキュアなIPC通信を実装する （アドカレのネタにするかも） →しました
19. 作ったもの (GitHub)
20. 使用したライブラリ - vue3-markdown-it - highlight.js - TailWindCSS
21. ご清聴ありがとうございました🤲