Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vue3/Electronで自作したマークダウンエディタをVue3/Tauriにリプレイスした話
Search
yud0uhu
October 27, 2023
Technology
2
2.5k
Vue3/Electronで自作したマークダウンエディタをVue3/Tauriにリプレイスした話
Vue Fes Japan 2023 LT登壇資料です
https://vuefes.jp/2023/sessions/yud0uhu
yud0uhu
October 27, 2023
Tweet
Share
More Decks by yud0uhu
See All by yud0uhu
動画配信サービスのフロントエンド実装に学ぶ設計原則
yud0uhu
1
270
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
9
5.1k
2023年の ゼロランタイムCSS in JS⚡️ を考える
yud0uhu
5
4.7k
入社半年を迎える新米エンジニアがカンファレンス・勉強会から得た学び
yud0uhu
0
950
Next.js×Prisma×GraphQL×Supabase +WASMでブログを自作した話
yud0uhu
0
1.1k
Rustでつくって学ぶProtocol Buffers
yud0uhu
1
130
ブログを自作した話
yud0uhu
1
21
Wasmで動くRust製マークダウンパーサーを自作した話
yud0uhu
1
31
Rustで自作しながら学ぶ仮想DOM
yud0uhu
1
27
Other Decks in Technology
See All in Technology
Terraform Cloudで始めるおひとりさまOrganizationsのすゝめ
handy
2
180
SREからゼロイチプロダクト開発へ ー越境する打席の立ち方と期待への応え方ー / Product Engineering Night #8
itkq
2
800
SmartHR プロダクトエンジニア求人ガイド_2025 / PdE job guide 2025
smarthr
0
120
地味にいろいろあった! 2025春のAmazon Bedrockアップデートおさらい
minorun365
PRO
1
120
Would you THINK such a demonstration interesting ?
shumpei3
1
220
Amazon CloudWatchで始める エンドユーザー体験のモニタリング
o11yfes2023
0
190
彩の国で始めよう。おっさんエンジニアから共有したい、当たり前のことを当たり前にする技術
otsuki
0
150
LLM as プロダクト開発のパワードスーツ
layerx
PRO
1
240
Classmethod AI Talks(CATs) #21 司会進行スライド(2025.04.17) / classmethod-ai-talks-aka-cats_moderator-slides_vol21_2025-04-17
shinyaa31
0
590
Porting PicoRuby to Another Microcontroller: ESP32
yuuu
4
410
新卒エンジニアがCICDをモダナイズしてみた話
akashi_sn
2
240
React ABC Questions
hirotomoyamada
0
170
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
245
12k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
A Modern Web Designer's Workflow
chriscoyier
693
190k
How GitHub (no longer) Works
holman
314
140k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
5
520
Navigating Team Friction
lara
184
15k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.3k
4 Signs Your Business is Dying
shpigford
183
22k
Docker and Python
trallard
44
3.3k
Adopting Sorbet at Scale
ufuk
76
9.3k
Building Adaptive Systems
keathley
41
2.5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.1k
Transcript
1 Vue3/Electronで自作したマーク ダウンエディタをVue3/Tauriに リプレイスした話 Vue Fes Japan 2023
自己紹介 • 名前:0yu(おゆ) • 所属:合同会社DMM.com動画配信開発部 23新卒 • 出身:北海道 2 っっっz
yud0uhu
3 作ったもの
4
サポートする機能 • .txt .md形式での保存 • リアルタイムプレビュー • コードハイライト 5
6 作ったもの
7
追加で実装した機能 • 絵文字、マークダウンサジェスト • Mermaid.js記法の対応 8
概説 Electron 9
10
概説:Electron • Webフロントエンドの技術でデスクトップアプリが作れるGUIフ レームワーク • ChromiumとNode.jsがバイナリに組み込まれている ◦ 単一のJavaScriptコードベースを維持しつつ、クロスプラッ トフォームアプリが開発可能 •
開発元はGitHub社 ◦ VSCodeやSlackはElectronで作られている 11
12 概説 Tauri
概説:Tauri 13
概説:Tauri • RustとWebフロントエンドの技術でデスクトップアプリが作れる GUIフレームワーク • 一言で言うと「小さいElectron」 • Chromiumなどのブラウザを組み込んでおらず、OSのWebView機 能を呼び出すラッパー(WRY)を用いている ◦
軽量・高速に動いてくれることが特徴 ◦ ブラウザの脆弱性に関する対策を行う必要がない 14
15 WRY is 何?
WRY(Webview Rendering librarY) • 「OSに備わっているWebViewを使ってレンダリングする」機能 をラップしたクレート ◦ Windows 👉 WebView2
◦ Linux 👉 WebKitGTK ◦ macOS 👉 WKWebView 16
17 Core Ecosystem
Core Ecosystem 18
19 • tauri-build 👉実行可能なインストーラとバイナリを生成する • tauri-codegen 👉アイコンやシステムトレイなどのアセットを埋め込み、ハッ シュ化・圧縮する 👉コンパイル時にtauri.conf.jsonを解析し、Config構造体を生成 する
Core Ecosystem(1/3)
20 • tauri-macros 👉tauri-codegenクレートを用いて、コンテキスト、ハンド ラー、コマンドのマクロを作成する • tauri-runtime 👉TauriとWebViewライブラリ(WRY,TAO)の連携を行う層 • tauri-utils
👉tauri-codegenクレートを用いて、コンテキスト、ハンド ラー、コマンドのマクロを作成する Core Ecosystem(2/3)
21 TauriのWebView部分を支える外部モジュール • WRY 👉WebViewを扱うためのクレート • TAO 👉Windowを操作するためのクレート Core Ecosystem(3/3)
22 Tauriのプロセスモデル
23 Tauriのプロセスモデル
24 Tauriの プロセス間通信の仕組 み
25 プロセス間通信:具体例
プロセス間通信:具体例 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) }
プロセス間通信:具体例 27 // … fn main() { tauri::Builder::default() .invoke_handler(tauri::generate_handler![generate_mermaid_img]) .run(tauri::generate_context!())
.expect("error while running tauri application"); }
28 プロセス間通信:具体例
プロセス間通信:具体例 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) { // …
30 Tauriの セキュリティ
31 Tauriのセキュリティ • tauri/allowlist 👉アプリケーション内でのJSの実行・API呼び出しを制御するた めの機構 👉使用する機能を個別に有効化、無効化できる
tauri/allowlist:具体例 "tauri": { "allowlist": { "all": false, ... "dialog": {
"open": true, "save": true }, "fs": { "all": true, "writeFile": true }, ... }, 32
tauri/allowlist:具体例 <script setup lang="ts"> import Header from "./components/Header.vue"; import MarkdownEditor
from "./components/MarkdownEditor.vue"; import { ref } from "vue"; import { open, save } from "@tauri-apps/api/dialog"; import { readTextFile, writeFile } from "@tauri-apps/api/fs"; import { appDir } from "@tauri-apps/api/path"; 33
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
tauri/allowlist:具体例 if (selected !== null) { if (!Array.isArray(selected)) { const
filePath = selected; const contents = await readTextFile(filePath); onMarkdownUpdate(contents); } } } catch (error) { // … 35
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
37 パフォーマンスを計測 してみる
38 パフォーマンスを計測してみる 比較 Tauri Electron インストーラサイズ 3.1MB 52.1MB メモリ利用量 180MB
462MB 起動速度 0.39秒 0.8秒 レンダリング WRY Chromium
39 実際のアプリケーションサイズ・実行時間の比較 パフォーマンスを計測してみる 比較 Tauri Electron 起動速度 0.49秒 0.58秒 アプリケーションサ
イズ 31.1MB 588MB
最終的な実装 40 https://github.com/yud0uhu/markdown-editor-tauri-web
41 ご静聴ありがとうござ いました !