Vue3/Electronで自作したマークダウンエディタをVue3/Tauriにリプレイスした話

Vue Fes Japan 2023 LT登壇資料です
https://vuefes.jp/2023/sessions/yud0uhu

Transcript

1. 1
   Vue3/Electronで自作したマーク
   ダウンエディタをVue3/Tauriに
   リプレイスした話
   Vue Fes Japan 2023
   

   View Slide

2. 自己紹介
   ● 名前：0yu（おゆ）
   ● 所属：合同会社DMM.com動画配信開発部 23新卒
   ● 出身：北海道
   2
   っっっz yud0uhu
   

   View Slide

3. 3
   作ったもの
   

   View Slide

4. View Slide

5. サポートする機能
   ● .txt .md形式での保存
   ● リアルタイムプレビュー
   ● コードハイライト
   5
   

   View Slide

6. 6
   作ったもの
   

   View Slide

7. View Slide

8. 追加で実装した機能
   ● 絵文字、マークダウンサジェスト
   ● Mermaid.js記法の対応
   8
   

   View Slide

9. 概説
   Electron
   9
   

   View Slide

10. View Slide

11. 概説：Electron
    ● Webフロントエンドの技術でデスクトップアプリが作れるGUIフ
    レームワーク
    ● ChromiumとNode.jsがバイナリに組み込まれている
    ○ 単一のJavaScriptコードベースを維持しつつ、クロスプラッ
    トフォームアプリが開発可能
    ● 開発元はGitHub社
    ○ VSCodeやSlackはElectronで作られている
    11
    

    View Slide

12. 12
    概説
    Tauri
    

    View Slide

13. 概説：Tauri
    13
    

    View Slide

14. 概説：Tauri
    ● RustとWebフロントエンドの技術でデスクトップアプリが作れる
    GUIフレームワーク
    ● 一言で言うと「小さいElectron」
    ● Chromiumなどのブラウザを組み込んでおらず、OSのWebView機
    能を呼び出すラッパー(WRY)を用いている
    ○ 軽量・高速に動いてくれることが特徴
    ○ ブラウザの脆弱性に関する対策を行う必要がない
    14
    

    View Slide

15. 15
    WRY is 何？
    

    View Slide

16. WRY(Webview Rendering librarY)
    ● 「OSに備わっているWebViewを使ってレンダリングする」機能
    をラップしたクレート
    ○ Windows 👉 WebView2
    ○ Linux 👉 WebKitGTK
    ○ macOS 👉 WKWebView
    16
    

    View Slide

17. 17
    Core Ecosystem
    

    View Slide

18. Core Ecosystem
    18
    

    View Slide

19. 19
    ● tauri-build
    👉実行可能なインストーラとバイナリを生成する
    ● tauri-codegen
    👉アイコンやシステムトレイなどのアセットを埋め込み、ハッ
    シュ化・圧縮する
    👉コンパイル時にtauri.conf.jsonを解析し、Config構造体を生成
    する
    Core Ecosystem(1/3)
    

    View Slide

20. 20
    ● tauri-macros
    👉tauri-codegenクレートを用いて、コンテキスト、ハンド
    ラー、コマンドのマクロを作成する
    ● tauri-runtime
    👉TauriとWebViewライブラリ(WRY,TAO)の連携を行う層
    ● tauri-utils
    👉tauri-codegenクレートを用いて、コンテキスト、ハンド
    ラー、コマンドのマクロを作成する
    Core Ecosystem(2/3)
    

    View Slide

21. 21
    TauriのWebView部分を支える外部モジュール
    ● WRY
    👉WebViewを扱うためのクレート
    ● TAO
    👉Windowを操作するためのクレート
    Core Ecosystem(3/3)
    

    View Slide

22. 22
    Tauriのプロセスモデル
    

    View Slide

23. 23
    Tauriのプロセスモデル
    

    View Slide

24. 24
    Tauriの
    プロセス間通信の仕組
    み
    

    View Slide

25. 25
    プロセス間通信：具体例
    

    View Slide

26. プロセス間通信：具体例
    26
    // …
    #[tauri::command]
    fn generate_mermaid_img(code: String) -> String {
    let encoded_code = encode_to_base64(&code);
    let response = ApiResponse {
    img: format!("https://mermaid.ink/img/{}", encoded_code),
    };
    format!("{}", response.img)
    }
    

    View Slide

27. プロセス間通信：具体例
    27
    // …
    fn main() {
    tauri::Builder::default()
    .invoke_handler(tauri::generate_handler![generate_mermaid_img])
    .run(tauri::generate_context!())
    .expect("error while running tauri application");
    }
    

    View Slide

28. 28
    プロセス間通信：具体例
    

    View Slide

29. プロセス間通信：具体例
    29
    import { invoke } from "@tauri-apps/api";
    // …
    const generateMermaidImg = async (code: string) => {
    try {
    const response = await invoke("generate_mermaid_img", { code: code });
    return response;
    } catch (error) {
    // …
    

    View Slide

30. 30
    Tauriの
    セキュリティ
    

    View Slide

31. 31
    Tauriのセキュリティ
    ● tauri/allowlist
    👉アプリケーション内でのJSの実行・API呼び出しを制御するた
    めの機構
    👉使用する機能を個別に有効化、無効化できる
    

    View Slide

32. tauri/allowlist:具体例
    "tauri": {
    "allowlist": {
    "all": false,
    ...
    "dialog": {
    "open": true,
    "save": true
    },
    "fs": {
    "all": true,
    "writeFile": true
    },
    ...
    },
    32
    

    View Slide

33. tauri/allowlist:具体例
    <br/>import Header from "./components/Header.vue";<br/>import MarkdownEditor from "./components/MarkdownEditor.vue";<br/>import { ref } from "vue";<br/>import { open, save } from "@tauri-apps/api/dialog";<br/>import { readTextFile, writeFile } from "@tauri-apps/api/fs";<br/>import { appDir } from "@tauri-apps/api/path";<br/>33<br/>

    View Slide

34. tauri/allowlist:具体例
    const openFile = async () => {
    try {
    const selected = await open({
    directory: false,
    multiple: false,
    defaultPath: await appDir(),
    filters: [{ name: "Markdown and Text Files", extensions: ["md", "txt"] }],
    });
    34
    

    View Slide

35. tauri/allowlist:具体例
    if (selected !== null) {
    if (!Array.isArray(selected)) {
    const filePath = selected;
    const contents = await readTextFile(filePath);
    onMarkdownUpdate(contents);
    }
    }
    } catch (error) {
    // …
    35
    

    View Slide

36. tauri/allowlist:具体例
    const saveFile = async () => {
    try {
    const result = await save({
    defaultPath: "untitled.txt",
    filters: [{ name: "Markdown and Text Files", extensions: ["md", "txt"] }],
    });
    if (result) {
    const fileContents = markdownText.value;
    await writeFile({
    path: result,
    contents: fileContents ? fileContents : "",
    });
    36
    

    View Slide

37. 37
    パフォーマンスを計測
    してみる
    

    View Slide

38. 38
    パフォーマンスを計測してみる
    比較 Tauri Electron
    インストーラサイズ 3.1MB 52.1MB
    メモリ利用量 180MB 462MB
    起動速度 0.39秒 0.8秒
    レンダリング WRY Chromium
    

    View Slide

39. 39
    実際のアプリケーションサイズ・実行時間の比較
    パフォーマンスを計測してみる
    比較 Tauri Electron
    起動速度 0.49秒 0.58秒
    アプリケーションサ
    イズ
    31.1MB 588MB
    

    View Slide

40. 最終的な実装
    40
    https://github.com/yud0uhu/markdown-editor-tauri-web
    

    View Slide

41. 41
    ご静聴ありがとうござ
    いました ！
    

    View Slide